/* =========================================================
   البنك الأخضر — Design tokens
   Palette:  forest #14532D · leaf #3F9142 · sprout #8BC34A
             sand #F6F3EA · earth #8D6748 · gold #C9A227
   Type:     Almarai (display) · Tajawal (body)
   ========================================================= */

:root{
  --forest:#14532D;
  --forest-dark:#0E3B20;
  --leaf:#3F9142;
  --sprout:#8BC34A;
  --sand:#F6F3EA;
  --sand-deep:#EFEADE;
  --card:#FFFFFF;
  --earth:#8D6748;
  --gold:#C9A227;
  --ink:#1E2A1E;
  --muted:#6B7770;
  --line:#E4E7DF;
  --radius-lg:22px;
  --radius-md:16px;
  --shadow-soft: 0 10px 30px rgba(20,83,45,0.08);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  background:#DDE6D9;
  font-family:"Tajawal", sans-serif;
  color:var(--ink);
  display:flex;
  justify-content:center;
  min-height:100vh;
}

/* Phone frame for desktop preview; collapses to full-bleed on real mobile/APK */
.phone{
  width:430px;
  min-height:100vh;
  background:var(--sand);
  position:relative;
  display:flex;
  flex-direction:column;
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
@media (max-width: 460px){
  .phone{ width:100%; box-shadow:none; }
}

/* ===================== HEADER ===================== */
.app-header{
  background: linear-gradient(160deg, var(--forest) 0%, var(--forest-dark) 100%);
  padding:18px 20px 26px;
  border-radius: 0 0 26px 26px;
  color:#fff;
}
.header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:10px; cursor:pointer; }
.brand-mark{
  width:44px; height:44px;
  background:rgba(255,255,255,0.12);
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.brand-logo-img{ width:100%; height:100%; object-fit:contain; padding:4px; box-sizing:border-box; }
.brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.brand-text strong{ font-family:"Almarai", sans-serif; font-size:16px; font-weight:800; }
.brand-text span{ font-size:11px; color:#CFE3CF; }

.avatar-btn{
  width:38px; height:38px; border-radius:50%;
  background: var(--sprout);
  border:2px solid rgba(255,255,255,0.5);
  color:var(--forest-dark);
  font-family:"Almarai", sans-serif;
  font-weight:800; font-size:12px;
  cursor:pointer;
}

.greeting{
  font-family:"Almarai", sans-serif;
  font-weight:700;
  font-size:19px;
  margin:16px 2px 0;
}

/* ===================== SCREENS ===================== */
.screens{
  flex:1;
  overflow-y:auto;
  padding: 16px 16px 100px;
}
.screen{ display:none; animation: fadeUp .35s ease; }
.screen.active{ display:block; }

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ===================== CARDS ===================== */
.card{
  background:var(--card);
  border-radius:var(--radius-lg);
  padding:18px;
  margin-bottom:16px;
  box-shadow: var(--shadow-soft);
}

/* Weather card */
.weather-main{ display:flex; align-items:center; gap:14px; }
.weather-icon{ font-size:38px; }
.temp{ font-family:"Almarai", sans-serif; font-weight:800; font-size:30px; color:var(--forest); line-height:1; }
.cond{ color:var(--muted); font-size:13px; margin-top:4px; }

.vine-divider{ margin:14px 0; opacity:.9; }
.vine-divider svg{ width:100%; height:12px; display:block; }

.weather-stats{ display:flex; justify-content:space-between; }
.stat{ display:flex; flex-direction:column; gap:4px; align-items:center; flex:1; }
.stat-label{ font-size:11px; color:var(--muted); }
.stat-value{ font-family:"Almarai", sans-serif; font-weight:700; font-size:14px; }
.stat.care-good .stat-value{ color:var(--leaf); }
.stat.care-warn .stat-value{ color:#C77800; }
.weather-tip{
  margin:10px 0 0; font-size:12px; color:var(--forest); background:#EAF5EA;
  border-radius:10px; padding:8px 10px; line-height:1.6;
}
.weather-tip[hidden]{ display:none; }

/* Growth / points card */
.growth-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.growth-title{ display:block; font-size:12px; color:var(--muted); }
.growth-level{ font-family:"Almarai", sans-serif; font-size:18px; color:var(--forest); }
.points-badge{
  background: linear-gradient(135deg, var(--gold), #E4C55A);
  color:#5A4400;
  font-family:"Almarai", sans-serif;
  font-weight:800;
  font-size:13px;
  padding:6px 12px;
  border-radius:999px;
}

.growth-path{ display:flex; align-items:center; }
.growth-step{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:0 0 auto; }
.growth-icon{
  width:36px; height:36px; border-radius:50%;
  background:var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  filter:grayscale(1) opacity(.5);
}
.growth-step.done .growth-icon,
.growth-step.current .growth-icon{
  background:#EAF5EA; filter:none;
}
.growth-step.current .growth-icon{
  box-shadow:0 0 0 3px rgba(63,145,66,0.25);
  background:var(--sprout);
}
.growth-name{ font-size:9.5px; color:var(--muted); }
.growth-step.current .growth-name{ color:var(--forest); font-weight:700; }
.growth-line{ flex:1; height:3px; background:var(--line); margin:0 2px 18px; border-radius:2px; }
.growth-line.filled{ background:var(--sprout); }
.growth-hint{ margin:14px 2px 0; font-size:12px; color:var(--muted); }

/* Section titles */
.section-title{
  font-family:"Almarai", sans-serif;
  font-size:16px;
  font-weight:800;
  color:var(--forest);
  margin: 8px 4px 12px;
}

/* Services grid */
.services-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  margin-bottom:18px;
}
.service-tile{
  background:var(--card);
  border:none;
  border-radius:var(--radius-md);
  padding:16px 8px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  box-shadow: var(--shadow-soft);
  font-family:"Tajawal", sans-serif;
  font-size:11.5px;
  color:var(--ink);
  cursor:pointer;
  transition: transform .15s ease;
}
.service-tile:active{ transform: scale(0.94); }
.tile-icon{
  width:42px; height:42px;
  border-radius:12px;
  background:#EAF5EA;
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
}

/* Tip card */
.tip-card{ display:flex; gap:12px; background:linear-gradient(135deg,#EFF7EC 0%,#E4F2E0 100%); border:1px solid #DCEED9; }
.tip-icon{
  font-size:20px; flex:0 0 auto; width:38px; height:38px; border-radius:11px;
  background:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-soft);
}
.tip-card-body{ flex:1; min-width:0; }
.tip-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tip-card strong{ font-family:"Almarai", sans-serif; color:var(--forest); font-size:13.5px; }
.tip-card-cat{
  font-size:10.5px; color:var(--forest); background:#fff; border-radius:999px;
  padding:2px 8px; flex:0 0 auto;
}
body.dark-mode .tip-card-cat{ background:#2B322B; }
.tip-card p{ margin:4px 0 0; font-size:12.5px; color:var(--muted); line-height:1.6; }

/* News */
.news-list{ margin-bottom:16px; }
.news-item{
  display:flex; gap:10px; align-items:flex-start;
  background:var(--card); border-radius:14px; padding:12px 14px; margin-bottom:8px;
  box-shadow: var(--shadow-soft);
}
.news-dot{ width:8px; height:8px; border-radius:50%; background:var(--sprout); margin-top:6px; flex:0 0 auto; }
.news-item strong{ font-size:13px; display:block; line-height:1.5; }
.news-date{ font-size:11px; color:var(--muted); }

/* Alert */
.alert-card{
  display:flex; align-items:center; gap:10px;
  background: #FFF7E6; border:1px solid #F0DFB0; color:#6B4E00; font-size:13px;
}
.alert-icon{ font-size:18px; }

/* ===================== STUB SCREENS ===================== */
.stub{
  text-align:center;
  padding: 90px 20px;
  color:var(--muted);
}
.stub-icon{ font-size:46px; display:block; margin-bottom:16px; }
.stub h3{ font-family:"Almarai", sans-serif; color:var(--forest); margin:0 0 8px; }
.stub p{ font-size:13.5px; line-height:1.7; max-width:280px; margin:0 auto; }

/* ===================== BOTTOM NAV ===================== */
.bottom-nav{
  position:absolute; bottom:0; left:0; right:0;
  height:78px;
  background:#fff;
  border-radius:26px 26px 0 0;
  box-shadow: 0 -8px 24px rgba(20,83,45,0.10);
  display:flex; align-items:center; justify-content:space-around;
  padding:0 6px;
}
.nav-item{
  background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  color:var(--muted); font-family:"Tajawal", sans-serif; font-size:10.5px;
  flex:1;
}
.nav-icon{ font-size:19px; }
.nav-icon-svg{ display:flex; align-items:center; justify-content:center; }
.nav-item.active{ color:var(--forest); font-weight:700; }

.nav-fab{
  width:56px; height:56px; border-radius:50%;
  background: linear-gradient(150deg, var(--leaf), var(--forest));
  border:5px solid var(--sand);
  display:flex; align-items:center; justify-content:center;
  margin-top:-30px;
  box-shadow: 0 8px 18px rgba(20,83,45,0.35);
  cursor:pointer;
}
.fab-icon{ font-size:22px; color:#fff; display:flex; }

/* Scrollbar (desktop preview only) */
.screens::-webkit-scrollbar{ width:6px; }
.screens::-webkit-scrollbar-thumb{ background:#C9D6C4; border-radius:3px; }

/* ===================== SCREEN HEADINGS (non-home screens) ===================== */
.screen-heading{
  font-family:"Almarai", sans-serif;
  font-size:19px;
  font-weight:800;
  color:var(--forest);
  margin: 4px 4px 4px;
}
.screen-sub{
  font-size:13px;
  color:var(--muted);
  margin: 0 4px 18px;
  line-height:1.6;
}

/* ===================== عيادة النباتات — عام ===================== */
.clinic-stage[hidden]{ display:none; }

.btn-primary, .btn-secondary, .btn-ghost{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:"Tajawal", sans-serif;
  font-weight:700;
  font-size:14px;
  border-radius:14px;
  padding:13px 16px;
  cursor:pointer;
  border:none;
  text-align:center;
}
.btn-primary{
  background: linear-gradient(150deg, var(--leaf), var(--forest));
  color:#fff;
  box-shadow: 0 8px 18px rgba(20,83,45,0.25);
}
.btn-secondary{
  background:#EAF5EA;
  color:var(--forest);
  border:1px solid #CFE3CF;
}
.btn-ghost{
  background:transparent;
  color:var(--muted);
  border:1px solid var(--line);
}
.full{ width:100%; }

/* --- حالة رفع الصورة --- */
.upload-card{ text-align:center; }
.upload-illustration{
  font-size:38px; margin-bottom:10px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  color:var(--forest);
}
.camera-icon-svg{ display:inline-block; vertical-align:middle; }
.btn-icon-svg-wrap{ display:inline-flex; vertical-align:middle; }
.upload-hint{
  font-size:12.5px; color:var(--muted); line-height:1.7;
  margin: 0 0 18px;
}
.upload-actions{ display:flex; flex-direction:column; gap:10px; }

/* --- حالة المعاينة --- */
.preview-img{
  width:100%; max-height:280px; object-fit:cover;
  border-radius:16px; margin-bottom:14px; display:block;
  background:#EFEFEF;
}
.preview-actions{ display:flex; flex-direction:column; gap:10px; }

/* --- حالة التحليل --- */
.analyzing-card{ text-align:center; padding:34px 18px; }
.spinner{
  width:42px; height:42px; margin:0 auto 16px;
  border-radius:50%;
  border:4px solid #DCEED9;
  border-top-color: var(--leaf);
  animation: spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.analyzing-card strong{ display:block; color:var(--forest); font-family:"Almarai", sans-serif; font-size:14px; }
.analyzing-sub{ font-size:12px; color:var(--muted); margin-top:6px; }

/* --- تقرير التشخيص --- */
.report-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
.report-thumb{
  width:64px; height:64px; border-radius:14px; object-fit:cover; flex:0 0 auto;
  background:#EFEFEF;
}
.report-head strong{ display:block; font-family:"Almarai", sans-serif; font-size:15.5px; color:var(--ink); }
.report-sci{ display:block; font-size:11.5px; color:var(--muted); font-style:italic; margin:2px 0 6px; }
.confidence-badge{
  display:inline-block;
  background:#EAF5EA; color:var(--forest);
  font-size:11px; font-weight:700;
  padding:3px 10px; border-radius:999px;
}

.report-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 0; border-bottom:1px dashed var(--line);
}
.report-label{ font-size:12.5px; color:var(--muted); }
.status-badge, .severity-badge{
  font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px;
}
.status-badge.ok, .status-badge{ background:#FFF2E0; color:#9A6400; }
.severity-badge{ background:#FDECEC; color:#B3261E; }

.report-section-title{
  font-family:"Almarai", sans-serif;
  font-size:13.5px; color:var(--forest);
  margin:16px 0 8px;
}
.report-list{ margin:0; padding-inline-start:18px; }
.report-list li{ font-size:13px; color:var(--ink); line-height:1.9; }

.report-steps{ margin:0; padding-inline-start:18px; display:flex; flex-direction:column; gap:6px; }
.report-steps li{ font-size:13px; color:var(--ink); line-height:1.7; }

.recheck-box{
  display:flex; align-items:center; gap:8px;
  background:#EFF7EC; border:1px solid #DCEED9; border-radius:12px;
  padding:10px 14px; margin:16px 0 18px; font-size:12.5px; color:var(--forest);
}

/* ===================== HEADER: HAMBURGER + LAYOUT ===================== */
.header-left-group{ display:flex; align-items:center; gap:10px; }

.menu-btn{
  width:36px; height:36px;
  background:rgba(255,255,255,0.12);
  border:none; border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  cursor:pointer;
}
.menu-btn span{ width:16px; height:2px; background:#fff; border-radius:2px; }

/* ===================== SIDE DRAWER ===================== */
.drawer-backdrop{
  position:absolute; inset:0;
  background:rgba(10,20,10,0.45);
  opacity:0; pointer-events:none;
  transition: opacity .25s ease;
  z-index:40;
}
.drawer{
  position:absolute; top:0; bottom:0; right:0;
  width:80%; max-width:320px;
  background:var(--sand);
  z-index:50;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.22,.8,.34,1);
  display:flex; flex-direction:column;
  box-shadow: -12px 0 30px rgba(0,0,0,0.18);
}
.phone.drawer-active .drawer-backdrop{ opacity:1; pointer-events:auto; }
.phone.drawer-active .drawer{ transform: translateX(0); }

.drawer-head{
  display:flex; align-items:center; gap:12px;
  padding:22px 18px 18px;
  background: linear-gradient(160deg, var(--forest) 0%, var(--forest-dark) 100%);
  color:#fff;
  position:relative;
}
.drawer-avatar{
  width:44px; height:44px; border-radius:50%;
  background:var(--sprout); color:var(--forest-dark);
  display:flex; align-items:center; justify-content:center;
  font-family:"Almarai", sans-serif; font-weight:800; font-size:13px;
  flex:0 0 auto;
}
.drawer-head strong{ display:block; font-family:"Almarai", sans-serif; font-size:14px; }
.drawer-head span{ font-size:11.5px; color:#CFE3CF; }
.drawer-close{
  position:absolute; left:14px; top:18px;
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,0.15); border:none; color:#fff;
  cursor:pointer; font-size:13px;
}

.drawer-nav{ display:flex; flex-direction:column; padding:10px 8px; overflow-y:auto; flex:1; }
.drawer-link{
  display:flex; align-items:center; gap:12px;
  background:none; border:none; text-align:right;
  font-family:"Tajawal", sans-serif; font-size:13.5px; color:var(--ink);
  padding:13px 10px; border-radius:12px; cursor:pointer;
}
.drawer-link:hover, .drawer-link:active{ background:#EAF5EA; }
.drawer-link-icon{ font-size:17px; width:22px; text-align:center; }
.aboutapp-nav-icon{ display:inline-flex; align-items:center; justify-content:center; color:var(--ink); }

.drawer-footer{ border-top:1px solid var(--line); padding:10px 8px 18px; }

/* ===================== التنبيهات (Notifications screen) ===================== */
.add-reminder-btn{ margin-bottom:16px; }

.reminders-list{ display:flex; flex-direction:column; gap:10px; }
.reminder-card{
  display:flex; align-items:center; gap:12px;
  background:var(--card); border-radius:16px; padding:14px;
  box-shadow: var(--shadow-soft);
}
.reminder-icon{
  width:42px; height:42px; border-radius:12px;
  background:#EAF5EA; display:flex; align-items:center; justify-content:center;
  font-size:19px; flex:0 0 auto;
}
.reminder-info{ flex:1; }
.reminder-info strong{ display:block; font-size:13.5px; }
.reminder-info span{ font-size:11.5px; color:var(--muted); }
.reminder-delete{
  background:none; border:none; color:#B3261E; font-size:16px; cursor:pointer;
  padding:6px;
}
.empty-reminders{ text-align:center; color:var(--muted); font-size:13px; margin-top:30px; }
.empty-reminders[hidden]{ display:none; }
.reminder-permission-card{ margin-bottom:14px; }
.reminder-permission-card .btn-primary{ margin-top:10px; padding:8px 16px; font-size:13px; width:auto; }
.reminder-permission-card.notif-blocked{ border:1px solid #E3B34A; }

/* ===================== مهامي اليومية (Tasks screen) ===================== */
.tasks-progress-card{
  background:var(--card); border-radius:16px; padding:14px 16px;
  box-shadow:var(--shadow-soft); margin-bottom:14px;
  display:flex; flex-direction:column; gap:8px;
}
.tasks-progress-bar{ width:100%; height:8px; border-radius:999px; background:#EAF5EA; overflow:hidden; }
.tasks-progress-fill{ height:100%; background:var(--leaf); border-radius:999px; transition:width .3s ease; width:0%; }
#tasks-progress-label{ font-size:12.5px; color:var(--muted); }
.tasks-weather-tip{ margin-bottom:14px; }
.tasks-list{ display:flex; flex-direction:column; gap:10px; }
.task-card{
  display:flex; align-items:center; gap:12px;
  background:var(--card); border-radius:16px; padding:14px;
  box-shadow: var(--shadow-soft);
}
.task-card.done{ opacity:.6; }
.task-card.done .task-info strong{ text-decoration:line-through; }
.task-checkbox{
  width:26px; height:26px; border-radius:8px; flex:0 0 auto;
  border:2px solid var(--leaf); background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:transparent; line-height:1;
}
.task-checkbox.checked{ background:var(--leaf); color:#fff; }
.task-icon{
  width:42px; height:42px; border-radius:12px;
  background:#EAF5EA; display:flex; align-items:center; justify-content:center;
  font-size:19px; flex:0 0 auto;
}
.task-info{ flex:1; min-width:0; }
.task-info strong{ display:block; font-size:13.5px; }
.task-info span{ font-size:11.5px; color:var(--muted); }
.task-tag{
  font-size:10px; color:var(--forest); background:#EAF5EA;
  border-radius:999px; padding:2px 8px; margin-inline-start:6px;
}
.reminder-permission-card.notif-on{ background:linear-gradient(135deg,#EAF7EE 0%,#DCF2E3 100%); border-color:#BFE6C9; }
.reminder-permission-card.notif-on strong{ color:#1E7B3E; }

/* ===================== الفعاليات (Events screen) ===================== */
.events-list{ display:flex; flex-direction:column; gap:12px; }
.event-card{
  display:flex; align-items:flex-start; gap:12px;
  background:var(--card); border-radius:16px; padding:14px;
  box-shadow: var(--shadow-soft);
}
.event-card-clickable{ cursor:pointer; }
.event-card-clickable:active{ transform: scale(0.98); }
.event-thumb{
  width:64px; height:64px; border-radius:12px; object-fit:cover; flex:0 0 auto;
}
.event-thumb-empty{
  display:flex; align-items:center; justify-content:center;
  background:#EAF5EA; font-size:22px;
}
.event-info{ flex:1; min-width:0; }
.event-info strong{ display:block; font-size:13.5px; margin-bottom:2px; }
.event-info span{ font-size:11.5px; color:var(--muted); }
.event-desc{ font-size:12.5px; color:var(--ink); margin:6px 0 0; line-height:1.6; }
.event-link{
  display:inline-block; margin-top:8px; font-size:12px; color:var(--forest);
  text-decoration:none; font-weight:700;
}
.event-delete{
  background:none; border:none; color:#B3261E; font-size:16px; cursor:pointer;
  padding:6px; flex:0 0 auto;
}
.event-image-preview-wrap{ margin:4px 0 14px; }
.garden-identify-btn{
  margin-bottom:10px;
  background:linear-gradient(135deg,#EFF7EC 0%,#E4F2E0 100%);
  border:1px dashed var(--forest); color:var(--forest); font-weight:700;
}
.garden-identify-btn:disabled{ opacity:.6; }
.garden-identify-result{
  font-size:12px; line-height:1.7; border-radius:12px; padding:10px 12px;
  margin-bottom:14px; background:var(--card); box-shadow: var(--shadow-soft);
}
.garden-identify-result.loading{ color:var(--muted); }
.garden-identify-result.ok{ color:var(--forest); border-right:3px solid var(--forest); }
.garden-identify-result.fail{ color:#B3261E; border-right:3px solid #B3261E; }
.event-image-preview{
  width:100%; max-height:160px; object-fit:cover; border-radius:12px;
}

/* ===================== BOTTOM SHEET (إضافة تذكير) ===================== */
.sheet-backdrop{
  position:absolute; inset:0;
  background:rgba(10,20,10,0.45);
  opacity:0; pointer-events:none;
  transition: opacity .25s ease;
  z-index:60;
}
.sheet-backdrop.active{ opacity:1; pointer-events:auto; }

.bottom-sheet{
  position:absolute; left:0; right:0; bottom:0;
  background:#fff;
  border-radius:24px 24px 0 0;
  padding:10px 20px 26px;
  max-height: 82%;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.22,.8,.34,1);
  z-index:70;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.15);
}
.bottom-sheet.open{ transform: translateY(0); }

.sheet-handle{
  width:40px; height:4px; background:var(--line); border-radius:3px;
  margin: 6px auto 14px;
}
.sheet-title{
  font-family:"Almarai", sans-serif; font-size:15.5px; color:var(--forest);
  margin:0 0 16px;
}

.field-label{
  display:block; font-size:12px; color:var(--muted); margin:0 2px 6px;
}
.field-input{
  width:100%; box-sizing:border-box;
  font-family:"Tajawal", sans-serif; font-size:14px;
  background:#F6F3EA; border:1px solid var(--line); border-radius:12px;
  padding:11px 14px; margin-bottom:14px; color:var(--ink);
}
.sheet-actions{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }

/* ===================== الأطلس الأخضر (Atlas) ===================== */
.atlas-search-box{
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:10px 14px; margin-bottom:12px;
  box-shadow: var(--shadow-soft);
}
.atlas-search-box input{
  border:none; outline:none; background:transparent;
  font-family:"Tajawal", sans-serif; font-size:13.5px; color:var(--ink);
  flex:1;
}
.search-icon{ font-size:14px; opacity:.6; }

.atlas-filters{
  display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; margin-bottom:14px;
}
.filter-chip{
  flex:0 0 auto;
  background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:7px 16px;
  font-family:"Tajawal", sans-serif; font-size:12px; color:var(--muted);
  cursor:pointer; white-space:nowrap;
}
.filter-chip.active{
  background: var(--forest); color:#fff; border-color:var(--forest);
}

.atlas-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:12px;
}
.plant-card{
  background:#fff; border-radius:16px; overflow:hidden;
  box-shadow: var(--shadow-soft); cursor:pointer;
  display:flex; flex-direction:column;
}
.plant-card-img{
  width:100%; height:110px; object-fit:cover; background:#EFEFEF; display:block;
}
.plant-card-body{ padding:10px 12px 12px; }
.plant-card-body strong{
  display:block; font-size:12.5px; color:var(--ink); line-height:1.4;
  margin-bottom:2px;
}
.plant-card-body span{
  font-size:10.5px; color:var(--muted); font-style:italic;
}
.atlas-empty{ text-align:center; color:var(--muted); font-size:13px; margin-top:40px; }
.atlas-empty[hidden]{ display:none; }

/* ===================== شاشة تفاصيل النبات ===================== */
.back-btn{
  background:none; border:none; color:var(--forest);
  font-family:"Tajawal", sans-serif; font-weight:700; font-size:13.5px;
  padding:6px 2px; margin-bottom:12px; cursor:pointer;
}
.detail-gallery{
  display:flex; gap:8px; overflow-x:auto; margin-bottom:16px;
  border-radius:16px;
}
.detail-gallery img{
  width:220px; height:170px; object-fit:cover; border-radius:16px; flex:0 0 auto;
  background:#EFEFEF;
}
.detail-name{ font-family:"Almarai", sans-serif; font-size:19px; color:var(--forest); margin:0 0 2px; }

.detail-name-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.detail-name-row .detail-name{ margin:0; }
.speak-btn{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  background:var(--forest); color:#fff; border:none; font-size:18px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow: var(--shadow-soft);
}
.speak-btn.speaking{ background:var(--gold); animation: speakPulse 1.2s ease-in-out infinite; }
@keyframes speakPulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(224,193,90,0.5); }
  50%{ box-shadow: 0 0 0 8px rgba(224,193,90,0); }
}
.detail-sci{ font-size:12.5px; color:var(--muted); font-style:italic; display:block; margin-bottom:4px; }
.detail-category{
  display:inline-block; background:#EAF5EA; color:var(--forest);
  font-size:11px; padding:3px 10px; border-radius:999px; margin-bottom:14px;
}
.detail-desc{ font-size:13.5px; line-height:1.9; color:var(--ink); margin-bottom:18px; }
.detail-care-title{ font-family:"Almarai", sans-serif; font-size:14.5px; color:var(--forest); margin-bottom:10px; }
.detail-care-steps{ display:flex; flex-direction:column; gap:10px; margin:0 0 24px; padding:0; list-style:none; }
.detail-care-steps li{
  display:flex; gap:10px; align-items:flex-start;
  background:#F6F3EA; color:#1E2A1E; border-radius:12px; padding:10px 12px;
  font-size:13px; line-height:1.7;
}
.detail-care-steps li::before{
  content:"🌿"; flex:0 0 auto;
}

/* ===================== شاشة التسجيل الأولى (Onboarding) ===================== */
.onboarding-overlay{
  position:fixed; inset:0; z-index:200;
  max-width:430px; margin:0 auto;
  background: linear-gradient(160deg, var(--forest) 0%, var(--forest-dark) 100%);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.phone:not(.onboarding-active) #onboarding-overlay{ display:none; }
.phone:not(.lang-active) #lang-overlay{ display:none; }

.onboarding-card{
  width:100%; max-width:340px;
  background:#fff; border-radius:22px; padding:28px 22px;
  box-shadow: var(--shadow-soft);
  text-align:center;
}
.onboarding-step{ display:none; }
.onboarding-step.active{ display:block; animation: onbFade .25s ease; }
@keyframes onbFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }

.onboarding-icon{ font-size:40px; display:block; margin-bottom:10px; }
.onboarding-logo-img{ width:72px; height:auto; display:block; margin:0 auto 10px; }
.onboarding-title{
  font-family:"Almarai", sans-serif; font-size:18px; color:var(--forest); margin:0 0 6px;
}
.onboarding-sub{ font-size:13px; color:var(--muted); margin:0 0 20px; }
.onboarding-step-count{ display:block; font-size:11.5px; color:var(--muted); margin-bottom:8px; }
.onboarding-q{
  font-family:"Almarai", sans-serif; font-size:16px; color:var(--forest);
  margin:0 0 20px; line-height:1.6;
}
.onboarding-step .field-input{ text-align:center; }

.onb-options{ display:flex; flex-direction:column; gap:10px; }
.onb-option{
  width:100%; box-sizing:border-box;
  font-family:"Tajawal", sans-serif; font-size:14px; color:var(--ink);
  background:#F6F3EA; border:1.5px solid var(--line); border-radius:12px;
  padding:12px 14px; cursor:pointer; transition: all .15s ease;
}
.onb-option:active{ transform: scale(0.97); background:#EAF5EA; border-color:var(--forest); }

/* إخفاء باقي واجهة التطبيق أثناء التسجيل */
.phone.onboarding-active .app-header,
.phone.onboarding-active .screens,
.phone.onboarding-active .bottom-nav,
.phone.onboarding-active .drawer,
.phone.onboarding-active .drawer-backdrop,
.phone.lang-active .app-header,
.phone.lang-active .screens,
.phone.lang-active .bottom-nav,
.phone.lang-active .drawer,
.phone.lang-active .drawer-backdrop{
  visibility:hidden;
}

/* ===================== الوضع الليلي (Night / Dark Mode) ===================== */
body.dark-mode{
  --forest:#3FA65E;
  --forest-dark:#0E3B20;
  --leaf:#5BC468;
  --sprout:#8BC34A;
  --sand:#161A16;
  --sand-deep:#101310;
  --card:#222822;
  --earth:#B08A63;
  --gold:#E0C15A;
  --ink:#E9EDE6;
  --muted:#93A08F;
  --line:#333B32;
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.35);
  background:#0C0F0C;
}
body.dark-mode .phone{ background:var(--sand); }
body.dark-mode .field-input{ background:#2B322B; color:var(--ink); border-color:var(--line); }
body.dark-mode .onb-option{ background:#2B322B; color:var(--ink); border-color:var(--line); }
body.dark-mode .onb-option:active{ background:#33402F; }
body.dark-mode .btn-secondary{ background:#2B322B; color:var(--ink); }
body.dark-mode .reminder-icon,
body.dark-mode .task-icon,
body.dark-mode .event-thumb-empty{ background:#2B322B; }
body.dark-mode .tasks-progress-bar,
body.dark-mode .task-tag{ background:#2B322B; }
body.dark-mode .detail-care-steps li{ background:#2B322B; color:var(--ink); }
body.dark-mode .detail-category{ background:#2B322B; }
body.dark-mode .avatar-btn{ filter:none; }

.dark-mode-toggle{ display:flex; align-items:center; gap:8px; }
.dark-mode-switch{
  width:38px; height:22px; border-radius:999px; background:#C9D6C4;
  position:relative; flex:0 0 auto; transition: background .2s ease;
}
.dark-mode-switch::after{
  content:""; position:absolute; top:2px; right:2px;
  width:18px; height:18px; border-radius:50%; background:#fff;
  transition: transform .2s ease;
}
body.dark-mode .dark-mode-switch{ background:var(--forest); }
body.dark-mode .dark-mode-switch::after{ transform: translateX(-16px); }

/* ===================== الأطلس الكامل PDF — وضع القراءة المريح ===================== */
.pdf-viewer-wrap{
  position:relative; border-radius:16px; overflow:hidden;
  background:#000; box-shadow: var(--shadow-soft);
  height: 60vh; min-height:420px;
}
.pdf-frame{ width:100%; height:100%; border:0; display:block; transition: filter .2s ease; }
.pdf-frame.mode-normal{ filter:none; }
.pdf-frame.mode-warm{ filter: sepia(0.4) saturate(1.15) brightness(0.96); }
.pdf-frame.mode-dark{ filter: invert(0.9) hue-rotate(180deg) brightness(0.92) contrast(0.95); }

.pdf-mode-bar{ display:flex; gap:8px; margin-bottom:14px; }
.pdf-mode-btn{
  flex:1; text-align:center; font-family:"Tajawal", sans-serif; font-size:13px;
  background:var(--card); border:1.5px solid var(--line); color:var(--ink);
  border-radius:12px; padding:10px 6px; cursor:pointer;
}
.pdf-mode-btn.active{ background:var(--forest); color:#fff; border-color:var(--forest); }
.pdf-placeholder{ text-align:center; padding:40px 16px; color:var(--muted); font-size:13.5px; }

/* ===================== زرار الرجوع العام (Global Back Button) ===================== */
.back-nav-btn{
  background:rgba(255,255,255,0.15); border:none; color:#fff;
  width:34px; height:34px; border-radius:10px; font-size:18px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  flex:0 0 auto;
}
body[dir="ltr"] .back-nav-btn{ transform: scaleX(-1); }

/* ===================== دعم اللغة الإنجليزية (LTR) ===================== */
body[dir="ltr"]{ font-family:"Segoe UI", Tajawal, sans-serif; }
body[dir="ltr"] .onboarding-title,
body[dir="ltr"] .screen-heading,
body[dir="ltr"] .section-title,
body[dir="ltr"] .sheet-title{ font-family:"Segoe UI", Almarai, sans-serif; }
body[dir="ltr"] .drawer{ right:auto; left:0; transform: translateX(-100%); box-shadow: 12px 0 30px rgba(0,0,0,0.18); }
body[dir="ltr"] .phone.drawer-active .drawer{ transform: translateX(0); }

.lang-option{ font-size:16px; padding:16px; }

/* ===================== مفتاح تبديل اللغة (AR / EN) في القائمة الجانبية ===================== */
.lang-toggle-pill{
  display:flex; background:#EAF5EA; border-radius:999px; padding:2px; gap:2px; flex:0 0 auto;
}
.lang-toggle-option{
  font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; color:var(--muted);
  transition: all .15s ease;
}
.lang-toggle-option.active{ background:var(--forest); color:#fff; }
body.dark-mode .lang-toggle-pill{ background:#2B322B; }

/* ===================== تنبيه تشخيصي عند فشل الاتصال بالذكاء الاصطناعي الحقيقي ===================== */
.clinic-debug-notice{
  background:#FFF3E0; border:1px solid #FFB74D; color:#8A5A00;
  border-radius:10px; padding:10px 12px; font-size:11.5px; line-height:1.6;
  margin:0 0 14px; word-break:break-word;
}
.clinic-debug-notice[hidden]{ display:none; }

/* ===================== حديقتي (My Garden) ===================== */
.garden-list{ display:flex; flex-direction:column; gap:12px; }
.garden-card{
  display:flex; align-items:flex-start; gap:12px;
  background:var(--card); border-radius:16px; padding:14px;
  box-shadow: var(--shadow-soft); position:relative;
}
.garden-card-photo{ width:64px; height:64px; border-radius:12px; object-fit:cover; flex:0 0 auto; }
.garden-card-photo-empty{
  display:flex; align-items:center; justify-content:center; background:#EAF5EA; font-size:24px;
}
.garden-card-body{ flex:1; min-width:0; }
.garden-card-body strong{ display:block; font-size:14px; margin-bottom:2px; }
.garden-mood{ font-size:12px; color:var(--muted); display:block; margin-bottom:10px; }
.garden-ai-badge{
  font-size:10.5px; color:var(--forest); background:#EAF5EA; border-radius:999px;
  padding:2px 8px; display:inline-block; margin:3px 0;
}
body.dark-mode .garden-ai-badge{ background:#2B322B; }
.garden-card-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.garden-card-actions .btn-secondary,
.garden-card-actions .btn-primary{
  padding:8px 10px; font-size:11.5px; width:auto; flex:1 1 auto; min-width:110px;
}
.garden-delete-btn{ position:absolute; top:10px; left:10px; }
body.dark-mode .garden-card-photo-empty{ background:#2B322B; }

/* ===================== الاستشارة الخضراء (شات عام) ===================== */
.consult-chat-wrap{ display:flex; flex-direction:column; height:100%; padding:4px 2px; }
.consult-chat-intro{ text-align:center; padding:10px 6px 4px; }
.consult-chat-intro .stub-icon{ font-size:34px; display:block; margin-bottom:4px; }
.consult-chat-intro h3{ margin:2px 0; }
.consult-chat-intro p{ font-size:13px; color:var(--muted); margin:0; }
.consult-quick-chips{ display:flex; flex-wrap:wrap; gap:8px; padding:10px 2px; justify-content:center; }
.chip-btn{
  background:#EAF5EA; color:var(--forest); border:1px solid var(--line); border-radius:20px;
  padding:6px 14px; font-size:12px; cursor:pointer;
}
body.dark-mode .chip-btn{ background:#2B322B; color:#9FD8A3; }
.consult-chat-messages{
  flex:1; overflow-y:auto; padding:10px 2px; display:flex; flex-direction:column; gap:8px;
  min-height:220px;
}
.consult-chat-messages .chat-bubble-plant{ background:#EAF5EA; }
body.dark-mode .consult-chat-messages .chat-bubble-plant{ background:#2B322B; }

/* ===================== نافذة الدردشة مع النبات ===================== */
.plant-chat-sheet{ display:flex; flex-direction:column; max-height:80vh; }
.plant-chat-header{ display:flex; align-items:center; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.plant-chat-avatar{ width:46px; height:46px; border-radius:50%; object-fit:cover; background:#EAF5EA; }
.plant-chat-name{ margin:0; }
.plant-chat-mood{ font-size:12px; color:var(--muted); }
.plant-chat-messages{
  flex:1; overflow-y:auto; padding:12px 2px; display:flex; flex-direction:column; gap:8px;
  min-height:160px; max-height:40vh;
}
.chat-bubble{
  max-width:80%; padding:9px 13px; border-radius:16px; font-size:13px; line-height:1.6;
}
.chat-bubble-user{ align-self:flex-end; background:var(--forest); color:#fff; border-bottom-left-radius:4px; }
.chat-bubble-plant{ align-self:flex-start; background:#EAF5EA; color:var(--ink); border-bottom-right-radius:4px; }
.chat-bubble-typing{ opacity:0.6; }
body.dark-mode .chat-bubble-plant{ background:#2B322B; }
.plant-chat-form{ display:flex; gap:8px; padding:10px 0; }
.plant-chat-form .field-input{ margin:0; flex:1; }
.plant-chat-send-btn{
  width:42px; height:42px; border-radius:50%; background:var(--forest); color:#fff;

  border:none; font-size:16px; flex:0 0 auto; cursor:pointer;
}

/* ===================== شاشة البداية المتحركة (Splash Screen) ===================== */
.splash-screen{
  position:fixed; inset:0; z-index:500;
  max-width:430px; margin:0 auto;
  background: radial-gradient(circle at 50% 40%, #FFFFFF 0%, #FAFAF6 75%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px;
  opacity:1;
  transition: opacity .5s ease;
}
.splash-screen.splash-hidden{ opacity:0; pointer-events:none; }

.splash-logo-wrap{
  position:relative; width:150px; height:150px;
  display:flex; align-items:center; justify-content:center;
}
.splash-glow{
  position:absolute; inset:-20px; border-radius:50%;
  background: radial-gradient(circle, rgba(139,195,74,0.55) 0%, rgba(139,195,74,0) 70%);
  animation: splashPulse 1.8s ease-in-out infinite;
}
.splash-logo-img{
  position:relative; width:100%; height:100%; object-fit:contain;
  opacity:0; transform: scale(0.3) rotate(-8deg);
  animation: splashReveal 1.1s cubic-bezier(.2,1.4,.4,1) forwards;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.35));
}
.splash-brand-text{
  text-align:center; color:var(--forest-dark); opacity:0;
  animation: splashTextIn .7s ease forwards;
  animation-delay: .7s;
}
.splash-brand-text strong{
  display:block; font-family:"Almarai", sans-serif; font-size:19px; font-weight:800;
  letter-spacing:0.5px;
}
.splash-brand-text span{ font-size:12px; color:#5C7A64; }

@keyframes splashReveal{
  0%{ opacity:0; transform: scale(0.3) rotate(-8deg); }
  55%{ opacity:1; transform: scale(1.08) rotate(2deg); }
  75%{ transform: scale(0.96) rotate(-1deg); }
  100%{ opacity:1; transform: scale(1) rotate(0deg); }
}
@keyframes splashTextIn{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes splashPulse{
  0%, 100%{ transform: scale(0.9); opacity:0.7; }
  50%{ transform: scale(1.15); opacity:1; }
}

/* ===================== دليل النصائح (Tips Guide) ===================== */
.tips-search-wrap{
  position:relative; margin-bottom:14px;
}
.tips-search-icon{
  position:absolute; top:50%; right:14px; transform:translateY(-50%);
  font-size:14px; opacity:.6; pointer-events:none;
}
.tips-search-input{
  width:100%; box-sizing:border-box; background:var(--card); border:1px solid rgba(0,0,0,.06);
  border-radius:14px; padding:12px 40px 12px 14px; font-size:13px; font-family:inherit;
  color:var(--ink); box-shadow: var(--shadow-soft);
}
.tips-search-input:focus{ outline:none; border-color:var(--forest); }
body.dark-mode .tips-search-input{ border-color:rgba(255,255,255,.08); }

.tips-guide-topics{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.tips-topic-card{
  background:var(--card); border:none; border-radius:16px; padding:16px 14px;
  box-shadow: var(--shadow-soft); text-align:right; cursor:pointer;
  display:flex; flex-direction:column; gap:8px; transition: transform .15s ease;
  border-right:3px solid var(--forest);
}
.tips-topic-card:active{ transform: scale(.97); }
.tips-topic-icon{ font-size:22px; align-self:flex-start; }
.tips-topic-label{ font-size:13px; font-weight:700; color:var(--ink); line-height:1.4; }
.tips-topic-count{
  align-self:flex-start; font-size:11px; color:var(--forest); background:#EAF5EA;
  border-radius:999px; padding:2px 9px;
}
body.dark-mode .tips-topic-count{ background:#2B322B; }

.tips-guide-list{ display:flex; flex-direction:column; }
.tips-guide-topic-title{
  font-family:"Almarai", sans-serif; color:var(--forest); font-size:16px;
  margin:6px 0 14px; display:flex; align-items:center; gap:8px;
}
.tips-guide-topic-icon{ font-size:19px; }

.tips-guide-items{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.tips-guide-items li{
  background:var(--card); color:var(--ink); border-radius:14px; padding:12px 14px;
  font-size:13px; line-height:1.7; box-shadow: var(--shadow-soft);
  display:flex; align-items:flex-start; gap:10px; border-right:3px solid var(--forest);
}
.tips-item-icon{ font-size:15px; flex:0 0 auto; margin-top:1px; }
.tips-item-text{ flex:1; min-width:0; }
.tips-empty-state{
  border-right:none !important; justify-content:center; color:var(--muted); box-shadow:none !important;
  background:transparent !important;
}
body.dark-mode .tips-guide-items li{ background:var(--card); color:var(--ink); }

/* ===================== عن البنك الأخضر (About) ===================== */
.about-header{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.about-logo-img{ width:52px; height:52px; object-fit:contain; flex:0 0 auto; }
.about-header .screen-heading{ margin:0; }
.about-card{ margin-bottom:14px; }
.about-card-icon{ font-size:26px; display:block; margin-bottom:6px; }
.about-card-title{
  font-family:"Almarai", sans-serif; color:var(--forest); font-size:15px; margin:0 0 8px;
}
.about-card p{ font-size:13.5px; line-height:1.8; color:var(--ink); margin:0; }
.about-achievements-list{ margin:0; padding-inline-start:20px; display:flex; flex-direction:column; gap:8px; }
.about-achievements-list li{ font-size:13.5px; line-height:1.7; color:var(--ink); }

/* ===================== عن التطبيق (About App — Cinematic Credits) ===================== */
.aboutapp-stage{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:var(--radius-lg);
  padding:26px 22px 34px;
  margin-bottom:6px;
  background:
    radial-gradient(120% 70% at 18% 0%, rgba(224,193,90,0.10) 0%, rgba(224,193,90,0) 55%),
    radial-gradient(90% 60% at 85% 100%, rgba(91,196,104,0.16) 0%, rgba(91,196,104,0) 60%),
    linear-gradient(165deg, #0E3B20 0%, #0A2015 60%, #081410 100%);
  box-shadow: var(--shadow-soft);
  color:#EDF3EC;
}

/* ---- شعار البنك الأخضر ---- */
.aboutapp-brandrow{
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
  opacity:0; animation: aaFadeScaleIn .7s cubic-bezier(.2,1,.4,1) both;
  animation-delay:.1s;
}
.aboutapp-brandring{
  width:52px; height:52px; border-radius:50%; flex:0 0 auto;
  background:rgba(224,193,90,0.08);
  border:1.5px solid rgba(224,193,90,0.55);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 16px rgba(224,193,90,0.25);
}
.aboutapp-logo-img{ width:70%; height:70%; object-fit:contain; }
.aboutapp-brand-text{ display:flex; flex-direction:column; line-height:1.3; }
.aboutapp-brand-text strong{ font-family:"Almarai", sans-serif; font-size:14px; font-weight:800; color:#F3E8C2; }
.aboutapp-brand-text span{ font-size:10.5px; color:#9FD8A3; letter-spacing:0.5px; }

/* ---- عنوان الصفحة — Gold Reveal (يظهر أخيرًا) ---- */
.aboutapp-title{
  font-family:"Almarai", sans-serif;
  font-weight:800; font-size:30px; line-height:1.25; margin:0 0 24px;
  background: linear-gradient(95deg, #F3E8C2 0%, #E0C15A 35%, #C9A227 55%, #E0C15A 75%, #F3E8C2 100%);
  background-size: 220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; filter: blur(3px);
  animation: aaGoldReveal 1.1s ease both, aaGoldShimmer 3.5s linear 6.9s 1;
  animation-delay:6.35s, 6.9s;
  text-shadow: 0 0 26px rgba(224,193,90,0.28);
}

/* ---- خط المسار الأخضر (Vine) ---- */
.aboutapp-timeline{ position:relative; display:flex; flex-direction:column; gap:30px; }
.aboutapp-vine{
  position:absolute; top:2px; bottom:-4px; right:27px; width:3px;
  border-radius:999px;
  background: linear-gradient(to bottom, var(--sprout), var(--leaf) 55%, var(--gold));
  box-shadow: 0 0 10px rgba(139,195,74,0.45);
  transform: scaleY(0); transform-origin: top;
  animation: aaVineGrow 4.55s cubic-bezier(.3,.7,.3,1) both;
  animation-delay:.55s;
}

/* ---- عنصر (إشراف / فكرة / تنفيذ) ---- */
.aboutapp-node{ position:relative; display:flex; align-items:flex-start; gap:14px; }
.aboutapp-node-icon{
  position:relative; z-index:2; flex:0 0 auto;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#F3E8C2;
  background: radial-gradient(circle at 35% 30%, rgba(224,193,90,0.22), rgba(14,59,32,0.95));
  border:1.5px solid rgba(224,193,90,0.6);
  opacity:0; transform:scale(.6);
  animation: aaFadeScaleIn .55s cubic-bezier(.25,1.3,.4,1) both, aaIconGlow 2.4s ease-in-out infinite;
}
.aboutapp-node-text{
  flex:1; min-width:0; text-align:right; padding-top:5px; position:relative;
}
.aboutapp-node-text::before{
  content:""; position:absolute; top:12px; right:-14px; width:8px; height:2px;
  background:var(--gold); opacity:0;
}
.aboutapp-role{
  display:block; font-family:"Almarai", sans-serif; font-weight:800; font-size:15px;
  color:#E9CE73; margin-bottom:4px;
  opacity:0; animation: aaFadeUp .5s ease both;
}
.aboutapp-name{
  display:block; font-family:"Almarai", sans-serif; font-weight:700; font-size:14px;
  color:#fff; margin-bottom:3px;
  opacity:0; animation: aaFadeUp .5s ease both;
}
.aboutapp-desc{
  display:block; font-size:11.5px; line-height:1.6; color:#A9BDA5;
  opacity:0; animation: aaFadeUp .5s ease both;
}

.aboutapp-node[data-node="1"] .aboutapp-node-icon{ animation-delay:1.0s, 1.55s; }
.aboutapp-node[data-node="1"] .aboutapp-role{ animation-delay:1.35s; }
.aboutapp-node[data-node="1"] .aboutapp-name{ animation-delay:1.5s; }
.aboutapp-node[data-node="1"] .aboutapp-desc{ animation-delay:1.65s; }

.aboutapp-node[data-node="2"] .aboutapp-node-icon{ animation-delay:2.45s, 3.0s; }
.aboutapp-node[data-node="2"] .aboutapp-role{ animation-delay:2.8s; }
.aboutapp-node[data-node="2"] .aboutapp-name{ animation-delay:2.95s; }
.aboutapp-node[data-node="2"] .aboutapp-desc{ animation-delay:3.1s; }

.aboutapp-node[data-node="3"] .aboutapp-node-icon{ animation-delay:3.9s, 4.45s; }
.aboutapp-node[data-node="3"] .aboutapp-role{ animation-delay:4.25s; }
.aboutapp-node[data-node="3"] .aboutapp-name{ animation-delay:4.4s; }
.aboutapp-node[data-node="3"] .aboutapp-desc{ animation-delay:4.55s; }

/* ---- النبتة النهائية ---- */
.aboutapp-plant{
  position:relative; display:flex; flex-direction:column; align-items:center;
  margin-top:22px; padding-top:10px;
}
.aboutapp-plant-glow{
  position:absolute; top:8px; width:120px; height:120px; border-radius:50%;
  background: radial-gradient(circle, rgba(139,195,74,0.35) 0%, rgba(224,193,90,0.12) 55%, rgba(0,0,0,0) 75%);
  opacity:0;
  animation: aaFadeIn .8s ease both, aaGlowPulse 2.6s ease-in-out infinite;
  animation-delay:5.05s, 5.85s;
}
.aboutapp-plant-svg{
  position:relative; opacity:0; transform:translateY(10px) scale(.85);
  animation: aaPlantGrow .7s cubic-bezier(.25,1.3,.4,1) both;
  animation-delay:4.95s;
  filter: drop-shadow(0 0 10px rgba(139,195,74,0.4));
}
.aboutapp-plant-podium{
  display:block; width:110px; height:14px; margin-top:6px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(224,193,90,0.5), rgba(224,193,90,0) 75%);
  opacity:0; animation: aaFadeIn .6s ease both; animation-delay:5.35s;
}

/* ---- Keyframes ---- */
@keyframes aaFadeScaleIn{ from{ opacity:0; transform:scale(.6);} to{ opacity:1; transform:scale(1);} }
@keyframes aaFadeUp{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }
@keyframes aaFadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes aaVineGrow{ from{ transform:scaleY(0);} to{ transform:scaleY(1);} }
@keyframes aaGoldReveal{
  0%{ opacity:0; filter:blur(4px); transform:translateY(6px); }
  55%{ opacity:1; filter:blur(0); }
  100%{ opacity:1; filter:blur(0); transform:translateY(0); }
}
@keyframes aaGoldShimmer{
  from{ background-position: 220% 0; }
  to{ background-position: -20% 0; }
}
@keyframes aaIconGlow{
  0%,100%{ box-shadow:0 0 6px rgba(224,193,90,0.25); }
  50%{ box-shadow:0 0 18px rgba(224,193,90,0.55); }
}
@keyframes aaGlowPulse{
  0%,100%{ transform:scale(0.92); opacity:0.65; }
  50%{ transform:scale(1.08); opacity:1; }
}
@keyframes aaPlantGrow{
  0%{ opacity:0; transform:translateY(10px) scale(.85); }
  70%{ opacity:1; transform:translateY(-2px) scale(1.04); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .aboutapp-brandrow, .aboutapp-title, .aboutapp-vine, .aboutapp-node-icon,
  .aboutapp-role, .aboutapp-name, .aboutapp-desc, .aboutapp-plant-glow,
  .aboutapp-plant-svg, .aboutapp-plant-podium{
    animation-duration:.01s !important; animation-delay:0s !important;
  }
  .aboutapp-node-icon{ animation-iteration-count:1 !important; }
  .aboutapp-plant-glow{ animation-iteration-count:1 !important; }
}