/* ================================================================
   بوابة عملاء شِعاري — غلاف "بوابة العميل" بنفس أسلوب لوحة التحكم.
   تُحمَّل AFTER styles.css ظˆ cms/assets/dashboard.css: كل ألوان
   --dash-* وأسلوب العرض (فاتح/داكن) تأتي من إعدادات «مظهر لوحة
   التحكم» المنشورة عبر public_settings.php — أي تغيير ينسحب على
   كل الحسابات من نفس المصدر.
   ================================================================ */

.portal-loading-reveal{ padding:48px 20px; text-align:center; color:var(--dash-icons,var(--muted)); font-size:14px; }

/* ====== الشريط العلوي ====== */
.topbar-actions{ display:flex; align-items:center; gap:8px; margin-inline-start:auto; flex-shrink:0; }
.topbar-actions .floating-btn{
  position:relative; width:40px; height:40px; min-width:40px; flex-shrink:0; aspect-ratio:1/1; border-radius:13px;
  background:var(--dash-paper2,var(--paper-2)); border:1px solid var(--dash-line,var(--line));
  color:var(--dash-icons,var(--muted));
}
.topbar-actions .floating-btn svg{ width:19px; height:19px; flex-shrink:0; }
.topbar-actions .floating-btn:hover{ color:var(--dash-text,var(--text)); border-color:var(--sand); }
.topbar-actions .lang-toggle-label{ font-size:10.5px; font-weight:800; }
.topbar-actions .cp-top-badge{
  position:absolute; top:-4px; inset-inline-end:-4px; background:var(--dash-text); color:var(--dash-bg);
  min-width:16px; height:16px; border-radius:14px; font-size:9.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}

/* ====== شريط البحث في الشريط الجانبي ====== */
#portalShell .dash-topbar-search{
  margin:0 12px 8px;
}
#portalShell .dash-search-bar{
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  background:var(--dash-cards,var(--paper)); border:1px solid var(--dash-line,var(--line));
  border-radius:12px; transition:border-color .15s,background .15s;
}
#portalShell .dash-search-bar:focus-within{
  border-color:var(--dash-accent);
  box-shadow:0 0 0 3px var(--dash-line,rgba(17,10,5,.2));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--dash-accent) 20%, transparent);
}
#portalShell .dash-search-ic{ width:18px; height:18px; flex-shrink:0; opacity:.75; color:var(--dash-icons,var(--muted)); }
#portalShell .dash-search-input{
  flex:1; min-width:0; background:transparent; border:0; outline:none;
  font:inherit; color:var(--dash-text,var(--text)); font-size:14px;
}
#portalShell .dash-search-input::placeholder{ color:var(--dash-icons,var(--muted)); opacity:.7; }
#portalShell .dash-search-input::-webkit-search-cancel-button{ display:none; }
#portalShell .dash-search-clear{
  display:none; align-items:center; justify-content:center;
  width:24px; height:24px; border:0; background:transparent;
  color:var(--dash-icons,var(--muted)); font-size:18px; line-height:1;
  cursor:pointer; border-radius:50%;
}
#portalShell .dash-search-clear:hover{ background:color-mix(in srgb, var(--dash-accent) 12%, transparent); color:var(--dash-accent); border-radius:50%; }
#portalShell .dash-search-clear.is-on{ display:inline-flex; }
#portalShell .dash-search-panel{
  position:absolute; top:calc(100% + 6px); inset-inline:0;
  background:var(--dash-cards,var(--paper)); border:1px solid var(--dash-line,var(--line));
  border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.35);
  max-height:340px; overflow-y:auto; z-index:50;
  padding:6px 0; display:none;
}
#portalShell .dash-search-panel[hidden]{ display:none !important; }
#portalShell .dash-search-empty{ padding:16px 12px; font-size:13px; opacity:.6; text-align:center; }
#portalShell .dash-search-group{ display:flex; flex-direction:column; gap:2px; padding-top:4px; }
#portalShell .dash-search-group + .dash-search-group{ border-top:1px solid var(--dash-line,var(--line)); margin-top:4px; padding-top:4px; }
#portalShell .dash-search-group-label{ padding:4px 10px; font-size:10.5px; font-weight:700; opacity:.55; letter-spacing:.02em; color:var(--dash-icons,var(--muted)); }
#portalShell .dash-search-item{
  display:flex; align-items:flex-start; gap:8px; padding:8px 12px;
  cursor:pointer; border-radius:8px; transition:background .1s;
  color:var(--dash-text,var(--text));
}
#portalShell .dash-search-item:focus, #portalShell .dash-search-item:hover{ background:color-mix(in srgb, var(--dash-accent) 8%, transparent); outline:none; }
#portalShell .dash-search-item svg{ width:16px; height:16px; flex-shrink:0; opacity:.8; color:var(--dash-accent); }
#portalShell .dash-search-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; overflow:hidden; }
#portalShell .dash-search-txt small{ font-size:11px; opacity:.55; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--dash-icons,var(--muted)); }
#portalShell .dash-search-meta{ margin-inline-start:auto; font-size:10.5px; opacity:.55; font-weight:600; flex-shrink:0; color:var(--dash-icons,var(--muted)); }
#portalShell .dash-search-item.is-sel{ background:color-mix(in srgb, var(--dash-accent) 10%, transparent); }
#portalShell .dash-topbar-search.is-open .dash-search-panel{ display:block; }

/* ====== شريط البحث في الشريط العلوي (نفس لوحة التحكم) ====== */
.cp-top-search{ position:relative; flex:1; max-width:480px; min-width:200px; }
.cp-top-search .dash-search-bar{
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  background:var(--dash-cards,var(--paper)); border:1px solid var(--dash-line,var(--line));
  border-radius:12px; transition:border-color .15s,background .15s;
}
.cp-top-search .dash-search-bar:focus-within{
  border-color:var(--dash-accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--dash-accent) 20%, transparent);
}
.cp-top-search .dash-search-ic{ width:18px; height:18px; flex-shrink:0; opacity:.75; color:var(--dash-icons,var(--muted)); }
.cp-top-search .dash-search-input{
  flex:1; min-width:0; background:transparent; border:0; outline:none;
  font:inherit; color:var(--dash-text,var(--text)); font-size:14px;
}
.cp-top-search .dash-search-input::placeholder{ color:var(--dash-icons,var(--muted)); opacity:.7; }
.cp-top-search .dash-search-input::-webkit-search-cancel-button{ display:none; }
.cp-top-search .dash-search-clear{
  display:none; align-items:center; justify-content:center;
  width:24px; height:24px; border:0; background:transparent;
  color:var(--dash-icons,var(--muted)); font-size:18px; line-height:1;
  cursor:pointer; border-radius:50%;
}
.cp-top-search .dash-search-clear:hover{ background:color-mix(in srgb, var(--dash-accent) 12%, transparent); color:var(--dash-accent); border-radius:50%; }
.cp-top-search .dash-search-clear.is-on{ display:inline-flex; }
.cp-top-search .dash-search-panel{
  position:absolute; top:calc(100% + 6px); inset-inline:0;
  background:var(--dash-cards,var(--paper)); border:1px solid var(--dash-line,var(--line));
  border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.35);
  max-height:340px; overflow-y:auto; z-index:50;
  padding:6px 0; display:none;
}
.cp-top-search .dash-search-panel[hidden]{ display:none !important; }
.cp-top-search .dash-search-empty{ padding:16px 12px; font-size:13px; opacity:.6; text-align:center; }
.cp-top-search .dash-search-group{ display:flex; flex-direction:column; gap:2px; padding-top:4px; }
.cp-top-search .dash-search-group + .dash-search-group{ border-top:1px solid var(--dash-line,var(--line)); margin-top:4px; padding-top:4px; }
.cp-top-search .dash-search-group-label{ padding:4px 10px; font-size:10.5px; font-weight:700; opacity:.55; letter-spacing:.02em; color:var(--dash-icons,var(--muted)); }
.cp-top-search .dash-search-item{
  display:flex; align-items:flex-start; gap:8px; padding:8px 12px;
  cursor:pointer; border-radius:8px; transition:background .1s;
  color:var(--dash-text,var(--text));
}
.cp-top-search .dash-search-item:focus, .cp-top-search .dash-search-item:hover{ background:color-mix(in srgb, var(--dash-accent) 8%, transparent); outline:none; }
.cp-top-search .dash-search-item svg{ width:16px; height:16px; flex-shrink:0; opacity:.8; color:var(--dash-accent); }
.cp-top-search .dash-search-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; overflow:hidden; }
.cp-top-search .dash-search-txt small{ font-size:11px; opacity:.55; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--dash-icons,var(--muted)); }
.cp-top-search .dash-search-meta{ margin-inline-start:auto; font-size:10.5px; opacity:.55; font-weight:600; flex-shrink:0; color:var(--dash-icons,var(--muted)); }
.cp-top-search .dash-search-item.is-sel{ background:color-mix(in srgb, var(--dash-accent) 10%, transparent); }
.cp-top-search.is-open .dash-search-panel{ display:block; }

/* ====== تحية البداية في لوحة "نظرة عامة" ====== */
.panel-greeting{ margin-bottom:28px; }
.panel-greeting h1{ font-size:28px; margin:0 0 8px; letter-spacing:-.01em; font-weight:800; }
.panel-greeting p{ margin:0; color:var(--dash-text,var(--text)); font-size:15.5px; line-height:1.8; font-weight:600; }

/* ====== توحيد أسطح بوابات المحتوى مع لوحة التحكم ====== */
#portalShell .cp-section{ margin-bottom:26px; }
#portalShell .cp-section.is-mt30{ margin-top:30px; }
#portalShell .cp-section-title{ display:flex; align-items:center; gap:10px; font-size:18px; font-weight:800; margin:0 0 14px; color:var(--dash-text,var(--text)); letter-spacing:-.01em; }
#portalShell .cp-section-title svg{ color:var(--dash-accent); width:18px; height:18px; flex-shrink:0; }

#portalShell .cp-item-card,
#portalShell .cp-payment-card,
#portalShell .cp-current-project-card,
#portalShell .cp-client-data-card,
#portalShell .cp-quick-card,
#portalShell .cp-account-summary{
  background:transparent; border:1px solid var(--dash-line,var(--line)); border-radius:14px;
}
#portalShell .cp-item-card{ display:block; padding:14px 16px; margin-bottom:10px; text-decoration:none; color:inherit; }
#portalShell .cp-item-card:not(.cp-item-static):hover{ border-color:var(--sand); box-shadow:0 4px 16px color-mix(in srgb, var(--dash-accent) 10%, transparent); }
#portalShell .cp-item-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; gap:10px; }
#portalShell .cp-item-top strong{ font-size:14.5px; }
#portalShell .cp-item-badge{ font-family:var(--font-body,"IBM Plex Sans Arabic",sans-serif); font-variant-numeric:tabular-nums; font-size:11.5px; background:rgba(219,228,255,.14); color:var(--sand); padding:3px 9px; border-radius:14px; font-weight:700; }
#portalShell .cp-item-sub{ font-size:12.5px; color:var(--dash-icons,var(--muted)); }

/* توقيع العميل داخل «ملفاتي» — بلا خلفية: الصورة PNG شفافة، فنُعكس
   حبرَها الداكن ليظهر على اللوحة الداكنة بدل مربّعة بيضاء خلفه. */
#portalShell .cp-sig-img{
  display:block; max-width:200px; max-height:80px; margin-top:8px; padding:0;
  background:none; border:0; border-radius:8px; object-fit:contain;
  filter:invert(1) hue-rotate(180deg);
}

/* ====== صف الإحصائيات ====== */
#portalShell .cp-stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px; }
#portalShell .cp-stat-box{
  background:var(--dash-cards,var(--paper)); border:1px solid var(--dash-line,var(--line)); border-radius:14px;
  padding:16px 12px; text-align:center;
}
#portalShell .cp-stat-box strong{ display:block; font-size:24px; font-weight:800; color:var(--dash-accent); line-height:1.3; }
#portalShell .cp-stat-box span{ font-size:12px; font-weight:600; color:var(--dash-icons,var(--muted)); }
#portalShell .cp-stat-box.has-attention{ border-color:var(--dash-text); }
#portalShell button.cp-stat-box{ font:inherit; color:inherit; cursor:pointer; width:100%; }
#portalShell button.cp-stat-box:hover{ border-color:var(--sand); }

/* ====== صف الإجراءات السريعة ====== */
#portalShell .cp-quick-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px; }
#portalShell .cp-quick-card{
  display:flex; align-items:center; gap:9px; padding:13px 14px; font-size:13px; font-weight:700;
  color:var(--dash-text,var(--text)); font-family:inherit; text-align:start; cursor:pointer;
}
#portalShell .cp-quick-card svg{ color:var(--dash-accent); width:17px; height:17px; flex-shrink:0; }
#portalShell .cp-quick-card:hover{ border-color:var(--sand); }
#portalShell .cp-quick-badge{
  margin-inline-start:auto; background:var(--dash-text); color:var(--dash-bg); border-radius:14px;
  min-width:18px; height:18px; display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; padding:0 5px;
}
#portalShell .cp-quick-card:has(.cp-quick-accent){ cursor:default; }
#portalShell .cp-quick-accent{ width:12px; height:12px; border-radius:50%; flex-shrink:0; }

/* ====== المشروع الحالي ====== */
#portalShell .cp-current-project-card{ padding:20px; }
#portalShell .cp-current-project-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
#portalShell .cp-current-project-top strong{ font-size:16px; }
#portalShell .cp-status-pill{ display:inline-flex; align-items:center; gap:6px; background:rgba(219,228,255,.14); color:var(--sand); padding:5px 12px; border-radius:14px; font-size:12px; font-weight:700; }
#portalShell .cp-progress-track, #portalShell .cp-progress-track-lg{ height:8px; background:var(--dash-line,var(--line)); border-radius:999px; overflow:hidden; margin-bottom:8px; }
#portalShell .cp-progress-fill{ height:100%; background:var(--dash-accent); border-radius:999px; }
#portalShell .cp-progress-percent{ font-size:12px; color:var(--dash-icons,var(--muted)); font-weight:700; }
#portalShell .cp-current-project-meta{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
#portalShell .cp-current-project-meta div{ background:var(--dash-cards,var(--paper)); border:1px solid var(--dash-line,var(--line)); border-radius:12px; padding:11px 13px; }
#portalShell .cp-current-project-meta span{ display:block; font-size:11px; color:var(--dash-icons,var(--muted)); margin-bottom:3px; }
#portalShell .cp-current-project-meta strong{ font-size:13.5px; }
#portalShell .cp-other-projects{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:16px; }
#portalShell .cp-other-projects-label{ grid-column:1/-1; font-size:12px; color:var(--dash-icons,var(--muted)); font-weight:700; margin:2px 0 0; }

/* ====== آخر تحديث ====== */
#portalShell .cp-last-update-card{ background:var(--dash-paper2,var(--paper-2)); border:1px solid var(--dash-line,var(--line)); border-radius:14px; padding:16px 18px; }
#portalShell .cp-last-update-label{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--dash-accent); margin:0 0 8px; }
#portalShell .cp-last-update-text{ font-size:13.5px; line-height:1.8; margin:0 0 10px; }
#portalShell .cp-last-update-footer{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12px; color:var(--dash-icons,var(--muted)); }
#portalShell .cp-last-update-footer a{ color:var(--sand); font-weight:700; }

/* ====== المدفوعات ====== */
#portalShell .cp-payment-card{ padding:16px 18px; margin-bottom:10px; }
#portalShell .cp-payment-project-name{ font-weight:800; font-size:14.5px; margin:0 0 12px; }
#portalShell .cp-payment-numbers{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
#portalShell .cp-payment-numbers div{ background:transparent; border:1px solid var(--dash-line,var(--line)); border-radius:11px; padding:10px 13px; }
#portalShell .cp-payment-numbers div:hover{ border-color:var(--sand); box-shadow:0 4px 16px color-mix(in srgb, var(--dash-accent) 10%, transparent); }
#portalShell .cp-payment-numbers span{ display:block; font-size:11px; color:var(--dash-icons,var(--muted)); }
#portalShell .cp-payment-numbers strong{ font-size:15px; }
#portalShell .cp-payment-pending-note{ font-size:12px; color:var(--dash-text); font-weight:700; margin:10px 0 0; }
#portalShell .cp-wallet-card{ margin:0 0 12px; padding:16px 18px; background:transparent; border:1px solid var(--dash-line,var(--line)); border-radius:14px; }
#portalShell .cp-wallet-head{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:14.5px; margin-bottom:12px; }
#portalShell .cp-wallet-numbers{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
#portalShell .cp-wallet-numbers div{ background:transparent; border:1px solid var(--dash-line,var(--line)); border-radius:11px; padding:10px 13px; }
#portalShell .cp-wallet-numbers div:hover{ border-color:var(--sand); box-shadow:0 4px 16px color-mix(in srgb, var(--dash-accent) 10%, transparent); }
#portalShell .cp-wallet-numbers span{ display:block; font-size:11px; color:var(--dash-icons,var(--muted)); }
#portalShell .cp-wallet-numbers strong{ font-size:15px; }
#portalShell .cp-payment-lines{ display:flex; flex-direction:column; gap:8px; margin-top:12px; }
#portalShell .cp-payment-line{ display:flex; flex-direction:column; gap:4px; background:transparent; border:1px solid var(--dash-line,var(--line)); border-radius:11px; padding:10px 13px; }
#portalShell .cp-payment-line:hover{ border-color:var(--sand); box-shadow:0 4px 16px color-mix(in srgb, var(--dash-accent) 10%, transparent); }
#portalShell .cp-payment-line-main{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
#portalShell .cp-payment-line-main strong{ font-size:14.5px; }
#portalShell .cp-payment-line-sub{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:var(--dash-icons,var(--muted)); }
#portalShell .cp-payment-line-sub .cpml-rejection{ margin:0; font-size:12px; }
@media (max-width:640px){
  #portalShell .cp-wallet-numbers{ grid-template-columns:1fr; }
}

/* ====== بيانات حساب العميل ====== */
#portalShell .cp-client-data-card{ padding:20px; }
#portalShell .cp-cd-item{ margin-bottom:16px; }
#portalShell .cp-cd-item label{ display:flex; align-items:center; gap:6px; margin-bottom:6px; color:var(--dash-icons,var(--muted)); font-weight:700; font-size:12.5px; }
#portalShell .cp-cd-item label svg{ color:var(--dash-accent); width:14px; height:14px; }
#portalShell .cp-cd-filled{ color:var(--dash-accent); font-size:11px; font-weight:700; }
#portalShell .cp-cd-item textarea{ width:100%; }
#portalShell .cp-cd-save-row{ display:flex; align-items:center; gap:12px; margin-top:16px; }

/* ====== المحادثة العائمة — تُفتح من أيقونة شريط العنوان (نافذة
   مسطّحة بنمط المراسلة ظپظٹ لوحة التحكم: بلا ظلال وبلا تدرجات) ====== */
#cpChatPanel.cp-chat-panel{
  position:fixed; inset-inline-end:clamp(20px,5vw,90px); bottom:20px; z-index:320;
  width:min(300px,calc(100vw - 24px)); height:min(640px,86vh);
  background:var(--chat-bg,#110A05); color:var(--chat-tx,#DBE4FF); border:1px solid rgba(219,228,255,.16); border-radius:24px;
  display:flex; flex-direction:column; overflow:hidden;
  font-family:var(--font-body,"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif);
}
#cpChatPanel.cp-chat-panel[hidden]{ display:none; }
.cp-chat-head{ display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 16px; border-bottom:1px solid rgba(219,228,255,.14); background:transparent; text-align:center; }
.cp-chat-title{ margin:0; flex:1; text-align:center; font-size:14.5px; font-weight:800; color:var(--chat-tx,#DBE4FF); }
.cp-chat-close{ margin-inline-start:auto; background:transparent; border:1px solid rgba(219,228,255,.3); color:var(--chat-tx,#DBE4FF); width:26px; height:26px; border-radius:50%; font-size:16px; line-height:1; padding:0; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:.7; }
.cp-chat-close:hover{ opacity:1; }
.cp-chat-messages{ flex:1; min-height:0; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:2px; scrollbar-width:thin; }
.cp-chat-messages .empty-state{ padding:28px 10px; color:var(--chat-tx,#DBE4FF); opacity:.65; font-size:13px; text-align:center; margin:auto; }
.cp-msg{ display:flex; flex-direction:row; gap:8px; align-items:flex-end; max-width:66%; }
.cp-msg-row{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:0 1 auto; }
.cp-msg.is-mine{ align-self:flex-start; align-items:flex-start; }
html[dir="ltr"] .cp-msg.is-mine{ align-self:flex-end; }
.cp-msg.is-theirs{ align-self:flex-end; align-items:flex-end; }
html[dir="ltr"] .cp-msg.is-theirs{ align-self:flex-start; }
.cp-msg.is-mine .cp-msg-row{ align-items:flex-start; }
.cp-msg.is-theirs .cp-msg-row{ align-items:flex-end; }
.cp-msg-avatar{ flex-shrink:0 !important; width:26px !important; height:26px !important; min-width:26px !important; border-radius:50% !important; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; font-size:12px !important; font-weight:800 !important; color:var(--chat-tx,#DBE4FF) !important; background-color:rgba(219,228,255,.14) !important; border:1px solid rgba(219,228,255,.28) !important; }
.cp-msg-avatar.is-letter{ background-color:var(--chat-mine-bg, rgba(219,228,255,.18)) !important; }
.cp-msg-avatar.is-team{ background-color:rgba(219,228,255,.08) !important; color:var(--chat-tx,#DBE4FF) !important; }
.cp-msg-avatar svg{ width:13px !important; height:13px !important; }
.cp-msg-bubble{ padding:6px 10px 6px; border-radius:20px; font-size:13.5px; line-height:1.65; word-break:break-word; white-space:pre-wrap; background:transparent; border:1.5px solid var(--chat-border,rgba(219,228,255,.4)); }
.cp-msg.is-mine .cp-msg-bubble{ color:var(--chat-tx,var(--dash-text,var(--text))); border-radius:20px; background:var(--chat-mine-bg, rgba(219,228,255,.12)); }
.cp-msg.is-theirs .cp-msg-bubble{ color:var(--chat-tx,var(--dash-text,var(--text))); border-radius:20px; }
.cp-msg-time{ font-size:10.5px; opacity:.65; }
.cp-msg-time .cp-tick{ font-size:11px; font-weight:800; line-height:1; margin-inline-start:6px; letter-spacing:-2px; color:var(--chat-tick,var(--dash-accent)); opacity:.95; vertical-align:baseline; }
.cp-msg-time .cp-tick.is-read{ color:var(--chat-send-bg,var(--dash-accent)); opacity:1; }
/* اسم المرسل فوق الفقاعة — بلون خط النافذة */
.cp-msg-sender{ display:block; font-size:10.5px; font-weight:800; opacity:.8; margin-bottom:3px; color:var(--chat-tx,inherit); }
/* مؤشر "جاري الكتابة" — ثلاث نقاط نابضة */
.cp-msg-bubble.cp-typing{ display:inline-flex; gap:4px; align-items:center; padding:12px 16px; }
.cp-typing span{ width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.25; animation:cpTypingBlink 1.2s infinite; }
.cp-typing span:nth-child(2){ animation-delay:.2s; }
.cp-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes cpTypingBlink{ 0%,60%,100%{ opacity:.25; transform:none; } 30%{ opacity:1; transform:translateY(-3px); } }
/* روابط داخل فقاعة العميل المعبأة ترث لونها (تباين بكل الوضعين). */
.cp-msg.is-mine .cp-msg-bubble a{ color:inherit; text-decoration:underline; }
.cp-chat-foot{ padding:10px 12px 12px; border-top:1px solid rgba(219,228,255,.14); background:transparent; }
.cp-chat-composer{ display:flex; gap:8px; }
.cp-chat-composer input{ flex:1; min-width:0; }
/* مؤلف المحادثة بتباين ثابت لا يمسّه الثيم — زر داكن على حقل فاتح */
.cp-chat-composer input{ background:#DBE4FF !important; border:1.5px solid rgba(17,10,5,.28) !important; border-radius:14px !important;  color:#110A05 !important; }
.cp-chat-composer input::placeholder{ color:rgba(17,10,5,.45) !important; }
.cp-chat-composer input:focus{ outline:none !important;  }
#cpChatSendBtn{ background:var(--chat-send-bg,#110A05) !important; color:var(--chat-send-tx,#DBE4FF) !important; border:none !important; min-height:34px; padding:0 12px; font-size:12.5px; font-family:inherit; }
#portalShell .cp-attach-btn{ color:var(--chat-send-bg,var(--dash-icons,var(--muted))) !important; }
.cp-chat-composer .btn{ flex-shrink:0; }
.cp-chat-foot .field-hint{ margin:8px 0 0; }

/* ====== بيانات الحساب ====== */
#portalShell .cp-account-summary{ padding:20px; }
#portalShell .cp-account-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px dashed var(--dash-line,var(--line)); gap:12px; }
#portalShell .cp-account-row:last-of-type{ border-bottom:none; }
#portalShell .cp-account-row span{ color:var(--dash-icons,var(--muted)); font-size:12.5px; }
#portalShell .cp-account-row strong{ font-size:14px; text-align:end; }
#portalShell .cp-security-details{ margin-top:16px; }
#portalShell .cp-security-details summary{ cursor:pointer; font-weight:700; color:var(--sand); }
#portalShell .empty-state{ color:var(--dash-icons,var(--muted)); font-size:13.5px; }

/* ====== استجابة الشاشات الصغيرة ====== */
@media (max-width:680px){
  #portalShell .cp-stats-row{ grid-template-columns:repeat(2,1fr); }
  #portalShell .cp-quick-row{ grid-template-columns:1fr; }
  #portalShell .cp-other-projects{ grid-template-columns:1fr; }
  .topbar-title{ font-size:14.5px; }
}

/* ================================================================
   تحييد تداخل قائمة الموقع العامة (styles.css) من داخل غلاف البوابة.
   styles.css يعرّف .sidebar-nav/.sidebar-overlay كقائمة الموقع العائمة
   (صندوق منبثق أعلى يمين الشاشة، width:132px...) — تلك خاصة بالموقع
   العام ولا يجب أن تمسَّ بوابة العميل إطلاقًا. هنا نعيد ضبطها داخل
   المغلف كشريط لوحة التحكم الجانبي حرفيًا (نفس dashboard.css)، وهي
   تُحمَّل آخرًا فتتفوق على أي تعارض.
   ================================================================ */
.dash-shell .sidebar-nav{
  position:static; top:auto; right:auto; left:auto; bottom:auto;
  width:auto; max-width:none; max-height:none; min-width:0;
  margin:0; z-index:auto;
  background:transparent; border:none; border-radius:0;
  backdrop-filter:none; -webkit-backdrop-filter:none;
   transition:none;
  display:flex; flex-direction:column; gap:3px; flex:1; overflow-y:auto;
  padding:14px 12px; color:var(--dash-icons,var(--muted));
}
.dash-shell .sidebar-nav .tab-btn{
  display:flex; align-items:center; gap:11px; width:100%;
  background:transparent; border:1px solid transparent; color:var(--dash-icons,var(--muted));
  padding:11px 12px; border-radius:11px; font-size:13.5px; font-weight:600;
  text-align:start; justify-content:flex-start; transition:.15s ease; margin:0;
}
.dash-shell .sidebar-nav .tab-btn svg{ flex-shrink:0; opacity:.8; }
.dash-shell .sidebar-nav .tab-btn:hover{ background:var(--dash-paper2,var(--paper-2)); color:var(--dash-text,var(--text)); }
.dash-shell .sidebar-nav .tab-btn.is-active{ background:var(--dash-accent); color:var(--ink); }
.dash-shell .sidebar-nav .tab-btn.is-active svg{ opacity:1; }
.dash-shell .sidebar-section-label{
  font-size:11px; color:var(--dash-icons,var(--muted)); font-weight:700;
  text-transform:none; letter-spacing:0; padding:16px 10px 6px; margin:0;
}
.dash-shell .sidebar-overlay{
  display:none; position:fixed; inset:0; background:rgba(17,10,5,.55); z-index:25;
  opacity:1; pointer-events:auto; transition:none;
}
.dash-shell.sidebar-open .sidebar-overlay{ display:block; }

/* ================================================================
   وضوح أكبر — نصوص وأيقونات أكبر وأدق ظپظٹ بوابة العميل
   (تُحمَّل آخرًا فترجّح على القواعد أعلاه)
   ================================================================ */
#portalShell .cp-section-title{ font-size:19px; letter-spacing:-.01em; }
#portalShell .cp-section-title svg{ width:22px; height:22px; }
#portalShell .cp-stats-row{ gap:14px; }
#portalShell .cp-stat-box{ padding:18px 14px; }
#portalShell .cp-stat-box strong{ font-size:28px; }
#portalShell .cp-stat-box span{ font-size:13.5px; }
#portalShell .cp-quick-card{ font-size:15px; padding:15px 16px; }
#portalShell .cp-quick-card svg{ width:20px; height:20px; }
#portalShell .cp-item-top strong{ font-size:15.5px; }
#portalShell .cp-item-sub{ font-size:13.5px; }
#portalShell .cp-item-badge{ font-size:12px; padding:4px 10px; }
#portalShell .cp-current-project-top strong{ font-size:17px; }
#portalShell .cp-status-pill{ font-size:13.5px; padding:6px 14px; }
#portalShell .cp-current-project-meta span{ font-size:12px; }
#portalShell .cp-current-project-meta strong{ font-size:14.5px; }
#portalShell .cp-progress-percent{ font-size:13px; }
#portalShell .cp-other-projects-label{ font-size:13px; }
#portalShell .cp-last-update-label{ font-size:13px; }
#portalShell .cp-last-update-text{ font-size:14.5px; }
#portalShell .cp-last-update-footer{ font-size:13px; }
#portalShell .cp-last-update-footer a,
#portalShell .cp-last-update-footer button{ font-size:13px; }
#portalShell .cp-payment-project-name{ font-size:15.5px; }
#portalShell .cp-payment-numbers span{ font-size:12px; }
#portalShell .cp-payment-numbers strong{ font-size:16px; }
#portalShell .cp-cd-item label{ font-size:14.5px; }
#portalShell .cp-cd-item label svg{ width:18px; height:18px; }
#portalShell .cp-cd-item textarea{ font-size:14px; }
#portalShell .cp-cd-filled{ font-size:12px; }

/* بيانات يرجى تعبئتها — بند جديد بنوع إجراء + مرفق */
#portalShell .cp-cd-tag{
  display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:14px;
  background:color-mix(in srgb, var(--dash-text) 14%, transparent); color:var(--dash-icons,var(--muted));
  font-size:11px; font-weight:700; line-height:1.6;
}
#portalShell .cp-cd-item input[type=number],
#portalShell .cp-cd-item input[type=date]{ width:100%; font-family:inherit; }
#portalShell .cp-cd-file-link{
  display:inline-flex; align-items:center; gap:6px; margin:0 0 10px;
  color:var(--dash-accent,var(--sand-strong)); font-weight:700; font-size:13.5px; text-decoration:none;
}
#portalShell .cp-cd-upload-label{
  display:inline-flex; align-items:center; gap:7px; position:relative; cursor:pointer;
  padding:9px 14px; border:1px dashed var(--dash-line,var(--line)); border-radius:10px;
  font-size:13.5px; font-weight:700; color:var(--dash-text,var(--ink));
  background:var(--dash-paper2,var(--paper-2));
}
#portalShell .cp-cd-upload-label:hover{ border-color:var(--dash-accent); color:var(--dash-accent); }
#portalShell .cp-cd-upload-label input{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
#portalShell .cp-cd-upload-status{ display:block; margin-top:8px; font-size:12.5px; font-weight:700; }
.cp-chat-panel .cp-msg-bubble{ font-size:13.5px; padding:6px 10px 6px; line-height:1.65; }
.cp-chat-panel .cp-msg-time{ font-size:10.5px; }
.cp-chat-panel .cp-chat-composer input{ font-size:14.5px; }
#portalShell .cp-account-row span{ font-size:13.5px; }
#portalShell .cp-account-row strong{ font-size:15px; }
#portalShell .cp-security-details summary{ font-size:14.5px; }
#portalShell .empty-state{ font-size:14.5px; }
.panel-greeting h1{ font-size:27px; }
.panel-greeting p{ font-size:14.5px; }

/* ================================================================
   متابعة المشروع داخل البوابة (متابعة مشروعي) — بلا project.html
   ================================================================ */
#portalShell .cpml-card{ padding:20px; }
#portalShell .cpml-project-select{ width:100%; margin-top:16px; font-family:inherit; font-size:14px; }
#portalShell .cpml-block{ margin-bottom:22px; }
#portalShell .cpml-block .cp-section-title{ margin-bottom:12px; }
#portalShell .cpml-stage-list{ display:flex; flex-direction:column; gap:8px; }
#portalShell .cpml-stage{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:var(--dash-paper2,var(--paper-2)); border:1px solid var(--dash-line,var(--line));
  border-radius:12px; opacity:.7;
}
#portalShell .cpml-stage.is-done{ opacity:1; }
#portalShell .cpml-stage.is-current{ opacity:1; border-color:var(--dash-accent); background:color-mix(in srgb, var(--dash-accent) 8%, var(--dash-paper2,var(--paper-2))); }
#portalShell .cpml-stage-icon{ color:var(--dash-icons,var(--muted)); display:flex; }
#portalShell .cpml-stage.is-done .cpml-stage-icon{ color:var(--ok,var(--sand)); }
#portalShell .cpml-stage.is-current .cpml-stage-icon{ color:var(--dash-accent); }
#portalShell .cpml-stage-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
#portalShell .cpml-stage-text strong{ font-size:14.5px; }
#portalShell .cpml-stage-text span{ font-size:12.5px; color:var(--dash-icons,var(--muted)); }
#portalShell .cpml-stage-date{ font-size:12px; color:var(--dash-icons,var(--muted)); white-space:nowrap; }

#portalShell .cpml-totals{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
#portalShell .cpml-totals div{ background:var(--dash-cards,var(--paper)); border:1px solid var(--dash-line,var(--line)); border-radius:12px; padding:12px 14px; }
#portalShell .cpml-totals span{ display:block; font-size:12px; color:var(--dash-icons,var(--muted)); margin-bottom:3px; }
#portalShell .cpml-totals strong{ font-size:17px; }
#portalShell .cpml-pay-list{ display:flex; flex-direction:column; gap:8px; }
#portalShell .cpml-pay-row{
  display:flex; flex-direction:column; gap:8px; padding:13px 15px;
  background:var(--dash-paper2,var(--paper-2)); border:1px solid var(--dash-line,var(--line)); border-radius:12px;
}
#portalShell .cpml-pay-info{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
#portalShell .cpml-pay-info strong{ font-size:15.5px; }
#portalShell .cpml-pay-info span{ font-size:12.5px; color:var(--dash-icons,var(--muted)); }
#portalShell .cpml-pay-pill{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  padding:4px 11px; border-radius:14px; font-size:12.5px; font-weight:700;
}
#portalShell .cpml-pay-pill.cpml-paid{ background:var(--dash-text); color:var(--dash-bg); }
#portalShell .cpml-pay-pill.cpml-pending{ background:transparent; color:var(--dash-text); border:1px solid var(--dash-text); }
#portalShell .cpml-pay-pill.cpml-review{ background:color-mix(in srgb, var(--dash-text) 14%, transparent); color:var(--dash-text); }
#portalShell .cpml-pay-pill.cpml-rejected{ background:transparent; color:var(--dash-text); border:1px dashed var(--dash-text); }
#portalShell .cpml-pay-pill.cp-pay-ok{ background:var(--dash-text); color:var(--dash-bg); }
#portalShell .cp-notif-list{ display:flex; flex-direction:column; gap:0; }
#portalShell .cp-notif-line{
  display:flex; gap:12px; align-items:flex-start; padding:12px 4px;
  border-bottom:1px solid var(--dash-line,var(--line));
}
#portalShell .cp-notif-line:hover{ background:rgba(219,228,255,.04); }
#portalShell .cp-notif-unread{ background:rgba(219,228,255,.06); }
#portalShell .cp-notif-icon{ flex-shrink:0; width:34px; height:34px; border-radius:10px; background:rgba(219,228,255,.1); color:var(--dash-accent); display:flex; align-items:center; justify-content:center; }
#portalShell .cp-notif-body{ flex:1; min-width:0; }
#portalShell .cp-notif-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#portalShell .cp-notif-head b{ font-size:13.5px; }
#portalShell .cp-notif-msg{ font-size:12.5px; color:var(--dash-text,var(--text)); margin-top:3px; white-space:pre-line; }
#portalShell .cp-notif-meta{ font-size:11px; color:var(--dash-icons,var(--muted)); margin-top:4px; }
#portalShell .cp-notif-dot{ flex-shrink:0; width:9px; height:9px; border-radius:50%; background:var(--dash-accent); margin-top:6px; }
/* سهم «اذهب إلى الخدمة» — يَكشف أنّ السطر بابٌ لا نصّ، ويبقى خفيًّا
   حتى المرور فلا يزحم القائمة. */
#portalShell .cp-notif-go{
  flex-shrink:0; align-self:center; font-size:19px; line-height:1;
  color:var(--dash-accent,var(--dash-text)); opacity:0;
  transform:translateX(4px); transition:opacity .15s ease, transform .15s ease;
}
#portalShell .cp-notif-line:hover .cp-notif-go{ opacity:.85; transform:translateX(0); }
@media (max-width:700px){
  #portalShell .cp-notif-go{ opacity:.6; transform:none; }
}
#portalShell .cp-notif-count{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:14px; background:var(--dash-text); color:var(--dash-bg); font-size:11px; font-weight:800; }
#portalShell .cpml-pay-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#portalShell .cpml-pay-actions .btn{ width:auto; }
#portalShell .cpml-receipt-label{ cursor:pointer; position:relative; }
#portalShell .cpml-receipt-label.is-busy{ opacity:.6; pointer-events:none; }
#portalShell .cpml-receipt-label input{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
#portalShell .cpml-receipt-upload{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#portalShell .cpml-send-receipt[disabled]{ opacity:.5; cursor:not-allowed; }
#portalShell .cpml-send-receipt.is-busy{ opacity:.6; pointer-events:none; }
#portalShell .cpml-receipt-status{ font-size:12.5px; font-weight:700; }
#portalShell .cpml-rejection{ margin:0; font-size:12.5px; color:var(--dash-text); font-weight:700; }

#portalShell .cpml-update-list{ display:flex; flex-direction:column; gap:8px; }
#portalShell .cpml-update-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px;
  background:var(--dash-paper2,var(--paper-2)); border:1px solid var(--dash-line,var(--line)); border-radius:12px;
}
#portalShell .cpml-update-row p{ margin:0; font-size:14px; line-height:1.7; }
#portalShell .cpml-update-row span{ font-size:12px; color:var(--dash-icons,var(--muted)); white-space:nowrap; }

#portalShell .cpml-file-list{ display:flex; flex-direction:column; gap:8px; }
#portalShell .cpml-file-row{
  display:flex; align-items:center; gap:10px; padding:12px 14px; text-decoration:none; color:inherit;
  background:var(--dash-paper2,var(--paper-2)); border:1px solid var(--dash-line,var(--line)); border-radius:12px;
}
#portalShell .cpml-file-row svg{ color:var(--dash-accent); flex-shrink:0; }
#portalShell .cpml-file-row span{ font-size:14px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

#portalShell .cpml-confirm-card, #portalShell .cpml-review-card{
  padding:18px; border-radius:14px; border:1px dashed var(--dash-accent);
  background:color-mix(in srgb, var(--dash-accent) 6%, transparent);
  text-align:start; margin-top:4px;
}
#portalShell .cpml-confirm-card p{ margin:0 0 12px; font-size:14.5px; line-height:1.7; }
#portalShell .cpml-review-card .field{ margin-bottom:10px; }
#portalShell .cpml-review-card select, #portalShell .cpml-review-card textarea{ width:100%; font-family:inherit; font-size:14px; }
#portalShell .cpml-review-done{ font-size:14px; font-weight:700; color:var(--dash-accent); margin:0; }

/* شريط جانبي للبوابة — أيقونات أوضح */
.dash-shell .sidebar-nav .tab-btn{ gap:12px; padding:12px 13px; font-size:14px; }
.dash-shell .sidebar-nav .tab-btn svg{ width:20px; height:20px; }

/* ================================================================
   بوابة العميل — أسلوب مسطّح إجباريًا (بلا ظلال وبلا تدرجات):
   أي خلفية داكنة بتدرج لوني → لون نص فاتح، والعكس؛ العنوان الغامق
   فوق الأسطح الفاتحة ليُقرأ بوضوح. نُحيّد ظلال أدوات الدردشة العامة
   (.msg-panel / .msg-attention-bubble) داخل صفحة البوابة فقط، بينما
   يبقى شكلها المعتاد للزوار ظپظٹ باقي صفحات الموقع.
   ================================================================ */
body[data-page="client-portal"] .msg-attention-bubble,
body[data-page="client-portal"] .msg-panel,
body[data-page="client-portal"] .fab-contact button{  }

/* اشعار المساعدة ظپظٹ البوابة يتبع ألوان الحساب نفسها (لوحة التحكم) —
   لا ألوان من خارج هوية الموقع، والوضعان فاتح/داكن مقروءان */
body[data-page="client-portal"] .msg-attention-bubble{
  background:var(--dash-paper2,var(--paper-2)); color:var(--dash-text,var(--text));
  border:1px solid var(--dash-line,var(--line));
}
body[data-page="client-portal"] .msg-attention-close{ border-color:var(--dash-line,var(--line)); }
body[data-page="client-portal"] .msg-panel{
  background:var(--dash-paper2,var(--paper-2)); color:var(--dash-text,var(--text));
  border:1px solid var(--dash-line,var(--line));
}

/* ====== MODERN PORTAL — حدود أوضح ومربعات بارزة ====== */
#portalShell{ --dash-line:rgba(219,228,255,.22) !important; }
/* الوضع الفاتح: حدود داكنة مقروءة — بلون الوضع نفسه لا لونًا ثابتًا */
html.light-mode #portalShell,
html.light-mode body[data-page="client-portal"] .dash-shell{ --dash-line:rgba(17,10,5,.28) !important; }
#portalShell .cp-section-title{ border-inline-start:0 !important; padding-inline-start:0 !important; gap:10px; font-size:19px !important; }
#portalShell .cp-section-title svg{ padding:0; width:20px; height:20px; border-radius:0; background:none; background-color:transparent; box-sizing:content-box; border:none;  }
#portalShell .panels{ max-width:1140px !important; padding:32px 24px 110px !important; }
#portalShell .cp-stats-row{ display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:14px !important; margin-bottom:24px !important; background:transparent !important; }
#portalShell .cp-stat-box{ background:transparent !important; border:1px solid var(--dash-line, rgba(17,10,5,.18)) !important; border-radius:12px !important; padding:18px 16px !important;  text-align:start !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:4px !important; transition:border-color .15s ease !important; }
#portalShell .cp-stat-box:hover{ border-color:var(--dash-accent) !important; }
#portalShell .cp-stat-box svg{ width:28px !important; height:28px !important; padding:0 !important; margin:0 !important; display:block !important; flex-shrink:0 !important; background:none !important; background-color:transparent !important; border:none !important; border-radius:0 !important; color:var(--dash-icons, #110A05) !important; box-sizing:content-box !important;  }
#portalShell .cp-stat-box strong{ font-size:32px !important; font-weight:800 !important; letter-spacing:-.02em !important; color:var(--dash-text) !important; line-height:1.1 !important; }
#portalShell .cp-stat-box:nth-child(1) strong{ font-size:42px !important; }
#portalShell .cp-stat-box span{ font-size:13px !important; font-weight:700 !important; color:var(--dash-icons) !important; line-height:1.4 !important; }
#portalShell .cp-stat-box::after{ content:none !important; display:none !important; }
#portalShell .cp-quick-row{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:14px !important; margin-bottom:24px !important; background:transparent !important; }
#portalShell .cp-quick-card{ background:transparent !important; border:1px solid var(--dash-line, rgba(17,10,5,.18)) !important; border-radius:12px !important; padding:18px 16px !important;  transition:border-color .15s ease !important; display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:4px !important; text-align:start !important; }
#portalShell .cp-quick-card:hover{ border-color:var(--dash-accent) !important; }
#portalShell .cp-quick-card svg{ width:28px !important; height:28px !important; padding:0 !important; margin:0 !important; display:block !important; flex-shrink:0 !important; background:none !important; background-color:transparent !important; border:none !important; border-radius:0 !important; color:var(--dash-icons, #110A05) !important; box-sizing:content-box !important;  }
#portalShell .cp-quick-card span{ font-size:14px !important; font-weight:700 !important; color:var(--dash-text) !important; line-height:1.4 !important; }
#portalShell .cp-item-card{ border:1px solid var(--dash-line, rgba(17,10,5,.18)) !important; border-radius:12px !important;  transition:background-color .15s ease, border-color .15s ease !important; }
#portalShell .cp-item-card:not(.cp-item-static):hover{ border-color:var(--dash-accent) !important; }
#portalShell .cp-current-project-meta div, #portalShell .cp-payment-numbers div, #portalShell .cp-wallet-numbers div{ background:transparent !important; border:none !important; border-top:1px solid var(--dash-line, rgba(17,10,5,.18)) !important; border-radius:0 !important;  padding:10px 2px !important; }
#portalShell .cp-current-project-meta div:first-child, #portalShell .cp-payment-numbers div:first-child, #portalShell .cp-wallet-numbers div:first-child{ border-top:none !important; }
#portalShell .cp-payment-line{ border:1px solid var(--dash-line, rgba(17,10,5,.18)) !important; border-radius:10px !important;  }
#portalShell .cp-last-update-card, #portalShell .cp-wallet-card, #portalShell .cpml-totals div{ border:1px solid var(--dash-line, rgba(17,10,5,.18)) !important; border-radius:12px !important;  }
#portalShell .cp-progress-track, #portalShell .cp-progress-track-lg{ border-radius:999px !important; background:rgba(219,228,255,.15) !important;  }
#portalShell .cp-progress-fill{ background:var(--dash-text) !important;  }
.cp-msg.is-theirs .cp-msg-bubble, .cp-msg.is-mine .cp-msg-bubble{ border-color:var(--chat-border,rgba(219,228,255,.4)) !important;  }
#portalShell .cp-status-pill{ border-radius:14px !important; background:rgba(219,228,255,.14) !important; border:1.5px solid rgba(219,228,255,.22) !important; }
#portalShell .cp-section{ margin-bottom:28px; }

/* account box — organized modern card */
#portalShell .cp-account-summary{ padding:4px 2px !important; }
#portalShell .cp-account-row{ display:flex; align-items:center; gap:14px; padding:12px 14px; margin-bottom:8px; border-radius:13px; background:rgba(219,228,255,.045); }
#portalShell .cp-account-row > span{ min-width:92px; color:var(--dash-icons,var(--muted)) !important; font-size:12.5px !important; font-weight:700; display:flex; align-items:center; gap:8px; }
#portalShell .cp-account-row > span::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--dash-accent); opacity:.7; flex-shrink:0; }
#portalShell .cp-account-row > strong{ font-size:13.5px !important; font-weight:700; }
#portalShell #cpEditAccountBtn{ margin-top:18px !important; width:auto; }
#portalShell .cp-security-details{ border:1px solid rgba(219,228,255,.07) !important; border-radius:12px !important; padding:14px 16px !important;  }
/* زر طلب جديد: نص فاتح دائمًا لتباينه مع خلفيته الداكنة بالوضعين */
#portalShell .cp-new-request-btn{ color:#dbe4ff !important; }

/* ================================================================
   هوية الحسابات — لونان فقط: #110a05 / #dbe4ff
   الداكن (افتراضي): خلفية وكروت #110a05 + نصوص وأيقونات #dbe4ff.
   الفاتح (html.light-mode — زر التبديل): معكوس تمامًا.
   !important لتتفوق على أي قيم قديمة محقونة من لوحة التحكم.
   ================================================================ */
body[data-page="client-portal"]{ background:#110A05; color-scheme:dark; }
html.light-mode body[data-page="client-portal"]{ background:#dbe4ff; color-scheme:light; }
#portalShell,
body[data-page="client-portal"] .dash-shell{
  --dash-bg:#110A05; --dash-cards:#110A05;
  --dash-paper2:#110A05; --dash-text:#dbe4ff;
  --dash-icons:#dbe4ff; --dash-accent:#dbe4ff;
  --dash-line:rgba(219,228,255,.2);
  --sand:#dbe4ff; --sand-strong:#dbe4ff;
  --ink:#110a05; --text:#dbe4ff;
  --muted:rgba(219,228,255,.72);
}
html.light-mode #portalShell,
html.light-mode body[data-page="client-portal"] .dash-shell{
  --dash-bg:#dbe4ff; --dash-cards:#E6ECFC;
  --dash-paper2:#E6ECFC; --dash-text:#110A05;
  --dash-icons:#110A05; --dash-accent:#110A05;
  --dash-line:rgba(17,10,5,.28);
  --sand:#110a05; --sand-strong:#110a05;
  --ink:#dbe4ff; --text:#110A05;
  --muted:#110A05;
}
/* فقاعة رسائلي + التبويب النشط — تباين صريح باللونين فقط */
/* نافذة المحادثة خارج #portalShell — متغيرات الفاتح على الجذر لتتبع نفس الألوان */
html.light-mode{
  --dash-bg:#dbe4ff; --dash-cards:#E6ECFC; --dash-paper2:#E6ECFC;
  --dash-text:#110A05; --dash-icons:#110A05; --dash-accent:#110A05;
  --dash-line:rgba(17,10,5,.28);
}
#portalShell .cp-msg.is-mine .cp-msg-bubble,
.cp-chat-panel .cp-msg.is-mine .cp-msg-bubble{ background:transparent; }
/* زر الإرسال خارج #portalShell — مربع ناعم بحجم متناسق (لا pill/دائري) */
#cpChatSendBtn{ border-radius:10px !important; min-height:44px !important; min-width:56px !important; padding:0 18px !important; font-size:14px !important; font-weight:800 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:6px !important;  }
#cpChatSendBtn svg{ width:22px !important; height:22px !important; flex-shrink:0 !important; }
.cp-chat-panel .cp-msg-bubble{ border-radius:20px !important; }
.cp-chat-panel .cp-msg-bubble::before{ border-top-color:var(--chat-border,rgba(219,228,255,.4)) !important; }
/* فقاعات ناعمة بلا ذيول — نفس نموذج الإدارة بالضبط */
.cp-msg-bubble{ position:relative; }
.cp-msg-bubble::before, .cp-msg-bubble::after{ display:none !important; content:none !important; }
#portalShell .sidebar-nav .tab-btn.is-active,
.dash-shell .sidebar-nav .tab-btn.is-active{ background:var(--dash-accent); color:var(--portal-btn-text, var(--dash-bg)); }

/* ====== تعديل/حذف الطلبات والمشاريع (نافذة صاحب الحساب) ====== */
.cp-item-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.cp-item-actions--project{margin:0 0 4px}
.cp-modal-overlay{position:fixed;inset:0;z-index:400;background:rgba(17,10,5,.55);display:flex;align-items:center;justify-content:center;padding:18px}
.cp-modal-card{width:min(480px,100%);max-height:88vh;overflow-y:auto;background:var(--dash-cards,var(--paper));border:1px solid var(--dash-line,var(--line));border-radius:12px;padding:22px 20px}
.cp-modal-title{margin:0 0 4px;font-size:17px}
.cp-modal-sub{margin:0 0 12px;font-size:12.5px;color:var(--dash-icons,var(--muted))}
.cp-modal-note{margin:0 0 12px;font-size:12px;font-weight:700;color:var(--dash-icons,var(--muted))}
.cp-modal-error{margin:10px 0 0;font-size:13px;font-weight:700;color:var(--dash-text,var(--text));background:color-mix(in srgb, var(--dash-text) 10%, transparent);border:1px solid var(--dash-text);border-radius:10px;padding:9px 12px}
.cp-modal-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
/* أزرار النافذة الثلاثة (البقاء والمتابعة / حذف المسودات / تسجيل الخروج):
   تغلب قاعدة dashboard.css المفروضة `.btn{font-size:15.5px !important;
   padding:12px 20px !important}` التي كانت تُكبّر النص داخل زر مشدود flex:1
   مع white-space:nowrap من styles.css ف يُقصّ النص المغطى. هنا: حجم متناسب
   13px + وزن موحّد 700 + السماح بتفاف السطر + حد أدنى للمس 44px. */
.cp-modal-actions .btn{
  flex:1 1 0; min-width:0;
  font-size:13px !important; font-weight:700 !important;
  padding:10px 12px !important;
  white-space:normal !important; text-align:center;
  line-height:1.45; min-height:44px;
  justify-content:center; gap:6px;
}
.cp-field{margin-bottom:12px}
.cp-field label{display:block;font-size:12.5px;font-weight:700;margin-bottom:6px;color:var(--dash-icons,var(--muted))}
.cp-field input,.cp-field textarea,.cp-field select{width:100%;border:1px solid var(--dash-line,var(--line));border-radius:10px;background:var(--dash-paper2,var(--paper-2));color:var(--dash-text,var(--text));padding:10px 12px;font:inherit;font-size:14px}
.cp-field textarea{resize:vertical;min-height:70px}
.cp-field input:focus,.cp-field textarea:focus{outline:none;border-color:var(--dash-text)}
/* مربع البحث في حساب العميل — نفس شكل مربعات باقي الحسابات: سطح مرفوع
   مميز عن الخلفية لا أسود مصمت (كان يرث --dash-paper2 الأسود في البوابة). */
#cpFaqSearch{
  background:color-mix(in srgb, var(--dash-text) 9%, transparent) !important;
  border:1px solid var(--dash-line) !important;
  color:var(--dash-text) !important;
}
#cpFaqSearch::placeholder{ color:var(--dash-icons) !important; opacity:.85; }
@media (max-width:560px){.cp-modal-card{padding:18px 14px}.cp-modal-actions{flex-direction:column}}

/* ====== إبطال إخفاء الجوال العام داخل البوابة ====== */
/* styles.css يخفي .sidebar-nav بالجوال (opacity:0) ولا يظهرها إلا بـ.is-open — بينما البوابة تفتح الدرج عبر .sidebar-open على الغلاف، فكانت التبويبات تبقى شفافة دائمًا على الجوال. */
@media (max-width:760px){
  .dash-shell .sidebar-nav{ top:auto; max-height:none; transform:none !important; opacity:1 !important; pointer-events:auto !important; }
}

/* خلفية html تطابق البوابة (ارتداد السحب بالجوال) */
html:has(body[data-page="client-portal"]){ background:#110A05; }
html.light-mode:has(body[data-page="client-portal"]){ background:#dbe4ff; }

/* ====== حدود واضحة بالوضع الفاتح (مقابل اللؤلؤية بالداكن) ====== */
html.light-mode #portalShell .cp-section-title svg{ background:none !important; background-color:transparent !important; border:none !important; }
html.light-mode #portalShell .cp-stat-box{ background:var(--dash-cards) !important; border-color:rgba(17,10,5,.22) !important; }
html.light-mode #portalShell .cp-quick-card{ border-color:rgba(17,10,5,.22) !important; }
html.light-mode #portalShell .cp-quick-card:hover{ border-color:rgba(17,10,5,.45) !important; background:rgba(17,10,5,.04) !important; }
html.light-mode #portalShell .cp-quick-card svg{ background:none !important; background-color:transparent !important; border:none !important; }
html.light-mode #portalShell .cp-item-card{ border-color:rgba(17,10,5,.22) !important; }
html.light-mode #portalShell .cp-item-card:not(.cp-item-static):hover{ border-color:rgba(17,10,5,.45) !important; }
html.light-mode #portalShell .cp-current-project-meta div, html.light-mode #portalShell .cp-payment-numbers div, html.light-mode #portalShell .cp-wallet-numbers div{ border-color:rgba(17,10,5,.2) !important; }
html.light-mode #portalShell .cp-payment-line{ border-color:rgba(17,10,5,.2) !important; }
html.light-mode #portalShell .cp-last-update-card, html.light-mode #portalShell .cp-wallet-card, html.light-mode #portalShell .cpml-totals div{ border-color:rgba(17,10,5,.22) !important; }
html.light-mode #portalShell .cp-progress-track, html.light-mode #portalShell .cp-progress-track-lg{ background:rgba(17,10,5,.12) !important; }
html.light-mode #portalShell .cp-status-pill{ background:rgba(17,10,5,.08) !important; }
html.light-mode #portalShell .cp-account-row{ background:rgba(17,10,5,.045) !important; }
html.light-mode #portalShell .cp-security-details{ border-color:rgba(17,10,5,.22) !important; }
html.light-mode #portalShell .cp-notif-line:hover{ background:rgba(17,10,5,.05) !important; }
html.light-mode #portalShell .cp-notif-unread{ background:rgba(17,10,5,.06) !important; }
html.light-mode #portalShell .cp-notif-icon{ background:rgba(17,10,5,.08) !important; }

/* ================================================================
   📱 جوال — بوابة العميل: نصوص أوضح، أكبر، تتنفس
   خلاصة الشكوى القديمة: النص كان 12px وضيق — الآن 14.5px بسطر 1.9
   ================================================================ */
@media (max-width:640px){
  #cpWelcomeTitle{ font-size:22px !important; line-height:1.4 !important; }
  #portalShell .panel-greeting p{ font-size:14.5px !important; line-height:1.8 !important; }
  #portalShell .cp-section-title{ font-size:17px !important; gap:10px !important; }
  #portalShell .cp-stat-box{ padding:18px 14px !important; border-radius:12px !important; }
  #portalShell .cp-stat-box strong{ font-size:26px !important; }
  #portalShell .cp-stat-box span{ font-size:13px !important; font-weight:700 !important; }
  #portalShell .cp-quick-card{ padding:16px !important; border-radius:12px !important; }
  #portalShell .cp-quick-card span{ font-size:14.5px !important; }
  #portalShell .cp-item-card{ padding:16px !important; border-radius:12px !important; }
  #portalShell .cp-current-project-card{ padding:18px !important; border-radius:12px !important; }
  #portalShell .cp-current-project-card strong{ font-size:16px !important; }
  #portalShell .empty-state{ font-size:14.5px !important; line-height:1.8 !important; padding:24px 14px !important; }
  /* ترتيب عمود واحد أوسع للقراءة */
  #portalShell .cp-stats-row{ grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
  #portalShell .cp-quick-row{ grid-template-columns:1fr !important; gap:10px !important; }
}
@media (max-width:380px){
  #portalShell .cp-stats-row{ grid-template-columns:1fr !important; }
  #cpWelcomeTitle{ font-size:20px !important; }
}

/* ================================================================
   ✨✨ تكبير فائق — بوابة العميل: كل النصوص +2 والمربعات بحد 2.5px
   ================================================================ */
html{ font-size:17px !important; }
#portalShell .cp-item-card, #portalShell .cp-stat-box, #portalShell .cp-quick-card,
#portalShell .cp-current-project-card, #portalShell .cp-client-data-card,
#portalShell .cp-account-summary, #portalShell .cp-payment-card, #portalShell .cp-wallet-card,
#portalShell .cp-last-update-card, #portalShell .cpml-stage, #portalShell .cpml-pay-row,
#portalShell .cpml-file-row, #portalShell .cpml-update-row{
  border-width:1.5px !important; border-radius:12px !important; 
}
#portalShell .panel-greeting h1{ font-size:30px !important; font-weight:800 !important; }
#portalShell .panel-greeting p{ font-size:16.5px !important; font-weight:700 !important; }
#portalShell .cp-section-title{ font-size:20px !important; font-weight:800 !important; }
#portalShell .cp-item-top strong{ font-size:17px !important; font-weight:800 !important; }
#portalShell .cp-item-sub{ font-size:15px !important; line-height:1.8 !important; color:var(--dash-text) !important; opacity:.9; }
#portalShell .cp-stat-box strong{ font-size:30px !important; }
#portalShell .cp-stat-box span{ font-size:14.5px !important; font-weight:700 !important; }
#portalShell .cp-quick-card{ font-size:16.5px !important; font-weight:800 !important; }
#portalShell .cp-current-project-top strong{ font-size:18px !important; }
#portalShell .cp-status-pill{ font-size:14px !important; padding:7px 16px !important; border-width:1.5px !important; }
#portalShell .empty-state{ font-size:16px !important; line-height:1.9 !important; }
#portalShell .cp-cd-item label{ font-size:16px !important; font-weight:800 !important; }
#portalShell .cp-account-row span{ font-size:14.5px !important; }
#portalShell .cp-account-row strong{ font-size:16.5px !important; }
#portalShell .cp-payment-numbers strong{ font-size:17px !important; }
#portalShell .cp-wallet-numbers strong{ font-size:17px !important; }
#portalShell .cp-msg-bubble{ font-size:13.5px !important; padding:6px 10px 6px !important; border-width:1.5px !important; }

/* إزالة الظلال — طلب العميل + خلفية فاتحة e3ecfc */
* , *::before, *::after{   }
html.light-mode, html.light-mode body, html.light-mode #portalShell, html.light-mode .dash-shell{ background:var(--dash-bg, #dbe4ff) !important; }


/* ================================================================
   خلفية بوابة العميل تتبع الثيم: داكن #110A05 افتراضيًا، فاتح #dbe4ff
   مع html.light-mode — بلا فرض للفاتح في الداكن.
   ================================================================ */
html, body{ background:#110A05 !important; }
html.light-mode, html.light-mode body{ background:#dbe4ff !important; }
#portalShell{ background:var(--dash-bg, #110A05) !important; }
#portalShell.dash-shell, #portalShell .dash-shell{ background:transparent !important; }
#portalShell .main-area, #portalShell .panels, #portalShell .panel{ background:transparent !important; }
#portalShell.dash-shell .sidebar, #portalShell .sidebar{ background:transparent !important; border:1.5px solid var(--dash-line, rgba(17,10,5,.18)) !important; border-radius:16px !important; margin:8px !important; width:calc(264px - 2px) !important; flex-shrink:0 !important; display:flex !important; flex-direction:column !important; position:sticky !important; top:8px !important; height:calc(100dvh - 16px) !important; z-index:30 !important; overflow:hidden !important; }
#portalShell .sidebar-brand{ padding:22px 20px 18px !important; border-bottom:1px solid var(--dash-line, rgba(17,10,5,.18)) !important; background:transparent !important; }
#portalShell .sidebar-nav{ flex:1 !important; overflow-y:auto !important; gap:3px !important; padding:14px 12px !important; display:flex !important; flex-direction:column !important; }
#portalShell .sidebar-section-label{
  background:transparent !important; background-color:transparent !important; border:none !important;
  border-radius:0 !important; padding:13px 10px 7px !important; margin:0 !important;
  text-align:start; color:var(--dash-icons, #110A05) !important; font-weight:800 !important; font-size:11.5px !important; letter-spacing:.05em !important; opacity:.8 !important;
  display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; gap:8px !important;
  line-height:1.4 !important; min-height:0 !important; flex-shrink:0 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
#portalShell .sidebar-section-label .si,
#portalShell .sidebar-section-label span[data-icon],
#portalShell .sidebar-section-label div[data-icon],
#portalShell .sidebar-section-label > svg,
#portalShell .sidebar-section-label svg{ display:none !important; }
#portalShell .sidebar-nav .tab-btn{
  background:transparent !important; border:1px solid rgba(219,228,255,.18) !important;
  border-radius:10px !important; margin:0 0 4px !important; color:var(--dash-text, #110A05) !important;
  display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important;
  gap:10px !important; padding:8px 10px !important; text-align:start !important; width:100% !important;
  line-height:1.4 !important; min-height:44px !important;
  transition:.15s ease;
}
#portalShell .sidebar-nav .tab-btn:hover{ background:var(--dash-paper2, #DBE4FF) !important; color:var(--dash-text, #110A05) !important; }
#portalShell .sidebar-nav .tab-btn > svg{
  flex-shrink:0 !important; width:18px !important; height:18px !important; min-width:18px !important;
  padding:0 !important; box-sizing:content-box !important; margin:0 !important; opacity:.75 !important;
  color:inherit !important; background:none !important; background-color:transparent !important;
  border:none !important; border-radius:0 !important;
}
#portalShell .sidebar-nav .tab-btn > span[data-en],
#portalShell .sidebar-nav .tab-btn > span:last-child{
  flex:1 1 auto !important; min-width:0 !important; font-size:13px !important; font-weight:700 !important; line-height:1.5 !important;
  white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; margin:0 !important; padding:0 !important;
}
#portalShell .sidebar-nav .tab-btn .tab-badge{ flex-shrink:0 !important; margin-inline-start:auto !important; }
#portalShell .sidebar-nav .tab-btn.is-active{ background:var(--dash-accent, #110A05) !important; color:var(--portal-btn-text, #dbe4ff) !important; border-color:transparent !important;  }
#portalShell .sidebar-nav .tab-btn.is-active > svg{ color:inherit !important; opacity:1 !important; background:none !important; background-color:transparent !important; border:none !important; border-radius:0 !important;  }
/* إصلاح عام: أي أيقونة داخل البوابة لا تتداخل مع النص أبدًا */
#portalShell svg{ flex-shrink:0 !important; }
#portalShell .si{ flex-shrink:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }
#portalShell .cp-section-title{ display:flex !important; align-items:center !important; gap:10px !important; }
#portalShell .cp-section-title svg{ flex-shrink:0 !important; margin:0 !important; }
#portalShell .cp-item-top{ display:flex !important; align-items:center !important; gap:10px !important; }
#portalShell .cp-item-top strong{ flex:1 1 auto !important; min-width:0 !important; }
#portalShell .topbar{ background:var(--dash-bg, #dbe4ff) !important; border:1.5px solid var(--dash-line, rgba(17,10,5,.18)) !important; border-radius:12px !important; margin:8px 8px 0 !important; padding:12px 16px !important; display:flex !important; align-items:center !important; gap:14px !important; position:sticky !important; top:8px !important; z-index:20 !important; }
#portalShell .dash-shell .sidebar-toggle{ background:transparent !important; border:1.5px solid var(--dash-line, rgba(17,10,5,.18)) !important; border-radius:10px !important; }
#portalShell .topbar-title{ font-size:18px !important; font-weight:800 !important; letter-spacing:-.02em !important; }
#portalShell .topbar-actions{ display:flex !important; align-items:center !important; gap:8px !important; --cp-top-icon:20px; }
#portalShell .topbar-actions .floating-btn, #portalShell #themeToggleBtn, #portalShell #cpTopChatBtn, #portalShell #cpTopNotifBtn{ background:transparent !important; background-color:transparent !important; border:1px solid rgba(219,228,255,.22) !important; border-radius:10px !important; width:40px !important; height:40px !important; min-width:40px !important; flex-shrink:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; margin:0 !important;  outline:none !important; position:relative !important; }
html.light-mode #portalShell .topbar-actions .floating-btn, html.light-mode #portalShell #themeToggleBtn, html.light-mode #portalShell #cpTopChatBtn, html.light-mode #portalShell #cpTopNotifBtn{ border-color:#110A05 !important; }
#portalShell .sidebar-footer{ padding:14px 12px calc(14px + env(safe-area-inset-bottom, 0px)) !important; border-top:1px solid var(--dash-line, rgba(17,10,5,.18)) !important; background:transparent !important; }
/* إطارات البنود مثل الأيقونات العلوية — بلون الموقع الداكن */
html.light-mode #portalShell .sidebar-nav .tab-btn{ border-color:#110A05 !important; }
#portalShell .sidebar-footer .btn{ background:transparent !important; border:1px solid rgba(219,228,255,.22) !important; border-radius:10px !important;  width:100% !important; justify-content:flex-start !important; gap:10px !important; margin-top:6px !important; }
html.light-mode #portalShell .sidebar-footer .btn{ border-color:#110A05 !important; }
#portalShell .sidebar-footer .user-chip{ display:flex !important; align-items:center !important; gap:10px !important; padding:8px 6px !important; min-width:0 !important; }
#portalShell .sidebar-footer .user-chip-text{ flex:1 1 auto !important; min-width:0 !important; overflow:hidden !important; }
#portalShell #cpChipName{ font-size:13px !important; font-weight:800 !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; display:block !important; }
#portalShell #cpChipEmail{ font-size:11px !important; font-weight:600 !important; color:var(--dash-icons) !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; display:block !important; direction:ltr !important; text-align:start !important; }
#portalShell .topbar-actions .floating-btn svg, #portalShell #themeToggleBtn svg, #portalShell #cpTopChatBtn svg, #portalShell #cpTopNotifBtn svg{ width:clamp(18px, var(--cp-top-icon), 24px) !important; height:clamp(18px, var(--cp-top-icon), 24px) !important; flex-shrink:0 !important; }
#portalShell #langToggleBtn{ background:transparent !important; background-color:transparent !important; border:1px solid rgba(219,228,255,.22) !important; border-radius:10px !important; min-width:60px !important; height:40px !important; flex-shrink:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; padding:0 14px !important; margin-inline-start:6px !important;  outline:none !important; }
html.light-mode #portalShell #langToggleBtn{ border-color:#110A05 !important; }
#portalShell #langToggleBtn svg{ width:19px !important; height:19px !important; flex-shrink:0 !important; }
#portalShell #langToggleBtn .lang-toggle-label{ font-size:12px !important; font-weight:700 !important; line-height:1.4 !important; margin:0 !important; padding:0 !important; white-space:nowrap !important; }
@media (max-width:760px){
  #portalShell #langToggleBtn .lang-toggle-label{ display:none !important; }
  #portalShell #langToggleBtn{ padding:0 8px !important; width:auto !important; min-width:44px !important; height:44px !important; }
}
/* مجموعة الأيقونات العلوية — هدف لمس مريح تلقائيًا على الجوال والشاشات اللمسية */
/* البحث في الشريط العلوي — نفس نمط وألوان مربع البحث في لوحة التحكم */
#portalShell .topbar .cp-top-search{
  flex:1 1 auto !important; min-width:0 !important; max-width:460px !important;
  margin-inline:auto !important; position:relative !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  gap:8px !important; height:40px !important; padding-inline:14px !important;
  background:var(--dash-bg, var(--bg)) !important;
  border:1.5px solid var(--dash-line, var(--line)) !important;
  border-radius:14px !important; box-sizing:border-box !important;
  transition:border-color .18s, box-shadow .18s !important;
  --cp-top-icon:20px;
}
#portalShell .topbar .cp-top-search:focus-within{
  border-color:var(--dash-text, var(--text)) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--dash-text, #dbe4ff) 14%, transparent) !important;
}
/* أيقونة البحث داخل الشريط (بداية العنصر يمينًا) — بلا إطار زائد */
#portalShell .topbar .cp-top-search .floating-btn{
  order:-1 !important;
  width:26px !important; height:26px !important; min-width:26px !important;
  background:transparent !important; background-color:transparent !important;
  border:0 !important; border-radius:8px !important; padding:0 !important;
  color:var(--dash-icons, var(--muted)) !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  flex-shrink:0 !important;
}
#portalShell .topbar .cp-top-search .floating-btn:hover{ color:var(--dash-text, var(--text)) !important; }
#portalShell .topbar .cp-top-search .floating-btn svg{ width:17px !important; height:17px !important; }
/* الحقل داخل الشريط — شفاف بلا حدود */
#portalShell .topbar .cp-top-search input[type=search]{
  flex:1 1 auto !important; min-width:0 !important; width:100% !important;
  height:100% !important; padding:0 !important; margin:0 !important;
  background:transparent !important; background-color:transparent !important;
  border:0 !important; border-radius:0 !important;
  color:var(--dash-text, var(--text)) !important;
  font-size:13.5px !important; font-family:inherit !important; outline:none !important;
}
#portalShell .topbar .cp-top-search input[type=search]:focus{ background:transparent !important; box-shadow:none !important; }
#portalShell .topbar .cp-top-search input[type=search]::placeholder{ color:var(--dash-icons, var(--muted)) !important; opacity:.75 !important; }
/* نافذة النتائج — ألوان ثيم لوحة التحكم بلا ألوان ثابتة */
#portalShell .cp-search-results{
  position:absolute !important; top:calc(100% + 8px) !important; inset-inline:0 !important; z-index:70 !important;
  background:var(--dash-cards, var(--paper)) !important; color:var(--dash-text, var(--text)) !important;
  border:1.5px solid var(--dash-line, var(--line)) !important; border-radius:10px !important;
}
#portalShell .cp-search-hit{ color:var(--dash-text, var(--text)) !important; }
#portalShell .cp-search-hit:hover{ background:color-mix(in srgb, var(--dash-accent) 14%, transparent) !important; }
#portalShell .cp-search-hit .cp-search-sub{ color:var(--dash-icons, var(--muted)) !important; opacity:.75 !important; }
#portalShell .cp-search-hit .cp-search-label{ color:var(--dash-text, var(--text)) !important; }
#portalShell .cp-search-none{ color:var(--dash-icons, var(--muted)) !important; opacity:.8 !important; }
@media (max-width:900px){
  /* الجوال: الحقل يختفي وتبقى أيقونة البحث — بنفس حجم ولون وإطار باقي أيقونات الشريط */
  #portalShell .topbar .cp-top-search{
    flex:0 0 auto !important; margin-inline:0 !important; margin-inline-start:auto !important;
    width:auto !important; max-width:none !important; height:auto !important;
    padding:0 !important; gap:0 !important; background:transparent !important;
    border:0 !important; border-radius:0 !important;
  }
  #portalShell .topbar .cp-top-search:focus-within{ border:0 !important; box-shadow:none !important; }
  #portalShell .topbar .cp-top-search input[type=search]{ display:none !important; width:0 !important; flex:0 !important; }
  #portalShell .topbar .cp-top-search .floating-btn{
    order:0 !important;
    width:40px !important; height:40px !important; min-width:40px !important;
    background:transparent !important; background-color:transparent !important;
    border:1px solid rgba(219,228,255,.22) !important;
    border-radius:10px !important;
    color:var(--dash-icons, #DBE4FF) !important;
  }
  html.light-mode #portalShell .topbar .cp-top-search .floating-btn{ border-color:#110A05 !important; }
  #portalShell .topbar .cp-top-search .floating-btn svg{ width:clamp(18px, var(--cp-top-icon, 20px), 24px) !important; height:clamp(18px, var(--cp-top-icon, 20px), 24px) !important; }
  /* النقر يفتح شريط بحث كامل العرض — بأسلوب لوحة التحكم */
  /* البحث المفتوح: صف ثانٍ أسفل العنوان والأيقونات (داخل التدفق، لا فوقها) */
  #portalShell .topbar{ flex-wrap:wrap !important; }
  #portalShell .topbar .cp-top-search.is-open{
    position:static !important; flex:1 1 100% !important; order:50 !important;
    width:100% !important; max-width:none !important;
    margin:8px 0 0 !important; height:48px !important; padding:0 14px !important;
    background:var(--dash-bg, #110A05) !important;
    border:1.5px solid var(--dash-text, #DBE4FF) !important;
    border-radius:14px !important;
    gap:8px !important; box-sizing:border-box !important;
  }
  #portalShell .topbar .cp-top-search.is-open input[type=search]{
    display:block !important; width:100% !important; flex:1 1 auto !important;
    height:46px !important; padding:0 !important; background:transparent !important;
    border:0 !important; color:var(--dash-text, #DBE4FF) !important; font-size:15.5px !important;
  }
  #portalShell .topbar .cp-top-search.is-open input[type=search]::placeholder{ color:var(--dash-icons, #DBE4FF) !important; opacity:.6 !important; }
  #portalShell .topbar .cp-top-search.is-open .floating-btn{
    order:-1 !important; width:26px !important; height:26px !important; min-width:26px !important;
    border:0 !important; border-radius:8px !important; color:var(--dash-icons, #DBE4FF) !important;
  }
  #portalShell .topbar .cp-top-search.is-open .floating-btn svg{ width:18px !important; height:18px !important; }
  #portalShell .topbar .cp-top-search.is-open .cp-search-results{
    top:calc(100% + 8px) !important; inset-inline:0 !important; width:auto !important; max-height:54vh !important;
  }
}
@media (max-width:640px), (pointer:coarse){
  #portalShell .topbar-actions{ gap:10px !important; }
  #portalShell .topbar-actions .floating-btn, #portalShell #themeToggleBtn, #portalShell #cpTopChatBtn, #portalShell #cpTopNotifBtn, #portalShell .topbar .cp-top-search .floating-btn{ width:44px !important; height:44px !important; min-width:44px !important; }
  #portalShell .topbar-actions{ --cp-top-icon:22px; }
  #portalShell .topbar .cp-top-search{ --cp-top-icon:22px; }
}
/* تبويب الإشعارات — قائمة النغمات */
#portalShell .cp-tone-list{ display:flex !important; flex-direction:column !important; gap:8px !important; margin-top:8px !important; }
#portalShell .cp-tone-radio{ display:flex !important; align-items:center !important; gap:10px !important; padding:10px 12px !important; border:1.5px solid var(--dash-line, rgba(17,10,5,.18)) !important; border-radius:10px !important; cursor:pointer !important; }
#portalShell .cp-tone-radio.is-active{ border-color:var(--dash-accent) !important; }
#portalShell .cp-tone-radio input{ width:auto !important; margin:0 !important; }
#portalShell .cp-tone-info{ flex:1 1 auto !important; min-width:0 !important; display:flex !important; flex-direction:column !important; gap:2px !important; }
#portalShell .cp-tone-info strong{ font-size:13.5px !important; }
#portalShell .cp-tone-info small{ font-size:11.5px !important; opacity:.7 !important; }
/* زر إرسال المحادثة — أكبر وأوضح للجوال */
#portalShell #cpChatSendBtn{ min-height:44px !important; min-width:52px !important; padding:0 18px !important; font-size:14px !important; font-weight:800 !important; border-radius:10px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; }
#portalShell #cpChatSendBtn svg{ width:22px !important; height:22px !important; flex-shrink:0 !important; }
/* كل المربعات: حواف ناعمة مربعة — ممنوع الدائري/Pill */
#portalShell .cp-item-badge, #portalShell .cp-quick-badge, #portalShell .cp-top-badge,
#portalShell .cp-status-pill, #portalShell .cpml-pay-pill, #portalShell .cp-notif-count,
#portalShell .cp-progress-track, #portalShell .cp-progress-track-lg, #portalShell .cp-progress-fill,
#portalShell .cp-cd-tag, #portalShell .cp-item-card,
#portalShell .cp-payment-card, #portalShell .cp-wallet-card, #portalShell .cp-last-update-card,
#portalShell .cp-current-project-card, #portalShell .cp-client-data-card, #portalShell .cp-account-summary,
#portalShell .cpml-totals div, #portalShell .cpml-pay-row, #portalShell .cpml-file-row, #portalShell .cpml-update-row,
#portalShell .cpml-stage, #portalShell .cp-payment-line, #portalShell .cp-modal-card{ border-radius:10px !important; }
@media (max-width:640px){
  #cpChatPanel.cp-chat-panel{ inset-inline-end:8px !important; inset-inline-start:8px !important; bottom:8px !important; width:auto !important; height:min(68vh, 560px) !important; max-height:72dvh !important; }
  #portalShell .dash-shell .sidebar{ width:min(320px, 88vw) !important; }
}
#portalShell .cp-quick-accent, #portalShell .cp-notif-dot, #portalShell .cp-account-row > span::before{ border-radius:3px !important; }
#portalShell .topbar-actions .cp-top-badge{ border-radius:6px !important; min-width:18px !important; height:18px !important; font-size:10px !important; }
#portalShell .main-area{ background:transparent !important; padding:8px !important; }
#portalShell .panels{ background:transparent !important; border:none !important; border-radius:0 !important; }
#portalShell .panel{ background:transparent !important; }
/* ألوان البوابة من المركز — القاعدة لا تطابق إلا عند ضبط المتغير فعلًا */
html[style*="--portal-heading"] #portalShell h1,
html[style*="--portal-heading"] #portalShell h2,
html[style*="--portal-heading"] #portalShell h3{ color:var(--portal-heading); }
html[style*="--portal-btn-text"] #portalShell .btn-sand,
html[style*="--portal-btn-text"] #portalShell .btn-primary{ color:var(--portal-btn-text); }

/* ===== ترويسة تحريرية هادئة: حد خفيف + خط تمييز رفيع ===== */
#portalShell .panel-greeting{ background:var(--dash-paper2, #DBE4FF) !important; border:1px solid var(--dash-line) !important; border-inline-start:3px solid var(--dash-text) !important; border-radius:14px !important; padding:22px 20px !important; margin-bottom:24px !important; display:block !important;  }
#portalShell .panel-greeting::before{ content:none !important; display:none !important; }
#portalShell .panel-greeting h1{ font-size:24px !important; font-weight:800 !important; letter-spacing:-.01em !important; color:var(--dash-text) !important; margin:0 0 4px !important; line-height:1.3 !important; }
#portalShell .panel-greeting p{ font-size:14px !important; font-weight:400 !important; color:var(--dash-icons) !important; margin:0 !important; line-height:1.8 !important; }
@media (max-width:760px){
  #portalShell .cp-stats-row{ grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
  #portalShell .cp-quick-row{ grid-template-columns:1fr !important; gap:10px !important; }
  #portalShell .cp-stat-box{ padding:12px 10px !important; border-radius:12px !important; }
  #portalShell .cp-stat-box strong{ font-size:20px !important; }
  #portalShell .cp-quick-card{ padding:12px 10px !important; border-radius:12px !important; }
}
@media (max-width:480px){
  #portalShell .cp-stats-row{ grid-template-columns:1fr 1fr !important; }
}
/* ===== الجوال (≤900px): استعادة الـDrawer — القائمة صندوق واحد واضح يفتح/يغلق بزر القائمة =====
   قاعدة الكمبيوتر sticky كانت تُبطل الـDrawer فتبقى القائمة ثابتة بجانب المحتوى بالجوال.
   هنا نعيدها درجًا عائمًا: مخفي افتراضيًا، يفتح فوق المحتوى، ويغلق تلقائيًا عند الاختيار (JS موجود). */
@media (max-width:900px){
  #portalShell.dash-shell .sidebar, #portalShell.sidebar-open .sidebar, #portalShell .sidebar{
    position:fixed !important; top:10px !important; bottom:10px !important; height:auto !important;
    max-height:calc(100dvh - 20px) !important; margin:0 !important;
    width:min(340px, calc(100vw - 20px)) !important; max-width:min(340px, calc(100vw - 20px)) !important;
    background:var(--dash-bg, #dbe4ff) !important;
    border:1.5px solid var(--dash-line, rgba(17,10,5,.18)) !important; border-radius:14px !important;
     overflow:hidden !important; z-index:150 !important;
    transform:translateX(100%) !important; transition:transform .22s ease !important;
    display:flex !important; flex-direction:column !important;
  }
  /* LTR/الإنجليزية: الدرج عند اليسار (الموضع الثابت حسب اتجاه الصف)
     فيُخفى خارج الشاشة إلى اليسار — و100% الموجبة كانت تتركه فوق
     المحتوى على اليمين فتغطيه ولا يبدو مغلقًا. */
  html[dir="ltr"] #portalShell.dash-shell .sidebar, html[dir="ltr"] #portalShell.sidebar-open .sidebar, html[dir="ltr"] #portalShell .sidebar{
    transform:translateX(calc(-100% - 8px)) !important;
  }
  #portalShell.dash-shell.sidebar-open .sidebar, #portalShell.sidebar-open .sidebar{
    transform:translateX(0) !important;
  }
  html[dir="ltr"] #portalShell.dash-shell.sidebar-open .sidebar, html[dir="ltr"] #portalShell.sidebar-open .sidebar{
    transform:translateX(0) !important;
  }
}
/* ===== e58: عناوين مرفوعة عن الحواف + بنود نحيفة بمقاس الأيقونات + مربعات لباقي المحتوى + أرقام أكبر ===== */
#portalShell .sidebar-nav .tab-btn{ min-height:42px !important; padding:6px 10px !important; }
#portalShell .cp-current-project-meta div, #portalShell .cp-payment-numbers div, #portalShell .cp-wallet-numbers div{ background:transparent !important; border:1.5px solid var(--dash-line, rgba(17,10,5,.18)) !important; border-radius:10px !important;  padding:10px 12px !important; margin-bottom:8px !important; }
#portalShell .cp-current-project-meta div:first-child, #portalShell .cp-payment-numbers div:first-child, #portalShell .cp-wallet-numbers div:first-child{ border-top:1.5px solid var(--dash-line, rgba(17,10,5,.18)) !important; }
#portalShell .cp-account-row{ border:1.5px solid var(--dash-line, rgba(17,10,5,.18)) !important; border-radius:10px !important;  }
#portalShell .cp-stat-box{ gap:6px !important; }
#portalShell .cp-stat-box svg{ width:30px !important; height:30px !important; }
#portalShell .cp-stat-box strong{ font-size:40px !important; font-weight:800 !important; line-height:1.1 !important; }
#portalShell .cp-stat-box:nth-child(1) strong{ font-size:46px !important; }
#portalShell .cp-stat-box span{ font-size:14px !important; font-weight:800 !important; }
@media (max-width:760px){
  #portalShell .cp-stat-box strong{ font-size:30px !important; }
  #portalShell .cp-stat-box:nth-child(1) strong{ font-size:34px !important; }
}
/* ===== e59: موازنة المربعات + إصلاح النصوص المخفية بالوضعين ===== */
:root{
  --dash-bg:#110A05; --dash-cards:#110A05; --dash-paper2:#110A05;
  --dash-text:#dbe4ff; --dash-icons:#dbe4ff; --dash-accent:#dbe4ff;
  --dash-line:rgba(219,228,255,.2); --ink:#110a05;
}
html.light-mode{ --ink:#dbe4ff; }
#portalShell .cp-stats-row, #portalShell .cp-quick-row{ align-items:stretch !important; }
#portalShell .cp-stat-box, #portalShell .cp-quick-card{ height:100% !important; justify-content:center !important; }
#cpChatSendBtn{ background:var(--dash-accent) !important; color:var(--portal-btn-text, var(--ink, #110a05)) !important; }
html.light-mode #cpChatSendBtn{ color:var(--portal-btn-text, #dbe4ff) !important; }
#portalShell .cp-new-request-btn{ color:var(--portal-btn-text, var(--ink)) !important; }
/* ===== e61: composer متناسق بأسلوب الحساب + زر مرفقات + تنحيف موحد ===== */
#cpChatPanel .cp-chat-composer{ display:flex !important; gap:8px !important; align-items:stretch !important; }
#cpChatPanel #cpChatInput{ flex:1 1 auto !important; min-width:0 !important; width:auto !important; min-height:36px !important; background:var(--dash-bg, #dbe4ff) !important; border:1.5px solid var(--dash-line, rgba(17,10,5,.18)) !important; border-radius:10px !important; color:var(--dash-text, #110A05) !important; padding:0 12px !important; font-size:14px !important;  }
#cpChatPanel #cpChatInput::placeholder{ color:var(--dash-icons, #110A05) !important; opacity:.65 !important; }
#cpChatSendBtn{ min-width:48px !important; padding:0 14px !important; }
#cpChatPanel #cpChatAttachBtn{ width:36px !important; min-width:36px !important; height:36px !important; align-self:center !important; flex-shrink:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; background:transparent !important; border:2px solid rgba(219,228,255,.38) !important; border-radius:10px !important; color:var(--dash-icons, #110A05) !important; cursor:pointer !important;  padding:0 !important; }
html.light-mode #cpChatPanel #cpChatAttachBtn{ border-color:#110A05 !important; color:#110A05 !important; }
#cpChatPanel #cpChatAttachBtn svg{ width:20px !important; height:20px !important; flex-shrink:0 !important; }
#cpChatPanel #cpChatFileInput{ display:none !important; }
#cpChatPanel #cpAttachStatus{ font-size:12px !important; font-weight:700 !important; color:var(--dash-icons, #110A05) !important; min-height:16px !important; margin:6px 0 0 !important; }
/* ===== e64: صف فارغ لكل بند + تسميات أوضح ===== */
.empty-state{ border:1.5px dashed var(--dash-line, rgba(17,10,5,.18)) !important; border-radius:10px !important; background:transparent !important; padding:18px 14px !important; text-align:center !important; }
/* ===== مراجعة محتوى الحساب — نصوص داكنة على داكن ===== */
html:not(.light-mode) body[data-page="client-portal"] #portalShell .empty-state,
html:not(.light-mode) body[data-page="client-portal"] #portalShell .cp-item-sub,
html:not(.light-mode) body[data-page="client-portal"] #portalShell .cp-stat-box span,
html:not(.light-mode) body[data-page="client-portal"] #portalShell .cp-payment-numbers span,
html:not(.light-mode) body[data-page="client-portal"] #portalShell .cp-wallet-numbers span,
html:not(.light-mode) body[data-page="client-portal"] #portalShell .cp-current-project-meta span{ color:rgba(219,228,255,.82) !important; }
html:not(.light-mode) body[data-page="client-portal"] #portalShell .cp-stat-box strong,
html:not(.light-mode) body[data-page="client-portal"] #portalShell .cp-payment-numbers strong,
html:not(.light-mode) body[data-page="client-portal"] #portalShell .cp-wallet-numbers strong{ color:#dbe4ff !important; }
/* ===== e67: ضمان تباين كل نصوص الحساب — داكن أساس + فاتح صريح ===== */
#portalShell #cpChipEmail{ color:#dbe4ff !important; }
#portalShell #cpChipName{ color:#dbe4ff !important; }
#portalShell .cp-account-row strong{ color:#dbe4ff !important; }
#portalShell .cp-item-badge{ background:rgba(219,228,255,.16) !important; color:#dbe4ff !important; }
#portalShell .cp-status-pill{ background:rgba(219,228,255,.16) !important; color:#dbe4ff !important; }
#portalShell .user-chip-avatar{ background:#dbe4ff !important; color:#110A05 !important; }
html.light-mode #portalShell #cpChipEmail{ background:#110A05 !important; color:#dbe4ff !important; border-radius:8px !important; padding:3px 8px !important; }
html:not(.light-mode) body[data-page="client-portal"] #portalShell #cpChipEmail{ background:#dbe4ff !important; color:#110A05 !important; border-radius:8px !important; padding:3px 8px !important; }
/* ===== e72: عناوين مرفوعة + تباعد أيقونة/اسم في بطاقات المشاريع والطلبات ===== */
#portalShell .cp-item-card{ padding:16px 18px !important; }
#portalShell .cp-item-top{ gap:12px !important; margin-bottom:8px !important; }
#portalShell .cp-item-top strong{ line-height:1.5 !important; }
#portalShell .cp-item-badge, #portalShell .cpml-pay-pill, #portalShell .cp-status-pill{ display:inline-flex !important; align-items:center !important; gap:6px !important; }
#portalShell .cp-item-badge svg, #portalShell .cpml-pay-pill svg, #portalShell .cp-status-pill svg{ flex-shrink:0 !important; }
html.light-mode #portalShell #cpChipName{ color:#110A05 !important; }
html.light-mode #portalShell .cp-account-row strong{ color:#110A05 !important; }
html.light-mode #portalShell .cp-item-badge{ background:rgba(17,10,5,.08) !important; color:#110A05 !important; }
html.light-mode #portalShell .cp-status-pill{ background:rgba(17,10,5,.08) !important; color:#110A05 !important; }
html.light-mode #portalShell .user-chip-avatar{ background:#110A05 !important; color:#dbe4ff !important; }
/* ===== e65: إنجليزي بنفس خط IBM العربي — بلا أحرف كبيرة/تقطّع ===== */
html.lang-en #portalShell, html.lang-en #portalShell button, html.lang-en #portalShell input,
html.lang-en #cpChatPanel, html.lang-en #cpChatPanel button, html.lang-en #cpChatPanel input{
  font-family:'IBM Plex Sans Arabic', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}
html.lang-en #portalShell *{ text-transform:none !important; letter-spacing:0 !important; word-break:normal !important; overflow-wrap:break-word !important; hyphens:none !important; }
.cp-msg-bubble .cp-msg-attachment-img{ max-width:180px !important; border-radius:8px !important; display:block !important; margin-bottom:6px !important; }
.cp-msg-bubble .cp-msg-attachment-file{ display:inline-flex !important; align-items:center !important; gap:6px !important; font-size:13px !important; font-weight:700 !important; margin-bottom:6px !important; text-decoration:underline !important; }
/* ===== e62: زرّا الإرسال والمرفقات إطار فقط + نافذة محادثة أكثر إبداعًا ===== */
#cpChatSendBtn{ background:transparent !important; background-color:transparent !important; color:var(--dash-text, #110A05) !important; border:2px solid rgba(219,228,255,.38) !important; border-radius:10px !important; min-width:64px !important; height:44px !important;  }
html.light-mode #cpChatSendBtn{ border-color:#110A05 !important; color:#110A05 !important; }
#cpChatPanel.cp-chat-panel{ border-width:1.5px !important; border-radius:24px !important; border-color:var(--chat-border,rgba(219,228,255,.4)) !important; }
#cpChatPanel .cp-chat-head{ border-bottom:1.5px solid var(--chat-border,var(--dash-line, rgba(17,10,5,.18))) !important; }
#cpChatPanel .cp-chat-title{ font-size:14.5px !important; font-weight:800 !important; display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; }
#cpChatPanel .cp-chat-title::before{ display:none !important; }
#cpChatPanel .cp-chat-close{ width:26px !important; height:26px !important; min-width:26px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; background:transparent !important; border:1px solid var(--chat-border,rgba(219,228,255,.3)) !important; border-radius:50% !important; color:var(--chat-tx,#DBE4FF) !important; font-size:16px !important; line-height:1 !important; padding:0 !important; cursor:pointer !important; opacity:.7 !important; }
#cpChatPanel .cp-chat-close:hover{ opacity:1 !important; }
#cpChatPanel .cp-chat-foot{ background:transparent !important; border-top:1px solid var(--chat-border,rgba(219,228,255,.14)) !important; }
.cp-chat-panel .cp-msg.is-mine .cp-msg-bubble{ border-radius:20px !important; }
.cp-chat-panel .cp-msg.is-theirs .cp-msg-bubble{ border-radius:20px !important; }
#cpChatPanel #cpAttachStatus:empty{ display:none !important; }
#cpChatPanel #cpAttachStatus{ border:1px solid var(--chat-border,var(--dash-line, rgba(17,10,5,.18))) !important; border-radius:8px !important; padding:4px 8px !important; display:inline-block !important; }
.cp-msg-bubble .cp-msg-attachment-img{ border:1.5px solid var(--dash-line, rgba(17,10,5,.18)) !important; }
/* ===== e69: مراجعة شاملة — فاتح: كل المحتوى بلون الهوية الداكن / داكن: كل النصوص بالفاتح ===== */
html.light-mode #portalShell div, html.light-mode #portalShell p, html.light-mode #portalShell span,
html.light-mode #portalShell strong, html.light-mode #portalShell b, html.light-mode #portalShell em,
html.light-mode #portalShell small, html.light-mode #portalShell label, html.light-mode #portalShell summary,
html.light-mode #portalShell h1, html.light-mode #portalShell h2, html.light-mode #portalShell h3,
html.light-mode #portalShell h4, html.light-mode #portalShell a, html.light-mode #portalShell button,
html.light-mode #portalShell li, html.light-mode #portalShell time, html.light-mode #portalShell input,
html.light-mode #portalShell textarea, html.light-mode #portalShell select,
html.light-mode #cpChatPanel div, html.light-mode #cpChatPanel p, html.light-mode #cpChatPanel span,
html.light-mode #cpChatPanel strong, html.light-mode #cpChatPanel b, html.light-mode #cpChatPanel em,
html.light-mode #cpChatPanel small, html.light-mode #cpChatPanel label, html.light-mode #cpChatPanel a,
html.light-mode #cpChatPanel button, html.light-mode #cpChatPanel time, html.light-mode #cpChatPanel input{ color:#110A05 !important; }
html.light-mode #portalShell input::placeholder, html.light-mode #portalShell textarea::placeholder,
html.light-mode #cpChatPanel input::placeholder{ color:rgba(17,10,5,.55) !important; }
/* استثناءات الفاتح — نص فاتح على خلفيات داكنة */
html.light-mode #portalShell .cp-quick-badge, html.light-mode #portalShell .topbar-actions .cp-top-badge,
html.light-mode #portalShell .cp-notif-count, html.light-mode #portalShell .cpml-pay-pill.cpml-paid,
html.light-mode #portalShell .cp-pay-ok{ color:var(--dash-bg, #dbe4ff) !important; }
html.light-mode #portalShell .user-chip-avatar{ color:#dbe4ff !important; }
html.light-mode #cpChatPanel .cp-msg.is-mine .cp-msg-bubble, html.light-mode #cpChatPanel .cp-msg.is-mine .cp-msg-bubble span,
html.light-mode #cpChatPanel .cp-msg.is-mine .cp-msg-bubble a{ color:var(--portal-btn-text, #dbe4ff) !important; }
/* الداكن — كل النصوص بالفاتح */
html:not(.light-mode) body[data-page="client-portal"] #portalShell div, html:not(.light-mode) body[data-page="client-portal"] #portalShell p,
html:not(.light-mode) body[data-page="client-portal"] #portalShell span, html:not(.light-mode) body[data-page="client-portal"] #portalShell strong,
html:not(.light-mode) body[data-page="client-portal"] #portalShell b, html:not(.light-mode) body[data-page="client-portal"] #portalShell em,
html:not(.light-mode) body[data-page="client-portal"] #portalShell small, html:not(.light-mode) body[data-page="client-portal"] #portalShell label,
html:not(.light-mode) body[data-page="client-portal"] #portalShell summary, html:not(.light-mode) body[data-page="client-portal"] #portalShell h1,
html:not(.light-mode) body[data-page="client-portal"] #portalShell h2, html:not(.light-mode) body[data-page="client-portal"] #portalShell h3,
html:not(.light-mode) body[data-page="client-portal"] #portalShell h4, html:not(.light-mode) body[data-page="client-portal"] #portalShell a,
html:not(.light-mode) body[data-page="client-portal"] #portalShell button, html:not(.light-mode) body[data-page="client-portal"] #portalShell li,
html:not(.light-mode) body[data-page="client-portal"] #portalShell time, html:not(.light-mode) body[data-page="client-portal"] #portalShell input,
html:not(.light-mode) body[data-page="client-portal"] #portalShell textarea, html:not(.light-mode) body[data-page="client-portal"] #portalShell select,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel div, html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel p,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel span, html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel strong,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel b, html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel em,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel small, html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel label,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel a, html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel button,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel time, html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel input{ color:#dbe4ff !important; }
html:not(.light-mode) body[data-page="client-portal"] #portalShell input::placeholder,
html:not(.light-mode) body[data-page="client-portal"] #portalShell textarea::placeholder,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel input::placeholder{ color:rgba(219,228,255,.6) !important; }
/* استثناءات الداكن — نص داكن على خلفيات فاتحة */
html:not(.light-mode) body[data-page="client-portal"] #portalShell .btn-primary,
html:not(.light-mode) body[data-page="client-portal"] #portalShell .btn-sand{ color:var(--ink, #110a05) !important; }
html:not(.light-mode) body[data-page="client-portal"] #portalShell .cp-quick-badge,
html:not(.light-mode) body[data-page="client-portal"] #portalShell .topbar-actions .cp-top-badge,
html:not(.light-mode) body[data-page="client-portal"] #portalShell .cp-notif-count,
html:not(.light-mode) body[data-page="client-portal"] #portalShell .cpml-pay-pill.cpml-paid,
html:not(.light-mode) body[data-page="client-portal"] #portalShell .cp-pay-ok{ color:var(--dash-bg, #110A05) !important; }
html:not(.light-mode) body[data-page="client-portal"] #portalShell .user-chip-avatar{ color:#110A05 !important; }
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel .cp-msg.is-mine .cp-msg-bubble,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel .cp-msg.is-mine .cp-msg-bubble span,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel .cp-msg.is-mine .cp-msg-bubble a{ color:var(--portal-btn-text, #110A05) !important; }
/* ===== e70: نصوص الصناديق الداكنة — البند النشط وأزرار التعبئة ===== */
html.light-mode #portalShell .sidebar-nav .tab-btn.is-active > span,
html.light-mode #portalShell .sidebar-nav .tab-btn.is-active .tab-badge{ color:var(--portal-btn-text, #dbe4ff) !important; }
html.light-mode #portalShell .btn-primary, html.light-mode #portalShell .btn-sand{ color:var(--ink, #dbe4ff) !important; }
html:not(.light-mode) body[data-page="client-portal"] #portalShell .sidebar-nav .tab-btn.is-active > span,
html:not(.light-mode) body[data-page="client-portal"] #portalShell .sidebar-nav .tab-btn.is-active .tab-badge{ color:var(--portal-btn-text, #110A05) !important; }
/* ===== e60: خط IBM لكل المحتوى + نص بنود أكبر + عنوان نحيف وبند أعرض ===== */
#portalShell, #portalShell button, #portalShell input, #portalShell select, #portalShell textarea,
#cpChatPanel, #cpChatPanel button, #cpChatPanel input{
  font-family:'IBM Plex Sans Arabic', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
}
#portalShell .cp-stat-box strong, #portalShell .cp-payment-numbers strong,
#portalShell .cp-wallet-numbers strong, #portalShell .cp-item-badge{ font-variant-numeric:tabular-nums !important; }
#portalShell .sidebar-nav .tab-btn{ font-size:15.5px !important; }
#portalShell .sidebar-nav .tab-btn > span{ font-weight:700 !important; font-size:15px !important; }
#portalShell .sidebar-nav .tab-btn{ font-size:15px !important; }

/* بطاقة الباقة المختارة — اسم/نوع/سعر/بنود/مدة/تعديلات */
#portalShell .cp-payment-package{ font-size:12px; color:var(--dash-icons,var(--muted)); margin:2px 0 0; }
#portalShell .cp-pkg-features{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
#portalShell .cp-pkg-features li{ display:flex; align-items:flex-start; gap:7px; font-size:12.5px; color:var(--dash-icons,var(--muted)); }

/* ===== سيادة نافذة المحادثة: ألوان إدارة النوافذ فوق كل القواعد العامة (e69/e70) ===== */
html.light-mode body[data-page="client-portal"] #cpChatPanel.cp-chat-panel .cp-msg-bubble,
html.light-mode body[data-page="client-portal"] #cpChatPanel.cp-chat-panel .cp-msg-bubble span,
html.light-mode body[data-page="client-portal"] #cpChatPanel.cp-chat-panel .cp-msg-bubble a,
html.light-mode body[data-page="client-portal"] #cpChatPanel.cp-chat-panel .cp-chat-title,
html.light-mode body[data-page="client-portal"] #cpChatPanel.cp-chat-panel .cp-chat-head,
html.light-mode body[data-page="client-portal"] #cpChatPanel.cp-chat-panel .cp-msg-time,
html.light-mode body[data-page="client-portal"] #cpChatPanel.cp-chat-panel .empty-state{ color:var(--chat-tx,#DBE4FF) !important; }
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel.cp-chat-panel .cp-msg-bubble,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel.cp-chat-panel .cp-msg-bubble span,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel.cp-chat-panel .cp-msg-bubble a,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel.cp-chat-panel .cp-chat-title,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel.cp-chat-panel .cp-chat-head,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel.cp-chat-panel .cp-msg-time,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel.cp-chat-panel .empty-state{ color:var(--chat-tx,#dbe4ff) !important; }
html.light-mode body[data-page="client-portal"] #cpChatPanel.cp-chat-panel .cp-attach-btn{ color:var(--chat-send-bg,#DBE4FF) !important; }
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel.cp-chat-panel .cp-attach-btn{ color:var(--chat-send-bg,#dbe4ff) !important; }
html.light-mode body[data-page="client-portal"] #cpChatPanel.cp-chat-panel .cp-chat-composer input,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel.cp-chat-panel .cp-chat-composer input{ color:#110A05 !important; }
html.light-mode body[data-page="client-portal"] #cpChatPanel.cp-chat-panel .cp-chat-composer input::placeholder,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel.cp-chat-panel .cp-chat-composer input::placeholder{ color:rgba(17,10,5,.55) !important; }

/* ===== فقاعة موحدة جديدة: لاين (إطار حول النص) بلا ظل + ذيل للداخل =====
   تتفوق على كل قواعد الألوان العامة السابقة — بلا أي نص يضيع في الداكن أو الفاتح */
html.light-mode body[data-page="client-portal"] #cpChatPanel .cp-msg.is-mine .cp-msg-bubble,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel .cp-msg.is-mine .cp-msg-bubble{ background:transparent !important; border-color:var(--chat-border,rgba(219,228,255,.4)) !important;  border-radius:20px !important; }
html.light-mode body[data-page="client-portal"] #cpChatPanel .cp-msg.is-theirs .cp-msg-bubble,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel .cp-msg.is-theirs .cp-msg-bubble{ background:transparent !important; border-color:var(--chat-border,rgba(219,228,255,.4)) !important;  border-radius:20px !important; }
html.light-mode body[data-page="client-portal"] #cpChatPanel .cp-msg.is-mine .cp-msg-bubble,
html.light-mode body[data-page="client-portal"] #cpChatPanel .cp-msg.is-mine .cp-msg-bubble span,
html.light-mode body[data-page="client-portal"] #cpChatPanel .cp-msg.is-mine .cp-msg-bubble a,
html.light-mode body[data-page="client-portal"] #cpChatPanel .cp-msg.is-mine .cp-msg-bubble .cp-msg-sender,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel .cp-msg.is-mine .cp-msg-bubble,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel .cp-msg.is-mine .cp-msg-bubble span,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel .cp-msg.is-mine .cp-msg-bubble a,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel .cp-msg.is-mine .cp-msg-bubble .cp-msg-sender{ color:var(--chat-tx,#DBE4FF) !important; }
html.light-mode body[data-page="client-portal"] #cpChatPanel .cp-msg.is-theirs .cp-msg-bubble,
html.light-mode body[data-page="client-portal"] #cpChatPanel .cp-msg.is-theirs .cp-msg-bubble span,
html.light-mode body[data-page="client-portal"] #cpChatPanel .cp-msg.is-theirs .cp-msg-bubble a,
html.light-mode body[data-page="client-portal"] #cpChatPanel .cp-msg.is-theirs .cp-msg-bubble .cp-msg-sender,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel .cp-msg.is-theirs .cp-msg-bubble,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel .cp-msg.is-theirs .cp-msg-bubble span,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel .cp-msg.is-theirs .cp-msg-bubble a,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel .cp-msg.is-theirs .cp-msg-bubble .cp-msg-sender{ color:var(--chat-tx,#DBE4FF) !important; }
html.light-mode body[data-page="client-portal"] #cpChatPanel .cp-msg.is-mine .cp-msg-bubble::after,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel .cp-msg.is-mine .cp-msg-bubble::after{ border-top-color:var(--chat-bg,#110A05) !important; }
html.light-mode body[data-page="client-portal"] #cpChatPanel .cp-msg.is-theirs .cp-msg-bubble::after,
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel .cp-msg.is-theirs .cp-msg-bubble::after{ border-top-color:var(--chat-bg,#110A05) !important; }
/* ===== سيادة كاملة: حالة المرفقات والتلميح تتبعان نص البند (لا لون إجباري) ===== */
html.light-mode body[data-page="client-portal"] #cpChatPanel.cp-chat-panel #cpAttachStatus{ color:var(--chat-tx,#110A05) !important; }
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel.cp-chat-panel #cpAttachStatus{ color:var(--chat-tx,#dbe4ff) !important; }
html.light-mode body[data-page="client-portal"] #cpChatPanel.cp-chat-panel #cpChatInput::placeholder{ color:var(--chat-ph,rgba(17,10,5,.55)) !important; opacity:1 !important; }
html:not(.light-mode) body[data-page="client-portal"] #cpChatPanel.cp-chat-panel #cpChatInput::placeholder{ color:var(--chat-ph,rgba(219,228,255,.6)) !important; opacity:1 !important; }

/* ---------- calm account/app pass ---------- */
html, body, #portalShell, #portalShell .sidebar-nav, .cp-chat-messages,
.cp-chat-composer, .cp-modal-card, .table-wrap, .data-table-wrap{
  scrollbar-width:none !important; -ms-overflow-style:none;
}
.cp-account-avatar-box{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--dash-line,var(--line)); }
.cp-account-avatar-preview{ line-height:0; }
#cpAccountSettingsHost .cp-section-is-mt0{ margin-top:0; }

/* ══════════════════════════════════════════════════════════════════════
   الأقسام الجديدة في بوابة العميل:
   · cp-subnav      — مبدّل «الفواتير | الإيصالات» داخل قسم واحد
   · cp-home-blocks — شبكة الكتل الست في «نظرة عامة»
   كل الألوان متغيّرات، فتعمل في الوضع الفاتح والداكن معًا.
   ══════════════════════════════════════════════════════════════════════ */
.cp-subnav{
  display:flex; gap:6px; flex-wrap:wrap; margin:0 0 16px;
  border-bottom:1px solid var(--dash-line,var(--line)); padding-bottom:10px;
}
.cp-subnav-btn{
  appearance:none; cursor:pointer; font:inherit; font-size:13.5px; font-weight:700;
  padding:8px 16px; border-radius:14px; border:1px solid var(--dash-line,var(--line));
  background:transparent; color:inherit; opacity:.72; transition:opacity .15s, border-color .15s;
}
.cp-subnav-btn:hover{ opacity:1; }
.cp-subnav-btn.is-active{ opacity:1; border-color:var(--dash-text); background:color-mix(in srgb, var(--dash-text) 10%, transparent); }

.cp-home-blocks{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  align-items:start;
}
.cp-home-blocks .cp-wallet-card{ height:100%; }
.cp-home-blocks .cp-notif-line{ padding:7px 0; border-top:1px solid var(--dash-line,var(--line)); }
.cp-home-blocks .cp-notif-icon{ width:26px !important; height:26px !important; flex-shrink:0; }
.cp-home-blocks .cp-notif-msg{ font-size:12px; opacity:.8; }
html::-webkit-scrollbar, body::-webkit-scrollbar, #portalShell::-webkit-scrollbar,
#portalShell .sidebar-nav::-webkit-scrollbar, .cp-chat-messages::-webkit-scrollbar,
.cp-modal-card::-webkit-scrollbar, .table-wrap::-webkit-scrollbar{ display:none; width:0; height:0; }
#portalShell, #portalShell button, #portalShell input, #portalShell select,
#portalShell textarea, #portalShell .card, #portalShell .panel{
  font-family:"IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}
#cpChatPanel .cp-chat-composer{ align-items:stretch; gap:7px; }
#cpChatPanel .cp-chat-composer input,
#cpChatPanel .cp-attach-btn,
#cpChatPanel #cpChatSendBtn{
  height:40px !important; min-height:40px !important; align-self:stretch;
}
#cpChatPanel .cp-chat-composer input{
  background:var(--paper-2) !important; color:#110a05 !important;
  border-color:rgba(17,10,5,.22) !important;
}
#cpChatPanel .cp-attach-btn{ width:40px !important; min-width:40px !important; }
#cpChatPanel #cpChatSendBtn{ min-width:58px !important; }

/* Account drawer: a narrower, quieter rail on phones. It leaves a visible
   slice of the account content beside the drawer and keeps labels/targets
   readable instead of letting the rail consume the viewport. */
@media (max-width:900px){
  #portalShell.dash-shell > .sidebar,
  #portalShell.dash-shell .sidebar,
  #portalShell.sidebar-open .sidebar,
  #portalShell .sidebar{
    width:min(280px,82vw) !important;
    max-width:min(280px,82vw) !important;
  }
  #portalShell .sidebar-brand{ padding:16px 14px 12px !important; }
  #portalShell .sidebar-nav{ padding:10px 8px !important; gap:3px !important; }
  #portalShell .sidebar-section-label{ padding:12px 7px 5px !important; }
  #portalShell .sidebar-nav .tab-btn{
    min-height:42px !important;
    padding:7px 8px !important;
    gap:7px !important;
  }
  #portalShell .sidebar-nav .tab-btn > span[data-en],
  #portalShell .sidebar-nav .tab-btn > span:last-child{ font-size:12.5px !important; }
  #portalShell .sidebar-footer{ padding:10px 8px calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
}
@media (max-width:360px){
  #portalShell.dash-shell > .sidebar,
  #portalShell.dash-shell .sidebar,
  #portalShell.sidebar-open .sidebar,
  #portalShell .sidebar{
    width:min(260px,86vw) !important;
    max-width:min(260px,86vw) !important;
  }
}

/* ===== قاعدة الهوية: لا ظلّ في الموقع ولا في اللوحة =====
   أُزيلت كل box-shadow/text-shadow/drop-shadow، ومولّدات الظلّ في
   المحرّر حُذفت كليًا. هذا يمنع عودة أي ظلّ مع أي إضافة لاحقة.
   focus-visible يبقى مرئيًا عبر outline (وهو ليس ظلًّا). */
*, *::before, *::after{ box-shadow:none !important; }

/* ===== الأسئلة الشائعة داخل «إدارة الحساب» — تأخذ ألوان البوابة
   (متغيرات اللوحة) لتظهر صحيحة في الوضعين الفاتح والداكن ===== */
#portalShell .faq-list{ margin-top:14px; gap:9px; }
/* لا خلفية على قسم الأسئلة نفسه — المربعات هي البطاقات فقط */
#portalShell .cp-faq-spot, #portalShell .spot-faq, #portalShell .faq-list{ background:transparent !important; }
/* مربع كل سؤال = نمط بطاقات الحساب (نفس لونها وحدودها) — يقهر أي قاعدة
   خارجية تفرض لونًا مغايرًا (مثل html.dark-mode .faq-item في design-flat) */
#portalShell .faq-item{
  background:var(--dash-cards,var(--paper-2)) !important;
  border:1px solid var(--dash-line,var(--line));
  border-radius:10px;
  padding:13px 16px;
}
#portalShell .faq-item summary{ color:var(--dash-text,var(--ink)); font-size:14px; }
#portalShell .faq-item summary::after{ color:var(--dash-accent,var(--sand-strong)); }
#portalShell .faq-item p{ color:var(--dash-text,var(--muted)); opacity:.85; }

/* ===== السحب للأسفل للتحديث — مؤشر أعلى الصفحة (جوال/كمبيوتر) =====
   يظهر عند سحب المحتوى للأسفل من أعلى الصفحة ويعمل مثل أي تطبيق:
   دوّارة عند الجلب، ونص يتحوّل «اتركه للتحديث» عند تجاوز العتبة. */
#cpPullRefresh{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:1300;display:flex;align-items:center;gap:9px;padding:9px 18px;border-radius:14px;background:var(--dash-cards,var(--paper));border:1px solid var(--dash-line,var(--line));font-size:13px;font-weight:600;color:var(--dash-text,var(--ink,#110a05));opacity:0;pointer-events:none;transition:top .18s ease,opacity .18s ease}
#cpPullRefresh.cp-pull-visible{opacity:1}
#cpPullRefresh .cp-pull-ico{width:16px;height:16px;border-radius:50%;border:2px solid rgba(219,228,255,.35);border-top-color:var(--dash-accent,var(--sand-strong));display:inline-block;flex:none}
#cpPullRefresh.cp-pull-loading .cp-pull-ico{animation:cpPullSpin .8s linear infinite}
#cpPullRefresh.cp-pull-ready:not(.cp-pull-loading) .cp-pull-ico{border-top-color:var(--sand-strong);transform:rotate(90deg)}
@keyframes cpPullSpin{to{transform:rotate(360deg)}}

/* ══════════════════════════════════════════════════════════════════
   تفصيل الضريبة في بوابة العميل
   ══════════════════════════════════════════════════════════════════
   يظهر عند اختيار وسيلة الدفع، ويحدّث نفسه بتبديل الحساب: الأساسي
   ثم الضريبة ثم الإجمالي. وإن كان الحساب خارج المملكة يخرج الإجمالي
   وحده مع سطر يقول لِمَ لا ضريبة — فالعميل الذي يرى رقمًا واحدًا
   يظنّ أن الحساب ناقص أو أن الفاتورة نُسخت خطأً. */

.cp-tax-box{
  margin:10px 0 0;
  padding:10px 12px;
  border:1px solid var(--line,rgba(17,10,5,.14));
  border-radius:10px;
  background:rgba(127,127,127,.045);
}
.cp-tax-line{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:12.5px; line-height:1.9; color:var(--muted,rgba(17,10,5,.72));
}
.cp-tax-line strong{ color:var(--text,#110A05); font-weight:600; direction:ltr; unicode-bidi:plaintext; }
.cp-tax-line.is-grand{
  margin-top:6px; padding-top:6px;
  border-top:1px dashed var(--line,rgba(17,10,5,.14));
  font-size:13.5px; color:var(--text,#110A05);
}
.cp-tax-line.is-grand strong{ font-size:14.5px; font-weight:700; }
.cp-tax-note{
  margin-top:6px; font-size:11.5px; line-height:1.7; color:var(--muted,rgba(17,10,5,.72));
  opacity:.85;
}
.cp-tax-live:empty{ display:none; }

/* لوحة الإدارة: نفس المعاينة لكن داخل صف الحساب */
.pm-acc-tax-hint{ min-height:14px; }
.pm-acc-tax-preview strong{ font-weight:600; }

/* ================================================================
   [بوابة العميل] الباقات والخدمات — بطاقات بصرية حديثة متناسقة
   شفافة + حدود من ثيم الوضع + محاذاة بداية + سلّم مسافات واضح.
   ================================================================ */
#portalShell .packages-grid{
  gap:16px !important; margin-top:18px !important;
  grid-template-columns:repeat(auto-fill, minmax(min(260px, 100%), 1fr)) !important;
  max-width:none !important; margin-inline:0 !important;
}
@media (max-width:640px){
  #portalShell .packages-grid{ grid-template-columns:1fr !important; }
  #portalShell .package-card, #portalShell .service-card.catalog-card{ min-width:0 !important; }
  #portalShell .packages-service-head{ flex-direction:column !important; align-items:flex-start !important; }
}
#portalShell .package-card{
  background:transparent !important;
  border:1.5px solid var(--dash-line, rgba(219,228,255,.2)) !important;
  border-radius:14px !important;
  padding:24px 20px !important;
  text-align:start !important;
  position:relative !important;
  transition:border-color .18s ease, transform .18s ease !important;
}
#portalShell .package-card:hover{ border-color:var(--dash-accent) !important; transform:translateY(-3px) !important; }
#portalShell .package-card.is-popular{
  background:transparent !important; color:inherit !important;
  border-color:var(--dash-accent) !important; transform:none !important;
}
#portalShell .package-card.is-popular:hover{ transform:translateY(-3px) !important; }
#portalShell .package-badge{
  position:absolute !important; top:-12px !important; inset-inline-start:16px !important;
  background:var(--dash-accent) !important; color:var(--dash-bg) !important;
  font-size:11px !important; font-weight:800 !important; letter-spacing:.01em !important;
  padding:5px 12px !important; border-radius:8px !important; white-space:nowrap !important;
}
#portalShell .package-card h3{
  font-size:17px !important; font-weight:800 !important; line-height:1.4 !important;
  color:var(--dash-text) !important; text-align:start !important; margin:10px 0 8px !important;
}
#portalShell .package-price{
  font-size:26px !important; font-weight:800 !important; line-height:1.15 !important;
  color:var(--dash-text) !important; text-align:start !important;
  margin:0 0 14px !important; background:none !important;
  -webkit-text-fill-color:var(--dash-text) !important;
}
#portalShell .package-price span{
  font-size:13px !important; font-weight:700 !important;
  color:var(--dash-icons) !important; -webkit-text-fill-color:var(--dash-icons) !important;
}
#portalShell .package-card ul{
  list-style:none !important; padding:0 !important; margin:0 0 6px !important;
  display:flex !important; flex-direction:column !important; gap:8px !important;
  text-align:start !important; font-size:13px !important; line-height:1.55 !important;
}
#portalShell .package-card li{
  display:flex !important; align-items:center !important; gap:9px !important;
  color:var(--dash-icons) !important; list-style:none !important;
}
#portalShell .package-card li::before, #portalShell .package-card li::after{ content:none !important; }
#portalShell .package-card .includes-check{
  position:relative !important;
  width:20px !important; height:20px !important; min-width:20px !important;
  border-radius:6px !important; flex-shrink:0 !important;
  background:color-mix(in srgb, var(--dash-accent) 16%, transparent) !important;
  color:var(--dash-accent) !important;
}
#portalShell .package-meta{
  font-size:12.5px !important; color:var(--dash-icons) !important;
  margin:8px 0 0 !important; opacity:.9 !important;
}
#portalShell .package-card .btn{
  font-size:13.5px !important; font-weight:800 !important;
  padding:11px 16px !important; min-height:44px !important;
  border-radius:10px !important; justify-content:center !important;
}
/* أزرار الهوية بالوضعين: الأساسي بلون التمييز، الثانوي حدود شفافة */
#portalShell .btn-sand{
  background:var(--dash-accent) !important; color:var(--dash-bg) !important;
  border-color:var(--dash-accent) !important;
}
#portalShell .btn-sand:hover{ opacity:.9 !important; }
#portalShell .btn-outline{
  background:transparent !important; color:var(--dash-text) !important;
  border-color:var(--dash-line) !important;
}
#portalShell .btn-outline:hover{
  border-color:var(--dash-accent) !important; color:var(--dash-text) !important;
  background:color-mix(in srgb, var(--dash-accent) 10%, transparent) !important;
}
#portalShell .packages-service-group{ padding-top:26px !important; }
#portalShell .packages-service-group:first-of-type{ padding-top:4px !important; }
#portalShell .packages-service-head{
  align-items:center !important; gap:12px !important; flex-wrap:wrap !important;
  padding-top:8px !important; padding-bottom:2px !important; margin-bottom:4px !important;
}
#portalShell .packages-service-title{
  font-size:20px !important; font-weight:800 !important; letter-spacing:-.01em !important;
  color:var(--dash-text) !important;
}
#portalShell .packages-service-all{
  font-size:12.5px !important; font-weight:800 !important;
  color:var(--dash-text) !important; background:transparent !important;
  border:1px solid var(--dash-line) !important; border-radius:10px !important;
  padding:8px 14px !important; transition:color .18s ease, background-color .18s ease, border-color .18s ease !important;
}
#portalShell .packages-service-all:hover{
  border-color:var(--dash-accent) !important; color:var(--dash-text) !important;
  background:color-mix(in srgb, var(--dash-accent) 10%, transparent) !important;
}
#portalShell .service-card.catalog-card{
  background:transparent !important;
  border:1.5px solid var(--dash-line, rgba(219,228,255,.2)) !important;
  border-radius:14px !important;
  padding:22px 20px !important;
  display:flex !important; flex-direction:column !important;
  text-align:start !important;
  transition:border-color .18s ease, transform .18s ease !important;
}
#portalShell .service-card.catalog-card:hover{
  border-color:var(--dash-accent) !important; transform:translateY(-3px) !important;
}
#portalShell .service-card .svc-icon{
  width:50px !important; height:50px !important; border-radius:12px !important;
  background:color-mix(in srgb, var(--dash-accent) 14%, transparent) !important;
  color:var(--dash-accent) !important; overflow:hidden !important;
  display:grid !important; place-items:center !important; margin-bottom:12px !important;
}
#portalShell .service-card .svc-icon svg{ width:24px !important; height:24px !important; color:var(--dash-accent) !important; }
#portalShell .service-card .svc-icon-image{
  background:color-mix(in srgb, var(--dash-accent) 8%, transparent) !important; padding:0 !important;
}
#portalShell .service-card .svc-icon-image img{ width:100% !important; height:100% !important; object-fit:contain !important; }
#portalShell .catalog-eyebrow{
  font-size:11px !important; font-weight:800 !important; letter-spacing:.04em !important;
  color:var(--dash-accent) !important; margin:0 0 4px !important;
}
#portalShell .service-card.catalog-card h3{
  font-size:17px !important; font-weight:800 !important; line-height:1.4 !important;
  color:var(--dash-text) !important; margin:4px 0 8px !important;
}
#portalShell .service-card.catalog-card p{
  font-size:13.5px !important; color:var(--dash-icons) !important;
  line-height:1.75 !important; margin:0 0 8px !important;
}
#portalShell .service-card.catalog-card .catalog-price{
  display:flex !important; align-items:baseline !important; gap:8px !important;
  flex-wrap:wrap !important; font-size:13px !important;
  color:var(--dash-icons) !important; margin:auto 0 0 !important; padding-top:10px !important;
}
#portalShell .service-card.catalog-card .catalog-price strong{
  font-size:17px !important; font-weight:800 !important;
  color:var(--dash-text) !important; -webkit-text-fill-color:var(--dash-text) !important;
}
#portalShell .service-card.catalog-card .catalog-details-link{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  gap:6px !important; margin-top:12px !important; padding:11px 16px !important;
  font-size:13.5px !important; font-weight:800 !important;
  color:var(--dash-text) !important; background:transparent !important;
  border:1.5px solid var(--dash-line) !important; border-radius:10px !important;
  transition:color .18s ease, background-color .18s ease, border-color .18s ease !important;
}
#portalShell .service-card.catalog-card .catalog-details-link:hover{
  border-color:var(--dash-accent) !important; color:var(--dash-text) !important;
  background:color-mix(in srgb, var(--dash-accent) 10%, transparent) !important;
  transform:none !important; opacity:1 !important;
}
@media (max-width:640px){
  #portalShell .package-card{ padding:20px 16px !important; }
}
/* ===== إصلاحات الجوال والمحتوى (تُحمَّل آخرًا فترجّح) ===== */
/* الدرج الجانبي: مخفي تمامًا وهو مغلق (بلا جزء بارز)، ومثبت من جهة البدء */
@media (max-width:900px){
  html[dir="rtl"] #portalShell .sidebar{ right:10px !important; left:auto !important; }
  html[dir="ltr"] #portalShell .sidebar{ left:10px !important; right:auto !important; }
  #portalShell .sidebar{ visibility:hidden !important; pointer-events:none !important; transition:transform .22s ease, visibility 0s linear .25s !important; }
  #portalShell.sidebar-open .sidebar{ visibility:visible !important; pointer-events:auto !important; transition:transform .22s ease, visibility 0s !important; }
  /* الشريط العلوي مضغوط: أزرار وأيقونات أصغر ومسافات أضيق */
  #portalShell .topbar{ padding:8px 10px !important; gap:6px !important; margin:6px 6px 0 !important; }
  #portalShell .topbar-title{ font-size:15px !important; }
  #portalShell .topbar-actions{ gap:6px !important; }
  #portalShell .topbar-actions .floating-btn, #portalShell #themeToggleBtn, #portalShell #cpTopChatBtn, #portalShell #cpTopNotifBtn, #portalShell #portalSidebarToggle, #portalShell #langToggleBtn, #portalShell .topbar .cp-top-search .floating-btn{ width:36px !important; height:36px !important; min-width:36px !important; min-height:36px !important; max-height:36px !important; border-radius:10px !important; padding:0 !important; gap:0 !important; margin-inline-start:0 !important; }
  #portalShell .topbar-actions .floating-btn svg, #portalShell #themeToggleBtn svg, #portalShell #cpTopChatBtn svg, #portalShell #cpTopNotifBtn svg, #portalShell #langToggleBtn svg{ width:18px !important; height:18px !important; }
  #portalShell #langToggleBtn .lang-toggle-label{ display:none !important; }
  #portalShell #langToggleBtn{ font-size:0 !important; line-height:0 !important; overflow:hidden !important; }
}
#portalShell #cpLibCatalogHost .att-cats{ display:flex !important; gap:8px !important; flex-wrap:wrap !important; margin:0 0 18px !important; }
#portalShell #cpLibCatalogHost .att-grid{ margin-top:0 !important; }
/* بطاقات المرفقات داخل الحساب بهوية البوابة (داكن/فاتح) */
#portalShell .att-card{ background:var(--dash-cards, var(--paper-2)) !important; border-color:var(--dash-line, var(--line)) !important; }
#portalShell .att-card-body h3, #portalShell .att-card-body h3 a{ color:var(--dash-text) !important; }
#portalShell .att-desc{ color:var(--dash-icons) !important; }
#portalShell .att-cat{ color:var(--dash-icons) !important; border-color:var(--dash-line) !important; }
#portalShell .att-price{ color:var(--dash-text) !important; }
#portalShell .att-price.att-is-free{ background:var(--dash-text) !important; color:var(--dash-bg) !important; border-color:transparent !important; }
#portalShell .att-save-btn{ color:var(--dash-text) !important; border-color:var(--dash-line) !important; }
#portalShell .att-empty strong{ color:var(--dash-text) !important; }
#portalShell .att-empty span{ color:var(--dash-icons) !important; }
#portalShell .att-file-row{ background:transparent !important; border-color:var(--dash-line) !important; }
#portalShell .att-file-row .att-file-name{ color:var(--dash-text) !important; }
#portalShell .att-file-row .att-file-size{ color:var(--dash-icons) !important; }
/* ملخص الحساب: حاوية شفافة بلا إطار — الإطار حول صفوف البنود فقط */
#portalShell .cp-account-summary{ background:transparent !important; border:none !important; border-radius:0 !important; }
/* غلاف المكتبة: الحرف خلف الصورة دائمًا — الصورة التالفة تُزال وتظهر الحرف */
#portalShell .att-clib-cover{ position:relative !important; overflow:hidden !important; }
#portalShell .att-clib-cover img{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; object-fit:cover !important; }
#portalShell .att-clib-cover .att-cover-ph{ margin:auto !important; }
/* شريط العودة داخل لوحة التصفح */
#portalShell .cp-browse-bar{ display:flex !important; align-items:center !important; gap:8px !important; margin-bottom:10px !important; }
#portalShell .cp-browse-frame{ width:100% !important; min-height:min(70vh, 640px) !important; border:1px solid var(--dash-line, rgba(17,10,5,.18)) !important; border-radius:14px !important; background:var(--dash-bg, #110A05) !important; }

/* الترحيب سطران: كبير + أصغر */
#portalShell #cpWelcomeTitle .cp-wt-main{ display:block !important; font-size:24px !important; font-weight:800 !important; line-height:1.35 !important; }
#portalShell #cpWelcomeTitle .cp-wt-sub{ display:block !important; font-size:15px !important; font-weight:600 !important; opacity:.85 !important; margin-top:2px !important; }
/* ===== الحاسبة داخل الحساب: ربط متغيرات الموقع بهوية البوابة (داكن/فاتح) ===== */
#portalShell .pc-section, #portalShell .pc-modal-overlay{
  --ink:var(--dash-text); --paper:var(--dash-bg); --paper-2:var(--dash-paper2);
  --line:var(--dash-line); --muted:var(--dash-icons); --sand:var(--dash-accent);
  --sand-strong:var(--dash-accent); --sand-bg:color-mix(in srgb, var(--dash-accent) 10%, transparent);
  --card-border:var(--dash-line); --dark:var(--dash-text); --dark-text:var(--dash-bg);
  --dark-muted:var(--dash-icons); --radius-card:14px;
}
html.light-mode #portalShell .pc-section, html.light-mode #portalShell .pc-modal-overlay{ --ink-fixed:#dbe4ff; }
/* شريط السعر: لاصق داخل اللوحة لا عائمًا على الصفحة — يظهر مع بند الحاسبة فقط */
#portalShell #pcStickyBar{ position:sticky !important; bottom:12px !important; left:auto !important; right:auto !important; margin:18px 0 0 !important; max-width:none !important; z-index:30 !important; border:1px solid var(--dash-line) !important; }
#portalShell #pcStickyPrice, #portalShell .pc-sticky-price-row span, #portalShell .pc-sticky-currency, #portalShell #pcStickyDays, #portalShell .pc-sticky-empty, #portalShell #pcStickyDiscount{ color:inherit !important; }
#portalShell .pc-sticky-price-row span, #portalShell .pc-sticky-currency, #portalShell #pcStickyDays, #portalShell .pc-sticky-empty{ opacity:.75 !important; }
#portalShell .pc-chip{ background:transparent !important; border-color:var(--dash-line) !important; color:inherit !important; }
/* صف البند: الاسم مرن وأيقونة المعلومة بجانبه والسعر سطر ثانٍ — بلا التفاف مكسور */
#portalShell .pc-item-name{ flex:1 1 auto !important; min-width:0 !important; }
#portalShell .pc-item-price{ flex:0 0 auto !important; margin-inline-start:auto !important; }
@media (max-width:560px){
  #portalShell .pc-item-price{ flex-basis:100% !important; text-align:end !important; padding-inline-start:0 !important; }
}
/* ===== مكتبتي: شبكة عمودين بالشاشات الكبيرة وعمود بالجوال ===== */
@media (min-width:900px){
  #portalShell #cpLibraryWrap .cp-section{ display:grid !important; grid-template-columns:repeat(2, minmax(0, 1fr)) !important; gap:12px !important; }
  #portalShell #cpLibraryWrap .cp-section-title, #portalShell #cpLibraryWrap .att-empty{ grid-column:1 / -1 !important; }
}