:root {
  --bg: #0b1220;
  --surface: #151f33;
  --surface-2: #1c2942;
  --field: #0e1729;
  --line: #2a3b57;
  --ink: #eef3f9;
  --muted: #8fa3bd;
  --brand: #22c55e;
  --brand-dark: #16a34a;
  --danger: #f87171;
  --warn: #fbbf24;
}

* {
  box-sizing: border-box;
}

body {
  background:
    radial-gradient(1100px 500px at 50% -220px, #1a2b45 0%, transparent 70%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: 'Cairo', sans-serif;
  text-align: center;
  margin: 0;
  padding: 34px 16px 60px 16px;
  -webkit-font-smoothing: antialiased;
}

h1 {
  color: var(--brand);
  font-size: 46px;
  font-weight: 700;
  letter-spacing: 6px;
  margin: 0 0 6px 0;
  text-shadow: 0 0 28px rgba(34, 197, 94, 0.28);
}

body > p {
  font-size: 15px;
  color: var(--muted);
  margin: 0 0 6px 0;
}

.hidden {
  display: none !important;
}

/* ---------- language toggle ---------- */

.lang-toggle {
  position: fixed;
  top: 12px;
  inset-inline-end: 12px;
  z-index: 50;
  background-color: rgba(21, 31, 51, 0.92);
  backdrop-filter: blur(8px);
  color: var(--brand);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: 'Cairo', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  min-width: 54px;
  transition: transform 0.1s;
}

.lang-toggle:active {
  transform: scale(0.95);
}

/* ---------- cards ---------- */

.card {
  background-color: var(--surface);
  border: 1px solid var(--line);
  max-width: 440px;
  margin: 26px auto;
  padding: 22px 20px;
  border-radius: 20px;
  text-align: start;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
}

.card h2 {
  margin: 0 0 18px 0;
  font-size: 21px;
  font-weight: 700;
}

.card h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
  color: var(--ink);
}

/* ---------- lists ---------- */

.card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
}

.card li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px 10px;
  margin-bottom: 8px;
  background-color: var(--field);
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}

.card li:active {
  transform: scale(0.99);
}

.card li span {
  color: var(--brand);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.card li.done {
  opacity: 0.45;
  border-color: var(--brand);
}

.card li.done > div {
  text-decoration: line-through;
}

/* ---------- inputs ---------- */

.card input,
.card select {
  width: 100%;
  box-sizing: border-box;
  background-color: var(--field);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
  font-family: 'Cairo', sans-serif;
  font-size: 15px;
  margin-bottom: 10px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.card input:focus,
.card select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}

.card input::placeholder {
  color: #5b6d87;
}

.row {
  display: flex;
  gap: 8px;
}

.row input,
.row select {
  flex: 1;
  min-width: 0;
}

.row input:first-child {
  flex: 2;
}

/* خانة البحث بإيميل في "إدارة الوصول" كانت بتطلع شبه مقفولة (شريط
   رفيع جدًا) لأن أي زرار جوه .row بياخد عرض 100% افتراضيًا (.card
   button)، فكان بياكل كل مساحة الصف ويسيب للخانة سنتيمتر واحد بس.
   هنا بنرجّع الزرار لحجم طبيعي حسب نص "ابحث" ونديله المساحة الفاضلة
   كلها للخانة عشان تتكتب فيها بشكل طبيعي */
#access-lookup-email {
  flex: 1;
  width: auto;
  min-width: 0;
}

#access-lookup-btn {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
}

.phone-code-select {
  flex: 0 0 auto;
  width: 92px;
  min-width: 92px;
}

/* ---------- circular day dial ---------- */

.dial-wrap {
  display: flex;
  justify-content: center;
  margin: 4px 0 22px 0;
}

.dial {
  position: relative;
  width: 268px;
  height: 268px;
  flex-shrink: 0;
}

/* faint guide ring behind the days */
.dial::before {
  content: '';
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  border: 1px dashed rgba(42, 59, 87, 0.85);
}

.dial-ring {
  position: absolute;
  inset: 0;
  transition: transform 0.6s cubic-bezier(0.34, 1.15, 0.4, 1);
}

.card .dial-day {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  padding: 0;
  border-radius: 50%;
  background: var(--field);
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: 'Cairo', sans-serif;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.3s;
}

.card .dial-day span {
  display: block;
  font-size: 11.5px;
  line-height: 1.15;
  padding: 0 4px;
  transition: transform 0.6s cubic-bezier(0.34, 1.15, 0.4, 1);
}

.card .dial-day.has-plan {
  border-color: rgba(34, 197, 94, 0.5);
  color: var(--brand);
}

.card .dial-day.active {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #06210f;
  border-color: var(--brand);
  box-shadow:
    0 0 0 6px rgba(34, 197, 94, 0.13),
    0 0 30px rgba(34, 197, 94, 0.6);
}

.card .dial-day.active span {
  font-weight: 700;
  font-size: 12px;
}

.dial-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 136px;
  height: 136px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 32%, var(--surface-2) 0%, var(--field) 100%);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  pointer-events: none;
}

.dc-day {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.dc-sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.4;
}

.dc-sub.rest {
  color: var(--warn);
  display: block;
  margin: 5px 0 0 0;
}

.dial-center-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  color: var(--brand);
}

.dial-center-icon .ui-icon {
  width: 32px;
  height: 32px;
}

.card .dial-day .ui-icon {
  width: 24px;
  height: 24px;
}

.card .dial-day.active .ui-icon {
  color: #06210f;
}

@media (max-width: 380px) {
  .dial {
    width: 244px;
    height: 244px;
  }
  .card .dial-day {
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
  }
  .dial-center {
    width: 124px;
    height: 124px;
  }
}

/* دائرة اختيار نوع الرياضة — أكبر ودوائرها أصغر عشان تستحمل 11 نوع */
.dial-large {
  width: 300px;
  height: 300px;
}

#sport-group-ring .dial-day {
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
}

#sport-group-ring .dial-day .ui-icon {
  width: 19px;
  height: 19px;
}

@media (max-width: 380px) {
  .dial-large {
    width: 268px;
    height: 268px;
  }
  #sport-group-ring .dial-day {
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
  }
}

/* ---------- misc ---------- */

.rest {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 16px;
  cursor: pointer;
}

.rest input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--brand);
  flex-shrink: 0;
}

.empty {
  color: var(--muted);
  font-size: 15px;
  text-align: center;
  margin: 22px 0;
}

.or {
  font-size: 12.5px;
  color: #63748d;
  text-align: center;
  margin: 16px 0 10px 0;
}

.progress {
  text-align: start;
  font-size: 13.5px;
  color: var(--muted);
  margin: -6px 0 14px 0;
}

.message {
  font-size: 13.5px;
  text-align: center;
  color: var(--warn);
  margin-top: 14px;
  min-height: 18px;
}

.message .ui-icon {
  width: 14px;
  height: 14px;
  margin-bottom: -2px;
}

/* ---------- buttons ---------- */

.card button {
  width: 100%;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #06210f;
  font-family: 'Cairo', sans-serif;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 13px;
  padding: 14px;
  margin-top: 10px;
  cursor: pointer;
  transition: transform 0.1s, filter 0.15s;
}

.card button:active {
  transform: scale(0.985);
  filter: brightness(0.95);
}

.card button.secondary {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
}

.card button.delete {
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--danger);
  font-size: 15px;
  padding: 4px 6px;
  margin: 0;
  flex-shrink: 0;
}

.card button.delete .ui-icon {
  width: 14px;
  height: 14px;
}

.card button.link,
.link {
  width: auto;
  background: none;
  border: none;
  color: var(--muted);
  font-family: 'Cairo', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  text-decoration: none;
  padding: 0;
  margin: 0 0 14px 0;
  display: block;
  cursor: pointer;
}

.card button.link:active {
  color: var(--brand);
}

#logout-btn {
  margin: 22px auto 0 auto;
  text-decoration: underline;
}

/* ---------- clients ---------- */

#clients-list li,
#providers-list li {
  display: block;
  padding: 14px;
}

.client-name {
  font-size: 16px;
  font-weight: 700;
}

.client-email {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 1px;
}

.client-status {
  font-size: 12.5px;
  color: var(--brand);
  margin-top: 5px;
}

.client-status.none {
  color: #5f7185;
}

/* ---------- exercise library ---------- */

#library-screen {
  max-width: 620px;
}

.filters {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.filters select {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.ex-card {
  background-color: var(--field);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  text-align: start;
  transition: border-color 0.15s, transform 0.1s;
}

.ex-card:active {
  transform: scale(0.98);
  border-color: var(--brand);
}

.ex-card.selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}

#team-screen {
  max-width: 620px;
}

/* ---------- body map: injury/pain picker ---------- */

.body-maps {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.body-map {
  text-align: center;
}

.body-figure {
  width: 130px;
  height: auto;
  touch-action: manipulation;
}

.body-shape {
  fill: var(--field);
  stroke: var(--line);
  stroke-width: 2;
}

.body-limb {
  stroke: var(--line);
  stroke-width: 10;
  stroke-linecap: round;
}

.hotspot {
  fill: rgba(34, 197, 94, 0.22);
  stroke: var(--brand);
  stroke-width: 1.5;
  cursor: pointer;
  transition: fill 0.15s, stroke-width 0.15s;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.hotspot:hover {
  fill: rgba(34, 197, 94, 0.4);
}

.hotspot.selected {
  fill: var(--brand);
  stroke: var(--brand-dark);
  stroke-width: 2.5;
}

.hotspot-icon {
  fill: var(--brand-dark);
  pointer-events: none;
}

.hotspot.selected + .hotspot-icon {
  fill: #ffffff;
}

.body-map-label {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

/* ---------- onboarding: stepper + icon tiles ---------- */

.field-block {
  flex: 1;
  min-width: 0;
}

.field-label-icon {
  display: flex;
  align-items: center;
  gap: 6px;
}

.field-label-icon .ui-icon {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.stepper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stepper input {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  min-width: 0;
}

.stepper-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--field);
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.15s, background 0.15s;
}

.stepper-btn:hover {
  border-color: var(--brand);
  background: rgba(34, 197, 94, 0.12);
}

.choice-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0 16px;
}

/* بادئة .card button عشان تكسب أولوية أعلى من قاعدة الزرار الأساسية
   (.card button) اللي كانت بتخلّي كل صفوف الاختيار تتلوّن أخضر CTA
   بالكامل حتى الغير مختارة — بدل ما يبقى شكل محايد إلا وقت الاختيار
   فعلاً (نفس أسلوب .welcome-pillar-btn و.welcome-faq-question) */
.card button.choice-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--field);
  color: var(--ink);
  cursor: pointer;
  text-align: start;
  font-family: 'Cairo', sans-serif;
  margin-top: 0;
  transition: border-color 0.15s, background 0.15s;
}

.card button.choice-row:hover {
  border-color: var(--brand);
}

.card button.choice-row.selected {
  border-color: var(--brand);
  background: rgba(34, 197, 94, 0.12);
}

.choice-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  flex-shrink: 0;
}

.choice-row.selected .choice-icon {
  background: var(--brand);
  color: #fff;
}

.choice-label {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  min-width: 0;
}

.choice-num {
  font-size: 17px;
  font-weight: 700;
}

.choice-check {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  border: 2px solid var(--line);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all 0.15s;
}

.choice-row.selected .choice-check {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

.choice-check .ui-icon {
  width: 13px;
  height: 13px;
}

.ui-icon {
  width: 26px;
  height: 26px;
  display: block;
}

.inline-icon {
  display: inline-flex;
  vertical-align: middle;
  margin-bottom: 3px;
}

.rings-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 16px;
}

.rings-svg-wrap {
  flex-shrink: 0;
  line-height: 0;
}

.rings-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.ring-legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
}

.ring-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ring-legend-label {
  color: var(--muted);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ring-legend-value {
  color: var(--ink);
  font-weight: 700;
  flex-shrink: 0;
}

.inline-icon .ui-icon {
  width: 16px;
  height: 16px;
}

.stepper-btn .ui-icon {
  width: 18px;
  height: 18px;
}

.fab-icon-btn .ui-icon {
  width: 21px;
  height: 21px;
  color: #fff;
}

.hint-text {
  font-size: 12px;
  color: var(--muted);
  margin: -6px 0 12px;
}

/* السيلكت المخفي: بنسيبه في الصفحة عشان الكيبورد وقارئ الشاشة،
   بس المفروض ميتشافش خالص. كان بيتغلب عليه `.card select` و
   `#onboarding-screen > :not(.ob-bg)` فكان بيبان مربع فاضي جنب
   الكروت — عشان كده !important هنا */
.visually-hidden-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

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

/* مساحة فاضية تحت شاشة العميل عشان محتواها ميتغطاش بصف الأيقونات
   العائم الثابت تحت (fab-icon-row) */
#client-screen {
  padding-bottom: 82px;
}

.fab-icon-row {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)) 10px;
  background: linear-gradient(180deg, rgba(11, 18, 32, 0), var(--bg) 40%);
  overflow-x: auto;
  scrollbar-width: none;
}

.fab-icon-row::-webkit-scrollbar {
  display: none;
}

.card button.fab-icon-btn {
  position: static;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  padding: 0;
  margin-top: 0;
  transition: transform 0.15s;
}

.card button.fab-icon-btn:hover {
  transform: scale(1.06);
}

.card button.fab-icon-btn:active {
  transform: scale(0.96);
}

.card button.fab-icon-btn-secondary {
  background: var(--surface-2);
  border: 2px solid var(--brand);
  color: var(--brand);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.card button.fab-icon-btn-secondary .ui-icon {
  color: var(--brand);
}

.card button.fab-icon-btn-tertiary {
  background: var(--surface-2);
  border: 2px solid #38b6ff;
  color: #38b6ff;
}

.card button.fab-icon-btn-tertiary .ui-icon {
  color: #38b6ff;
}

.card button.fab-icon-btn-quaternary {
  background: var(--surface-2);
  border: 2px solid var(--warn);
  color: var(--warn);
}

.card button.fab-icon-btn-quaternary .ui-icon {
  color: var(--warn);
}

.card button.fab-icon-btn-quinary {
  background: var(--surface-2);
  border: 2px solid #06b6d4;
  color: #06b6d4;
}

.card button.fab-icon-btn-quinary .ui-icon {
  color: #06b6d4;
}

.card button.fab-icon-btn-senary {
  background: var(--surface-2);
  border: 2px solid #a855f7;
  color: #a855f7;
}

.card button.fab-icon-btn-senary .ui-icon {
  color: #a855f7;
}

.card button.fab-icon-btn-septenary {
  background: var(--surface-2);
  border: 2px solid #f97316;
  color: #f97316;
}

.card button.fab-icon-btn-septenary .ui-icon {
  color: #f97316;
}

/* ---------- ratings & reviews ---------- */

.stars-row {
  display: inline-flex;
  gap: 2px;
}

.star-icon {
  width: 16px;
  height: 16px;
  color: #f5b800;
}

.stars-display {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--muted);
  margin: 4px 0;
}

.star-picker {
  display: inline-flex;
  gap: 4px;
  margin: 6px 0;
}

.card button.star-btn {
  width: auto;
  margin-top: 0;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: var(--line);
  line-height: 1;
}

.star-btn .star-icon {
  width: 24px;
  height: 24px;
  color: inherit;
}

.star-btn.filled {
  color: #f5b800;
}

.review-card {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
}

.review-card .ex-name {
  margin-bottom: 2px;
}

/* ---------- الريفيوهات المكتوبة من عملاء تانيين لنفس المتخصص ---------- */
.written-reviews-list {
  margin: 6px 0 4px;
  padding: 0;
  list-style: none;
}

.written-reviews-list li {
  /* .card li العامة بتحط display:flex على كل li — ده كان بيخلي اسم
     العميل ونص الريفيو يتحطوا جنب بعض أفقيًا بدل تحت بعض، والنص
     الطويل يتلخبط في عمود ضيق برا حدود الكارت. هنا بنرجّعها بلوك
     عادي عشان العنوان يبقى فوق والنص يبقى تحته وينكسر طبيعي */
  display: block !important;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 6px;
  cursor: default;
}

.written-review-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.written-review-name {
  font-weight: 700;
  font-size: 13px;
  overflow-wrap: break-word;
  min-width: 0;
}

.stars-display.small {
  margin: 0;
  flex-shrink: 0;
}

/* ---------- صورة عضو الفريق في شاشة "فريقك" عند العميل ---------- */
.team-member-photo {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  margin-bottom: 8px;
  border: 2px solid var(--brand);
}

#ph-reviews-list li,
#injury-history-list li {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  list-style: none;
}

.ex-card img {
  width: 100%;
  height: 104px;
  object-fit: cover;
  display: block;
  background-color: var(--surface-2);
}

.ex-body {
  padding: 9px 11px 12px 11px;
}

.ex-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 5px;
}

.ex-meta {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.45;
}

.team-specialty-section {
  margin-bottom: 6px;
}

.team-specialty-section .welcome-section-title {
  margin: 18px 0 8px 0;
  text-align: start;
  font-size: 13.5px;
  color: var(--muted);
}

.team-specialty-section:first-of-type .welcome-section-title {
  margin-top: 4px;
}

.team-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 5px;
}

.team-badge {
  font-size: 9.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 7px;
}

.team-badge.recommended {
  color: #06210f;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
}

.team-badge.active-now {
  color: var(--brand);
  background: rgba(34, 197, 94, 0.13);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.lib-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.lib-item > div {
  font-size: 14.5px;
  line-height: 1.35;
  min-width: 0;
}

.lib-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background-color: var(--surface-2);
}

/* ---------- my library ---------- */

.add-box {
  background-color: var(--field);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  margin-top: 10px;
}

.add-box input,
.add-box select {
  background-color: var(--surface);
}

.my-ex-name {
  font-size: 15px;
  font-weight: 700;
}

.my-ex-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

.my-ex-notes {
  font-size: 12px;
  color: #63748d;
  margin-top: 3px;
}

/* ---------- image picker ---------- */

.file-pick {
  display: block;
  background-color: var(--surface);
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: 10px;
  transition: border-color 0.15s, color 0.15s;
}

.file-pick:active {
  border-color: var(--brand);
  color: var(--brand);
}

.file-pick .ui-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: middle;
  margin-inline-end: 4px;
  margin-bottom: 3px;
}

.file-pick input[type="file"] {
  display: none;
}

.specialty-multi {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.specialty-check {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background-color: var(--field);
  font-size: 13px;
  cursor: pointer;
}

.specialty-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  accent-color: var(--brand);
}

.preview-box {
  position: relative;
  margin-bottom: 10px;
}

.preview-box img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  background-color: var(--surface-2);
}

.preview-box button {
  position: absolute;
  top: 8px;
  inset-inline-end: 8px;
  background-color: rgba(11, 18, 32, 0.85) !important;
  border-radius: 999px !important;
  width: 30px !important;
  height: 30px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- lightbox: full-size exercise preview ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(4, 9, 18, 0.9);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  overflow-y: auto;
}

.lightbox-sheet {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 44px 16px 18px 16px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.95);
}

.lightbox-close {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  background: var(--field);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 15px;
  font-family: 'Cairo', sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-title {
  font-size: 16px;
  font-weight: 700;
  text-align: start;
  margin-bottom: 14px;
  line-height: 1.35;
  padding-inline-end: 34px;
}

.lightbox-images {
  display: grid;
  gap: 10px;
}

.lightbox-shot {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.lightbox-shot img {
  width: 100%;
  display: block;
  background: var(--surface-2);
}

.lightbox-cap {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  padding: 8px;
}

.lightbox-none {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  padding: 26px 0;
}

.lightbox-anatomy {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.lightbox-anatomy-row {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  margin: 0 0 6px;
}

.lightbox-anatomy-row strong {
  color: var(--muted);
  font-weight: 700;
}

/* magnifier badge on library cards */
.ex-shot {
  position: relative;
}

.card .zoom-badge .ui-icon {
  width: 16px;
  height: 16px;
}

.card .zoom-badge {
  position: absolute;
  top: 6px;
  inset-inline-end: 6px;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background: rgba(11, 18, 32, 0.82);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.lib-thumb {
  cursor: zoom-in;
}

/* ---------- library images uploaded by the coach/specialist ---------- */

.ex-shot.no-photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 104px;
  border: 1px dashed var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  text-align: center;
}

.ex-shot.no-photo .ui-icon {
  width: 22px;
  height: 22px;
}

.card .photo-edit-badge {
  position: absolute;
  top: 6px;
  inset-inline-start: 6px;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background: rgba(11, 18, 32, 0.82);
  border: 1px solid var(--line);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.card .photo-edit-badge .ui-icon {
  width: 16px;
  height: 16px;
}

.food-thumb {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
  flex: none;
  cursor: zoom-in;
}

/* لازم تبدأ بـ .card button عشان تكسب على قاعدة الزرار الأساسية
   (.card button) اللي بتدي أي زرار جوه كارت عرض 100% وخلفية خضرا —
   من غير البادئة دي كان زرار الصورة بيطلع شريط أخضر بعرض الصف كله
   وبيكسر تنسيق سطر الصنف */
.card button.food-photo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 8px;
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--muted);
  flex: none;
  padding: 0;
  cursor: pointer;
}

.food-photo-btn .ui-icon {
  width: 16px;
  height: 16px;
}

/* أيقونة الصنف نفسه بدل الزرار الفاضي — أكبر شوية وبخلفية خفيفة عشان
   تبان كأنها صورة مصغّرة، ولسه بتفتح رفع صورة حقيقية لما تدوس عليها */
.card button.food-icon-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  font-size: 21px;
  line-height: 1;
  border-style: solid;
  background: var(--field);
}

.template-photo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.template-photo-row .preview-box {
  margin: 0;
}

.template-photo-row .preview-box img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  cursor: zoom-in;
}

/* ---------- tabs: training / rehab ---------- */

.tabs {
  display: flex;
  /* التبويبات بقت أكتر (5 عند المدرب و6-7 عند العميل)، ومكانتش بتتظبط
     في سطر واحد على الموبايل — كان فيه تبويب أو اتنين بيقعوا برّه الشاشة
     ومش بيتفتحوا خالص. بنخليها تنزل سطر تاني بدل ما تطلع برّه الإطار.
     (صفوف الحاسبات .calc-tabs ليها قاعدة خاصة بتمنع ده وبتفضل بتمرير) */
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 5px;
  margin-bottom: 18px;
}

.card .tab {
  position: relative;
  /* تلات تبويبات في السطر على الموبايل، والباقي بينزل سطر تحتيه */
  flex: 1 1 calc(33.333% - 6px);
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 11px 8px;
  font-size: 14px;
  font-weight: 400;
  background: transparent;
  color: var(--muted);
  border: none;
  border-radius: 10px;
  font-family: 'Cairo', sans-serif;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* صف تبويبات العميل هو الأطول (6-7 تبويبات) — بياخد نفس منطق اللف
   في سطرين بتاع .tabs فوق، بس بمسافات أضيق شوية عشان الأسماء تبان كاملة */
#client-tabs .tab {
  padding: 11px 6px;
  font-size: 13px;
}

.card .tab .ui-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.card button.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.card button.icon-btn .ui-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.card .tab.active {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #06210f;
  font-weight: 700;
}

.calc-tabs {
  overflow-x: auto;
  flex-wrap: nowrap;
}

.calc-tabs .tab {
  flex: none;
  white-space: nowrap;
}

.calc-result {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.7;
}

.calc-result strong {
  color: var(--brand);
}

.store-price {
  font-weight: 700;
  color: var(--brand);
  margin: 4px 0;
}

/* .card button (0,1,1) كانت بتكسب على .store-add-btn لوحدها (0,1,0)
   فتفضل بمقاس الزرار الأساسي الكبير بدل الحجم المدمج المقصود */
.card button.store-add-btn {
  width: 100%;
  padding: 8px;
  font-size: 12.5px;
}

.store-cart-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}

/* اسم المنتج في السلة كان بياخد قاعدة .card li span العامة
   (white-space: nowrap + display: flex) فبيرفض ينكسر سطرين ويدفع
   الأزرار برا حدود الكارت لو الاسم طويل — هنا بنسمحله ينكسر ويقصّر
   عرضه بدل ما يوسّع الصف كله */
.store-cart-row span {
  display: block;
  white-space: normal;
  overflow-wrap: break-word;
  flex: 1 1 auto;
  min-width: 0;
}

.store-cart-row:last-child {
  border-bottom: none;
}

/* نفس المشكلة: .card button (0,1,1) كانت بتغلب .store-cart-qty-btn
   لوحدها (0,1,0) فيبقى الزرار عرضه 100% وبادينج كبير بدل زرار
   صغير 26×26 جنب رقم الكمية */
.card button.store-cart-qty-btn {
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 8px;
  font-size: 16px;
  margin-top: 0;
}

.calc-result .calc-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
}

#rm-table {
  margin-top: 10px;
}

.rm-table-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--line);
}

.rm-table-row:last-child {
  border-bottom: none;
}

.tab-badge {
  position: absolute;
  top: 2px;
  inset-inline-end: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #2a0a0a;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}

/* ---------- بلاغات الإصابة عند المدرب ---------- */

.injury-report-list {
  margin: 0;
  padding: 0;
}

.injury-report-card {
  background: var(--field);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--warn);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  list-style: none;
}

.injury-report-card.status-confirmed {
  border-inline-start-color: #38b6ff;
}

.injury-report-card.status-done {
  border-inline-start-color: var(--brand);
}

.injury-report-card .secondary {
  width: auto;
  padding: 7px 14px;
  font-size: 12.5px;
  margin: 8px 0;
}

.injury-report-card select {
  margin: 0;
}

/* ---------- المكتبة الطبية ---------- */

.med-article-list {
  margin: 0;
  padding: 0;
}

.med-article-card {
  background: var(--field);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--muted);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  list-style: none;
}

.med-article-card.status-review {
  border-inline-start-color: var(--warn);
}

.med-article-card.status-approved {
  border-inline-start-color: var(--brand);
}

.med-article-card .sport-tag {
  margin-bottom: 6px;
}

.card button.med-thumb-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  margin: 8px 0;
  border-radius: 10px;
  overflow: hidden;
}

.med-thumb-btn img {
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  display: block;
}

.med-article-card select {
  margin: 0;
}

/* ---------- الحجوزات ---------- */

.booking-card {
  background: var(--field);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--warn);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  list-style: none;
}

.booking-card.status-confirmed {
  border-inline-start-color: #38b6ff;
}

.booking-card.status-done {
  border-inline-start-color: var(--brand);
}

.booking-card.status-cancelled {
  border-inline-start-color: var(--danger);
  opacity: 0.7;
}

.booking-card select {
  margin: 0;
}

.card button.book-session-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto;
  background: none;
  border: none;
  color: #38b6ff;
  font-size: 12.5px;
  padding: 6px 0;
  margin: 4px 0;
  cursor: pointer;
  text-align: start;
}

.card button.book-session-btn .ui-icon {
  width: 15px;
  height: 15px;
}

.booking-form {
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 8px;
}

.booking-form select,
.booking-form input,
.booking-form textarea {
  margin-bottom: 8px;
}

/* ---------- workout sections ---------- */

.section-block {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 14px;
  margin-bottom: 10px;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.section-name {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
}

.section-count {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 400;
}

.section-block ul {
  margin: 0 !important;
}

.section-block li {
  background: var(--surface) !important;
}

.section-empty {
  font-size: 12.5px;
  color: #5f7185;
  padding: 4px 2px;
}

/* ---------- rehab ---------- */

.field-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin: 4px 0 7px 0;
}

.card textarea {
  width: 100%;
  box-sizing: border-box;
  background-color: var(--field);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
  font-family: 'Cairo', sans-serif;
  font-size: 15px;
  margin-bottom: 12px;
  outline: none;
  resize: vertical;
  line-height: 1.6;
}

.card textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
}

.phase-block {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 10px;
}

.phase-block.current {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}

.phase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.phase-tag {
  font-size: 11px;
  font-weight: 700;
  color: #06210f;
  background: var(--brand);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

.phase-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
}

.phase-block input {
  background: var(--surface) !important;
  margin-bottom: 8px !important;
}

.phase-block ul {
  margin: 6px 0 0 0 !important;
}

.phase-block li {
  background: var(--surface) !important;
}

.about-box {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.75;
  color: #c8d6e4;
  white-space: pre-wrap;
}

.rehab-none {
  color: var(--muted);
  font-size: 14.5px;
  text-align: center;
  padding: 30px 10px;
  line-height: 1.7;
}

.phase-goal {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 8px;
  line-height: 1.5;
}

/* ---------- rehab template picker ---------- */

.template-box {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 16px;
}

.template-box .field-label {
  margin-top: 0;
}

/* صندوق "احفظ اليوم ده كقالب" جوه صندوق القوالب — أزراره لازم تبقى
   صغيرة وجنب بعض، والقاعدة `.card button` (عرض 100% وخلفية خضرا) بتغلب
   أي كلاس واحد، فبنكتبها بـ `.card button.<class>` عشان تتغلب عليها */
.my-tpl-box {
  border-top: 1px dashed var(--line);
  margin-top: 12px;
  padding-top: 12px;
}

.my-tpl-box .row {
  gap: 8px;
  margin-bottom: 8px;
}

.card .my-tpl-box button {
  width: auto;
  flex: 1 1 auto;
  padding: 10px 12px;
  font-size: 13px;
  white-space: nowrap;
}

.card .my-tpl-box #my-template-name {
  flex: 2 1 140px;
  margin: 0;
  min-width: 0;
}

.my-tpl-box .hint-text {
  margin: 4px 0 0;
}

.my-tpl-box .message {
  margin: 6px 0 0;
  font-size: 12.5px;
}

.template-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11.5px;
  color: var(--warn);
  line-height: 1.55;
  margin: 10px 0 0 0;
  text-align: start;
}

.template-note .ui-icon {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* ---------- category chips ---------- */

.chips {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 12px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.chips::-webkit-scrollbar {
  display: none;
}

.card .chip {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 400;
  background: var(--field);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: 'Cairo', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.card .chip .ui-icon {
  width: 15px;
  height: 15px;
}

.card .chip.active {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #06210f;
  font-weight: 700;
  border-color: var(--brand);
}

/* ---------- exercise detail chips ---------- */

.ex-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.ex-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--muted);
  background: rgba(42, 59, 87, 0.5);
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
}

.ex-tag .ui-icon {
  width: 11px;
  height: 11px;
  margin-bottom: 0;
}

.ex-tag.primary {
  color: var(--brand);
  background: rgba(34, 197, 94, 0.13);
  font-weight: 700;
}

.card li.ex-row {
  align-items: flex-start;
  flex-direction: column;
  gap: 0;
}

.ex-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
}

/* ---------- inline exercise editor ---------- */

.ex-edit {
  width: 100%;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.ex-edit .row {
  margin-bottom: 0;
}

.ex-edit input {
  background: var(--surface-2) !important;
  font-size: 13px !important;
  padding: 9px 10px !important;
  margin-bottom: 7px !important;
}

.row.four {
  gap: 6px;
}

.row.four input {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
}

.per-set-toggle {
  display: inline-block;
  margin: 2px 0 4px;
  font-size: 12.5px;
}

.anatomy-toggle {
  display: inline-block;
  margin: 2px 0 8px;
  font-size: 12.5px;
}

.anatomy-detail-btn {
  display: inline-block;
  margin: 2px 0;
  font-size: 12px;
}

.anatomy-box input {
  margin-bottom: 6px;
}

.card button.log-actual-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto;
  background: none;
  border: none;
  color: var(--brand);
  font-size: 12px;
  padding: 4px 0;
  margin: 2px 0;
  cursor: pointer;
  text-align: start;
}

.card button.log-actual-btn .ui-icon {
  width: 14px;
  height: 14px;
}

.actual-summary {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}

.per-set-box {
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 8px;
  margin-bottom: 8px;
}

.per-set-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}

.per-set-label {
  width: 16px;
  min-width: 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}

.per-set-row input {
  flex: 1;
  min-width: 0;
  font-size: 12.5px !important;
  padding: 7px 8px !important;
  margin-bottom: 0 !important;
  background: var(--field) !important;
}

.day-volume {
  font-size: 12.5px;
  color: var(--muted);
  margin: 2px 0 10px;
}

.edit-hint {
  font-size: 11px;
  color: #5f7185;
  margin-top: 6px;
}

/* ---------- nutrition ---------- */

.totals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-bottom: 16px;
}

.total-cell {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 6px;
  text-align: center;
}

.total-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.total-target {
  font-size: 10px;
  color: #5f7185;
  margin-top: 1px;
}

.total-label {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
}

.total-bar {
  height: 3px;
  border-radius: 99px;
  background: var(--line);
  margin-top: 6px;
  overflow: hidden;
}

.total-bar span {
  display: block;
  height: 100%;
  background: var(--brand);
  border-radius: 99px;
}

.total-bar span.over {
  background: var(--warn);
}

.meal-block {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 14px;
  margin-bottom: 10px;
}

.meal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.meal-name {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
}

.meal-kcal {
  font-size: 11.5px;
  color: var(--brand);
  font-weight: 700;
}

.meal-block ul {
  margin: 0 !important;
}

.meal-block li {
  background: var(--surface) !important;
}

.food-macros {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
}

.grams-input {
  width: 74px !important;
  margin: 0 !important;
  padding: 7px 8px !important;
  font-size: 13px !important;
  text-align: center;
  background: var(--surface-2) !important;
  flex-shrink: 0;
}

#food-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

/* أيقونة الصنف جنب اسمه جوه الوجبة نفسها */
.meal-food-icon {
  font-size: 18px;
  line-height: 1;
  flex: none;
  margin-inline-end: 8px;
}

.food-name {
  font-size: 14.5px;
  font-weight: 700;
}

.food-per100 {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.food-badge {
  font-size: 9.5px;
  color: var(--brand);
  background: rgba(34, 197, 94, 0.13);
  border-radius: 5px;
  padding: 1px 6px;
  margin-inline-start: 6px;
}

/* ---------- sports & activity ---------- */

.sport-tag {
  font-size: 11px;
  color: var(--brand);
  background: rgba(34, 197, 94, 0.12);
  border-radius: 6px;
  padding: 2px 8px;
  margin-top: 5px;
  display: inline-block;
}

.sport-tag-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-inline-start: 3px solid var(--brand);
  border-radius: 4px 6px 6px 4px;
}

.sport-tag-icon .ui-icon,
.act-sport .ui-icon {
  width: 13px;
  height: 13px;
}

.act-sport {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.act-entry {
  display: block !important;
  padding: 13px 14px !important;
}

.act-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.act-sport {
  font-size: 14.5px;
  font-weight: 700;
}

.act-date {
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}

.act-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.act-notes {
  font-size: 12px;
  color: #63748d;
  margin-top: 6px;
  line-height: 1.5;
}

#act-fields input {
  flex: 1;
  min-width: 0;
}

/* ---------- classes ---------- */

.live-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 18px;
  font-size: 12.5px;
  color: var(--muted);
  flex-wrap: wrap;
}

.live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18);
  animation: livePulse 1.8s ease-in-out infinite;
}

.live-dot.off {
  background: #5f7185;
  box-shadow: none;
  animation: none;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.card .mini-btn {
  width: auto;
  margin: 0;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 400;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: 'Cairo', sans-serif;
  cursor: pointer;
  margin-inline-start: auto;
}

.card .mini-btn + .mini-btn {
  margin-inline-start: 0;
}

.board-row {
  display: flex !important;
  align-items: center;
  gap: 10px;
}

.rank-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--muted);
}

.rank-badge.top {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #06210f;
  border-color: var(--brand);
}

.board-name {
  font-size: 14.5px;
  font-weight: 700;
  flex: 1;
  min-width: 0;
}

.board-me {
  font-size: 9.5px;
  color: var(--brand);
  background: rgba(34, 197, 94, 0.14);
  border-radius: 5px;
  padding: 1px 6px;
  margin-inline-start: 6px;
}

.board-stat {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.board-stat.done {
  color: var(--brand);
  font-weight: 700;
}

.class-card {
  display: block !important;
  padding: 14px !important;
}

/* الصف العلوي في كارت الكلاس (اسم + زرار حذف) كان صفه الداخلي (info)
   من غير min-width:0، فاسم كلاس طويل أو من غير مسافات كان بيدفع زرار
   الحذف برا حدود الكارت بدل ما يتقصّر وينكسر سطرين */
.class-card-info {
  flex: 1 1 auto;
  min-width: 0;
}

.class-name {
  font-size: 16px;
  font-weight: 700;
  overflow-wrap: break-word;
}

.class-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  overflow-wrap: break-word;
}

.class-count {
  font-size: 11.5px;
  color: var(--brand);
  margin-top: 4px;
}

.no-class {
  color: var(--muted);
  font-size: 14.5px;
  text-align: center;
  padding: 30px 10px;
  line-height: 1.7;
}

/* ---------- صفحة التعريف (قبل تسجيل الدخول) ---------- */

.welcome-hero {
  text-align: center;
  margin-bottom: 22px;
}

.welcome-hero-badges {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}

.welcome-badge {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.7);
}

.welcome-badge .ui-icon {
  width: 20px;
  height: 20px;
}

.welcome-badge.wb-1 { background: linear-gradient(150deg, #22c55e, #16a34a); }
.welcome-badge.wb-2 { background: linear-gradient(150deg, #38bdf8, #0ea5e9); }
.welcome-badge.wb-3 { background: linear-gradient(150deg, #fb923c, #ea580c); }
.welcome-badge.wb-4 { background: linear-gradient(150deg, #a78bfa, #7c3aed); }

.welcome-hero h2 {
  font-size: 21px;
  line-height: 1.5;
  margin: 0 0 10px 0;
  text-align: center;
}

.welcome-hero-sub {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  text-align: center;
}

.welcome-section-title {
  text-align: center;
  margin: 22px 0 12px 0;
  font-size: 15px;
}

.welcome-pillars-sub {
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  margin: -6px 0 14px 0;
  line-height: 1.6;
}

.welcome-pillars-wheel {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}

.card button.welcome-pillar-btn {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  background: none;
  color: var(--ink);
  padding: 4px 2px;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.card button.welcome-pillar-btn span:last-child {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--muted);
}

.card button.welcome-pillar-btn.active span:last-child {
  color: var(--ink);
}

.welcome-pillar-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.7);
  border: 3px solid transparent;
  transition: border-color 0.15s, transform 0.15s;
}

.card button.welcome-pillar-btn.active .welcome-pillar-circle {
  border-color: var(--ink);
  transform: scale(1.06);
}

.welcome-pillar-circle .ui-icon {
  width: 24px;
  height: 24px;
}

.welcome-pillar-circle.wb-1 { background: linear-gradient(150deg, #22c55e, #16a34a); }
.welcome-pillar-circle.wb-2 { background: linear-gradient(150deg, #38bdf8, #0ea5e9); }
.welcome-pillar-circle.wb-3 { background: linear-gradient(150deg, #fb923c, #ea580c); }
.welcome-pillar-circle.wb-4 { background: linear-gradient(150deg, #a78bfa, #7c3aed); }

.welcome-pillar-detail {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 6px;
}

.wp-detail-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 10px 0;
  text-align: center;
}

.wp-detail-line {
  font-size: 13px;
  color: var(--ink);
  padding: 7px 0;
}

.wp-detail-line + .wp-detail-line {
  border-top: 1px solid var(--line);
}

.wp-detail-stat {
  margin-top: 10px;
  padding: 10px;
  background: var(--field);
  border-radius: 12px;
  font-size: 12.5px;
  color: var(--ink);
  text-align: center;
  line-height: 1.6;
}

.wp-detail-team {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
}

.wp-detail-note {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
  line-height: 1.7;
}

.welcome-samples {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 10px 2px;
  margin: 0 -4px;
  scrollbar-width: none;
}

.welcome-samples::-webkit-scrollbar {
  display: none;
}

.sample-ex-card {
  flex: 0 0 auto;
  width: 128px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
}

.sample-ex-card .inline-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.sample-ex-card .ui-icon {
  width: 20px;
  height: 20px;
  color: var(--brand);
}

.sample-ex-name {
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 3px;
}

.sample-ex-detail {
  font-size: 11px;
  color: var(--muted);
}

.welcome-program-preview {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
}

.wp-day-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 10px;
}

.wp-line {
  font-size: 13px;
  color: var(--ink);
  padding: 7px 0;
}

.wp-line + .wp-line {
  border-top: 1px solid var(--line);
}

.welcome-cta {
  text-align: center;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.welcome-cta h3 {
  margin-top: 0;
}

.welcome-cta-note {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 14px 0;
}

.welcome-login-row {
  font-size: 13px;
  color: var(--muted);
  margin: 12px 0 0 0;
}

.welcome-login-row .link {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand);
  padding: 0 4px;
}

/* ---------- شريط الثقة ---------- */

.welcome-trust-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 22px;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--ink);
  text-align: start;
  line-height: 1.5;
}

.trust-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.18);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}

.trust-icon .ui-icon {
  width: 13px;
  height: 13px;
}

/* ---------- هيبقى إزاي (خطوات) ---------- */

.welcome-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 6px;
}

.welcome-step {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px 14px 44px;
  text-align: start;
}

.welcome-step-num {
  position: absolute;
  inset-inline-start: 12px;
  top: 14px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(150deg, #22c55e, #16a34a);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-step-title {
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 4px;
}

.welcome-step-text {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}

/* ---------- مين البرنامج ده مناسبله ---------- */

.welcome-audience-section {
  margin-top: 22px;
}

.welcome-audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.welcome-audience-card {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
}

.welcome-audience-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  margin: 0 auto 8px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.welcome-audience-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.welcome-audience-icon.wb-1 { background: linear-gradient(150deg, #22c55e, #16a34a); }
.welcome-audience-icon.wb-2 { background: linear-gradient(150deg, #38bdf8, #0ea5e9); }
.welcome-audience-icon.wb-3 { background: linear-gradient(150deg, #fb923c, #ea580c); }
.welcome-audience-icon.wb-4 { background: linear-gradient(150deg, #a78bfa, #7c3aed); }

.welcome-audience-text {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 380px) {
  .welcome-audience-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- قصص نجاح (قبل / بعد) ---------- */

.welcome-stories-section {
  margin-top: 22px;
}

.welcome-stories-grid {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 10px 2px;
  margin: 0 -4px;
  scrollbar-width: none;
}

.welcome-stories-grid::-webkit-scrollbar {
  display: none;
}

.story-card {
  flex: 0 0 auto;
  width: 200px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  text-align: center;
}

.story-images {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.story-images > div {
  flex: 1 1 0;
  min-width: 0;
}

.story-images img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.story-image-label {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
}

.story-caption {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.5;
}

/* ---------- اتكلم مع فريقنا الأول ---------- */

.welcome-lead-section {
  margin-top: 22px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
}

.welcome-lead-sub {
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
  margin: -6px 0 14px 0;
  line-height: 1.6;
}

/* ---------- انضمام مدربين ومتخصصين ---------- */

.welcome-provider-apply-section {
  margin-top: 22px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
}

/* ---------- فريق العمل على الصفحة الرئيسية ---------- */

.welcome-team-section {
  margin-top: 22px;
}

.welcome-team-grid {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 10px 2px;
  margin: 0 -4px;
  scrollbar-width: none;
}

.welcome-team-grid::-webkit-scrollbar {
  display: none;
}

.welcome-team-card {
  flex: 0 0 auto;
  width: 118px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
}

.welcome-team-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 auto 8px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(150deg, #38bdf8, #0ea5e9);
}

.welcome-team-avatar .ui-icon {
  width: 18px;
  height: 18px;
}

.welcome-team-name {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 3px;
}

.welcome-team-specialty {
  font-size: 10.5px;
  color: var(--muted);
}

/* ---------- أسئلة شائعة ---------- */

.welcome-faq-section {
  margin-top: 22px;
}

.welcome-faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.welcome-faq-item {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

/* بادئة .card button عشان نكسب أولوية أعلى من قاعدة الزرار الأساسية
   (.card button) اللي كانت بتطبّع كل أسئلة الأكورديون بشكل زرار أخضر
   CTA كامل بدل مظهر بند قائمة بسيط — نفس الأسلوب المتّبع مع
   .welcome-pillar-btn في الملف ده */
.card button.welcome-faq-question {
  width: 100%;
  background: none;
  border: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: start;
  padding: 13px 14px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}

.welcome-faq-question .faq-arrow {
  flex: 0 0 auto;
  transition: transform 0.15s;
  color: var(--muted);
}

.welcome-faq-item.open .welcome-faq-question .faq-arrow {
  transform: rotate(180deg);
}

.welcome-faq-answer {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.7;
  text-align: start;
  padding: 0 14px 13px 14px;
}

/* ---------- زرار عائم للموبايل ---------- */

.welcome-sticky-cta {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 50;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) 16px;
  background: linear-gradient(180deg, rgba(11, 18, 32, 0), var(--bg) 30%);
}

/* الزرار العائم ده برّه .welcome-screen (.card) فمعندوش شكل الزرار
   الأساسي (.card button) خالص — بنكرر نفس مظهر زرار الـ CTA هنا
   عشان يبقى واضح وجذاب زي باقي أزرار التطبيق، مش زرار افتراضي رمادي */
.welcome-sticky-cta button {
  width: 100%;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #06210f;
  font-family: 'Cairo', sans-serif;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 13px;
  padding: 14px;
  margin: 0;
  cursor: pointer;
  transition: transform 0.1s, filter 0.15s;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.8);
}

.welcome-sticky-cta button:active {
  transform: scale(0.985);
  filter: brightness(0.95);
}

@media (max-width: 560px) {
  .welcome-sticky-cta:not(.hidden) {
    display: block;
  }
}

/* ---------- انتهاء التجربة المجانية ---------- */

.trial-ended-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.trial-ended-icon .ui-icon {
  width: 48px;
  height: 48px;
  color: var(--warn);
}

#trial-ended-screen h2 {
  text-align: center;
}

#trial-ended-screen p {
  text-align: center;
  color: var(--muted);
  line-height: 1.7;
}

.trial-banner {
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand);
  background: rgba(34, 197, 94, 0.13);
  border: 1px solid rgba(34, 197, 94, 0.35);
  border-radius: 999px;
  padding: 7px 12px;
  margin: 0 0 14px 0;
}

.hint-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  text-align: start;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--warn);
  background: rgba(251, 191, 36, 0.13);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 14px;
  padding: 10px 14px;
  margin: 0 0 14px 0;
}

.hint-banner .link {
  color: var(--warn);
  font-weight: 700;
  text-decoration: underline;
}

/* ---------- خطط الاشتراك والدفع ---------- */

.subscription-status {
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  margin: 0 0 16px 0;
}

.plans-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
}

.plan-name {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}

.plan-price-row {
  font-size: 13.5px;
  color: var(--ink);
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.plan-price-original {
  color: var(--muted);
  text-decoration: line-through;
  font-size: 12px;
}

.plan-price-offer {
  color: var(--brand);
  font-weight: 700;
}

.plan-offer-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #06210f;
  background: linear-gradient(180deg, var(--warn) 0%, #f59e0b 100%);
  border-radius: 999px;
  padding: 3px 9px;
  margin-bottom: 8px;
}

.plan-features {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;
}

.plan-features li {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.7;
  padding-inline-start: 16px;
  position: relative;
}

.plan-features li::before {
  content: '\2713';
  position: absolute;
  inset-inline-start: 0;
  color: var(--brand);
  font-weight: 700;
}

.plan-pay-form {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.plan-pay-form select,
.plan-pay-form input,
.plan-pay-form textarea {
  background-color: var(--field);
}

/* ---------- الشات (العميل + الفريق + المساعد الذكي) ---------- */

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 50vh;
  overflow-y: auto;
  padding: 4px 2px 12px 2px;
  margin-bottom: 10px;
}

.chat-bubble-row {
  display: flex;
}

.chat-bubble-row.mine {
  justify-content: flex-end;
}

.chat-bubble-row.theirs {
  justify-content: flex-start;
}

.chat-bubble {
  max-width: 78%;
  padding: 10px 13px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.6;
}

.chat-bubble-row.mine .chat-bubble {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #06210f;
  border-bottom-right-radius: 4px;
}

.chat-bubble-row.theirs .chat-bubble {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}

.chat-bubble-row.ai .chat-bubble {
  border-color: #06b6d4;
}

.chat-bubble-sender {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 3px;
}

.chat-bubble-row.mine .chat-bubble-sender {
  display: none;
}

.chat-empty-note {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  padding: 24px 10px;
}

.chat-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.chat-input-row input {
  flex: 1;
  margin: 0;
}

.card button.chat-send-btn {
  width: 46px;
  height: 46px;
  min-width: 46px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card button.chat-send-btn .ui-icon {
  width: 20px;
  height: 20px;
}

.card button.chat-inbox-item {
  display: block;
  width: 100%;
  text-align: start;
  background: var(--field);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  margin-top: 0;
  margin-bottom: 8px;
  cursor: pointer;
  font-family: 'Cairo', sans-serif;
  font-weight: 400;
  font-size: 14px;
}

.chat-inbox-item-name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 3px;
}

.chat-inbox-item-preview {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* علامة بلاغ إصابة على سطر العميل في القائمة — عشان المدرب يشوف إن في
   عميل بلّغ من غير ما يفتح كل عميل واحد واحد */
.client-injury-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(248, 113, 113, 0.14);
  border: 1px solid rgba(248, 113, 113, 0.45);
  color: var(--danger);
  font-size: 12px;
  font-weight: 700;
}

.client-injury-flag .ui-icon {
  width: 14px;
  height: 14px;
}

/* ================= مكتبة المكملات والفيتامينات ================= */

.supp-disclaimer {
  font-size: 12px;
  line-height: 1.7;
  color: var(--warn, #f59e0b);
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 14px;
}

.supp-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* القاعدة العامة `.card li` بتخلي أي عنصر قائمة صف أفقي، وكارت المكمل
   محتاج يبقى عمود — وكمان `.card li span` بتلوّن أي span وتمنع اللف،
   فبنلغي التأثير ده جوه الكارت بس */
.card li.supp-card {
  display: block;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
  cursor: default;
}

.card li.supp-card:active {
  transform: none;
}

.card li.supp-card span,
.card li.supp-plan-item span {
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  white-space: normal;
  display: inline;
}

.card li.supp-card .supp-icon,
.card li.supp-plan-item .supp-icon {
  display: block;
}

.card li.supp-card .supp-grade,
.card li.supp-card .supp-cat {
  display: inline-block;
  white-space: nowrap;
}

.supp-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.supp-icon {
  font-size: 24px;
  line-height: 1;
  flex: none;
}

.supp-title-box {
  min-width: 0;
  flex: 1;
}

.supp-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}

.supp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

.supp-grade,
.supp-cat {
  font-size: 10.5px;
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
}

.supp-cat {
  color: var(--muted);
  background: var(--surface-2);
}

.supp-grade-strong {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.14);
}

.supp-grade-moderate {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.14);
}

.supp-grade-limited {
  color: var(--muted);
  background: var(--surface-2);
}

.supp-body {
  font-size: 12.5px;
  line-height: 1.8;
}

.supp-row-label {
  color: var(--muted);
  font-weight: 700;
}

.supp-care {
  font-size: 12px;
  line-height: 1.75;
  color: var(--muted);
  border-top: 1px dashed var(--line);
  margin: 8px 0 0;
  padding-top: 8px;
}

.card button.supp-add-btn {
  width: 100%;
  margin-top: 10px;
  padding: 9px;
  font-size: 13px;
}

.card button.supp-add-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

/* ---- خطة المكملات (عند المدرب وعند العميل) ---- */

.supp-plan-list {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
}

.card li.supp-plan-item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  cursor: default;
}

.card li.supp-plan-item:active {
  transform: none;
}

.supp-plan-info {
  flex: 1;
  min-width: 0;
}

.card .supp-plan-info input.supp-input {
  width: 100%;
  margin: 6px 0 0;
  padding: 7px 9px;
  font-size: 12.5px;
}

.supp-plan-detail {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.7;
}

.supp-plan-note {
  font-size: 12.5px;
  margin-top: 4px;
  line-height: 1.7;
}

.card button.supp-del-btn {
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  flex: none;
  font-size: 14px;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
}

/* ============ خانات التخصص (chips) ============ */

.specialty-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 5px;
}

.card .specialty-chips span.specialty-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.28);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

.card .specialty-chips span.specialty-chip-admin {
  color: var(--muted);
  background: var(--surface-2);
  border-color: var(--line);
}

.specialty-chip-icon {
  font-size: 12px;
  line-height: 1;
}

/* ============ التحقق من رقم الموبايل ============ */

.phone-hint {
  font-size: 11.5px;
  line-height: 1.6;
  margin: -6px 0 10px;
  min-height: 1px;
}

.phone-hint-ok { color: var(--brand); }
.phone-hint-bad { color: #ef4444; }

.card input.field-error {
  border-color: #ef4444;
}

/* ============ رسايل التواصل من الصفحة الرئيسية ============ */

.lead-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.lead-link {
  color: var(--brand);
  text-decoration: none;
  font-size: 12.5px;
  white-space: nowrap;
}

.lead-new-badge {
  font-size: 10px;
  color: #fff;
  background: #ef4444;
  border-radius: 999px;
  padding: 2px 8px;
  margin-inline-start: 8px;
}

.card button.lead-accept-btn {
  width: 100%;
  margin-top: 8px;
  padding: 9px;
  font-size: 13px;
}

.card button.lead-accept-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.lead-accepted-note {
  color: var(--brand);
  margin-top: 8px;
  font-weight: 700;
}

/* ============ التقرير اليومي ============ */

.report-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.report-tile {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
}

.report-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--brand);
  line-height: 1.2;
}

.report-label {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
}

.report-alert {
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--warn, #fbbf24);
}

.report-all-clear {
  font-size: 12.5px;
  color: var(--brand);
  margin: 0 0 8px;
}

@media (max-width: 360px) {
  .report-grid { grid-template-columns: repeat(2, 1fr); }
}

/* تخصص مقفول على الحساب (زي "مدرب" لصاحب المنصة) */
.specialty-check-locked {
  opacity: 0.85;
}

.specialty-check-locked input {
  cursor: not-allowed;
}

.specialty-lock {
  font-size: 10px;
  margin-inline-start: 3px;
}

/* ============ اعتماد التخصصات وفتح/قفل المكتبات ============ */

.pending-note {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--warn, #fbbf24);
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 10px;
  padding: 9px 11px;
  margin: 8px 0 0;
}

.pending-box,
.lib-access-box {
  border-top: 1px dashed var(--line);
  margin-top: 10px;
  padding-top: 10px;
}

.pending-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 7px;
}

.pending-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}

.pending-name {
  flex: 1;
  font-size: 13px;
  min-width: 0;
}

.card .pending-row button.pending-ok,
.card .pending-row button.pending-no {
  width: auto;
  flex: none;
  padding: 6px 11px;
  font-size: 12px;
  white-space: nowrap;
}

.card .pending-row button.pending-ok {
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.4);
}

.card .pending-row button.pending-no {
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
}

.lib-access-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.card .lib-access-row button.lib-chip {
  width: auto;
  flex: none;
  padding: 6px 10px;
  font-size: 11.5px;
  border-radius: 999px;
  white-space: nowrap;
}

.card .lib-access-row button.lib-chip-on {
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.4);
  background: rgba(34, 197, 94, 0.1);
}

.card .lib-access-row button.lib-chip-off {
  color: var(--muted);
  border-color: var(--line);
  background: var(--surface-2);
}

/* خانة تخصص/مكتبة مقفولة في بروفايل المتخصص */
.card .specialty-chips span.specialty-chip-off {
  color: var(--muted);
  background: var(--surface-2);
  border-color: var(--line);
}

/* زرار مكتبة مقفولة */
.card button.locked-btn {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ==================== الصفحة الرئيسية — الواجهة الجديدة ==================== */
/*
 * الهدف: أول شاشة فيها حاجة تتشاف مش كلام يتقرا. الموبايل تحت مرسوم
 * بالكامل بالـCSS (مفيش صور ولا ملفات تتحمّل) وبيعرض شكل البرنامج
 * الحقيقي جوه التطبيق وهو بيتبدّل لوحده.
 */

.hero2 {
  text-align: center;
  padding: 6px 0 4px;
}

.hero2-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 999px;
  padding: 5px 13px;
  margin-bottom: 14px;
}

.hero2-title {
  font-size: 30px;
  line-height: 1.3;
  font-weight: 800;
  margin: 0 0 10px;
  letter-spacing: -0.5px;
}

.hero2-sub {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted);
  margin: 0 auto 18px;
  max-width: 330px;
}

.hero2-cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}

.card .hero2-cta button {
  width: 100%;
  margin: 0;
}

.card .hero2-cta button.secondary {
  padding: 11px;
  font-size: 13.5px;
}

/* ---------- الموبايل المرسوم ---------- */

.hero2-phone {
  position: relative;
  width: 236px;
  margin: 0 auto 18px;
  border: 7px solid #1e293b;
  border-radius: 30px;
  background: #0b1220;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(148, 163, 184, 0.14);
  overflow: hidden;
  animation: heroPhoneIn 0.7s ease both;
}

@keyframes heroPhoneIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

.hero2-phone-notch {
  width: 74px;
  height: 5px;
  background: #1e293b;
  border-radius: 999px;
  margin: 7px auto 0;
}

.hero2-phone-screen {
  padding: 12px 13px 15px;
  text-align: start;
}

.hp-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 11px;
}

.hp-avatar {
  font-size: 20px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34, 197, 94, 0.14);
  border-radius: 10px;
  flex: none;
}

.hp-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.hp-sub {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 2px;
}

.hp-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 11px;
  min-height: 132px;
}

.hp-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  background: #131f33;
  border-radius: 8px;
  padding: 7px 9px;
  animation: hpRowIn 0.35s ease both;
}

@keyframes hpRowIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.hp-row-done {
  color: var(--muted);
}

.hp-tick {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border: 1px solid var(--line);
}

.hp-row-done .hp-tick {
  background: var(--brand);
  border-color: var(--brand);
  color: #04120a;
  font-weight: 800;
}

.hp-bar {
  height: 5px;
  background: #131f33;
  border-radius: 999px;
  overflow: hidden;
}

.hp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  border-radius: 999px;
  transition: width 0.7s ease;
}

.hp-foot {
  font-size: 10px;
  color: var(--muted);
  margin-top: 7px;
  text-align: center;
}

/* ---------- شريط الثقة القصير ---------- */

.hero2-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.hero2-trust-item {
  font-size: 11px;
  color: var(--muted);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* ---------- شريط الأرقام ---------- */

.stats2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin: 20px 0 6px;
}

.stat2 {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 4px;
  text-align: center;
}

.stat2-n {
  font-size: 19px;
  font-weight: 800;
  color: var(--brand);
  line-height: 1.1;
}

.stat2-l {
  font-size: 9.5px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.35;
}

.steps-note {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin: -8px 0 12px;
}

/* ---------- زراير فتح الفورمات الطويلة ---------- */

.card button.reveal-btn {
  width: 100%;
  padding: 11px;
  font-size: 13.5px;
  margin-top: 4px;
}

.card button.reveal-btn.reveal-open {
  opacity: 0.7;
}

@media (min-width: 560px) {
  .hero2-cta { flex-direction: row; }
  .hero2-title { font-size: 34px; }
}

/* عناوين فرعية صغيرة جوه قسم "شوف بنفسك" — الويل فوقها بيشرح المكان
   أصلًا، فمحتاجة تبقى إشارة مش عنوان كبير */
.welcome-section-title.mini-title {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  margin: 14px 0 6px;
}

/* بطاقات "ده مناسب لمين؟" بقت أقصر — خليها صف مضغوط */
.welcome-audience-card {
  padding: 10px 11px;
}

.welcome-audience-text {
  font-size: 12.5px;
  line-height: 1.5;
}

/* على الصفحة الرئيسية اللوجو والسطر اللي تحته بيكرروا رسالة الهيرو —
   بنصغّرهم عشان الزائر يوصل للمحتوى أسرع */
body.on-welcome h1 {
  font-size: 30px;
  margin-bottom: 2px;
}

body.on-welcome h1 + p {
  font-size: 11.5px;
  margin-bottom: 10px;
}

/* ضغط بسيط في المسافات على الصفحة الرئيسية — كانت فاضية أكتر من اللازم */
body.on-welcome .welcome-section-title {
  margin: 16px 0 8px;
}

body.on-welcome .welcome-faq-section,
body.on-welcome .welcome-audience-section,
body.on-welcome .welcome-team-section {
  margin-top: 6px;
}

.wp-detail-line {
  line-height: 1.6;
}

/* ==================== شريط الفريق المرسوم ==================== */

.team-strip {
  margin: 22px 0 6px;
}

.team-strip-title {
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 14px;
}

.team-strip-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.team-fig {
  text-align: center;
  animation: teamFigIn 0.5s ease both;
}

@keyframes teamFigIn {
  from { opacity: 0; transform: translateY(12px) scale(0.9); }
  to   { opacity: 1; transform: none; }
}

.team-fig-svg {
  width: 100%;
  max-width: 68px;
  height: auto;
  display: block;
  margin: 0 auto;
  transition: transform 0.25s ease;
}

.team-fig:hover .team-fig-svg,
.team-fig:active .team-fig-svg {
  transform: translateY(-4px);
}

.team-fig-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  margin-top: 5px;
  line-height: 1.3;
}

@media (min-width: 560px) {
  .team-fig-svg { max-width: 84px; }
  .team-fig-label { font-size: 12px; }
}

/* الشخصية زرار — بنلغي شكل الأزرار العام عشان تفضل رسمة نضيفة */
.card button.team-fig {
  width: auto;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.card button.team-fig:active {
  transform: none;
}

.team-strip-hint {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  margin: 9px 0 0;
}

/* إصلاح: خانة التخصص في كارت الفريق كانت nowrap وعرض الكارت ٩٦ بكسل،
   فاسم زي "أخصائي نفسي رياضي" كان بيطلع بره الخانة */
.welcome-team-specialty.specialty-chips {
  justify-content: center;
}

.card .welcome-team-specialty span.specialty-chip {
  white-space: normal;
  font-size: 9.5px;
  padding: 2px 7px;
  line-height: 1.35;
  max-width: 100%;
}

/* ==================== الكاروسيل الدائري للفريق ==================== */

.orbit {
  position: relative;
  height: 176px;
  margin: 4px 0 0;
}

/* الكشاف اللي ورا الشخصية اللي قدام — بيتلوّن بلونها */
.orbit-glow {
  position: absolute;
  left: 50%;
  top: 62%;
  width: 190px;
  height: 190px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  transition: background 0.6s ease;
  filter: blur(4px);
}

.orbit-stage {
  position: absolute;
  inset: 0;
}

.card button.orbit-fig {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92px;
  height: 92px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 0.75s cubic-bezier(.22,.9,.3,1), opacity 0.6s ease, filter 0.6s ease;
  will-change: transform, opacity;
}

.card button.orbit-fig:active {
  transform: translate(-50%, -50%) scale(0.96);
}

.orbit-fig .team-fig-svg {
  width: 100%;
  max-width: none;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
}

.orbit-fig.orbit-front .team-fig-svg {
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.6)) brightness(1.08);
}

.orbit-caption {
  text-align: center;
  min-height: 46px;
  margin-top: 2px;
}

.orbit-role {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  transition: color 0.4s ease;
}

.orbit-line {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 2px;
  animation: orbitLineIn 0.5s ease;
}

@keyframes orbitLineIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

.orbit-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.card button.orbit-dot {
  width: 7px;
  height: 7px;
  min-width: 7px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: none;
  background: var(--line);
  transition: width 0.3s ease, background 0.3s ease;
  cursor: pointer;
}

.card button.orbit-dot.active {
  width: 20px;
  border-radius: 999px;
}

.card button.orbit-dot:active {
  transform: none;
}

@media (min-width: 560px) {
  .orbit { height: 216px; }
  .card button.orbit-fig { width: 106px; height: 106px; }
}

@media (prefers-reduced-motion: reduce) {
  .card button.orbit-fig { transition: none; }
  .orbit-line { animation: none; }
}

/* ظهور متدرّج وقت التمرير */
.reveal-me {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-me.revealed {
  opacity: 1;
  transform: none;
}

/* بطاقات "ده مناسب لمين؟" — أيقونة كبيرة ملوّنة وكلام قليل */
.welcome-audience-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.welcome-audience-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 10px;
}

.welcome-audience-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  flex: none;
}

.welcome-audience-icon .ui-icon {
  width: 22px;
  height: 22px;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-me { opacity: 1; transform: none; transition: none; }
}

/* الخطوات التلاتة: كانت ٣ كروت فوق بعض بتاخد ٢٨٥ بكسل — بقت صف
   واحد مضغوط. نفس المعلومة في ثلث المساحة */
.welcome-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.welcome-step {
  text-align: center;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 12px 7px;
}

.welcome-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--brand);
  color: #04120a;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 6px;
}

.welcome-step-title {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 3px;
}

.welcome-step-text {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--muted);
}

.orbit { height: 178px; }

@media (min-width: 560px) {
  .welcome-step-title { font-size: 13.5px; }
  .welcome-step-text { font-size: 12px; }
}

/* ==================== كروت متراصّة (كوتشينة / إشعارات) ==================== */

.deck {
  --deck-h: 138px;
  --deck-open-h: 232px;
  /* مهم: الكروت جواها position:absolute فلازم الحاوية تكون مرجعهم */
  position: relative;
  min-height: var(--deck-h);
  transition: min-height 0.35s ease;
  user-select: none;
  cursor: grab;
}

.deck:active {
  cursor: grabbing;
}

.deck-card {
  position: absolute;
  inset: 0;
  height: fit-content;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  transition: transform 0.4s cubic-bezier(.2,.9,.3,1), opacity 0.35s ease, box-shadow 0.3s ease;
  will-change: transform, opacity;
}

.deck-card.deck-front {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
  border-color: rgba(148, 163, 184, 0.3);
}

/* ---- كارت "ده مناسب لمين؟" ---- */

.aud-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 22px 18px;
}

.aud-icon {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
}

.aud-text {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.6;
}

/* ---- كارت الإشعار (الأسئلة الشائعة) ---- */

.notif-stack {
  --deck-h: 118px;
  --deck-open-h: 250px;
}

.notif-card {
  padding: 14px 15px;
}

.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.notif-app {
  font-size: 11px;
  font-weight: 800;
  color: var(--brand);
  letter-spacing: 0.5px;
}

.notif-time {
  font-size: 10px;
  color: var(--muted);
}

.notif-q {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.6;
}

/* الإجابة مقفولة لحد ما يدوس على الكارت */
.notif-a {
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--muted);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

.deck-card.deck-open .notif-a {
  max-height: 200px;
  opacity: 1;
  margin-top: 9px;
}

/* ---- أسهم ونقط التنقل ---- */

.deck-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}

.card button.deck-arrow {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--muted);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.deck-dots {
  display: flex;
  gap: 6px;
}

.card button.deck-dot {
  width: 7px;
  height: 7px;
  min-width: 7px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: var(--line);
  transition: width 0.3s ease, background 0.3s ease;
  cursor: pointer;
}

.card button.deck-dot.active {
  width: 20px;
  border-radius: 999px;
  background: var(--brand);
}

.card button.deck-dot:active,
.card button.deck-arrow:active {
  transform: none;
}

.deck-hint {
  text-align: center;
  font-size: 11px;
  color: var(--muted);
  margin: 8px 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .deck-card { transition: none; }
  .notif-a { transition: none; }
}

/* ==================== صفحات التخصص تحت الكاروسيل ==================== */
/*
 * كل تخصص وصفحته، فوق بعض زي ورق. لما تدوس على تخصص في الكاروسيل
 * (أو تسيبه يلف لوحده) الصفحة بتاعته بتتقلب لقدام. ده بقى مكان تلات
 * أقسام كانت منفصلة، فالمساحة والكلام اتقلّوا والزائر بقى بيتفرّج.
 */
.specpages {
  position: relative;
  min-height: 236px;
  margin-top: 16px;
  transition: min-height 0.4s ease;
}

.specpage {
  position: absolute;
  inset-inline: 0;
  top: 0;
  /* الارتفاع بيتحسب من محتوى الصفحة اللي قدام (في الجافاسكريبت)،
     فمفيش قص ولا فراغ زيادة */
  height: auto;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 15px 16px;
  transition: transform 0.45s cubic-bezier(.2,.9,.3,1), opacity 0.4s ease, box-shadow 0.3s ease;
  will-change: transform, opacity;
}

.specpage.specpage-front {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42);
  border-color: rgba(148, 163, 184, 0.3);
}

.specpage-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.specpage-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.spd-training  { background: #22c55e; }
.spd-rehab     { background: #f97316; }
.spd-nutrition { background: #38bdf8; }
.spd-medical   { background: #a78bfa; }

.specpage-title {
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.4;
}

.specpage-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.specpage-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  background: var(--surface-2);
  border-radius: 9px;
  padding: 8px 10px;
  animation: specRowIn 0.4s ease both;
}

@keyframes specRowIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.specpage-tick {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  border: 1.5px solid var(--brand);
  flex: none;
}

.specpage-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.specpage-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 9px;
}

.specpage-chip .ui-icon {
  width: 12px;
  height: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .specpage { transition: none; }
  .specpage-row { animation: none; }
}

/* الصفحة اللي ورا بتبان كحافة ورقة بس — كلامها بيتخفي عشان ما يبانش
   مركّب على كلام الصفحة اللي قدام أثناء التبديل */
.specpage:not(.specpage-front) > * {
  visibility: hidden;
}

.deck-card:not(.deck-front) > * {
  visibility: hidden;
}

/* ---------- الخطوات التلاتة: رحلة بصور ---------- */

.welcome-steps.journey {
  position: relative;
}

/* الخط اللي بيوصل الخطوات ببعض */
.welcome-steps.journey::before {
  content: '';
  position: absolute;
  top: 38px;
  left: 16%;
  right: 16%;
  height: 2px;
  background-image: linear-gradient(90deg, var(--line) 55%, transparent 0);
  background-size: 9px 2px;
  z-index: 0;
}

.journey .welcome-step {
  position: relative;
  z-index: 1;
  background: transparent;
  border: none;
  padding: 6px 4px;
}

.step-art-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 7px;
}

.step-art {
  width: 54px;
  height: 54px;
  display: block;
  background: var(--field);
  border-radius: 16px;
  padding: 4px;
}

.journey .welcome-step-num {
  position: absolute;
  top: -5px;
  inset-inline-end: -5px;
  width: 20px;
  height: 20px;
  margin: 0;
  font-size: 11px;
  border: 2px solid var(--bg);
}

.journey .welcome-step-title {
  font-size: 11.5px;
}

.journey .welcome-step-text {
  font-size: 10px;
}

@media (min-width: 560px) {
  .step-art { width: 64px; height: 64px; }
  .welcome-steps.journey::before { top: 44px; }
}

/* ==================== الشريط العريض في الهيرو ==================== */
/*
 * بيخرج برا حدود الكارت عشان يمتد بعرض الشاشة كلها — الهوامش
 * السالبة بتلغي بادينج الكارت مهما كان.
 */
.hero-band {
  position: relative;
  /* أكبر شوية — ده أهم عنصر بصري في الهيرو */
  /* بادينج الكارت 20px، فبنطلع بره بيهم عشان الشريط يلمس حافة
     الكارت من الجهتين */
  margin: 16px -20px 14px;
  height: 118px;
}

.hero-band-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-band-nodes {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  padding-top: 32px;
}

.card button.band-node {
  width: auto;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.card button.band-node:active {
  transform: scale(0.94);
}

.band-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

.band-dot svg {
  width: 23px;
  height: 23px;
  stroke-width: 1.6;
}

.band-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

@media (min-width: 560px) {
  .hero-band { height: 132px; }
  .band-dot { width: 46px; height: 46px; }
  .band-dot svg { width: 24px; height: 24px; }
  .band-label { font-size: 11.5px; }
}

/* المحطة المنوّرة في الشريط */
.band-node-on .band-dot {
  transform: scale(1.18);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06), 0 6px 18px rgba(0, 0, 0, 0.5);
}

.band-dot {
  transition: transform 0.45s cubic-bezier(.2,.9,.3,1), box-shadow 0.45s ease;
}

.band-node-on .band-label {
  color: #e2e8f0;
}

@media (prefers-reduced-motion: reduce) {
  .hero-live-in { animation: none; }
  .band-dot { transition: none; }
}

/* ---------- الموبايل: تكبير وتلوين حسب التخصص ---------- */

.hero2-phone {
  width: 252px;
  transition: border-color 0.5s ease;
}

.hero-live-in {
  animation: heroLiveIn 0.5s ease;
}

@keyframes heroLiveIn {
  from { opacity: 0.4; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}

/* شريط علوي جوه الشاشة: شارة التخصص + نقط زينة */
.hp-statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}

.hp-chip {
  font-size: 9px;
  font-weight: 800;
  border: 1px solid;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  transition: color 0.4s ease, background 0.4s ease, border-color 0.4s ease;
}

.hp-dots {
  display: flex;
  gap: 3px;
}

.hp-dots i {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: var(--line);
}

.hp-titles {
  min-width: 0;
}

.hp-rows {
  min-height: 124px;
}

.hp-row {
  font-size: 10.5px;
  padding: 6px 8px;
}

/* ---------- تضييق المسافات في أول الصفحة ---------- */
/*
 * الشاشة الصغيرة كانت نازلة تحت أوي (بتبدأ عند 517 بكسل) فالزائر
 * كان لازم ينزل عشان يشوفها كاملة. ضيّقنا المسافات اللي فوقها كلها
 * وطوّلناها، فبقت تبان كاملة في أول شاشة.
 */
body.on-welcome {
  padding-top: 18px;
}

body.on-welcome .card {
  margin-top: 14px;
}

body.on-welcome .hero2-badge {
  margin-bottom: 9px;
}

body.on-welcome .hero2-title {
  margin-bottom: 10px;
}

body.on-welcome .hero2-sub {
  margin-bottom: 8px;
}

body.on-welcome .hero-band {
  margin-top: 8px;
  margin-bottom: 8px;
}

body.on-welcome .hero2-cta {
  margin-bottom: 14px;
}

/* الشاشة نفسها بقت أطول */
.hp-rows {
  min-height: 152px;
}

/* ---------- خلفية الهيرو حسب التخصص ---------- */
/*
 * طبقة ورا محتوى الهيرو كله، بتتغيّر مع التخصص النشط: ألياف عضلية
 * للتدريب، أقواس مفصل للتأهيل، حبوب للتغذية، نبض للطب، موجات للنفسي،
 * أعمدة صاعدة للمتابعة. خفيفة جدًا عشان ما تلخبطش القراءة.
 */
.hero2 {
  position: relative;
}

.hero-bg {
  position: absolute;
  top: -26px;
  inset-inline: -20px;
  bottom: -10px;
  z-index: 0;
  /* قوية كفاية تدّي طابع، وخفيفة كفاية ما تلخبطش القراءة */
  opacity: 0.15;
  pointer-events: none;
  overflow: hidden;
  border-radius: 20px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 52%, transparent 86%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 52%, transparent 86%);
}

.hero-bg svg {
  display: block;
}

.hero-bg-in {
  animation: heroBgIn 0.7s ease;
}

@keyframes heroBgIn {
  from { opacity: 0; transform: scale(1.05); }
  to   { opacity: 0.15; transform: none; }
}

/* المحتوى فوق الخلفية */
.hero2 > *:not(.hero-bg) {
  position: relative;
  z-index: 1;
}

/* ست محطات بدل أربعة — مسافات أضيق */
.hero-band-nodes {
  grid-template-columns: repeat(6, 1fr);
}

.band-dot {
  width: 38px;
  height: 38px;
}

.band-dot svg {
  width: 21px;
  height: 21px;
}

.band-label {
  font-size: 9px;
}

@media (min-width: 560px) {
  .band-dot { width: 46px; height: 46px; }
  .band-dot svg { width: 25px; height: 25px; }
  .band-label { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bg-in { animation: none; }
}

/* ==================== صفحة التسجيل ==================== */

#onboarding-screen {
  position: relative;
}

/* خلفية بتترقّى مع تقدّم الزائر في الاستمارة */
.ob-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.11;
  pointer-events: none;
  overflow: hidden;
  border-radius: 20px;
  mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 35%, transparent 72%);
}

.ob-bg-in {
  animation: obBgIn 0.8s ease;
}

@keyframes obBgIn {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 0.11; transform: none; }
}

#onboarding-screen > *:not(.ob-bg) {
  position: relative;
  z-index: 1;
}

.ob-head {
  text-align: center;
  margin-bottom: 18px;
}

.ob-head h2 {
  margin-bottom: 4px;
}

.ob-lead {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0 0 12px;
}

.ob-progress {
  height: 6px;
  background: var(--field);
  border-radius: 999px;
  overflow: hidden;
}

.ob-progress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  transition: width 0.45s cubic-bezier(.2,.9,.3,1);
}

.ob-progress-note {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  min-height: 14px;
}

/* ---------- كروت نوع الجسم ---------- */

.body-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}

.card button.body-type {
  width: auto;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  background: var(--field);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 12px 7px 11px;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s ease;
}

.card button.body-type.active {
  border-color: var(--brand);
  background: rgba(34, 197, 94, 0.1);
}

.card button.body-type:active {
  transform: scale(0.97);
}

.body-type svg {
  width: 100%;
  max-width: 54px;
  height: auto;
}

.body-type-name {
  font-size: 12.5px;
  font-weight: 800;
  color: #e2e8f0;
}

.body-type-note {
  font-size: 9.5px;
  line-height: 1.45;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .ob-bg-in { animation: none; }
  .ob-progress-fill { transition: none; }
}

/* ============================================================
   شاشة العميل — الشكل الجديد
   شريط الأسبوع، كارت الجلسة، كروت التمارين، كارت الوقود
   ============================================================ */

/* ---------- كارت الجلسة ---------- */

.sess-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(140deg, rgba(34, 197, 94, .1), rgba(15, 23, 42, 0) 62%), var(--field);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 16px 16px 14px 16px;
  margin-bottom: 14px;
}

.sess-card.is-rest {
  background: linear-gradient(140deg, rgba(148, 163, 184, .1), rgba(15, 23, 42, 0) 62%), var(--field);
}

.sess-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sess-ring-wrap {
  position: relative;
  flex: none;
  width: 76px;
  height: 76px;
}

.sess-ring {
  width: 76px;
  height: 76px;
  transform: rotate(-90deg);
}

.sess-ring .sr-bg {
  fill: none;
  stroke: rgba(255, 255, 255, .07);
  stroke-width: 7;
}

.sess-ring .sr-fg {
  fill: none;
  stroke: var(--brand);
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset .5s cubic-bezier(.4, 0, .2, 1);
}

.sess-ring .sr-fg.full {
  stroke: #fbbf24;
}

.sess-ring-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.5px;
}

.sess-ring-pct.full { color: #fbbf24; }

.sess-info {
  min-width: 0;
  flex: 1 1 auto;
}

.sess-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .4px;
  color: var(--brand);
  background: rgba(34, 197, 94, .13);
  border: 1px solid rgba(34, 197, 94, .3);
  border-radius: 999px;
  padding: 3px 9px;
  margin-bottom: 6px;
}

.sess-badge.muted {
  color: var(--muted);
  background: rgba(148, 163, 184, .1);
  border-color: rgba(148, 163, 184, .25);
}

.sess-badge:empty { display: none; }

.sess-info h2 {
  margin: 0 0 3px 0 !important;
  font-size: 19px;
  line-height: 1.25;
}

.sess-info .progress {
  margin: 0 !important;
  font-size: 12.5px;
  color: var(--muted);
}

.sess-stats {
  display: flex;
  gap: 7px;
  margin-top: 13px;
}

.sess-stats:empty { display: none; }

.sess-stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 4px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.sess-stat .inline-icon { color: var(--brand); }
.sess-stat .ui-icon { width: 15px; height: 15px; }

.sess-stat strong {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.1;
}

.sess-stat-label {
  font-size: 9.5px;
  color: var(--muted);
}

.sess-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}

.sess-foot:empty { display: none; }

.sess-foot .day-volume {
  margin: 0 !important;
  font-size: 10.5px;
  color: var(--muted);
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
}

.sess-foot .day-volume:empty { display: none; }

/* ---------- كروت التمارين ---------- */

.section-block.sec-warmup,
.section-block.sec-main,
.section-block.sec-cardio,
.section-block.sec-mobility,
.section-block.sec-flexibility {
  border-inline-start: 3px solid var(--sec, var(--brand));
}

.section-block .section-name .inline-icon { color: var(--sec, var(--brand)); }

.card li.exc-card {
  list-style: none;
  display: block;
  padding: 11px;
  margin-bottom: 8px;
  background: var(--surface) !important;
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color .2s ease, background .2s ease, opacity .2s ease;
}

.card li.exc-card:last-child { margin-bottom: 0; }

.card li.exc-card.done {
  border-color: rgba(34, 197, 94, .4);
  background: rgba(34, 197, 94, .07) !important;
}

.card li.exc-card.done .exc-name {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: rgba(34, 197, 94, .55);
}

/* الشطب على اسم التمرين بس — الشرايط والأزرار تفضل مقروءة */
.card li.exc-card.done > div {
  text-decoration: none;
}

.exc-main {
  display: flex;
  align-items: center;
  gap: 11px;
}

.exc-media {
  position: relative;
  flex: none;
  width: 62px;
  height: 62px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, .035);
}

.exc-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #fff;
}

.exc-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exc-fallback svg {
  width: 26px;
  height: 26px;
}

.exc-num {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: rgba(2, 6, 18, .72);
  border-end-end-radius: 8px;
}

.exc-info {
  flex: 1 1 auto;
  min-width: 0;
}

.exc-name {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}

.exc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.exc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  white-space: nowrap;
}

.exc-chip.primary {
  color: var(--sec, var(--brand));
  border-color: color-mix(in srgb, var(--sec, #22c55e) 38%, transparent);
  background: color-mix(in srgb, var(--sec, #22c55e) 12%, transparent);
}

.exc-chip .ui-icon { width: 12px; height: 12px; }

.exc-check {
  flex: none;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  border: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.exc-check svg { width: 14px; height: 14px; }

.exc-check.on {
  background: var(--brand);
  border-color: var(--brand);
  color: #04130a;
}

.card li.exc-card .log-actual-btn {
  margin-top: 10px;
}

.card li.exc-card .actual-summary:empty { display: none; }

/* ---------- كروت الحالة (راحة / فاضي) ---------- */

.state-card {
  text-align: center;
  padding: 30px 20px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.state-art {
  width: 62px;
  height: 62px;
  margin: 0 auto 12px auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
  background: rgba(34, 197, 94, .1);
}

.state-rest .state-art {
  color: #a5b4fc;
  background: rgba(129, 140, 248, .11);
}

.state-art svg { width: 32px; height: 32px; }

.state-title {
  font-size: 16.5px;
  font-weight: 800;
  margin-bottom: 5px;
}

.state-text {
  margin: 0 !important;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
}

/* ---------- التغذية: كارت الوقود ---------- */

#cnut-totals { display: none; }

.fuel-card {
  background: linear-gradient(140deg, rgba(56, 189, 248, .08), rgba(15, 23, 42, 0) 62%), var(--field);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 16px 16px 16px;
  margin-bottom: 14px;
}

.fuel-card:empty { display: none; }

.fuel-arc-wrap {
  position: relative;
  width: 148px;
  height: 148px;
  margin: 0 auto 6px auto;
}

.fuel-arc {
  width: 148px;
  height: 148px;
  /* بداية القوس من تحت الشمال عشان الفتحة تبقى تحت */
  transform: rotate(135deg);
  transform-origin: 50% 50%;
  transform-box: view-box;
}

.fuel-arc .fa-bg {
  fill: none;
  stroke: rgba(255, 255, 255, .06);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 245 327;
}

.fuel-arc .fa-fg {
  fill: none;
  stroke: var(--brand);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset .6s cubic-bezier(.4, 0, .2, 1);
}

.fuel-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.fuel-kcal {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -1px;
}

.fuel-unit {
  font-size: 11px;
  color: var(--muted);
}

.fuel-macros {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 6px;
}

.fm-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 5px;
}

.fm-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--m, var(--brand));
}

.fm-num {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}

.fm-bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .055);
  overflow: hidden;
}

.fm-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--m, var(--brand));
  transition: width .5s cubic-bezier(.4, 0, .2, 1);
}

.fm-bar > span.over { background: #ef4444; }

/* ---------- وجبات العميل: شكل أوضح ---------- */

#cnut-meals .meal-block {
  border-radius: 16px;
  padding: 14px;
}

#cnut-meals .meal-block li {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid var(--line);
  margin-bottom: 7px;
}

#cnut-meals .meal-block li:last-child { margin-bottom: 0; }

#cnut-meals .meal-food-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
  font-size: 19px;
  margin-inline-end: 10px;
}

#cnut-meals .meal-kcal {
  background: rgba(34, 197, 94, .12);
  border: 1px solid rgba(34, 197, 94, .3);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 10.5px;
}

@media (max-width: 380px) {
  .sess-stat strong { font-size: 14px; }
  .exc-media { width: 54px; height: 54px; }
  .fuel-arc-wrap, .fuel-arc { width: 132px; height: 132px; }
  .fuel-kcal { font-size: 28px; }
}

/* ============================================================
   شريط إنجاز الأسبوع + السبحة + وضع التمرين الحالي
   ============================================================ */

/* ---------- شريط إنجاز الأسبوع ---------- */

.week-streak {
  margin: -2px 0 14px 0;
  padding: 11px 10px 9px 10px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.ws-dots {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

.card button.ws-dot {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  box-shadow: none;
}

.ws-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.6px solid rgba(255, 255, 255, .13);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.ws-mark svg { width: 12px; height: 12px; }

.ws-dot.on .ws-mark {
  background: var(--brand);
  border-color: var(--brand);
  color: #04130a;
}

.ws-dot.missed .ws-mark {
  border-style: dashed;
  border-color: rgba(148, 163, 184, .4);
}

.ws-dot.off .ws-mark {
  border-color: rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .02);
}

.ws-dot.today .ws-mark {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .16);
}

.ws-dot.sel .ws-label { color: var(--ink); }

.ws-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1;
}

.ws-note {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
}

.ws-note.all-done { color: var(--brand); font-weight: 700; }

/* ---------- السبحة ---------- */

.beads {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.beads:empty { display: none; }

.beads button.bead {
  width: 30px;
  height: 30px;
  min-width: 30px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .03);
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}

.beads button.bead:active { transform: scale(.9); }

.beads button.bead.on {
  background: var(--sec, var(--brand));
  border-color: var(--sec, var(--brand));
  color: #04130a;
}

.beads button.bead.next {
  border-color: var(--sec, var(--brand));
  border-style: dashed;
  color: var(--sec, var(--brand));
}

.beads-lg { gap: 10px; justify-content: center; margin-top: 4px; }

.beads-lg button.bead {
  width: 46px;
  height: 46px;
  min-width: 46px;
  font-size: 15px;
  border-width: 2.5px;
}

.beads-note {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}

.beads-note.all-done { color: var(--brand); font-weight: 700; }

/* ---------- زرار ابدأ التمرين ---------- */

.card button.start-session-btn {
  width: 100%;
  margin: 13px 0 0 0;
  padding: 13px;
  border-radius: 13px;
  font-size: 15px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #04130a;
  border: none;
}

/* ---------- شريط الأدوات المطوي ---------- */

.card button.fab-toggle {
  position: fixed;
  inset-inline-end: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  z-index: 62;
  width: 46px;
  height: 46px;
  min-width: 46px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-2, #16213a);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}

.fab-toggle .fab-toggle-close { display: none; }
.fab-toggle.is-open .fab-toggle-open { display: none; }
.fab-toggle.is-open .fab-toggle-close { display: block; }

.fab-icon-row.is-collapsed {
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
}

.fab-icon-row {
  transition: opacity .2s ease, transform .2s ease;
  padding-inline-end: 68px;
}

/* ---------- وضع التمرين الحالي ---------- */

body.focus-open { overflow: hidden; }

.focus {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--sec, #22c55e) 16%, transparent), transparent 70%),
    var(--bg);
}

.focus-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 10px 14px;
}

.card button.focus-close,
.focus-close {
  width: 34px;
  height: 34px;
  min-width: 34px;
  margin: 0;
  padding: 0;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.focus-steps {
  flex: 1 1 auto;
  display: flex;
  gap: 3px;
  min-width: 0;
}

.focus-step {
  flex: 1 1 0;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
}

.focus-step.on { background: var(--sec, var(--brand)); }
.focus-step.cur { background: #fff; }

.focus-count {
  flex: none;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
}

.focus-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 18px 18px 18px;
  text-align: center;
  display: flex;
  flex-direction: column;
}

/*
 * فراغين بيوسّطوا المحتوى رأسيًا لما التمرين قصير، وبيتلموا لوحدهم
 * لما المحتوى يطول فمفيش حاجة بتتقص من فوق
 */
.focus-body::before,
.focus-body::after {
  content: '';
  flex: 1 1 auto;
  min-height: 0;
}

.focus-media {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 4 / 3;
  margin: 0 auto 16px auto;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
}

.focus-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fff;
}

.focus-media .exc-fallback svg { width: 64px; height: 64px; }

.focus-name {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 10px;
}

.focus-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 20px;
}

.beads-wrap {
  padding: 16px 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
  border-radius: 18px;
  margin-bottom: 14px;
}

.card button.focus-log-toggle,
.focus-log-toggle {
  width: 100%;
  margin: 0 0 10px 0;
  padding: 11px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  box-shadow: none;
}

#focus-log-box { text-align: start; }

.focus-nav {
  flex: none;
  display: flex;
  gap: 10px;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px)) 14px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.card button.focus-prev,
.card button.focus-next,
.focus-prev,
.focus-next {
  flex: 1 1 0;
  width: auto;
  margin: 0;
  padding: 14px;
  border-radius: 13px;
  font-size: 15px;
  font-weight: 800;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  color: var(--ink);
  box-shadow: none;
}

.card button.focus-next,
.focus-next {
  border-color: transparent;
  background: rgba(34, 197, 94, .16);
  color: var(--brand);
}

.card button.focus-next.ready,
.focus-next.ready {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #04130a;
}

.card button.focus-prev:disabled,
.focus-prev:disabled {
  opacity: .35;
}

@media (min-height: 760px) {
  .focus-media { max-width: 400px; }
}

/* ============================================================
   حلقة التسجيل — تسجيل الأكل، سبحة المياه، شيت اختيار الصنف
   ============================================================ */

/* ---------- سطر السعرات جوه عدّاد الوقود ---------- */

.fuel-kcal.over { color: #f87171; }

.fuel-line {
  margin-top: 4px;
  font-size: 9.5px;
  color: var(--muted);
  white-space: nowrap;
}

/* ---------- كارت المياه ---------- */

.water-card {
  background: linear-gradient(140deg, rgba(56, 189, 248, .1), rgba(15, 23, 42, 0) 62%), var(--field);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 13px 14px;
  margin-bottom: 14px;
}

.water-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.water-title {
  font-size: 14px;
  font-weight: 700;
}

.water-count {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 700;
}

.water-count.all-done { color: #38bdf8; }

.water-beads { --sec: #38bdf8; }

/* ---------- صفوف الوجبات مع التسجيل ---------- */

#cnut-meals .meal-block li.log-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 11px;
  border-radius: 12px;
  border: 1px solid var(--line);
  margin-bottom: 7px;
  transition: border-color .2s ease, background .2s ease;
}

#cnut-meals .meal-block li.log-row.eaten {
  border-color: rgba(34, 197, 94, .38);
  background: rgba(34, 197, 94, .07) !important;
}

#cnut-meals .meal-block li.log-row.is-extra {
  border-style: dashed;
  border-color: rgba(56, 189, 248, .4);
  background: rgba(56, 189, 248, .06) !important;
}

.log-info {
  flex: 1 1 auto;
  min-width: 0;
}

.log-name {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.extra-badge {
  font-size: 9px;
  font-weight: 800;
  color: #38bdf8;
  background: rgba(56, 189, 248, .14);
  border: 1px solid rgba(56, 189, 248, .32);
  border-radius: 999px;
  padding: 2px 7px;
}

.card button.log-check,
.card button.log-remove,
.log-check,
.log-remove {
  flex: none;
  width: 30px;
  height: 30px;
  min-width: 30px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.card button.log-check,
.log-check {
  border: 2px solid var(--line);
  background: transparent;
  color: transparent;
}

.log-check svg { width: 14px; height: 14px; }

.card button.log-check.on,
.log-check.on {
  background: var(--brand);
  border-color: var(--brand);
  color: #04130a;
}

.card button.log-remove,
.log-remove {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
}

.log-remove svg { width: 13px; height: 13px; }

.card button.add-food-btn,
.add-food-btn {
  width: 100%;
  margin: 9px 0 0 0;
  padding: 10px;
  border-radius: 11px;
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: none;
}

.meal-kcal.has-log { color: var(--brand); }

/* ---------- شيت اختيار الصنف ---------- */

.picker {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: flex-end;
  background: rgba(2, 6, 18, .72);
}

.picker-sheet {
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-start-start-radius: 22px;
  border-start-end-radius: 22px;
  border-top: 1px solid var(--line);
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px)) 14px;
  box-sizing: border-box;
}

.picker-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.picker-title {
  font-size: 16px;
  font-weight: 800;
}

.picker-close {
  width: 32px;
  height: 32px;
  min-width: 32px;
  margin: 0;
  padding: 0;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

#picker-search { margin-bottom: 10px !important; }

.picker-chips {
  flex: none;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 10px;
}

.picker-chips::-webkit-scrollbar { display: none; }

.picker-chip {
  flex: 0 0 auto;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: none;
}

.picker-chip.active {
  background: rgba(34, 197, 94, .14);
  border-color: rgba(34, 197, 94, .4);
  color: var(--brand);
}

.picker-list {
  flex: 1 1 auto;
  overflow-y: auto;
  margin: 0 !important;
  padding: 0;
  list-style: none;
  min-height: 120px;
}

.picker-list li.picker-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 11px;
  margin-bottom: 6px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--field);
  cursor: pointer;
}

.picker-list .meal-food-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .045);
  font-size: 18px;
  margin-inline-end: 10px;
  flex: none;
}

.picker-empty {
  list-style: none;
  padding: 24px 8px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}

.picker-amount {
  flex: none;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.pa-name {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 9px;
}

.pa-units {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 11px;
}

.pa-chip {
  flex: 0 0 auto;
  margin: 0;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: none;
}

.pa-chip.active {
  background: rgba(34, 197, 94, .14);
  border-color: rgba(34, 197, 94, .4);
  color: var(--brand);
}

/* عدّاد الكمية — ناقص ورقم وزائد، أكبر حاجة تتداس بالصباع */
.pa-step {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 8px;
}

.card button.pa-step-btn,
.pa-step-btn {
  flex: none;
  width: 48px;
  min-width: 48px;
  margin: 0;
  padding: 0;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.card button.pa-step-btn:disabled,
.pa-step-btn:disabled { opacity: .3; }

.pa-qty-box {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, .03);
  padding: 6px 10px;
  min-width: 0;
}

#pa-qty {
  width: 64px !important;
  margin: 0 !important;
  padding: 4px !important;
  border: none !important;
  background: transparent !important;
  text-align: center;
  font-size: 22px !important;
  font-weight: 800;
}

.pa-qty-unit {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

.pa-eq {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 6px;
  text-align: center;
}

.pa-eq.approx { color: #fbbf24; }

.pa-macros {
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 11px;
}

.card button.pa-add,
.pa-add {
  width: 100%;
  margin: 0;
  padding: 13px;
  border-radius: 13px;
  border: none;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #04130a;
  font-size: 15px;
  font-weight: 800;
}

/* ============================================================
   لوحة الالتزام — قايمة صباح المدرب
   ============================================================ */

.adh-summary {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}

.adh-stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 6px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.adh-stat strong {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}

.adh-stat span {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
}

.adh-stat.warn strong { color: #fbbf24; }
.adh-stat.good strong { color: var(--brand); }

.adh-filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 12px;
}

.adh-filters::-webkit-scrollbar { display: none; }

.card button.adh-chip,
.adh-chip {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: none;
}

.card button.adh-chip.active,
.adh-chip.active {
  background: rgba(34, 197, 94, .14);
  border-color: rgba(34, 197, 94, .4);
  color: var(--brand);
}

.adh-list {
  margin: 0 !important;
  padding: 0;
  list-style: none;
}

.card li.adh-card {
  list-style: none;
  display: block;
  padding: 14px;
  margin-bottom: 10px;
  background: var(--field) !important;
  border: 1px solid var(--line);
  border-radius: 16px;
  border-inline-start: 3px solid var(--line);
}

.card li.adh-card.state-silent   { border-inline-start-color: #ef4444; }
.card li.adh-card.state-slipping { border-inline-start-color: #fbbf24; }
.card li.adh-card.state-active   { border-inline-start-color: var(--brand); }

.adh-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.adh-name {
  font-size: 15.5px;
  font-weight: 800;
  min-width: 0;
  overflow-wrap: anywhere;
}

.adh-pill {
  flex: none;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  padding: 3px 10px;
  border: 1px solid transparent;
}

.adh-pill.silent {
  color: #f87171;
  background: rgba(239, 68, 68, .12);
  border-color: rgba(239, 68, 68, .3);
}

.adh-pill.slipping {
  color: #fbbf24;
  background: rgba(251, 191, 36, .12);
  border-color: rgba(251, 191, 36, .3);
}

.adh-pill.active {
  color: var(--brand);
  background: rgba(34, 197, 94, .12);
  border-color: rgba(34, 197, 94, .3);
}

.adh-sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 4px;
}

.adh-waiting {
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #93c5fd;
  background: rgba(59, 130, 246, .1);
  border: 1px solid rgba(59, 130, 246, .28);
  border-radius: 10px;
  padding: 7px 10px;
}

.adh-metrics {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 12px;
}

.adh-metric-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.card li.adh-card .adh-metric-head span,
.adh-metric-head span {
  font-size: 11.5px;
  color: var(--muted);
}

.adh-metric-head strong {
  font-size: 11.5px;
  font-weight: 800;
}

.adh-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .055);
  overflow: hidden;
}

.adh-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--brand);
  transition: width .4s ease;
}

.adh-metric.food .adh-bar > span  { background: #38bdf8; }
.adh-metric.water .adh-bar > span { background: #60a5fa; }

.card button.adh-open,
.adh-open {
  width: 100%;
  margin: 12px 0 0 0;
  padding: 10px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  box-shadow: none;
}

.adh-empty {
  list-style: none;
  padding: 28px 12px;
  text-align: center;
  font-size: 13.5px;
  color: var(--muted);
}

/* ============================================================
   الحالات الخاصة — أمراض مزمنة وحمل
   ============================================================ */

/* ---------- شاشة البيانات ---------- */

.health-block {
  margin: 6px 0 18px 0;
  padding: 14px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.health-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 14px;
}

.card button.health-chip,
.health-chip {
  width: auto;
  margin: 0;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: none;
}

.hc-icon { font-size: 14px; line-height: 1; }

.card button.health-chip.active,
.health-chip.active {
  background: rgba(56, 189, 248, .14);
  border-color: rgba(56, 189, 248, .45);
  color: #7dd3fc;
}

.preg-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.card button.preg-toggle,
.preg-toggle {
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  box-shadow: none;
}

.preg-icon { font-size: 18px; line-height: 1; }

.preg-check {
  margin-inline-start: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--line);
  flex: none;
}

.card button.preg-toggle.active,
.preg-toggle.active {
  background: rgba(244, 114, 182, .12);
  border-color: rgba(244, 114, 182, .45);
}

.preg-toggle.active .preg-check {
  background: #f472b6;
  border-color: #f472b6;
}

.preg-week { padding: 2px 2px 0 2px; }

#ob-preg-week { width: 110px !important; }

.preg-tri {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  color: #f9a8d4;
  background: rgba(244, 114, 182, .12);
  border: 1px solid rgba(244, 114, 182, .3);
  border-radius: 999px;
  padding: 4px 11px;
  margin-top: 2px;
}

.health-privacy {
  margin: 12px 0 0 0 !important;
  font-size: 11px;
  line-height: 1.7;
  color: var(--muted);
  background: rgba(255, 255, 255, .025);
  border-radius: 10px;
  padding: 9px 11px;
}

/* ---------- شريط الأمان عند العميل ---------- */

.safety-banner {
  margin-bottom: 14px;
  padding: 13px 14px;
  background: linear-gradient(140deg, rgba(56, 189, 248, .12), rgba(15, 23, 42, 0) 62%), var(--field);
  border: 1px solid rgba(56, 189, 248, .3);
  border-radius: 16px;
}

.safety-banner.waiting {
  background: linear-gradient(140deg, rgba(251, 191, 36, .12), rgba(15, 23, 42, 0) 62%), var(--field);
  border-color: rgba(251, 191, 36, .35);
}

.sb-head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.sb-icon { font-size: 22px; line-height: 1; flex: none; }

.sb-titles { min-width: 0; }

.sb-title {
  font-size: 14px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.sb-sub {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

.card button.sb-open,
.sb-open {
  width: 100%;
  margin: 11px 0 0 0;
  padding: 9px;
  border-radius: 11px;
  border: 1px solid rgba(56, 189, 248, .3);
  background: rgba(56, 189, 248, .1);
  color: #7dd3fc;
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: none;
}

/* ---------- شيت الاحتياطات ---------- */

.safety-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 120px;
}

.safety-item {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.safety-item:last-child { border-bottom: none; }

.si-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15.5px;
  font-weight: 800;
  margin-bottom: 10px;
}

.si-icon { font-size: 18px; line-height: 1; }

.safety-list {
  border-radius: 12px;
  padding: 11px 13px;
  margin-bottom: 9px;
}

.safety-list.care {
  background: rgba(255, 255, 255, .03);
  border: 1px solid var(--line);
}

.safety-list.stop {
  background: rgba(239, 68, 68, .08);
  border: 1px solid rgba(239, 68, 68, .3);
}

.sl-title {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 7px;
}

.safety-list.stop .sl-title { color: #f87171; }

.safety-list ul {
  margin: 0 !important;
  padding-inline-start: 18px;
}

.safety-list li {
  list-style: disc;
  display: list-item;
  background: transparent !important;
  border: none !important;
  padding: 0 0 5px 0 !important;
  margin: 0 !important;
  font-size: 13px;
  line-height: 1.75;
  color: var(--ink);
}

.safety-list.stop li { color: #fca5a5; }

.safety-disclaimer {
  flex: none;
  margin: 10px 0 0 0 !important;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--muted);
}

.clearance-card {
  border-radius: 13px;
  padding: 13px;
  margin-bottom: 16px;
  border: 1px solid rgba(251, 191, 36, .35);
  background: rgba(251, 191, 36, .1);
}

.clearance-card.cleared {
  border-color: rgba(34, 197, 94, .35);
  background: rgba(34, 197, 94, .09);
}

.cc-title {
  font-size: 13.5px;
  font-weight: 800;
  color: #fbbf24;
  margin-bottom: 5px;
}

.clearance-card.cleared .cc-title { color: var(--brand); }

.cc-text {
  margin: 0 !important;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
}

/* ---------- كارت الحالة عند المدرب ---------- */

.coach-health {
  margin: 4px 0 14px 0;
  padding: 14px;
  background: linear-gradient(140deg, rgba(56, 189, 248, .1), rgba(15, 23, 42, 0) 62%), var(--field);
  border: 1px solid rgba(56, 189, 248, .3);
  border-radius: 16px;
}

.coach-health.blocked {
  background: linear-gradient(140deg, rgba(251, 191, 36, .12), rgba(15, 23, 42, 0) 62%), var(--field);
  border-color: rgba(251, 191, 36, .4);
}

.ch-head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.ch-icon { font-size: 22px; line-height: 1; flex: none; }

.ch-names {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ch-pill {
  font-size: 11.5px;
  font-weight: 700;
  color: #7dd3fc;
  background: rgba(56, 189, 248, .12);
  border: 1px solid rgba(56, 189, 248, .3);
  border-radius: 999px;
  padding: 4px 10px;
}

.ch-note {
  margin-top: 11px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
  background: rgba(255, 255, 255, .03);
  border-radius: 10px;
  padding: 9px 11px;
}

.ch-gate {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(251, 191, 36, .35);
  background: rgba(251, 191, 36, .1);
}

.ch-gate.cleared {
  border-color: rgba(34, 197, 94, .35);
  background: rgba(34, 197, 94, .09);
}

.ch-gate-title {
  font-size: 13px;
  font-weight: 800;
  color: #fbbf24;
  margin-bottom: 5px;
}

.ch-gate.cleared .ch-gate-title { color: var(--brand); }

.ch-gate-text {
  margin: 0 0 10px 0 !important;
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
}

.card button.ch-gate-btn,
.ch-gate-btn {
  width: 100%;
  margin: 0;
  padding: 10px;
  border-radius: 11px;
  border: 1px solid rgba(251, 191, 36, .4);
  background: rgba(251, 191, 36, .14);
  color: #fbbf24;
  font-size: 12.5px;
  font-weight: 800;
  box-shadow: none;
}

.card button.ch-open,
.ch-open {
  width: 100%;
  margin: 11px 0 0 0;
  padding: 9px;
  border-radius: 11px;
  border: 1px solid rgba(56, 189, 248, .3);
  background: rgba(56, 189, 248, .1);
  color: #7dd3fc;
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: none;
}

/* ---------- علامة الحالة في لوحة الالتزام ---------- */

.adh-health {
  margin-top: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #7dd3fc;
  background: rgba(56, 189, 248, .1);
  border: 1px solid rgba(56, 189, 248, .28);
  border-radius: 10px;
  padding: 7px 10px;
}

.adh-health.blocked {
  color: #fbbf24;
  background: rgba(251, 191, 36, .1);
  border-color: rgba(251, 191, 36, .3);
}

/* ============================================================
   اختيار الفريق — صور دائرية + بروفايل بالدوس
   ============================================================ */

#team-search { margin-bottom: 14px !important; }

.team-empty {
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  padding: 22px 8px;
}

.team-specialty-section { margin-bottom: 20px; }

.team-spec-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 11px;
}

.team-spec-head h3 {
  margin: 0 !important;
  font-size: 14.5px;
  font-weight: 800;
}

.team-spec-count {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--muted);
  background: rgba(255, 255, 255, .05);
  border-radius: 999px;
  padding: 2px 9px;
}

.avatar-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px 6px 2px;
}

.avatar-row::-webkit-scrollbar { display: none; }

.card button.avatar-pick,
.avatar-pick {
  position: relative;
  flex: 0 0 auto;
  width: 76px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--ink);
}

.ap-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .04);
  border: 2px solid var(--line);
  transition: border-color .2s ease, transform .15s ease;
}

.ap-ring-lg { width: 84px; height: 84px; border-width: 3px; }

.ap-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ap-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  font-weight: 800;
}

.ap-ring-lg .ap-initials { font-size: 28px; }

.avatar-pick:active .ap-ring { transform: scale(.94); }

.avatar-pick.selected .ap-ring {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .2);
}

.avatar-pick.selected::after {
  content: '✓';
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand);
  color: #04130a;
  font-size: 12px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ap-name {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ap-rating {
  font-size: 10px;
  font-weight: 700;
  color: #fbbf24;
  line-height: 1;
}

.ap-badge {
  position: absolute;
  inset-block-start: -2px;
  inset-inline-start: -2px;
  font-size: 8.5px;
  font-weight: 800;
  color: #04130a;
  background: var(--brand);
  border-radius: 999px;
  padding: 2px 6px;
}

.ap-live {
  position: absolute;
  inset-block-start: 46px;
  inset-inline-end: 8px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--surface);
}

.team-picked {
  margin-top: 6px;
  padding: 12px 13px;
  background: rgba(34, 197, 94, .08);
  border: 1px solid rgba(34, 197, 94, .3);
  border-radius: 14px;
}

.tp-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--brand);
  margin-bottom: 8px;
}

.tp-row { display: flex; flex-wrap: wrap; gap: 6px; }

.tp-chip {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
}

/* ---------- شيت البروفايل ---------- */

.ps-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 100px;
}

.ps-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.ps-info { min-width: 0; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }

.ps-name {
  font-size: 18px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.ps-chips { margin-bottom: 14px; }

.ps-numbers {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.ps-num {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 11px 5px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line);
  border-radius: 13px;
}

.ps-num strong { font-size: 19px; font-weight: 800; line-height: 1; }
.ps-num span { font-size: 9.5px; color: var(--muted); }

.ps-bio {
  margin: 0 0 14px 0 !important;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ink);
}

.ps-sec-title {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 5px;
}

.ps-certs p {
  margin: 0 !important;
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
}

.card button.ps-pick,
.ps-pick {
  flex: none;
  width: 100%;
  margin: 12px 0 0 0;
  padding: 14px;
  border-radius: 13px;
  border: none;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #04130a;
  font-size: 15px;
  font-weight: 800;
}

.card button.ps-pick.picked,
.ps-pick.picked {
  background: rgba(239, 68, 68, .14);
  border: 1px solid rgba(239, 68, 68, .35);
  color: #f87171;
}

/* ---------- الترشيح في شاشة البيانات ---------- */

.ref-block {
  margin: 6px 0 18px 0;
  padding: 14px;
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 16px;
}

#ob-ref-search { margin-bottom: 11px !important; }

.ref-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px;
}

.ref-row::-webkit-scrollbar { display: none; }

.ref-picked {
  margin-top: 11px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
  background: rgba(34, 197, 94, .1);
  border: 1px solid rgba(34, 197, 94, .3);
  border-radius: 10px;
  padding: 8px 11px;
}

/* ---------- أرقام المتخصص في لوحة الإدارة ---------- */

.prov-stats {
  display: flex;
  gap: 7px;
  margin: 11px 0 9px 0;
}

.prov-stat {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 4px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.card li .prov-stat strong {
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}

.card li .prov-stat span {
  font-size: 9.5px;
  color: var(--muted);
}

.card li .prov-stat.ref strong { color: #38bdf8; }
.card li .prov-stat.rate strong { color: #fbbf24; }

.card li button.prov-profile-btn,
.prov-profile-btn {
  width: 100%;
  margin: 0 0 4px 0;
  padding: 9px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: none;
}

/* ============================================================
   طلبات الإذن الطبي
   ============================================================ */

.card li.clr-card {
  list-style: none;
  display: block;
  padding: 14px;
  margin-bottom: 10px;
  background: var(--field) !important;
  border: 1px solid var(--line);
  border-radius: 16px;
  border-inline-start: 3px solid var(--line);
}

.card li.clr-card.pending  { border-inline-start-color: #fbbf24; }
.card li.clr-card.done.ok   { border-inline-start-color: var(--brand); }
.card li.clr-card.done.warn { border-inline-start-color: #fbbf24; }
.card li.clr-card.done.bad  { border-inline-start-color: #ef4444; }

.clr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}

.clr-name {
  font-size: 15.5px;
  font-weight: 800;
  min-width: 0;
  overflow-wrap: anywhere;
}

.clr-pill {
  flex: none;
  font-size: 10px;
  font-weight: 800;
  border-radius: 999px;
  padding: 3px 10px;
  border: 1px solid transparent;
}

.clr-pill.pending { color: #fbbf24; background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.3); }
.clr-pill.ok      { color: var(--brand); background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.3); }
.clr-pill.warn    { color: #fbbf24; background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.3); }
.clr-pill.bad     { color: #f87171; background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.3); }

.clr-conds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }

.clr-note {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
  background: rgba(255, 255, 255, .03);
  border-radius: 10px;
  padding: 8px 11px;
  margin-bottom: 9px;
}

.clr-meta {
  font-size: 10.5px;
  color: var(--muted);
  margin-bottom: 10px;
  overflow-wrap: anywhere;
}

.clr-decided {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
  background: rgba(255, 255, 255, .03);
  border-radius: 10px;
  padding: 9px 11px;
}

.clr-decide {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}

.card li .clr-decide textarea {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 9px !important;
  font-size: 13px;
}

.clr-actions { display: flex; gap: 7px; }

.card li button.clr-btn,
.clr-btn {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 11px 6px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  box-shadow: none;
}

.card li button.clr-btn.ok,
.clr-btn.ok   { color: var(--brand); border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.12); }
.card li button.clr-btn.warn,
.clr-btn.warn { color: #fbbf24; border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.12); }
.card li button.clr-btn.bad,
.clr-btn.bad  { color: #f87171; border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.12); }

.clearance-card.restricted { border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.1); }
.clearance-card.denied     { border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.1); }
.clearance-card.denied .cc-title { color: #f87171; }

.ch-gate.restricted { border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.1); }
.ch-gate.denied     { border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.1); }
.ch-gate.denied .ch-gate-title { color: #f87171; }

/* ============================================================
   الدورة الشهرية
   ============================================================ */

.cycle-box {
  margin: 12px 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.cycle-fields { margin-top: 10px; }

#ob-cycle-last, #ob-cycle-len { width: 100% !important; }

.cycle-now {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: #f9a8d4;
  background: rgba(244, 114, 182, .12);
  border: 1px solid rgba(244, 114, 182, .3);
  border-radius: 999px;
  padding: 5px 12px;
  margin-top: 4px;
}

.cycle-card {
  margin-bottom: 14px;
  padding: 14px;
  background: linear-gradient(140deg, rgba(244, 114, 182, .11), rgba(15, 23, 42, 0) 62%), var(--field);
  border: 1px solid rgba(244, 114, 182, .3);
  border-radius: 16px;
}

.cycle-card.phase-follicular {
  background: linear-gradient(140deg, rgba(34, 197, 94, .11), rgba(15, 23, 42, 0) 62%), var(--field);
  border-color: rgba(34, 197, 94, .3);
}

.cycle-card.phase-ovulation {
  background: linear-gradient(140deg, rgba(251, 191, 36, .11), rgba(15, 23, 42, 0) 62%), var(--field);
  border-color: rgba(251, 191, 36, .3);
}

.cycle-card.phase-luteal {
  background: linear-gradient(140deg, rgba(167, 139, 250, .11), rgba(15, 23, 42, 0) 62%), var(--field);
  border-color: rgba(167, 139, 250, .3);
}

.cyc-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 9px;
}

.cyc-icon { font-size: 22px; line-height: 1; flex: none; }

.cyc-phase { font-size: 14.5px; font-weight: 800; }

.cyc-day { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

.cyc-note {
  margin: 0 0 10px 0 !important;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink);
}

.cyc-tips {
  margin: 0 !important;
  padding-inline-start: 18px;
}

.cyc-tips li {
  list-style: disc;
  display: list-item;
  background: transparent !important;
  border: none !important;
  padding: 0 0 4px 0 !important;
  margin: 0 !important;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--muted);
}

.card button.cyc-log,
.cyc-log {
  width: 100%;
  margin: 12px 0 0 0;
  padding: 10px;
  border-radius: 11px;
  border: 1px solid rgba(244, 114, 182, .3);
  background: rgba(244, 114, 182, .1);
  color: #f9a8d4;
  font-size: 12.5px;
  font-weight: 700;
  box-shadow: none;
}

.ch-pill.cyc {
  color: #f9a8d4;
  background: rgba(244, 114, 182, .12);
  border-color: rgba(244, 114, 182, .3);
}

/* ===== ظروف العميل عند المدرب: أيامه ووجباته ونومه ===== */
.cbasics {
  display: grid;
  /* بقت أربع معلومات مع "عرفنا منين" — بتترصّ لوحدها حسب العرض */
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}

.cbasic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 6px;
  border-radius: 14px;
  background: var(--field);
  border: 1px solid var(--line);
  min-width: 0;
  text-align: center;
}

.cbasic.warn {
  background: rgba(240, 173, 78, .14);
  border-color: rgba(240, 173, 78, .4);
}

.cbasic-icon {
  display: inline-flex;
  color: var(--brand);
}

.cbasic-icon .ui-icon {
  width: 21px;
  height: 21px;
}

.cbasic.warn .cbasic-icon { color: #f0ad4e; }

.cbasic-label {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.3;
}

.cbasic-value {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  word-break: break-word;
}

/* ===================================================================
   الصفحة الرئيسية: المحطات الستة أكبر، والموبايل نزل تحتها وكبر
   كانت المحطات ٣٨ بكسل والشاشة ٢٥٢ — صغيرين على الموبايل، والزائر
   بيعدّي عليهم من غير ما يشوف حاجة. دلوقتي المحطات بتكبر مع عرض
   الشاشة، والموبايل بقى أول حاجة تحت الشريط على طول
   =================================================================== */

.hero-band {
  height: 146px;
}

.hero-band-nodes {
  padding-top: 36px;
}

.band-dot {
  width: clamp(44px, 13vw, 58px);
  height: clamp(44px, 13vw, 58px);
  border-width: 2px;
}

.band-dot svg {
  width: 56%;
  height: 56%;
}

.band-label {
  font-size: 10px;
}

@media (min-width: 560px) {
  .hero-band { height: 158px; }
  .band-dot { width: 58px; height: 58px; }
  .band-label { font-size: 12px; }
}

/* الموبايل بقى تحت المحطات على طول، فمحتاج مسافة فوقه */
.hero2-phone {
  width: min(320px, 86%);
  margin-top: 4px;
  margin-bottom: 16px;
}

body.on-welcome .hero-band {
  margin-bottom: 4px;
}

/* الشاشة كبرت، فالسطور جواها تكبر معاها */
.hp-rows {
  min-height: 168px;
}

.hp-row {
  font-size: 12px;
  padding: 8px 10px;
}

.hp-chip {
  font-size: 10.5px;
  padding: 3px 10px;
}

/* ===== عرفتنا منين: شبتشات صغيرة بأيقونة، تسع اختيارات ===== */
.src-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 12px;
}

.card button.src-chip {
  width: auto;
  margin: 0;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--ink);
  font-family: 'Cairo', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
}

.card button.src-chip:active {
  transform: scale(.96);
}

.card button.src-chip.selected {
  border-color: var(--brand);
  background: rgba(34, 197, 94, .14);
}

.src-chip-icon {
  display: inline-flex;
  color: var(--brand);
}

.src-chip-icon .ui-icon {
  width: 16px;
  height: 16px;
}

/* ===================================================================
   شاشة العميل كأبليكيشن: شريط سفلي + رئيسية بمربعات
   =================================================================== */

.appbar {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 2px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 17, 30, .96);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.appbar-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: 'Cairo', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 2px 6px;
  border-radius: 14px;
  cursor: pointer;
  transition: color .15s, background .15s;
}

.appbar-btn:active {
  transform: scale(.95);
}

.appbar-icon {
  width: 23px;
  height: 23px;
}

.appbar-label {
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
}

.appbar-btn.on {
  color: var(--brand);
  background: rgba(34, 197, 94, .12);
}

.appbar-btn.on .appbar-icon {
  stroke-width: 2.1;
}

/* مساحة تحت المحتوى عشان الشريط ميغطّيش آخر حاجة في الصفحة */
body.on-client {
  padding-bottom: 78px;
}

/* ---------- الرئيسية: تحية + كروت الملخّص ---------- */

.home-hello {
  font-size: 19px;
  font-weight: 800;
  color: var(--ink);
  margin: 2px 0 12px;
}

.home-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.card button.home-card {
  width: auto;
  margin: 0;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: start;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--ink);
  font-family: 'Cairo', sans-serif;
  cursor: pointer;
  transition: transform .12s, border-color .15s;
}

.card button.home-card:active {
  transform: scale(.98);
}

.home-card-icon {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  color: var(--brand);
}

.home-card-text {
  min-width: 0;
}

.home-card-title {
  display: block;
  font-size: 11px;
  color: var(--muted);
  line-height: 1.3;
}

.home-card-value {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.35;
}

.home-card-note {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.3;
}

.card button.home-card.hc-train  { border-color: rgba(34,197,94,.34); }
.card button.home-card.hc-train  .home-card-icon { color: #22c55e; }
.card button.home-card.hc-food   { border-color: rgba(56,189,248,.34); }
.card button.home-card.hc-food   .home-card-icon { color: #38bdf8; }
.card button.home-card.hc-water  { border-color: rgba(99,179,237,.34); }
.card button.home-card.hc-water  .home-card-icon { color: #63b3ed; }
.card button.home-card.hc-rehab  { border-color: rgba(249,115,22,.34); }
.card button.home-card.hc-rehab  .home-card-icon { color: #f97316; }

/* ---------- الرئيسية: المربعات ---------- */

.home-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.card button.home-tile {
  position: relative;
  width: auto;
  margin: 0;
  padding: 15px 6px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--ink);
  font-family: 'Cairo', sans-serif;
  cursor: pointer;
  transition: transform .12s, border-color .15s, background .15s;
}

.card button.home-tile:active {
  transform: scale(.96);
}

.home-tile-icon {
  width: 26px;
  height: 26px;
  color: var(--brand);
}

.home-tile-label {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  word-break: break-word;
}

.home-tile-badge {
  position: absolute;
  top: 7px;
  inset-inline-end: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

@media (max-width: 340px) {
  .home-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ===== قايمة العملاء كمربعات ===== */
.clients-grid {
  list-style: none;
  margin: 10px 0 16px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.card li.client-cell {
  position: relative;
  margin: 0;
  padding: 14px 7px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--field);
  cursor: pointer;
  text-align: center;
  transition: transform .12s, border-color .15s;
}

.card li.client-cell:active {
  transform: scale(.96);
}

.cc-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--cc, #22c55e);
  background: color-mix(in srgb, var(--cc, #22c55e) 16%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--cc, #22c55e) 45%, transparent);
}

.card li.client-cell .client-name {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  word-break: break-word;
}

.card li.client-cell .cc-sport {
  margin: 0;
  font-size: 10px;
}

.card li.client-cell .client-status {
  font-size: 10px;
  color: var(--brand);
  line-height: 1.2;
}

.card li.client-cell .client-status.none {
  color: var(--muted);
}

.cc-injury {
  position: absolute;
  top: 7px;
  inset-inline-end: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 18px;
}

@media (max-width: 340px) {
  .clients-grid { grid-template-columns: repeat(2, 1fr); }
}

/* المربع ضيق — شارة الرياضة والحالة لازم يفضلوا سطر واحد */
.card li.client-cell .cc-sport {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.card li.client-cell .cc-sport span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card li.client-cell .client-status {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ===== لوحة التحكم: مربعات فوق وقسم واحد تحتها ===== */
#admin-tabs {
  margin-bottom: 18px;
}

.card button.home-tile.on {
  border-color: var(--brand);
  background: rgba(34, 197, 94, .13);
}

.adm-section > .welcome-section-title:first-child {
  margin-top: 0;
}

/* ===== المتخصصين كمربعات ===== */
.prov-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 10px 0 16px;
}

.card button.prov-cell {
  width: auto;
  margin: 0;
  padding: 13px 6px 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--ink);
  font-family: 'Cairo', sans-serif;
  cursor: pointer;
  text-align: center;
  transition: transform .12s, border-color .15s, background .15s;
}

.card button.prov-cell:active { transform: scale(.96); }

.card button.prov-cell.on {
  border-color: var(--brand);
  background: rgba(34, 197, 94, .12);
}

.pc-name {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  word-break: break-word;
}

.pc-spec,
.pc-count {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

#providers-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 340px) {
  .prov-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== مكتبة برامج التغذية ===== */
.nutprog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 8px 0 4px;
}

.card button.nutprog {
  width: auto;
  margin: 0;
  padding: 13px 13px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  text-align: start;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--ink);
  font-family: 'Cairo', sans-serif;
  cursor: pointer;
  transition: transform .12s, border-color .15s;
}

.card button.nutprog:active { transform: scale(.98); }
.card button.nutprog:hover  { border-color: var(--brand); }

.np-name {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

.np-nums {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--brand);
  line-height: 1.3;
}

.np-desc {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}

/* ===== المساعد الذكي بيكتب ===== */
.chat-typing {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 4px 10px;
  color: var(--muted);
  font-size: 11.5px;
}

.chat-typing em {
  font-style: normal;
  margin-inline-start: 4px;
}

.chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  opacity: .5;
  animation: typingDot 1s infinite ease-in-out;
}

.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }

@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-typing span { animation: none; }
}

/* ===== أيقونات الحالات الصحية: حجم موحّد جوه الشرايح ===== */
.hc-icon,
.si-icon,
.specialty-chip-icon,
.specialty-lock {
  display: inline-flex;
  align-items: center;
}

.hc-icon .ui-icon,
.specialty-chip-icon .ui-icon,
.specialty-lock .ui-icon {
  width: 17px;
  height: 17px;
}

.si-icon .ui-icon,
#cyc-icon .ui-icon {
  width: 22px;
  height: 22px;
}

.ch-pill .ui-icon,
.clr-conds .ui-icon,
.adh-health-flag .ui-icon {
  width: 15px;
  height: 15px;
  vertical-align: -2px;
}

#cyc-icon {
  display: inline-flex;
  align-items: center;
}

/* ===== أيقونات محل الإيموچي: حجم ومحاذاة موحّدة ===== */
.hero2-badge,
.hero2-trust-item,
.welcome-section-title,
.water-title,
.health-privacy,
.supp-disclaimer,
.icon-link,
#supp-plan-box h3,
.card .icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.welcome-section-title,
.health-privacy,
.supp-disclaimer {
  display: flex;
  align-items: flex-start;
}

.title-icon,
.note-icon {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--brand);
}

.badge-icon { color: inherit; }

.hero2-trust-item .ui-icon {
  width: 14px;
  height: 14px;
  color: var(--brand);
  flex: 0 0 auto;
}

.hero2-badge .ui-icon,
.water-title .ui-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.title-icon,
.note-icon {
  width: 18px;
  height: 18px;
}

.preg-icon .ui-icon {
  width: 26px;
  height: 26px;
}

.ch-icon .ui-icon,
.sb-icon .ui-icon {
  width: 22px;
  height: 22px;
}

.card button.icon-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.icon-link .ui-icon {
  width: 16px;
  height: 16px;
}

.hp-avatar .ui-icon {
  width: 20px;
  height: 20px;
}

/* ===== اتمرّن أي يوم في أي يوم ===== */
.card button.pick-session {
  width: 100%;
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px dashed var(--brand);
  background: rgba(34, 197, 94, .10);
  color: var(--brand);
  font-family: 'Cairo', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.card button.pick-session:active { transform: scale(.98); }

/* لو هيلغي شغل اتعمل، الزرار بيغيّر لونه ويسأل الأول */
.card button.pick-session.warn.confirming {
  border-style: solid;
  border-color: #f0ad4e;
  background: rgba(240, 173, 78, .14);
  color: #f0ad4e;
}

/* ===== أكتر من رياضة وهدف + جدول الأسبوع ===== */
.chosen-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 2px 0 12px;
}

.chosen-note {
  font-size: 11.5px;
  color: var(--muted);
}

.card button.chosen-chip,
.chosen-chip {
  width: auto;
  margin: 0;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid var(--brand);
  background: rgba(34, 197, 94, .13);
  color: var(--ink);
  font-family: 'Cairo', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.chosen-chip.static {
  cursor: default;
  border-color: var(--line);
  background: var(--field);
}

.chosen-x {
  display: inline-flex;
  color: var(--muted);
}

.chosen-x .ui-icon {
  width: 13px;
  height: 13px;
}

/* ---------- جدول الأسبوع ---------- */
.sched-block {
  margin: 4px 0 14px;
}

.sched-rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sched-row {
  display: grid;
  grid-template-columns: 52px 1fr 104px;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: var(--field);
}

.sched-row.on {
  border-color: var(--brand);
  background: rgba(34, 197, 94, .09);
}

.sched-day {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.card select.sched-sport,
.card input.sched-time {
  width: 100%;
  margin: 0;
  padding: 8px 9px;
  font-size: 12.5px;
  border-radius: 10px;
}

.card input.sched-time:disabled {
  opacity: .4;
}

@media (max-width: 350px) {
  .sched-row { grid-template-columns: 44px 1fr 88px; gap: 5px; }
  .card select.sched-sport, .card input.sched-time { padding: 7px; font-size: 11.5px; }
}

/* سطر الجدول عند المدرب: بياخد عرض الشبكة كله */
.cbasic.cbasic-wide {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: flex-start;
  gap: 9px;
  text-align: start;
  padding: 11px 12px;
}

.cbasic.cbasic-wide .ui-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--brand);
  margin-top: 2px;
}

.cbasic.cbasic-wide .cbasic-value {
  font-size: 12px;
  line-height: 1.6;
}

/* زرار "اعرض المزيد" تحت المكتبات */
.card button.more-btn {
  width: 100%;
  margin: 12px 0 4px;
  padding: 12px;
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 700;
}

/* ===== أجهزة العلاج الطبيعي ===== */
.mod-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 12px; }

.card button.mod-chip {
  width: auto; margin: 0; padding: 8px 12px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--field); color: var(--ink);
  font-family: 'Cairo', sans-serif; font-size: 12.5px; font-weight: 700;
  cursor: pointer;
}
.card button.mod-chip.on { border-color: var(--brand); background: rgba(34,197,94,.14); }

.mod-what { font-size: 13px; line-height: 1.7; color: var(--ink); margin: 0 0 12px; }

.mod-sub {
  font-size: 12.5px; font-weight: 800; color: var(--muted);
  margin: 16px 0 8px; text-transform: none;
}

/* موانع الاستعمال: مقصود إنها أبرز حاجة في الشاشة */
.mod-contra {
  border: 1px solid rgba(239, 68, 68, .45);
  background: rgba(239, 68, 68, .09);
  border-radius: 14px; padding: 12px 13px; margin-bottom: 4px;
}
.mod-contra-head {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 800; color: #ef4444; margin-bottom: 7px;
}
.mod-contra-head .ui-icon { width: 17px; height: 17px; }
.mod-contra ul { margin: 0; padding-inline-start: 18px; }
.mod-contra li { font-size: 12px; line-height: 1.8; color: var(--ink); }

.mod-ind { margin: 0; padding-inline-start: 18px; }
.mod-ind li { font-size: 12.5px; line-height: 1.8; color: var(--ink); }

.mod-proto {
  border: 1px solid var(--line); background: var(--field);
  border-radius: 16px; padding: 13px; margin-bottom: 10px;
}
.mp-name { display: block; font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.mp-note { font-size: 11.5px; color: var(--muted); line-height: 1.7; margin: 0 0 10px; }

.mp-settings {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 7px; margin-bottom: 9px;
}
.mp-set {
  background: rgba(255,255,255,.03); border-radius: 10px; padding: 7px 9px;
}
.mp-set span { display: block; font-size: 10.5px; color: var(--muted); }
.mp-set strong { display: block; font-size: 12px; font-weight: 700; }

.mp-meta { font-size: 11.5px; color: var(--brand); font-weight: 700; margin-bottom: 9px; }

.card button.mp-add { width: 100%; margin: 0; padding: 10px; font-size: 12.5px; }

.mod-plan-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 11px; margin-bottom: 7px;
  border-radius: 12px; border: 1px solid var(--brand);
  background: rgba(34,197,94,.10); font-size: 12.5px;
}
.card button.mod-del {
  width: auto; margin: 0; padding: 4px; background: transparent;
  border: 0; color: var(--muted); cursor: pointer;
}
.mod-del .ui-icon { width: 15px; height: 15px; }

/* قوايم الأجهزة كانت بتورث شكل كروت `.card li` — بنرجّعها نقط عادية */
.card .mod-contra li,
.card .mod-ind li {
  display: list-item;
  margin: 0 0 4px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: start;
}

.card .mod-contra ul,
.card .mod-ind {
  list-style: disc;
}

.card .mod-contra li::marker { color: #ef4444; }
.card .mod-ind li::marker { color: var(--brand); }

/* الخانة الناقصة بتنوّر لحظتين عشان العين تلاقيها */
.needs-fill {
  animation: needsFill 1.1s ease 2;
  border-radius: 14px;
}

@keyframes needsFill {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 173, 78, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(240, 173, 78, .5); }
}

@media (prefers-reduced-motion: reduce) {
  .needs-fill { animation: none; box-shadow: 0 0 0 3px rgba(240, 173, 78, .5); }
}

/* ============================================================
   الجرس — جنب زرار اللغة، بنفس شكله
   ============================================================ */
.notif-bell {
  position: fixed;
  top: 12px;
  inset-inline-end: 76px;
  z-index: 50;
  width: 40px;
  height: 36px;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(21, 31, 51, 0.92);
  backdrop-filter: blur(8px);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.1s;
}
.notif-bell .ui-icon { width: 20px; height: 20px; }
.notif-bell:active { transform: scale(0.95); }
.notif-bell.has-unread { color: var(--brand); border-color: rgba(34, 197, 94, 0.55); }
.notif-bell.has-unread .ui-icon { animation: bellNudge 2.6s ease-in-out 1; transform-origin: 50% 8%; }

.notif-badge {
  position: absolute;
  top: -5px;
  inset-inline-end: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--bg);
}

@keyframes bellNudge {
  0%, 60%, 100% { transform: rotate(0); }
  10% { transform: rotate(14deg); }
  20% { transform: rotate(-12deg); }
  30% { transform: rotate(8deg); }
  40% { transform: rotate(-5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .notif-bell.has-unread .ui-icon { animation: none; }
}

/* ---------- شاشة الإشعارات ---------- */
.notif-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }

.card .notif-item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 12px 12px;
  text-align: start;
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-weight: 400;
  position: relative;
}
.card .notif-item.unread { border-color: rgba(34, 197, 94, 0.45); background: rgba(34, 197, 94, 0.07); }

.notif-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--field);
  color: var(--brand);
}
.notif-icon .ui-icon { width: 20px; height: 20px; }

.notif-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.notif-item-title { font-weight: 700; font-size: 14px; }
.notif-item-text { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.notif-item-time { font-size: 11px; color: var(--muted); opacity: 0.8; margin-top: 2px; }

.notif-dot {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--brand);
}

.card #notif-mark-all { width: auto; margin: 4px 0 0; }

.notif-push-box {
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px dashed var(--line);
  background: var(--field);
}
.notif-push-box.is-on { border-style: solid; border-color: rgba(34, 197, 94, 0.45); }
.notif-push-title { font-weight: 700; font-size: 14px; }
.notif-push-box .hint-text { margin: 4px 0 8px; }

/* ---------- تأكيد الإيميل ---------- */
#verify-screen { text-align: center; }
#verify-screen .hint-text { text-align: center; }
.verify-art {
  width: 72px;
  height: 72px;
  margin: 4px auto 10px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(34, 197, 94, 0.12);
  color: var(--brand);
}
.verify-art .ui-icon { width: 38px; height: 38px; }
.verify-text { font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.card #verify-resend-btn:disabled { opacity: 0.6; cursor: default; }
.card #verify-wrong-btn { margin-top: 14px; }
.verify-email { font-weight: 700; color: var(--brand); }

/* ============================================================
   المكتبة الموسّعة
   ============================================================ */
.filters.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.lib-subchips { margin-top: -2px; }
.chip.small { padding: 5px 11px; font-size: 12px; }
.lib-toggles { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; }
.card .lib-toggles .link { width: auto; margin: 0 auto 0 0; font-size: 12px; }
[dir="ltr"] .card .lib-toggles .link { margin: 0 0 0 auto; }

.ex-card { position: relative; }
.ex-shot.drawn { background: #fff; }
.ex-shot.drawn img { object-fit: contain; padding: 4px; }
.anim-badge {
  position: absolute; bottom: 6px; inset-inline-start: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(11, 18, 32, 0.78); color: var(--brand);
}
.anim-badge .ui-icon { width: 12px; height: 12px; }
.card .ex-quick-add {
  position: absolute; top: 6px; inset-inline-end: 6px; z-index: 2;
  width: 32px; height: 32px; min-width: 0; margin: 0; padding: 0;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: #06240f; border: 0;
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.6);
}
.card .ex-quick-add .ui-icon { width: 18px; height: 18px; }
.ex-level { font-size: 11px; margin-top: 4px; color: var(--muted); }
.ex-level::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-inline-end: 5px; background: var(--brand); }
.ex-level.lvl-2::before { background: var(--warn); }
.ex-level.lvl-3::before { background: var(--danger); }

/* الشيت */
.ex-sheet-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(3, 7, 15, 0.7);
  display: flex; align-items: flex-end; justify-content: center;
}
.ex-sheet {
  position: relative; width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-bottom: 0;
  border-radius: 22px 22px 0 0; padding: 18px 18px 26px;
  box-shadow: 0 -18px 40px -20px rgba(0, 0, 0, 0.9);
  animation: sheetUp 0.22s ease-out;
}
@keyframes sheetUp { from { transform: translateY(24px); opacity: 0.6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ex-sheet { animation: none; } }
@media (min-width: 700px) { .ex-sheet-overlay { align-items: center; } .ex-sheet { border-radius: 22px; border-bottom: 1px solid var(--line); } }
body.sheet-open { overflow: hidden; }
.ex-sheet-close {
  position: absolute; top: 10px; inset-inline-end: 10px; width: 34px; height: 34px; min-width: 0; margin: 0; padding: 0;
  border-radius: 50%; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
}
.ex-sheet-close .ui-icon { width: 16px; height: 16px; }
.exs-media { position: relative; background: #fff; border-radius: 16px; padding: 8px; margin: 26px 0 12px; text-align: center; }
.exs-media img { width: 100%; max-height: 300px; object-fit: contain; }
.exs-media-hint { position: absolute; bottom: 8px; inset-inline-start: 10px; font-size: 11px; color: #334155; background: rgba(255, 255, 255, 0.85); padding: 2px 8px; border-radius: 999px; }
.exs-title { margin: 6px 0 2px; font-size: 19px; }
.exs-subtitle { margin: 0 0 10px; color: var(--muted); font-size: 13px; }
.exs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.exs-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); }
.exs-caution { font-size: 13px; padding: 9px 12px; border-radius: 12px; background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.35); margin: 6px 0 10px; }
.exs-caution.danger { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.55); color: #fecaca; font-weight: 700; }
.exs-line { font-size: 13px; margin: 6px 0; }
.exs-muted { color: var(--muted); }
.exs-h { margin: 14px 0 6px; font-size: 14px; color: var(--brand); }
.exs-text { font-size: 14px; line-height: 1.8; margin: 0; }
.exs-list { margin: 0; padding-inline-start: 20px; font-size: 14px; line-height: 1.8; }
.exs-alts { display: flex; flex-wrap: wrap; gap: 6px; }
.card .exs-alt, .exs-alt { width: auto; margin: 0; padding: 6px 12px; font-size: 12px; font-weight: 400; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; }
.exs-credit { display: block; margin-top: 12px; font-size: 12px; }
.exs-actions { display: flex; gap: 8px; margin-top: 16px; position: sticky; bottom: -26px; background: var(--surface); padding: 10px 0 4px; }
.exs-actions button { flex: 1; margin: 0; }
.exs-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.exs-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.exs-field input, .exs-field select, .exs-field textarea { margin: 0; }
.exs-field.wide { margin-top: 10px; }
.exs-intensity { display: grid; grid-template-columns: 76px 1fr; gap: 6px; }
.credit-card { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-top: 10px; }
.credit-list summary { cursor: pointer; font-size: 13px; color: var(--brand); margin-top: 6px; }
.ex-cues-input { margin-top: 6px; }

/* الشيت برّه .card — فبنديله نفس شكل أزرار وخانات البرنامج */
.ex-sheet .exs-actions button {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #06210f; font-family: 'Cairo', sans-serif; font-size: 16px; font-weight: 700;
  border: none; border-radius: 13px; padding: 13px; cursor: pointer;
}
.ex-sheet .exs-actions button.secondary { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.ex-sheet .exs-actions button:active { transform: scale(0.985); }
.ex-sheet input, .ex-sheet select, .ex-sheet textarea {
  width: 100%; box-sizing: border-box; background: var(--field); color: var(--ink);
  border: 1px solid var(--line); border-radius: 11px; padding: 10px 12px;
  font-family: 'Cairo', sans-serif; font-size: 15px;
}
.ex-sheet textarea { resize: vertical; }
.ex-sheet a { color: var(--brand); }
.ex-sheet .exs-alt { font-family: 'Cairo', sans-serif; cursor: pointer; }
/* الرسوم الخطية محتاجة خلفية بيضا — القاعدة العامة بتاعة صور الكروت كانت بتغلبها */
.ex-card .ex-shot.drawn img { background-color: #fff; object-fit: contain; padding: 4px; box-sizing: border-box; }
.filters.three { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* ============================================================
   أكتر من حصة في اليوم
   ============================================================ */
.sched-day-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sched-day-box.multi {
  padding: 6px;
  border-radius: 15px;
  background: rgba(34, 197, 94, .05);
  border: 1px dashed rgba(34, 197, 94, .35);
}
.sched-row.extra .sched-day {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.card button.sched-add {
  align-self: flex-start;
  margin: 0 4px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--brand);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  width: auto;
  box-shadow: none;
}
.card button.sched-add:hover { background: rgba(34, 197, 94, .1); }

/* المدرب: شريط الحصص فوق اسم اليوم */
.session-box { margin: 6px 0 8px; }
.session-box:empty { display: none; }
.session-plan-hint {
  margin: 0 0 7px;
  padding: 7px 10px;
  border-radius: 11px;
  background: rgba(56, 189, 248, .1);
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.5;
}
.session-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.card button.session-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  margin: 0;
  padding: 6px 11px 6px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
}
.card button.session-chip.on {
  border-color: var(--brand);
  background: rgba(34, 197, 94, .14);
}
.session-chip small {
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(127, 127, 127, .18);
  font-size: 11px;
  text-align: center;
}
.card button.session-chip.add {
  padding: 6px 12px;
  border-style: dashed;
  color: var(--brand);
  background: transparent;
}
.card button.session-chip.add.plan { color: #0ea5e9; border-color: rgba(14, 165, 233, .5); }
.session-num {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  flex: none;
}
.session-meta {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 7px;
  margin-top: 8px;
}
.card .session-meta select,
.card .session-meta input { margin: 0; }
.session-del { margin-top: 6px; font-size: 12.5px; }
.session-del.confirming { font-weight: 800; }

/* العميل: تبويب لكل حصة فوق كارت الجلسة */
.session-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 7px;
  margin: 0 0 10px;
}
.card button.session-tab {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  margin: 0;
  padding: 8px 12px 8px 9px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card, var(--field));
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
  box-shadow: none;
}
.card button.session-tab.on {
  border-color: var(--brand);
  background: rgba(34, 197, 94, .13);
}
.session-tab .session-num { background: rgba(127, 127, 127, .35); }
.session-tab.on .session-num { background: var(--brand); }
.session-tab.done .session-num { background: var(--brand); }
.session-tab.done .session-num::after { content: '✓'; }
.session-tab.done .session-num { font-size: 0; }
.session-tab.done .session-num::after { font-size: 11px; }
.session-tab-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.session-tab-text strong {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session-tab-text small {
  font-size: 11px;
  color: var(--muted);
}
.session-del { color: #f87171; }

/* علامات ✓ في لوحة التحكم: جنب الكلام مش فوقه */
.card .switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
  font-size: 14.5px;
  color: var(--ink);
  cursor: pointer;
}
.card .switch-row input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  accent-color: var(--brand);
}

/* رابط صفحة فريق الذكاء الاصطناعي */
.team-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(34, 197, 94, .45);
  background: rgba(34, 197, 94, .08);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}
.team-link .ui-icon { width: 20px; height: 20px; color: var(--brand); flex: none; }
.team-link-arrow { margin-inline-start: auto; color: var(--brand); }

/* ============ مستشار البرامج ============ */
.advisor-box { border: 1px solid var(--brand); border-radius: 16px; padding: 14px; margin: 0 0 14px; background: rgba(34, 197, 94, 0.06); }
.advisor-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.advisor-head .hint-text { margin: 2px 0 0; }
.advisor-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(34, 197, 94, 0.15); color: var(--brand); }
.advisor-icon .ui-icon { width: 20px; height: 20px; }
.advisor-panel { margin-top: 6px; }
.advisor-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.card .advisor-quick button, .advisor-quick button { width: auto; margin: 0; padding: 7px 12px; font-size: 13px; border-radius: 999px; }
.advisor-log { max-height: 460px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.advisor-log:not(:empty) { border: 1px solid var(--line); border-radius: 12px; padding: 8px; background: var(--field); }
.adv-msg { border-radius: 12px; padding: 9px 12px; font-size: 14px; line-height: 1.7; }
.adv-msg.from-me { background: rgba(148, 163, 184, 0.14); align-self: flex-start; max-width: 92%; }
.adv-msg.from-adv { background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.25); }
.adv-who { font-size: 12px; opacity: 0.7; margin-bottom: 2px; }
.adv-text { white-space: pre-wrap; }
.adv-typing { opacity: 0.7; letter-spacing: 3px; }
.adv-watch { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(245, 158, 11, 0.12); font-size: 13px; }
.adv-watch ul { margin: 4px 0 0; padding-inline-start: 18px; }
.adv-draft { margin-top: 8px; }
.adv-day { border-top: 1px solid rgba(148, 163, 184, 0.2); padding: 6px 0; }
.adv-day summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.adv-day.rest summary { opacity: 0.6; font-weight: 400; cursor: default; }
.adv-day ul { margin: 4px 0 0; padding-inline-start: 18px; font-size: 13px; }
.card button.adv-apply, button.adv-apply { margin-top: 8px; }
.advisor-send { display: flex; gap: 6px; align-items: flex-end; }
.advisor-send textarea { flex: 1; margin: 0; resize: vertical; min-height: 44px; }
.card .advisor-send button, .advisor-send button { width: auto; margin: 0; padding: 10px 16px; }
.advisor-box .row button { width: auto; }
.adv-custom-tag { display: inline-block; margin-inline-start: 6px; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: rgba(251, 191, 36, 0.15); color: var(--warn); white-space: nowrap; }
.adv-how { font-size: 12.5px; opacity: 0.8; margin-top: 3px; }
.card button.adv-mylib, button.adv-mylib { display: block; width: auto; margin: 6px 0 0; padding: 5px 12px; font-size: 12.5px; }
.adv-flags { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(248, 113, 113, 0.12); font-size: 13px; }
.adv-flags ul { margin: 4px 0 0; padding-inline-start: 18px; }
.adv-targets { font-weight: 600; font-size: 13.5px; margin: 4px 0 6px; }
.adv-phase-info { list-style: none; opacity: 0.75; font-size: 12.5px; margin-inline-start: -18px; }
/* القوايم جوه المستشار نص عادي — مش كروت زي باقي .card li */
.card .advisor-box li {
  display: list-item; padding: 2px 0; margin: 0 0 3px; background: none; border: 0; border-radius: 0;
  cursor: default; transform: none; white-space: normal; overflow-wrap: anywhere; line-height: 1.6;
}
.card .advisor-box li:active { transform: none; }
.card .advisor-box li span { color: inherit; font-weight: inherit; font-size: inherit; white-space: normal; display: inline; }
.card .advisor-box li span.adv-custom-tag { display: inline-block; white-space: nowrap; font-size: 11.5px; }
.card .advisor-box li.adv-custom { display: block; padding: 8px 10px; border: 1px dashed var(--warn); border-radius: 10px; margin: 6px 0; }
.card .advisor-box li .adv-custom-tag { color: var(--warn); }
.card .advisor-box .adv-day ul { padding-inline-start: 20px; }
.card .advisor-box li.adv-phase-info { list-style: none; margin-inline-start: -20px; }

/* ============ ملفات Google Drive ============ */
.drv-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.drv-item { max-width: 100%; }
.drv-item audio { max-width: 240px; height: 40px; }
.card button.drv-thumb, button.drv-thumb { width: 120px; height: 120px; padding: 0; margin: 0; border-radius: 12px; overflow: hidden; background: var(--field); border: 1px solid var(--line); color: var(--muted); font-size: 12px; display: flex; align-items: center; justify-content: center; }
.drv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card button.drv-btn, button.drv-btn { width: auto; margin: 0; padding: 8px 12px; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.drv-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.drv-error button { border-color: var(--danger); }
.drv-picked { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.drv-chip { font-size: 12.5px; padding: 4px 10px; border-radius: 999px; background: var(--field); border: 1px solid var(--line); }
.drv-chip .link { padding: 0; margin: 0 4px; font-size: 12.5px; width: auto; }
.chat-bubble.has-files { max-width: 86%; }
.chat-tool-btn { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); background: var(--field); border: 1px solid var(--line); }
.card button.chat-tool-btn { width: 40px; height: 40px; min-width: 40px; padding: 0; margin: 0; border-radius: 50%; background: var(--field); color: var(--muted); border: 1px solid var(--line); }
.chat-tool-btn .ui-icon { width: 19px; height: 19px; }
.chat-tool-btn input[type="file"] { display: none; }
.card button.chat-tool-btn.recording { background: var(--danger); color: #fff; border-color: var(--danger); animation: recPulse 1.2s ease-in-out infinite; }
@keyframes recPulse { 50% { opacity: 0.6; } }
.chat-input-row #chat-rec-cancel { width: auto; margin: 0; flex: 1; text-align: start; }
.pp-day h4, .pp-col h4 { margin: 12px 0 4px; font-size: 13.5px; color: var(--muted); }
.pp-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.pp-compare .card button.drv-thumb, .pp-compare button.drv-thumb { width: 100%; height: auto; aspect-ratio: 3 / 4; }
.pp-compare .drv-files { display: grid; grid-template-columns: 1fr; gap: 8px; }
.pp-compare .drv-item { width: 100%; }
.card .pp-compare button.drv-thumb { width: 100%; height: auto; aspect-ratio: 3 / 4; }

/* ============ تنبيه الحر ============ */
.heat-banner { border-radius: 14px; padding: 12px 14px; margin: 10px 0; font-size: 14px; line-height: 1.7; }
.heat-banner.hot { background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.4); }
.heat-banner.extreme { background: rgba(248, 113, 113, 0.13); border: 1px solid rgba(248, 113, 113, 0.45); }
.heat-banner.optin { background: var(--surface-2); border: 1px dashed var(--line); }
.heat-banner strong { display: block; margin-bottom: 4px; }
.heat-banner.hot strong { color: var(--warn); }
.heat-banner.extreme strong { color: var(--danger); }
.heat-banner ul { margin: 4px 0 0; padding-inline-start: 18px; }
.heat-banner p { margin: 4px 0 8px; color: var(--muted); }
.heat-banner .row button { width: auto; margin: 0; padding: 8px 14px; }
.card button.heat-off, .heat-banner button.heat-off { width: auto; margin: 6px 0 0; padding: 0; font-size: 12.5px; }
.heat-note { font-size: 12.5px; }
.card .heat-banner li { display: list-item; padding: 1px 0; margin: 0 0 2px; background: none; border: 0; border-radius: 0; cursor: default; transform: none; }
.card .heat-banner li:active { transform: none; }

/* ============ مكان شغل المتخصص ============ */
.pw-box { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin: 12px 0; }
.pw-box h3 { margin: 0 0 6px; font-size: 14.5px; }
.pw-days { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.pw-day { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); font-size: 13px; cursor: pointer; }
.pw-day input { width: auto; margin: 0; }
.pw-info { margin: 6px 0; display: flex; flex-direction: column; gap: 3px; }
.pw-line { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); }
.pw-line .ui-icon { width: 16px; height: 16px; flex: 0 0 auto; color: var(--brand); }
.prov-seen.idle { color: var(--danger); }

/* ============ الساعات الذكية ============ */
.wr-help { margin: 6px 0; font-size: 13px; color: var(--muted); }
.wr-help summary { cursor: pointer; color: var(--ink); }
.wr-help p { white-space: pre-line; line-height: 1.8; margin: 6px 0 0; }
.wr-ble { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.wr-ble h4 { margin: 0 0 4px; }
.card button#wr-ble-btn.recording { background: var(--danger); color: #fff; border-color: var(--danger); }
.wr-live { margin-top: 10px; font-size: 22px; font-weight: 800; text-align: center; padding: 14px; border-radius: 14px; background: var(--field); }
.wr-card { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin: 8px 0; background: var(--surface-2); }
.wr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.wr-nums { font-size: 13.5px; margin-top: 4px; }
.wr-spark { color: var(--danger); height: 34px; margin-top: 6px; }
.wr-spark svg { width: 100%; height: 34px; display: block; }
.wr-zones { display: flex; height: 8px; border-radius: 999px; overflow: hidden; margin-top: 8px; background: var(--field); }
.wr-zones span.z1, .wr-live.z1 { background: #64748b; }
.wr-zones span.z2, .wr-live.z2 { background: #3b82f6; }
.wr-zones span.z3, .wr-live.z3 { background: #22c55e; }
.wr-zones span.z4, .wr-live.z4 { background: #f59e0b; }
.wr-zones span.z5, .wr-live.z5 { background: #ef4444; }
.wr-live.z1, .wr-live.z2, .wr-live.z3, .wr-live.z4, .wr-live.z5 { color: #fff; }
.wr-live b { display: block; font-size: 40px; line-height: 1.1; }
.wr-live span { display: block; font-size: 14px; font-weight: 600; opacity: .9; }
#progress-tabs { flex-wrap: wrap; }
.wr-strava { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.wr-strava h4 { margin: 0 0 4px; }
.card button.strava-btn { background: #fc4c02; border-color: #fc4c02; color: #fff; }
.wr-strava-ok { color: var(--brand); font-weight: 700; margin: 4px 0; }
.wr-powered { font-size: 11px; color: #fc4c02; margin: 4px 0 0; }

/* ============ حلقات ADAM ============ */
.eng-card {
  background: linear-gradient(160deg, rgba(34, 197, 94, .10), rgba(56, 189, 248, .06) 60%, transparent), var(--field);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 12px 14px 10px;
  margin: 8px 0 12px;
}
.eng-card .eng-main {
  display: flex; align-items: center; gap: 14px;
  width: 100%; margin: 0; padding: 0;
  background: none; border: 0; color: var(--ink);
  text-align: start; cursor: pointer; font-family: 'Cairo', sans-serif;
}
.eng-card .eng-main:active { transform: scale(.99); }
.eng-rings { position: relative; flex: 0 0 auto; width: 108px; height: 108px; }
.eng-svg { display: block; }
.eng-arc { transition: stroke-dashoffset .7s cubic-bezier(.2, .8, .2, 1); }
.eng-rings.star .eng-svg { filter: drop-shadow(0 0 10px rgba(250, 204, 21, .45)); }
.eng-star { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; animation: engPop .5s ease; }
.eng-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.eng-streak { display: flex; align-items: baseline; gap: 6px; font-size: 14px; color: var(--muted); }
.eng-streak strong { font-size: 30px; line-height: 1; color: #fb923c; font-weight: 700; }
.eng-streak.zero strong { color: var(--muted); }
.eng-fire { font-size: 22px; }
.eng-streak.zero .eng-fire { filter: grayscale(1); opacity: .6; }
.eng-shield { font-size: 15px; }
.eng-week { font-size: 13.5px; color: var(--ink); }
.eng-level { display: flex; flex-direction: column; gap: 4px; margin-top: 2px; }
.eng-level-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.eng-lv-chip { font-size: 12.5px; font-weight: 700; color: var(--lv); background: color-mix(in srgb, var(--lv) 14%, transparent); border: 1px solid color-mix(in srgb, var(--lv) 40%, transparent); border-radius: 999px; padding: 1px 9px; white-space: nowrap; }
.eng-xp { font-size: 12px; color: var(--muted); white-space: nowrap; }
.eng-bar { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.eng-bar i { display: block; height: 100%; border-radius: 99px; transition: width .7s ease; }
.eng-next { font-size: 11.5px; color: var(--muted); }
.eng-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.eng-lg { display: inline-flex; align-items: center; gap: 5px; }
.eng-lg i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.eng-lg-t i { background: #22c55e; } .eng-lg-f i { background: #f59e0b; } .eng-lg-w i { background: #38bdf8; }
.eng-lg.done { color: var(--ink); }
.eng-lg bdi { font-weight: 700; }
.eng-nudge { margin-top: 8px; font-size: 13px; color: var(--ink); background: rgba(255, 255, 255, .04); border-radius: 12px; padding: 7px 10px; }
.eng-nudge.star { background: rgba(250, 204, 21, .12); color: #fde68a; }

.eng-recap { background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; padding: 11px 14px; margin: 0 0 12px; }
.eng-recap-title { font-weight: 700; font-size: 14px; }
.eng-recap-line { font-size: 13.5px; color: var(--muted); margin: 4px 0 8px; }
.eng-recap-actions { display: flex; gap: 8px; align-items: center; }
.eng-recap .eng-recap-close { width: auto; margin: 0; padding: 7px 12px; background: none; border: 1px solid var(--line); color: var(--muted); font-size: 13px; border-radius: 10px; }

.eng-share-btn, .card button.eng-share-btn {
  width: auto; margin: 0; padding: 8px 16px; border: 0; border-radius: 11px; cursor: pointer;
  font: 700 14px 'Cairo', sans-serif; color: #fff;
  background: linear-gradient(90deg, #f58529, #dd2a7b 55%, #8134af);
}

/* الشيت */
.eng-sheet { max-width: 640px; margin: 0 auto; }
.eng-body { overflow-y: auto; padding: 4px 2px 8px; color: var(--ink); font-family: 'Cairo', sans-serif; }
.eng-sec { margin: 10px 0 14px; }
.eng-sec h3 { font-size: 14.5px; margin: 0 0 8px; color: var(--ink); }
.eng-sec-level { display: flex; align-items: center; gap: 14px; background: var(--field); border: 1px solid var(--line); border-radius: 18px; padding: 12px 14px; }
.eng-emblem { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 32px; background: color-mix(in srgb, var(--lv) 16%, transparent); border: 2px solid var(--lv); }
.eng-sec-level .eng-level { flex: 1; }
.eng-level.big .eng-lv-chip { font-size: 14px; }
.eng-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.eng-stat { background: var(--field); border: 1px solid var(--line); border-radius: 14px; padding: 8px 4px; text-align: center; display: flex; flex-direction: column; }
.eng-stat strong { font-size: 16px; }
.eng-stat span { font-size: 11.5px; color: var(--muted); }
.eng-shield-note { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.eng-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px 4px; }
.eng-day { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.eng-day small { font-size: 11px; color: var(--muted); }
.eng-day.today small { color: var(--brand); font-weight: 700; }
.eng-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 15px;
  background: conic-gradient(var(--brand) var(--p, 0%), rgba(255, 255, 255, .08) 0); }
.eng-dot::after { content: ''; }
.eng-dot:not(.star):not(.none)::before { content: ''; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); }
.eng-dot.star { background: rgba(250, 204, 21, .16); }
.eng-dot.rest { background: rgba(148, 163, 184, .18); }
.eng-dot.rest::before { background: transparent; }
.eng-dot.none { background: rgba(255, 255, 255, .04); }
.eng-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.eng-badge, .card button.eng-badge {
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  width: auto; margin: 0; padding: 9px 5px; border-radius: 14px; cursor: default;
  background: var(--field); border: 1px solid var(--line); color: var(--muted); font-family: 'Cairo', sans-serif;
}
.eng-badge.got { color: var(--ink); border-color: rgba(34, 197, 94, .45); background: rgba(34, 197, 94, .07); cursor: pointer; }
.eng-badge-ic { font-size: 26px; line-height: 1.2; }
.eng-badge:not(.got) .eng-badge-ic { opacity: .45; font-size: 20px; }
.eng-badge-name { font-size: 12.5px; font-weight: 700; }
.eng-badge small { font-size: 10.5px; color: var(--muted); line-height: 1.4; }
.eng-share-main { display: block; width: 100%; margin: 0; padding: 12px; border: 0; border-radius: 14px; cursor: pointer;
  font: 700 15px 'Cairo', sans-serif; color: #fff; background: linear-gradient(90deg, #f58529, #dd2a7b 55%, #8134af); }
.eng-share-hint { font-size: 12px; color: var(--muted); text-align: center; margin: 6px 0 0; }
.eng-how { background: var(--field); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin: 6px 0 12px; }
.eng-how summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.eng-how p { white-space: pre-line; font-size: 13px; line-height: 1.9; color: var(--muted); margin: 8px 0 0; }
.eng-nudge-toggle { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); padding: 4px 2px; }
.eng-nudge-toggle input { width: 18px; height: 18px; accent-color: var(--brand); }

/* الاحتفال */
.eng-celebrate { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(2, 6, 18, .78); padding: 16px; }
.eng-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.eng-cel-box { position: relative; width: min(360px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 22px 18px 18px; text-align: center; color: var(--ink); font-family: 'Cairo', sans-serif; animation: engPop .45s cubic-bezier(.2, 1.4, .4, 1); }
.eng-cel-emoji { font-size: 64px; line-height: 1.1; }
.eng-cel-title { font-size: 20px; font-weight: 700; margin-top: 6px; }
.eng-cel-body { font-size: 14px; color: var(--muted); line-height: 1.8; margin: 6px 0 14px; }
.eng-cel-actions { display: flex; flex-direction: column; gap: 8px; }
.eng-cel-actions .eng-share-btn { width: 100%; padding: 11px; }
.eng-cel-ok { width: 100%; margin: 0; padding: 11px; border: 0; border-radius: 12px; cursor: pointer; font: 700 15px 'Cairo', sans-serif; color: #06210f; background: linear-gradient(180deg, var(--brand), var(--brand-dark)); }
.eng-toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); z-index: 390;
  background: #0f2a1c; color: #bbf7d0; border: 1px solid rgba(34, 197, 94, .5); border-radius: 999px; padding: 8px 16px; font: 700 14px 'Cairo', sans-serif; opacity: 0; transition: opacity .25s, transform .25s; max-width: calc(100% - 32px); text-align: center; }
.eng-toast.show { opacity: 1; transform: translate(-50%, 0); }
@keyframes engPop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .eng-cel-box, .eng-star { animation: none; } .eng-arc, .eng-bar i { transition: none; } }
.eng-welcome { background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .45); border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; }
.eng-welcome strong { display: block; font-size: 15px; color: #bbf7d0; }
.eng-welcome p { margin: 4px 0 8px; font-size: 13px; line-height: 1.8; color: var(--ink); }
.eng-card .eng-welcome-ok { width: auto; margin: 0; padding: 6px 16px; font-size: 13.5px; border-radius: 10px; }

/* الدخول بجوجل */
.card button.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #ffffff; color: #1f2937; border: 1px solid #dadce0;
  font-weight: 700; margin-top: 6px;
}
.card button.google-btn:active { filter: brightness(.95); }
.g-logo { width: 22px; height: 22px; flex: 0 0 auto; }
.google-hint { text-align: center; font-size: 12.5px; color: var(--brand); margin: 6px 0 0; }
.or-sep { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; color: var(--muted); font-size: 12.5px; }
.or-sep::before, .or-sep::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* تأكيد الإيميل — شريط لطيف بدل شاشة قافلة */
.verify-banner { background: rgba(56, 189, 248, .10); border: 1px solid rgba(56, 189, 248, .45); border-radius: 16px; padding: 11px 14px; margin: 0 0 12px; }
.verify-banner strong { display: block; font-size: 14.5px; color: #bae6fd; }
.verify-banner p { font-size: 13px; line-height: 1.8; margin: 4px 0 8px; color: var(--ink); }
.verify-banner .vb-row { display: flex; gap: 8px; flex-wrap: wrap; }
.card .verify-banner button { width: auto; margin: 0; padding: 7px 14px; font-size: 13.5px; border-radius: 10px; }
.card .verify-banner button.vb-again { background: none; border: 1px solid var(--line); color: var(--ink); }
.card .verify-banner button.vb-again:disabled { opacity: .6; }
.verify-banner .vb-msg { margin: 6px 0 0; }

/* ============ الصحاب والستوري ============ */
.soc-bar { margin: 0 0 12px; }
.soc-row { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.soc-row::-webkit-scrollbar { display: none; }
.card button.soc-item, .soc-item {
  flex: 0 0 auto; width: 64px; margin: 0; padding: 0; background: none; border: 0; color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; font-family: 'Cairo', sans-serif;
}
.soc-item small { font-size: 11.5px; color: var(--muted); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-av { position: relative; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 18px;
  background: var(--surface-2); color: var(--ink); border: 2px solid var(--line); flex: 0 0 auto; }
.soc-item .soc-av { width: 56px; height: 56px; font-size: 21px; }
.soc-av.ring { border: 3px solid transparent; background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, linear-gradient(45deg, #f58529, #dd2a7b, #8134af) border-box; }
.soc-av.ring.seen { background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box, linear-gradient(45deg, #475569, #64748b) border-box; }
.soc-plus { position: absolute; bottom: -2px; inset-inline-end: -2px; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #06210f; font-style: normal; font-size: 15px; line-height: 20px; text-align: center; border: 2px solid var(--surface); }
.soc-av.plus-only { font-size: 26px; color: var(--brand); border-style: dashed; }
.soc-av.friends-ic { font-size: 22px; }
.soc-dot { position: absolute; top: -3px; inset-inline-end: -3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }

.soc-tabs { display: flex; gap: 6px; margin: 2px 0 10px; }
.soc-tab, .card button.soc-tab { flex: 1; width: auto; margin: 0; padding: 8px 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--field); color: var(--muted); font: 700 13.5px 'Cairo', sans-serif; cursor: pointer; }
.soc-tab.on { background: rgba(34, 197, 94, .14); border-color: rgba(34, 197, 94, .5); color: var(--ink); }
#soc-body h3 { font-size: 14px; margin: 14px 0 8px; }
.soc-cheered { background: rgba(250, 204, 21, .10); border: 1px solid rgba(250, 204, 21, .35); border-radius: 12px; padding: 8px 10px; font-size: 13px; }
.soc-req, .soc-rank, .soc-admin-row { display: flex; align-items: center; gap: 8px; background: var(--field); border: 1px solid var(--line); border-radius: 14px; padding: 8px 10px; margin-bottom: 6px; }
.soc-name { flex: 1; font-weight: 700; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-req small { color: var(--muted); font-size: 12px; }
.soc-yes, .card button.soc-yes, .soc-no, .card button.soc-no {
  width: auto; margin: 0; padding: 6px 12px; border-radius: 10px; font: 700 13px 'Cairo', sans-serif; cursor: pointer; border: 0;
}
.soc-yes, .card button.soc-yes { background: linear-gradient(180deg, var(--brand), var(--brand-dark)); color: #06210f; }
.soc-no, .card button.soc-no { background: none; border: 1px solid var(--line); color: var(--muted); }
.soc-friend { background: var(--field); border: 1px solid var(--line); border-radius: 16px; padding: 10px; margin-bottom: 8px; }
.soc-friend-top { display: flex; align-items: center; gap: 10px; }
.soc-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.soc-info strong { font-size: 14.5px; }
.soc-info small { color: var(--muted); font-size: 12px; }
.soc-mini { display: inline-flex; gap: 3px; }
.soc-mini i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--c); opacity: .5; }
.soc-mini i.on { background: var(--c); opacity: 1; }
.soc-more, .card button.soc-more { width: 34px; height: 34px; margin: 0; padding: 0; border-radius: 50%; background: none; border: 1px solid var(--line); color: var(--muted); font-size: 18px; cursor: pointer; }
.soc-cheers { display: flex; gap: 6px; margin-top: 8px; }
.soc-cheer, .card button.soc-cheer { flex: 1; width: auto; margin: 0; padding: 6px 0; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); font-size: 20px; cursor: pointer; transition: transform .12s; }
.soc-cheer:active { transform: scale(.9); }
.soc-cheer.sent { background: rgba(34, 197, 94, .18); border-color: rgba(34, 197, 94, .55); }
.soc-empty { color: var(--muted); font-size: 13.5px; line-height: 1.8; }
.soc-hint { color: var(--muted); font-size: 12.5px; margin: -4px 0 8px; }
.soc-rank.me { border-color: rgba(34, 197, 94, .5); }
.soc-pos { width: 28px; text-align: center; font-size: 17px; }
.soc-val { font-size: 13px; color: var(--ink); white-space: nowrap; }
.soc-code-box { text-align: center; background: var(--field); border: 1px solid var(--line); border-radius: 16px; padding: 12px; }
.soc-code-box small { color: var(--muted); font-size: 12.5px; }
.soc-code { display: block; font-size: 30px; letter-spacing: 4px; margin: 4px 0 10px; color: var(--brand); font-family: ui-monospace, Menlo, monospace; }
.soc-code-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.soc-wa { display: inline-block; padding: 8px 14px; border-radius: 11px; background: #25d366; color: #052e16; font-weight: 700; text-decoration: none; font-size: 13.5px; }
.soc-copy, .card button.soc-copy { width: auto; margin: 0; padding: 8px 14px; border-radius: 11px; border: 1px solid var(--line); background: none; color: var(--ink); font: 700 13.5px 'Cairo', sans-serif; cursor: pointer; }
.soc-code-input { width: 100%; box-sizing: border-box; text-transform: uppercase; letter-spacing: 3px; text-align: center; font-size: 18px; }
.soc-add-btn { width: 100%; margin-top: 8px; padding: 11px; }
.soc-safe { font-size: 12px; color: var(--muted); line-height: 1.8; margin: 14px 0 0; }
.soc-msg { margin: 8px 0 0; }

.soc-menu { position: fixed; inset: 0; z-index: 420; background: rgba(2, 6, 18, .6); display: flex; align-items: flex-end; justify-content: center; padding: 12px; }
.soc-menu-box { width: min(420px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; gap: 6px; font-family: 'Cairo', sans-serif; color: var(--ink); }
.soc-menu-box strong { font-size: 14px; padding: 2px 4px 6px; }
.soc-menu-btn { width: 100%; margin: 0; padding: 11px; border-radius: 12px; border: 1px solid var(--line); background: var(--field); color: var(--ink); font: 700 14px 'Cairo', sans-serif; cursor: pointer; }
.soc-menu-btn.danger { color: var(--danger); }
.soc-menu-btn.cancel { background: none; color: var(--muted); }

/* كتابة ستوري */
.story-pick { display: block; cursor: pointer; }
.story-pick input { display: none; }
.story-preview { position: relative; aspect-ratio: 3 / 4; max-height: 46vh; margin: 0 auto; border-radius: 18px; border: 2px dashed var(--line); display: grid; place-items: center; color: var(--muted); font-size: 14px; overflow: hidden; background: var(--field); }
.story-pick.has .story-preview { border-style: solid; }
.story-preview img { width: 100%; height: 100%; object-fit: cover; }
.story-tag { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); background: rgba(11, 18, 32, .78); color: #fff; font-weight: 700; font-size: 14px; padding: 6px 14px; border-radius: 999px; white-space: nowrap; border: 1px solid rgba(255, 255, 255, .2); }
.story-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.story-tag-btn, .card button.story-tag-btn { width: auto; margin: 0; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--field); color: var(--ink); font: 13px 'Cairo', sans-serif; cursor: pointer; }
.story-tag-btn.on { background: rgba(34, 197, 94, .16); border-color: rgba(34, 197, 94, .55); }
.story-cap-input { width: 100%; box-sizing: border-box; margin-top: 10px; }
.story-aud { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; }
.story-aud label { display: inline-flex; align-items: center; gap: 5px; }
.story-post { margin-top: 12px; }
.story-post:disabled { opacity: .5; }
#story-body h3 { font-size: 14px; margin: 12px 0 6px; }

/* عرض الستوري */
.story-view { position: fixed; inset: 0; z-index: 410; background: #000; display: flex; flex-direction: column; color: #fff; font-family: 'Cairo', sans-serif; padding: calc(8px + env(safe-area-inset-top, 0px)) 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
.sv-bars { display: flex; gap: 4px; }
.sv-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; position: relative; }
.sv-bars i.done { background: #fff; }
.sv-bars i.now::after { content: ''; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: svFill 6s linear forwards; }
[dir="rtl"] .sv-bars i.now::after { transform-origin: right; }
@keyframes svFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sv-head { display: flex; align-items: center; gap: 8px; padding: 10px 2px; }
.sv-head .soc-av { width: 34px; height: 34px; font-size: 14px; }
.sv-head small { color: rgba(255, 255, 255, .7); flex: 1; }
.sv-close, .story-view button.sv-close { width: 38px; height: 38px; margin: 0; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); border: 0; color: #fff; font-size: 16px; cursor: pointer; }
.sv-stage { position: relative; flex: 1; border-radius: 16px; overflow: hidden; background: #111; display: grid; place-items: center; }
.sv-stage img { width: 100%; height: 100%; object-fit: contain; }
.sv-caption { position: absolute; bottom: 60px; left: 12px; right: 12px; text-align: center; font-size: 16px; font-weight: 700; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); margin: 0; }
.sv-tap, .story-view button.sv-tap { position: absolute; top: 0; bottom: 0; width: 38%; margin: 0; padding: 0; background: none; border: 0; cursor: pointer; }
.sv-tap.prev { left: 0; } .sv-tap.next { right: 0; }
.sv-foot { display: flex; gap: 6px; align-items: center; padding-top: 10px; }
.sv-foot small { flex: 1; color: rgba(255, 255, 255, .75); font-size: 13px; }
.story-view .soc-cheer { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }
.sv-report, .story-view button.sv-report, .sv-del, .story-view button.sv-del { width: auto; margin: 0; padding: 8px 12px; border-radius: 12px; background: none; border: 1px solid rgba(255, 255, 255, .3); color: #fff; font: 700 13px 'Cairo', sans-serif; cursor: pointer; }

/* لوحة التحكم */
.soc-admin-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.soc-admin-info small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.soc-admin-row.report { border-color: rgba(248, 113, 113, .45); }
.soc-admin-stories { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.soc-admin-story { background: var(--field); border: 1px solid var(--line); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.soc-admin-story img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; }
.soc-admin-story small { font-size: 11.5px; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .sv-bars i.now::after { animation: none; transform: scaleX(1); } }
.story-cap-input, .soc-code-input {
  background: var(--field); color: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 12px; font-family: 'Cairo', sans-serif; font-size: 15px; outline: none;
}
.story-cap-input:focus, .soc-code-input:focus { border-color: var(--brand); }

/* ============ المسابقات والنقط ============ */
.chal-row { display: flex; gap: 8px; margin: 0 0 12px; }
.card button.chal-btn, .chal-btn {
  position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  width: auto; margin: 0; padding: 10px 8px; border-radius: 14px; border: 1px solid rgba(250, 204, 21, .4);
  background: linear-gradient(160deg, rgba(250, 204, 21, .12), transparent), var(--field); color: var(--ink); font: 700 14px 'Cairo', sans-serif; cursor: pointer;
}
.card button.chal-btn.pts, .chal-btn.pts { border-color: rgba(167, 139, 250, .45); background: linear-gradient(160deg, rgba(167, 139, 250, .14), transparent), var(--field); }
.chal-btn-ic { font-size: 18px; }
.chal-btn .soc-dot { top: -6px; inset-inline-end: -4px; }
.chal-card { background: var(--field); border: 1px solid var(--line); border-radius: 18px; padding: 12px; margin-bottom: 10px; }
.chal-card.joined { border-color: rgba(34, 197, 94, .5); }
.chal-card.off { opacity: .8; }
.chal-head { display: flex; align-items: center; gap: 10px; }
.chal-emoji { font-size: 30px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: rgba(250, 204, 21, .12); flex: 0 0 auto; }
.chal-titles { display: flex; flex-direction: column; min-width: 0; }
.chal-titles strong { font-size: 15.5px; }
.chal-titles small { color: var(--muted); font-size: 12.5px; }
.chal-desc { font-size: 13px; color: var(--ink); line-height: 1.8; margin: 8px 0 4px; }
.chal-meta { font-size: 12.5px; color: var(--muted); line-height: 1.8; }
.chal-prog { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.chal-prog small { font-size: 12.5px; }
.chal-team { color: var(--brand); }
.chal-winners { font-size: 13px; margin: 8px 0 0; }
.chal-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.chal-team-sel { flex: 1; min-width: 120px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 7px; font-family: 'Cairo', sans-serif; }
.chal-board { margin-top: 10px; }
.chal-board .soc-rank.hit .soc-val { color: #facc15; }
.chal-teams { margin-bottom: 8px; }
.chal-msg { margin: 6px 0 0; }
#chal-body h3, #pts-body h3 { font-size: 14px; margin: 14px 0 8px; }
.pts-balance { text-align: center; background: linear-gradient(160deg, rgba(167, 139, 250, .16), transparent), var(--field); border: 1px solid rgba(167, 139, 250, .45); border-radius: 18px; padding: 12px; display: flex; flex-direction: column; }
.pts-balance span { font-size: 13px; color: var(--muted); }
.pts-balance strong { font-size: 36px; color: #c4b5fd; line-height: 1.3; }
.pts-balance small { color: var(--muted); font-size: 12px; }
.pts-reward { display: flex; align-items: center; gap: 10px; background: var(--field); border: 1px solid var(--line); border-radius: 14px; padding: 9px 10px; margin-bottom: 6px; }
.pts-emoji { font-size: 26px; width: 40px; text-align: center; }
.pts-reward .soc-yes:disabled { background: var(--surface-2); color: var(--muted); }
.pts-st.approved { color: var(--brand); } .pts-st.rejected { color: var(--danger); }
.chal-tpls { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.card button.chal-tpl, .chal-tpl { width: auto; margin: 0; padding: 7px 11px; border-radius: 12px; border: 1px solid var(--line); background: var(--field); color: var(--ink); font: 13px 'Cairo', sans-serif; cursor: pointer; }
.card button.chal-tpl.idea, .chal-tpl.idea { display: flex; flex-direction: column; align-items: flex-start; text-align: start; width: 100%; border-color: rgba(167, 139, 250, .45); }
.chal-tpl.idea small { color: var(--muted); font-size: 12px; }
.chal-ideas { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; font-size: 13px; color: var(--muted); }
.chal-lbl { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--muted); flex: 1; }
.rw-emoji { max-width: 70px; text-align: center; }
.rw-cost { max-width: 110px; margin-top: 4px; }
.chal-admin-row .soc-admin-info small { white-space: normal; }

/* فريق الإنبودي */
.card button.ib-ai-btn, .ib-ai-btn { width: 100%; margin: 4px 0 4px; padding: 12px; border-radius: 14px; border: 1px dashed rgba(56, 189, 248, .6); background: rgba(56, 189, 248, .1); color: #bae6fd; font: 700 14.5px 'Cairo', sans-serif; cursor: pointer; }
.ib-ai-btn:disabled { opacity: .6; }
.ib-extra { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.ib-chip { font-size: 12.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.ib-analysis { margin-top: 10px; background: linear-gradient(160deg, rgba(56, 189, 248, .08), transparent), var(--field); border: 1px solid rgba(56, 189, 248, .35); border-radius: 14px; padding: 10px 12px; }
.ib-analysis.empty, .ib-analysis.busy { background: none; border-style: dashed; color: var(--muted); font-size: 13px; }
.ib-an-title { font-size: 12px; color: #7dd3fc; font-weight: 700; }
.ib-an-head { display: block; font-size: 15px; margin: 2px 0 4px; }
.ib-an-sum { font-size: 13.5px; line-height: 1.9; margin: 0 0 6px; }
.ib-an-label { font-size: 12.5px; color: var(--muted); font-weight: 700; margin-top: 6px; }
.ib-an-list { margin: 2px 0 0; padding-inline-start: 18px; font-size: 13px; line-height: 1.8; }
.ib-an-list.flags li { color: var(--warn); }
.ib-an-next { font-size: 12.5px; margin: 6px 0 0; }
.ib-an-note { font-size: 11.5px; color: var(--muted); margin: 6px 0 0; }
.card button.ib-analyze-btn { width: auto; margin: 4px 0 0; padding: 7px 14px; font-size: 13px; }

/* الأكل المفضّل */
.food-pref { background: var(--field); border: 1px solid var(--line); border-radius: 14px; padding: 8px; margin-bottom: 10px; }
.fp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.fp-chips:empty { display: none; }
.fp-chip { display: inline-flex; align-items: center; gap: 4px; background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .4); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 13px; }
#ob-food-dislikes .fp-chip { background: rgba(248, 113, 113, .1); border-color: rgba(248, 113, 113, .4); }
.card button.fp-x, .fp-x { width: 22px; height: 22px; margin: 0; padding: 0; border-radius: 50%; background: none; border: 0; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.fp-row { display: flex; gap: 6px; align-items: center; }
.fp-row .fp-input { flex: 1; margin: 0; }
.card button.fp-add { width: auto; margin: 0; padding: 9px 16px; }
.fp-box { background: var(--field); border: 1px solid rgba(34, 197, 94, .35); border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; }
.fp-box-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.fp-line { margin: 2px 0; font-size: 13.5px; line-height: 1.8; }
.fp-line.dislike { color: #fca5a5; }
.picker-item.fp-like, #food-list li.fp-like { border-color: rgba(34, 197, 94, .5); }
.picker-item.fp-dislike, #food-list li.fp-dislike { opacity: .65; }
.fp-tag { font-size: 11.5px; white-space: nowrap; margin-inline-start: auto; }
.fp-like .fp-tag { color: #22c55e; }
.fp-dislike .fp-tag { color: #f87171; }
#food-list li .fp-tag { flex-shrink: 0; }

/* ============ العلاج الطبيعي ============ */
.ph-ro-note { background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.4); color: var(--warn); border-radius: 12px; padding: 9px 12px; font-size: 12.5px; text-align: start; }
#physio-panel.ro .ph-edit, #physio-panel.ro .ph-del, #physio-panel.ro .mp-add, #physio-panel.ro .mod-del { display: none !important; }
#physio-panel .add-box { text-align: start; }
.ph-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 7px; padding: 7px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); }
.ph-row > input, .ph-row > select { flex: 1 1 120px; min-width: 0; margin: 0; }
.ph-row > input.ph-deg { flex: 0 0 74px; }
.ph-norm { font-size: 11.5px; color: var(--muted); flex: 1 1 100%; }
.ph-norm.ok { color: var(--brand); } .ph-norm.mid { color: var(--warn); } .ph-norm.low { color: var(--danger); }
.card button.ph-add { width: auto; margin: 0 0 6px; padding: 4px 0; font-size: 12.5px; }
.ph-pain { margin: 6px 0; }
.ph-pain-val { color: var(--brand); }
.ph-range { width: 100%; accent-color: var(--brand); }
.ph-hist { border: 1px solid var(--line); border-radius: 12px; padding: 8px 11px; margin-bottom: 7px; font-size: 12.5px; }
.ph-hist-diff { color: var(--muted); font-size: 12px; margin-top: 3px; line-height: 1.7; }
.ph-prog { margin-top: 8px; }
.ph-prog-line { font-weight: 800; font-size: 14px; }
.ph-prog-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.ph-bar { height: 8px; border-radius: 99px; background: var(--field); border: 1px solid var(--line); overflow: hidden; margin-top: 6px; }
.ph-bar span { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.ph-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
#ph-session-form { border: 1px dashed var(--brand); border-radius: 14px; padding: 10px; margin: 8px 0 12px; }
.ph-sess { border: 1px solid var(--line); border-radius: 12px; padding: 8px 11px; margin-top: 7px; background: var(--field); }
.ph-sess-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.ph-sess-head .ph-del { margin-inline-start: auto !important; }
.ph-pain-chip { font-size: 11.5px; padding: 2px 8px; border-radius: 99px; background: rgba(34,197,94,.12); color: var(--brand); white-space: nowrap; }
.ph-sess-items { font-size: 12px; color: var(--ink); margin-top: 4px; line-height: 1.7; }
.ph-sess-notes { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.7; }
.ph-home-row { display: flex; align-items: flex-start; gap: 9px; border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; margin-bottom: 7px; text-align: start; background: var(--field); }
.ph-home-text { flex: 1; min-width: 0; }
.ph-home-icon { width: 20px; height: 20px; color: #38bdf8; flex: 0 0 auto; margin-top: 2px; }
.ph-home-add { margin-top: 8px; }
.ph-card { border: 1px solid var(--line); background: var(--surface-2); border-radius: 16px; padding: 12px 14px; margin: 10px 0; text-align: start; }
.ph-diag { display: block; margin-bottom: 4px; }
.ph-bars { display: flex; align-items: flex-end; gap: 6px; height: 90px; margin-top: 6px; }
.ph-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; }
.ph-bar-col small { font-size: 10.5px; color: var(--muted); }
.ph-bar-v { width: 100%; max-width: 26px; border-radius: 6px 6px 3px 3px; background: var(--brand); }
.ph-bar-v.mid { background: var(--warn); } .ph-bar-v.low { background: var(--danger); }
#client-physio { text-align: start; }
#client-physio h2, #client-physio h3 { text-align: center; }
.card button.home-card.hc-physio { border-color: rgba(56,189,248,.34); }
.card button.home-card.hc-physio .home-card-icon { color: #38bdf8; }

/* ============ مكان الشغل على الخريطة + الأقرب ============ */
.pw-map-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.card .pw-map-row button { width: auto; margin: 0; }
.pw-map-ok { color: var(--brand) !important; }
.pw-map-warn { color: var(--warn) !important; }
.pw-map-line { gap: 10px; flex-wrap: wrap; }
.pw-map-link { color: #38bdf8; font-weight: 700; text-decoration: none; }
.pw-map-link:hover { text-decoration: underline; }
.pw-dist { font-size: 12px; color: var(--brand); font-weight: 700; }
.team-near-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.card .team-near-row button { width: auto; margin: 0; padding: 8px 14px; font-size: 13px; }
.card .team-near-row button.on { border-color: var(--brand); color: var(--brand); }
.ap-dist { font-size: 10px; font-weight: 700; color: #38bdf8; line-height: 1; }