/* ---- 00-tokens.css ---- */
:root{
  --font-body: var(--ff, "Inter Variable","IBM Plex Sans Arabic",system-ui,sans-serif);
  --font-heading: var(--font-body);
}
/* استخدم قيمة الثيم مباشرة */
html, body{ font-family: var(--font-body); }
h1,h2,h3,h4,h5,h6{ font-family: var(--font-heading); }

/* ---- 99-variables-tokens.css ---- */
/*=== 0) Variables / Tokens ===*/
:root{
  /* الألوان */
  --pl-primary:        var(--primary, #2560ec);
  --pl-primary-600:    color-mix(in srgb, var(--pl-primary) 86%, black);
  --pl-primary-700:    color-mix(in srgb, var(--pl-primary) 72%, black);
  --pl-accent:         var(--accent, #ff9000);
  --pl-accent-600:     color-mix(in srgb, var(--pl-accent) 86%, black);
  --pl-accent-bg:      color-mix(in srgb, var(--pl-accent) 36%, white);

  /* حالة */
  --pl-success:        var(--success, #19c37d);
  --pl-danger:         var(--danger, #e54646);
  --pl-warning:        var(--warning, #f7b500);

  /* الأسطح */
  --pl-bg:             var(--bg, #f7f8fa);
  --pl-surface:        var(--surface, #ffffff);
  --pl-border:         var(--border, #e3e5ed);

  /* النصوص */
  --pl-text:           var(--text, #161b26);
  --pl-text-dim:       var(--text-dim, #6e7486);

  /* radius / easing */
  --pl-radius:         var(--radius, 1.1rem);
  --pl-ease:           var(--ease, .19s cubic-bezier(.4,0,.2,1));
  --pl-timing:         var(--pl-ease);

  /* الظلال */
  --pl-shadow-sm:      var(--shadow-sm, 0 2px 8px rgba(0,0,0,.08));
  --pl-shadow:         var(--shadow, 0 6px 24px rgba(0,0,0,.12));
  --pl-shadow-strong:  var(--shadow-strong, 0 12px 42px rgba(0,0,0,.18));

  /* مكونات */
  --pl-nav-size:       var(--nav-size, 46px);
  --pl-slider-gap:     var(--slider-gap, 1.19rem);

  /* كثافة داخلية */
  --pad:               var(--tokens-pad, 16px);
  --gap:               var(--tokens-gap, 16px);

  /* الروابط */
  --pl-link-fg:        var(--link-fg, #fff);

  /* اتجاه منطقي */
  --pl-start:          left;
  --pl-end:            right;

  /* أساس النص */
  --pl-base-size:      var(--base-size, 16px);

  /* عرض لوحة الإحصاء */
  --sp-w: 320px;

  /* أزرار طافية */
  --fab-gap:   12px;   /* المسافة بين الأزرار */
  --fab-size:  53px;   /* add-link-btn & باقي الأزرار الصغيرة */
  --fab-big:   61px;   /* edit-btn (الترس الكبير) */
  --fab-base:  98px;   /* موقع زر (+) الأساسي */

  /* === Rhythm scale (جديد) === */
  --section-pad: clamp(18px, 4.5vw, 28px);
  --section-gap: clamp(18px, 5vw, 28px);
}
body:has(.stats-panel.pro){ --sp-w: 420px; }

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --pl-bg:            #10131b;
    --pl-surface:       #161b26;
    --pl-border:        #23263a;
    --pl-text:          #f6f6f7;
    --pl-text-dim:      #a6b1cc;
    --pl-shadow-sm:     0 2px 12px rgba(0,0,0,.28);
    --pl-shadow:        0 8px 34px rgba(0,0,0,.38);
    --pl-shadow-strong: 0 14px 48px rgba(0,0,0,.48);
  }
}

:root[data-theme="dark"]{}
:root[data-theme="light"]{}
:root[dir="rtl"]{ --pl-start:right; --pl-end:left; }
:root:not([dir="rtl"]){ --pl-start:left; --pl-end:right; }

/*=== 0.1) Component-level mappings (تعمل مع جميع الثيمات) ===*/
:root{
  /* أزرار/روابط (تقبل gradient من الثيم) */
  --pl-btn-bg:         var(--button-bg, var(--primary));
  --pl-btn-fg:         var(--button-fg, #fff);
  --pl-btn-border:     var(--button-border, transparent);
  --pl-btn-bg-hover:   var(--button-bg-hover, color-mix(in srgb, var(--primary) 88%, black));

  /* بطاقات/أسطح */
  --pl-card-bg:        var(--card-bg, var(--pl-surface));
  --pl-card-border:    var(--card-border, var(--pl-border));

  /* ظلال للموبايل (يُستحسن أن يعرّفها الثيم؛ هنا قيم افتراضية) */
  --pl-shadow-mobile:          var(--shadow-mobile, 0 2px 16px rgba(0,0,0,.22));
  --pl-shadow-strong-mobile:   var(--shadow-strong-mobile, 0 6px 26px rgba(0,0,0,.30));
}

/* ظلال/نصف قطر أخف على الشاشات الصغيرة */
@media (max-width: 480px){
  :root{
    --pl-shadow:        var(--pl-shadow-mobile);
    --pl-shadow-strong: var(--pl-shadow-strong-mobile);
    --pl-radius: clamp(12px, 4vw, var(--radius, 1.1rem));
  }
}

/* ---- 01-base.css ---- */
/*=== 1) Reset & Base ===*/
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; text-size-adjust:100%; }
html, body{ overflow-x:hidden; }
body{
  margin:0; background:var(--bg, var(--pl-bg)); color:var(--pl-text);
  font-family: var(--font-body);
  font-size:var(--pl-base-size); line-height:1.66; min-height:100vh;
  display:flex; flex-direction:column; transition:background var(--pl-ease), color var(--pl-ease);
}
img{ max-width:100%; height:auto; }
img,canvas{ image-rendering:-webkit-optimize-contrast; max-height:320px; }
:where(a,button,[role="button"])::selection{ background:#9ab8ff66; }
:where(a,button,[role="button"]):focus-visible{
  outline:2px solid var(--pl-primary); outline-offset:3px; border-radius:10px;
}

/* ---- 02-header.css ---- */
/*=== 2) Header (Avatar + Info) ===*/
.hdr-compact .profile-header{ padding-block: calc(var(--section-pad) * .7) calc(var(--section-pad) * .45); }
.hdr-centered .profile-header{ align-items:center; text-align:center; }
.hdr-wide .profile-header{ padding-block: calc(var(--section-pad) * 1.3) calc(var(--section-pad) * .9); }

.profile-header{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap: clamp(.9rem, 2.6vw, 1.1rem);
  padding-block: calc(var(--section-pad) * 1.2) calc(var(--section-pad) * .8);
  background:transparent;
}
.avatar-wrap{ position:relative; }
.avatar{
  width:128px; height:128px; border-radius:50%; object-fit:cover; background:#dde2ee;
  box-shadow:var(--pl-shadow-strong); transition:box-shadow .28s; margin-top: 30px;
}
.avatar.skeleton{
  background:linear-gradient(90deg,#cfd6e6 25%,#e6eaf3 50%,#cfd6e6 75%);
  background-size:200% 100%; animation:pl-skeleton 1.5s infinite linear;
}
@keyframes pl-skeleton{ 0%{background-position:-200% 0} 100%{background-position:200% 0} }
.avatar-edit{
  position:absolute; bottom:10px; right:10px; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:#000a; color:#fff; font-size:1.19rem;
  opacity:0; transition:opacity .22s; cursor:pointer;
}
.avatar-wrap.editing:hover .avatar-edit{ opacity:1; }

.profile-header h1{
  font-size: clamp(1.9rem, 4.2vw, 2.5rem);
  font-weight:900; display:flex; align-items:center; justify-content:center; gap:.55rem;
  margin:0; word-break:break-word; letter-spacing:.01em;
}
.hdr-compact .profile-header h1{ font-size:1.9rem; }
.hdr-wide .profile-header h1{ font-size:2.5rem; }

.verified-badge{
  color:var(--pl-primary); font-size:1rem; font-weight:700; margin-inline-start:.45em;
  display:inline-flex; align-items:center; gap:.19em;
}
:root[dir="rtl"] .verified-badge{ margin-inline-start:0; margin-inline-end:.45em; }
.profile-header p{ margin:.5em 0 0; max-width:800px; color:var(--pl-text-dim); font-size:1.12rem; }

/* ---- 03-social.css ---- */
/*=== 3) Social Icons ===*/
.social-strip{
  display:flex; gap:10px; justify-content:center;
  margin-top: clamp(8px, 2vw, 10px);
  flex-wrap:wrap; padding-inline:8px;
}
.social-btn{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--pl-surface); color:var(--pl-primary); box-shadow:var(--pl-shadow-sm); font-size:1.13rem;
  cursor:pointer; transition:transform .13s, background var(--pl-ease), color var(--pl-ease), border-color var(--pl-ease);
  border:1px solid var(--pl-border);
}
.social-btn:hover,.social-btn:focus-visible{
  transform:translateY(-3px) scale(1.07); background:var(--pl-accent-bg); color:var(--pl-accent); border-color:transparent;
}
.social-overflow{ font-size:.97rem; font-weight:700; color:var(--pl-text-dim); }

/* ---- 04-actions.css ---- */
/*=== 4) Share & Actions ===*/
.share-btns{
  display:flex; gap:calc(var(--gap) * .6); flex-wrap:wrap; justify-content:center;
  margin-top: clamp(.5rem, 1.6vw, .68rem);
  padding-inline:8px;
}
.share-btns button,.ai-personalize-btn,.btn,.add-section-btn{
  display:inline-flex; align-items:center; gap:.42rem; border-radius:.89rem; padding:.51rem 1.17rem;
  font-weight:600; font-size:1.07rem; border:1px solid transparent; background:var(--pl-surface); color:var(--pl-text);
  box-shadow:0 1px 7px #0000000c; cursor:pointer; user-select:none;
  transition:background var(--pl-ease), color var(--pl-ease), box-shadow .18s;
}
.share-btns button:hover,.share-btns button:focus-visible,
.ai-personalize-btn:hover,.ai-personalize-btn:focus-visible,
.btn:hover,.btn:focus-visible,.add-section-btn:hover,.add-section-btn:focus-visible{
  background:var(--pl-btn-bg-hover, var(--pl-primary));
  color:var(--pl-btn-fg, #fff);
  border-color:var(--pl-btn-border, transparent);
}
.btn-primary,.ai-personalize-btn{ background:var(--pl-accent); color:#fff; font-weight:700; box-shadow:0 4px 16px #ff900035; }
.btn-primary:hover,.ai-personalize-btn:hover,
.btn-primary:focus-visible,.ai-personalize-btn:focus-visible{ background:var(--pl-accent-600); color:#fff; }

/* ---- 05-livebar.css ---- */
/*=== 5) Live Bar ===*/
.live-bar{
  display:inline-flex; gap:.53rem; align-items:center; font-size:.99rem; background:var(--pl-surface);
  border:1px solid var(--pl-border); border-radius:1rem; padding:.43rem 1.1rem; margin:1.5rem auto 0;
  color:var(--pl-text-dim); box-shadow:var(--pl-shadow);
}
.live-bar i{ color:var(--pl-primary); }

/* ---- 06-links.css ---- */
/*=== 6) Links (layout-aware) ===*/
.links{
  display:flex; flex-direction:column; gap:var(--gap,1.19rem);
  width:97%; max-width:560px;
  margin: calc(var(--section-pad) * .9) auto calc(var(--section-pad) * 1.3);
  padding-inline:8px;
}
.links a{
  position:relative; display:flex; align-items:center; gap:.7rem; justify-content:center;
  padding:calc(var(--pad,16px) * .95) var(--pad,16px); border-radius:var(--pl-radius);
  font-weight:600; font-size:1.09rem; text-decoration:none; box-shadow:var(--pl-shadow);
  transition:background var(--pl-ease), transform .18s, box-shadow var(--pl-ease), color var(--pl-ease), border var(--pl-ease);
  background:var(--pl-btn-bg, var(--pl-primary,#444));
  color:var(--pl-btn-fg, var(--pl-link-fg, #fff));
  border:1px solid var(--pl-btn-border, transparent);
  overflow:hidden; cursor:pointer; will-change:transform, box-shadow;
  word-break:break-word; overflow-wrap:anywhere;
}
.links a:hover,.links a:focus-visible{
  transform:translateY(-5px) scale(1.03);
  box-shadow:var(--pl-shadow-strong);
  background:var(--pl-btn-bg-hover, var(--pl-btn-bg));
  color:var(--pl-btn-fg, #fff);
}
.links .icon{ width:23px; height:23px; filter:drop-shadow(0 1px 4px #0002); }

/* Accent links */
.accent-links .links a{
  background:var(--pl-surface);
  color:var(--pl-text) !important;
  border:1px solid var(--pl-border);
}

/* Link shapes */
.lnk-pill .links a{ border-radius:999px; }
.lnk-soft .links a{ border-radius:max(14px, calc(var(--pl-radius) * .8)); }
.lnk-flat .links a{ border-radius:10px; box-shadow:none; }
.lnk-glass .links a{
  backdrop-filter:blur(6px);
  background:color-mix(in srgb, var(--pl-surface) 70%, transparent);
  border:1px solid color-mix(in srgb, var(--pl-border) 60%, transparent);
  color:var(--pl-text) !important;
}

/* Tooltip + progress */
.tooltip{
  position:absolute; top:10px; right:10px; inset-inline-end:10px; inset-inline-start:auto;
  font-size:.84rem; background:#222c; color:#fff; padding:3px 10px; border-radius:8px; white-space:nowrap; display:none;
  pointer-events:none; z-index:2;
}
.links a:hover .tooltip{ display:block; }
.progress-bar{ position:absolute; left:0; right:0; bottom:0; height:5px; background:#fff7; border-radius:0 0 1.2rem 1.2rem; }

/* Edit state helpers for links */
.links a.editing{ cursor:default; }
.links a .drag-handle{
  position:absolute; top:10px; inset-inline-start:10px; color:#fff; opacity:.9;
  background:#0005; border-radius:8px; padding:4px 6px; font-size:.95rem;
}
.links a .link-remove{
  position:absolute; top:10px; inset-inline-end:10px; color:#fff;
  background:#e54646; border-radius:50%; width:28px; height:28px; display:grid; place-items:center;
}

/* ---- 07-feed.css ---- */
/*=== 7) Cards / Feed / Variants ===*/
.profile-feed{
  background:var(--pl-card-bg, var(--pl-surface));
  border-radius:var(--pl-radius);
  box-shadow:var(--pl-shadow);
  padding:calc(var(--pad,16px) * 1.1) calc(var(--pad,16px) * .9);
  max-width:800px;
  margin: var(--section-pad) auto;
  border:1px solid var(--pl-card-border, var(--pl-border));
}


/* Map section */
.profile-map-section{
  background:var(--pl-card-bg, var(--pl-surface));
  border-radius:var(--pl-radius);
  box-shadow:var(--pl-shadow);
  padding:calc(var(--pad,16px) * 1.1) calc(var(--pad,16px) * .9);
  max-width:800px;
  margin: var(--section-pad) auto;
  border:1px solid var(--pl-card-border, var(--pl-border));
}
.profile-map-section .map-address{
  margin:.35rem 0 .75rem;
  font-size:.95rem;
  color:var(--pl-text-dim);
}
.profile-map-section .map-embed{
  margin-top:.6rem;
}
.profile-map-section .map-embed iframe{
  width:100%;
  min-height:260px;
  max-height:360px;
  border:0;
  border-radius:18px;
  box-shadow:var(--pl-shadow);
}
.profile-map-section .map-placeholder{
  font-size:.9rem;
  color:var(--pl-text-dim);
}



/* Subscribe section */
.profile-subscribe-section{
  background:var(--pl-card-bg, var(--pl-surface));
  border-radius:var(--pl-radius);
  box-shadow:var(--pl-shadow);
  padding:calc(var(--pad,16px) * 1.1) calc(var(--pad,16px) * .9);
  max-width:800px;
  margin: var(--section-pad) auto;
  border:1px solid var(--pl-card-border, var(--pl-border));
}
.profile-subscribe-section .subscribe-desc{
  margin:.35rem 0 .75rem;
  font-size:.95rem;
  color:var(--pl-text-dim);
}
.profile-subscribe-section form.subscribe-form{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:.4rem;
  align-items: center;
}
.profile-subscribe-section form.subscribe-form input[type="email"],
.profile-subscribe-section form.subscribe-form input[type="text"]{
  flex:1 1 180px;
  min-width:0;
}
.profile-subscribe-section .subscribe-note{
  margin-top:.35rem;
  font-size:.8rem;
  color:var(--pl-text-dim);
}

.cards-flat .profile-feed,.cards-flat .slider-card,.cards-flat .card,.cards-flat .kpi-card{ box-shadow:none; }
.cards-raised .profile-feed,.cards-raised .slider-card,.cards-raised .card,.cards-raised .kpi-card{ box-shadow:var(--pl-shadow);}

.section-header{
  display:flex; align-items:center; justify-content:space-between; gap:.7rem; flex-wrap:wrap;
  margin-bottom: clamp(.9rem, 2.8vw, 1.2rem);
}
.add-section-btn{ margin-inline-start:auto; }
.feed-post{ margin-bottom: clamp(.8rem, 2.2vw, 1.19rem); margin-top: 1.19rem; }
.feed-date{ color:var(--pl-text-dim); font-size:.89rem; margin-inline-start:.45rem; }

/* ---- 08-slider.css ---- */
/*=== 8) Slider (Portfolio / Testimonials) — Scroll-snap + Soft edges ===*/
.slider-section{
  position:relative; overflow:visible;
  padding:calc(var(--pad,16px) * 1.1) calc(var(--pad,16px) * .9);
  max-width:800px;
  margin: var(--section-pad) auto;
}
.slider-track{
  position:relative;
  display:flex; gap:var(--pl-slider-gap); justify-content:flex-start;
  overflow-x:auto !important; overflow-y:visible !important;
  padding-bottom:6px; scrollbar-width:none; scroll-snap-type:x proximity; scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  /* نعومة البداية/النهاية عبر قناع (mask) */
  --fade:30px;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
  -webkit-mask-repeat:no-repeat;         mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;           mask-size:100% 100%;
}
.slider-track::-webkit-scrollbar{ display:none; }

/* Fallback إذا لم يدعم المتصفح mask-image جيدًا + على الشاشات الصغيرة جدًا */
@supports not (mask-image: linear-gradient(#000, #000)){
  .slider-track{ -webkit-mask-image:none; mask-image:none; }
}
@media (max-width: 420px){
  .slider-track{ -webkit-mask-image:none; mask-image:none; }
}

.slider-card{
  flex:0 0 auto; width:clamp(240px, 86vw, 320px); max-width:min(92vw, 320px);
  scroll-snap-align:start; word-break:break-word;
  background:var(--pl-card-bg, var(--pl-surface)); border:1px solid var(--pl-card-border, var(--pl-border)); border-radius:var(--pl-radius);
  padding:calc(var(--pad,16px) * .7); text-align:center; display:flex; flex-direction:column; align-items:center; gap:.48rem;
  box-shadow:var(--pl-shadow); transition:box-shadow var(--pl-ease), transform .18s, border var(--pl-ease); position:relative;
  margin-top: 30px; margin-bottom: 30px;
}
.slider-card:hover,.slider-card:focus-within{ transform:translateY(-7px) scale(1.02); border-color:var(--pl-primary); box-shadow:var(--pl-shadow-strong); }

/* أزرار التنقّل */
.slider-nav-btn{
  position:absolute; top:50%; transform:translateY(-50%); width:var(--pl-nav-size); height:var(--pl-nav-size);
  background:var(--pl-surface); border:2px solid var(--pl-border); border-radius:50%;
  display:grid; place-items:center; font-size:1.34rem; cursor:pointer; z-index:20; color:var(--pl-primary);
  box-shadow:0 1px 10px #0001; transition:background var(--pl-ease), border var(--pl-ease), color var(--pl-ease);
}
.slider-nav-btn:hover,.slider-nav-btn:focus-visible{ background:var(--pl-primary); color:#fff; border-color:transparent; }
.slider-nav-prev{ left:10px; } .slider-nav-next{ right:10px; }
.slider-nav-btn.disabled,.slider-nav-btn[aria-disabled="true"]{ opacity:.45; pointer-events:none; }

/* RTL */
:root[dir="rtl"] .slider-track{ direction:ltr; }
:root[dir="rtl"] .slider-card{ direction:rtl; }
:root[dir="rtl"] .slider-nav-prev{ right:10px; left:unset; }
:root[dir="rtl"] .slider-nav-next{ left:10px; right:unset; }

/* Tracks specific: مساحة للظلال */
#portfolioTrack,#testimonialsTrack{
  overflow-x:auto !important; overflow-y:visible !important; width:100%;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  
}
#portfolioTrack::-webkit-scrollbar,#testimonialsTrack::-webkit-scrollbar{ display:none; }

/* Mobile tweaks للسلايدر */
@media (max-width:800px){
  .slider-section{ padding:1.1rem .8rem; margin-inline:8px; }
}
@media (max-width:580px){
  .slider-section{ padding-left:0; padding-right:0; }
  .slider-nav-btn{ top:unset; bottom:-46px; left:unset; right:unset; box-shadow:0 2px 16px #0002; }
  .slider-nav-prev{ left:10px; } .slider-nav-next{ right:10px; }
}
@media (max-width:750px){
  .slider-nav-btn{ display:none; }
}

/* ---- 09-testimonials.css ---- */
/*=== 9) Testimonials Author ===*/
.testimonial-card .author{ display:flex; align-items:center; gap:.54rem; }
.testimonial-card .author img{ width:36px; height:36px; border-radius:50%; box-shadow:0 1px 6px #0002; }

/* ---- 10-mini-buttons.css ---- */
/*=== 10) Mini-Buttons (Edit/Delete) ===*/
.edit-item-btn,.delete-item-btn{
  background:none; border:none; color:var(--pl-text-dim); cursor:pointer; font-size:1.11rem; margin-inline:.18rem;
  transition:color var(--pl-ease); outline:none;
}
.edit-item-btn:hover,.edit-item-btn:focus-visible{ color:var(--pl-primary); }
.delete-item-btn:hover,.delete-item-btn:focus-visible{ color:var(--pl-danger); }

/* ---- 11-fabs.css ---- */
/*=== 11) Floating Action Buttons ===*/
.edit-btn,.add-link-btn{
  position:fixed; right:22px; border:none; border-radius:50%; color:#fff; z-index:100; display:grid; place-items:center;
  box-shadow:0 7px 28px rgba(0,0,0,.3); cursor:pointer; transition:transform var(--pl-ease), background var(--pl-ease);
}
.edit-btn{ bottom:22px; width:61px; height:61px; background:var(--pl-primary); font-size:1.58rem; }
.add-link-btn{ bottom:98px; width:53px; height:53px; background:var(--pl-accent); font-size:1.67rem; }
.edit-btn:hover,.edit-btn:focus-visible{ transform:translateY(-3px) scale(1.05); background:var(--pl-primary-600); }
.add-link-btn:hover,.add-link-btn:focus-visible{ background:var(--pl-accent-600); }

/* ---- 12-stats-panel.css ---- */
/*=== 12) Stats Panel (Sidebar) — classes + IDs ===*/
.stats-panel,.stats-panel.pro{
  position:fixed; inset-block-start:0; inset-block-end:0; inset-inline-end:0; inset-inline-start:auto;
  width:var(--sp-w); max-width:var(--sp-w); background:var(--pl-surface); color:var(--pl-text);
  border-left:1px solid var(--pl-border); box-shadow:-6px 0 24px #0002; padding:14px; z-index:120;
  overflow-y:auto; will-change:transform; transform:translateX(100%); transition:transform .28s var(--pl-timing, ease);
}
.stats-panel.open,.stats-panel.pro.open{ transform:translateX(0); }
:root[dir="rtl"] .stats-panel,:root[dir="rtl"] .stats-panel.pro{
  inset-inline-start:0; inset-inline-end:auto; border-left:none; border-right:1px solid var(--pl-border);
  box-shadow:6px 0 24px #0002; transform:translateX(-100%);
}
:root[dir="rtl"] .stats-panel.open,:root[dir="rtl"] .stats-panel.pro.open{ transform:translateX(0); }

:root{ --sp-w:320px; }
@media (max-width:840px){ :root{ --sp-w:100vw; } }

#statsPanel,#statsPanel.pro,.stats-panel,.stats-panel.pro{
  position:fixed; top:0; bottom:0; right:0; left:auto; width:fit-content; max-width:fit-content;
  overflow-y:auto; will-change:transform; transform:translateX(100%); transition:transform .28s var(--pl-timing, ease); z-index:120;
}
#statsPanel.open,#statsPanel.pro.open,.stats-panel.open,.stats-panel.pro.open{ transform:translateX(0); }
body.stats-left #statsPanel,body.stats-left #statsPanel.pro,body.stats-left .stats-panel,body.stats-left .stats-panel.pro{
  left:0; right:auto; transform:translateX(-100%);
}
body.stats-left #statsPanel.open,body.stats-left #statsPanel.pro.open,body.stats-left .stats-panel.open,body.stats-left .stats-panel.pro.open{
  transform:translateX(0);
}

.stats-toggle{
  position:fixed; inset-block-start:max(10px, env(safe-area-inset-top)); inset-inline-end:max(12px, env(safe-area-inset-right));
  z-index:140; background:var(--pl-primary); color:#fff; border:none; border-radius:10px;
  padding:.5rem .75rem; box-shadow:0 6px 18px #0003; cursor:pointer;
  transition:background var(--pl-ease), transform var(--pl-ease); display:inline-flex; align-items:center; gap:.4rem;
  width:auto; min-inline-size:auto; max-inline-size:70vw; white-space:nowrap; filter:none !important;
}
.stats-toggle:hover,.stats-toggle:focus-visible{ background:var(--pl-primary-700); transform:translateY(-2px); }
body.stats-left .stats-toggle{ inset-inline-end:auto; inset-inline-start:max(12px, env(safe-area-inset-left)); }
body.stats-right .stats-toggle{ inset-inline-end:max(12px, env(safe-area-inset-right)); inset-inline-start:auto; }

:root[dir="rtl"] body:not(.stats-right) .stats-toggle{
  inset-inline-end:auto;
  inset-inline-start:max(12px, env(safe-area-inset-left));
}

.edit-btn,.add-link-btn{
  position:fixed; inset-inline-end:max(16px, env(safe-area-inset-right)); z-index:130;
  transition:transform .28s var(--pl-timing, ease), background var(--pl-ease);
}
body.stats-left .edit-btn,body.stats-left .add-link-btn{ inset-inline-end:auto; inset-inline-start:max(16px, env(safe-area-inset-left)); }
@media (min-width:841px){
  body.stats-open:not(.stats-left) .edit-btn,body.stats-open:not(.stats-left) .add-link-btn{
    transform:translateX(calc(-1 * (var(--sp-w) + 12px)));
  }
  body.stats-open.stats-left .edit-btn,body.stats-open.stats-left .add-link-btn{
    transform:translateX(calc(var(--sp-w) + 12px));
  }
}
@media (max-width:840px){
  body.stats-open .stats-toggle{ opacity:0; pointer-events:none; }
  .stats-panel,.stats-panel.pro{
    width:var(--sp-w); max-width:var(--sp-w); box-shadow:0 -10px 28px rgba(0,0,0,.22); border-left:none; border-right:none;
  }
}
body.stats-open:not(.stats-left) .edit-btn,body.stats-open:not(.stats-left) .add-link-btn{ transform:translateX(calc(-1 * (var(--sp-w) + 12px))); }
body.stats-open.stats-left .edit-btn,body.stats-open.stats-left .add-link-btn{ transform:none; }
body > #statsBtn,body > .stats-toggle{ filter:none !important; transform:none !important; }
@media (max-height:560px){
  #statsPanel,#statsPanel.pro,.stats-panel,.stats-panel.pro{ max-height:100vh; overflow-y:auto; }
}

/* ---- 13-modals.css ---- */
/*=== 13) Modals & Popups ===*/
.modal-bg,.qr-popup,.ai-modal-bg{
  position:fixed; inset:0; background:rgba(0,0,0,.64); display:flex; align-items:center; justify-content:center; z-index:200;
}
.modal,.qr-card,.ai-modal{
  background:var(--pl-card-bg, var(--pl-surface)); border-radius:var(--pl-radius); box-shadow:var(--pl-shadow);
  padding:1.72rem 1.16rem; width:97%; max-width:380px; border:1px solid var(--pl-card-border, var(--pl-border));
  max-height: 80vh; overflow: auto;
}
.modal h3,.qr-card h3,.ai-modal h3{ text-align:center; font-size:1.21rem; margin-bottom:1.13rem; }
.modal select,.modal input,.modal textarea, input{
  width:100%; padding:.73rem 1rem; border-radius:.69rem; border:1px solid var(--pl-border);
  font-size:1.03rem; background:color-mix(in srgb, var(--pl-surface) 92%, #000 8%); color:var(--pl-text); margin-bottom:.8rem;
}
.modal .btn-row,.ai-modal .btn-row{ display:flex; justify-content:flex-end; gap:.8rem; }

/* ---- 14-snackbar.css ---- */
/*=== 14) Snackbar (Saved) ===*/
.snackbar{
  visibility:hidden; opacity:0; min-width:190px; position:fixed; left:50%; transform:translateX(-50%);
  bottom:44px; background:rgba(22,27,38,.96); color:#fff; padding:.83rem 1.23rem; border-radius:.74rem; font-size:1rem;
  z-index:230; box-shadow:var(--pl-shadow); transition:opacity .35s;
}
.snackbar.show{ visibility:visible; opacity:1; }

/* ---- 15-ad-banner.css ---- */
/*=== 15) Ad Banner ===*/
.ad-banner{
  width:100%; background:var(--pl-card-bg, var(--pl-surface)); color:var(--pl-text-dim); text-align:center;
  font-size:.99rem; padding:1.07rem 0 .93rem; border-top:1px solid var(--pl-card-border, var(--pl-border)); margin-top:1.9rem; letter-spacing:.01em;
}
.ad-banner a{ color:var(--pl-primary); font-weight:700; text-decoration:underline; margin-inline-start:.5em; }

/*=== 16) Density controls (den-*) ===*/
.den-compact{ --pad:12px; --gap:12px; }
.den-comfortable{ --pad:16px; --gap:16px; }
.den-cozy{ --pad:20px; --gap:18px; }

/* ---- 17-responsive.css ---- */
/*=== 17) Responsive (global) ===*/
@media (max-width:620px){
  .profile-header{ padding-block: calc(var(--section-pad) * .9) calc(var(--section-pad) * .5); }
  .links{ width:100%; max-width:580px; padding-inline:10px; }
  .profile-feed, .profile-map-section, .profile-subscribe-section { padding:1.1rem .8rem; margin-inline:8px; }
}

/* ---- 18-utilities.css ---- */
/*=== 18) Utilities ===*/
.hidden{ display:none !important; }

/* Extra helpers for social editing */
.social-remove{
  position:absolute; top:-5px; right:-5px; width:18px; height:18px; border-radius:50%;
  background:#e74c3c; color:#fff; font-size:.7rem; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.social-btn.extra{ display:none; }

/* ---- 19-kpi.css ---- */
/*=== 19) KPI ribbon/cards — responsive & mobile-polished ===*/
.kpi-ribbon{
  --kpi-gap: .8rem;
  --kpi-min: 260px;
  display:flex; flex-direction:column; gap:var(--kpi-gap); align-items:stretch; justify-items:stretch;

  /* حاوية + إيقاع */
  margin: calc(var(--section-pad) * .7) auto 0;
  padding:.6rem .7rem;
  border-radius:1rem;
  background:color-mix(in srgb, var(--pl-surface) 86%, transparent);
  border:1px solid var(--pl-border); box-shadow: var(--pl-shadow);
  max-width:960px; width:calc(100% - 16px); position:relative; overflow:hidden;
  margin-bottom: 8px;
}

.live-dot{
  width:10px; height:10px; border-radius:50%; align-self:flex-start;
  background:#ff3b3b; box-shadow:0 0 0 0 #ff3b3b80; margin:.6rem .2rem 0 .2rem;
  animation: livePulse 1.6s infinite;
}
@keyframes livePulse{ 0%{box-shadow:0 0 0 0 #ff3b3b80} 70%{box-shadow:0 0 0 8px transparent} 100%{box-shadow:0 0 0 0 transparent}}

.kpi-chip{
  min-width:0; max-width:none; width:100%;
  background:var(--pl-surface); border:1px solid var(--pl-border);
  border-radius:.9rem; padding:.8rem .9rem .5rem; position:relative;
  transition:transform .18s, box-shadow .18s, border-color .18s;
}
.kpi-chip:hover{ transform:translateY(-4px); border-color:var(--pl-primary); box-shadow: var(--pl-shadow-strong); }
.kpi-head{ display:flex; align-items:center; gap:.45rem; color:var(--pl-text-dim); font-weight:700; }
.kpi-delta{ margin-inline-start:auto; font-style:normal; font-weight:700; font-size:.9rem; padding:.15rem .45rem; border-radius:.7rem; background:#0000000a; }
.kpi-delta.pos{ color:#19c37d; background:#19c37d22; }
.kpi-delta.neg{ color:#e54646; background:#e5464622; }
.kpi-val{ font-size:1.65rem; font-weight:900; letter-spacing:.01em; margin:.1rem 0 .2rem; }

.kpi-chip canvas{ width:100%; height:auto; display:block; }
.kpi-chip.flash{ box-shadow:0 0 0 2px color-mix(in srgb, var(--pl-primary) 20%, transparent) inset; }

/* ---- 20-pro-panel.css ---- */
/* ====== Pro Stats Panel specific tweaks ====== */
.stats-panel.pro{ padding: 14px; }

.sp-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-bottom:.8rem; margin-top: 2rem;}
.sp-head h3{ font-size:1.05rem; display:flex; align-items:center; gap:.45rem; }
.sp-head .range{ display:flex; gap:.35rem; }
.sp-head .sp-range{
  border:1px solid var(--pl-border); background:var(--pl-surface);
  padding:.28rem .55rem; border-radius:8px; cursor:pointer; font-weight:600;
}
.sp-head .sp-range.active{ background:var(--pl-primary); color:#fff; border-color:transparent; }

/* شبكة KPI داخل لوحة الإحصاءات */
.kpi{ display:grid; grid-template-columns:repeat(3,1fr); gap:.7rem; margin:.6rem 0 1rem; }
.kpi-card{
  background:var(--pl-surface); border:1px solid var(--pl-border);
  border-radius:12px; padding:.7rem; box-shadow: var(--pl-shadow);
}
.kpi-title{ font-size:.9rem; color:var(--pl-text-dim); }
.kpi-val{ font-size:1.5rem; font-weight:800; margin:.15rem 0 .35rem; }
.kpi-delta{ font-size:.85rem; font-weight:700; }
.kpi-delta.pos{ color:var(--pl-success); }
.kpi-delta.neg{ color:var(--pl-danger); }

.sp-charts, .sp-tables, .sp-pies{ display:grid; gap:.7rem; margin-bottom:1rem; }
.sp-pies, .sp-tables, .sp-charts { grid-template-columns:1fr 1fr; }

/* بطاقات عامة */
.card{
  background:var(--pl-surface); border:1px solid var(--pl-border);
  border-radius:12px; padding:.7rem; box-shadow: var(--pl-shadow);
}
.card-title{ font-weight:700; margin-bottom:.55rem; display:flex; gap:.4rem; align-items:center; }

.sp-table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.sp-table th, .sp-table td{ padding:.48rem .4rem; border-bottom:1px solid var(--pl-border); }
.sp-table tbody tr:hover{ background: color-mix(in srgb, var(--pl-primary) 7%, transparent); }

/* === Breakpoints كما هي + تحسينات للرِّبن === */
@media(max-width:1024px){
  .kpi{ grid-template-columns:repeat(2,1fr); }
  .charts{ grid-template-columns: 1fr; }
}
@media(max-width:700px){
  .kpi-ribbon{ --kpi-min: 220px; --kpi-gap: .7rem; padding:.55rem .6rem; }
  .sp-pies, .sp-tables, .sp-charts { grid-template-columns:1fr; }
}
@media(max-width:620px){
  .kpi-ribbon{
    --kpi-min: 100%;
    --kpi-gap: .6rem;
    border-radius:14px;
    margin: calc(var(--section-pad) * .6) 8px 0;
    box-shadow:var(--pl-shadow-sm);
  }
  .kpi-chip{ border-radius:12px; box-shadow:var(--pl-shadow-sm); }
}
@media(max-width:560px){
  .kpi{ grid-template-columns: 1fr; }
  .sp-head .range{ gap:.35rem; }
  .sp-head .sp-range{ padding:.26rem .5rem; font-size:.92rem; }
  .table-card th, .table-card td{ padding:.5rem .55rem; }
}

/* الأجهزة اللمسية: ألغِ “النطّة” */
@media (hover: none) and (pointer: coarse){
  .kpi-chip:hover{ transform:none; box-shadow:var(--pl-shadow); border-color:var(--pl-border); }
}

/* ---- 99-skeleton-helpers.css ---- */
/*=== 20) Skeleton helpers ===*/
.skeleton-box{ background:linear-gradient(90deg,#eee,#f6f6f6,#eee); background-size:200% 100%; animation:skl 1.2s ease-in-out infinite; border-radius:12px; }
@keyframes skl{ 0%{background-position:0% 0} 100%{background-position:200% 0} }
.skl-avatar{ width:90px; height:90px; border-radius:50%; margin:auto; }
.skl-line{ height:14px; margin:10px auto; }
.skl-btn{ width:180px; height:44px; margin:14px auto; border-radius:12px; }

/* ---- 99-first-time-banner.css ---- */
/*=== 21) First-time banner ===*/
.firstbar{
  position:sticky; top:0; background:#e8f1ff; color:#2560ec; padding:10px 14px;
  display:flex; gap:10px; justify-content:space-between; align-items:center; z-index:5;
}
.firstbar .btn{ background:#2560ec; color:#fff; padding:8px 12px; border-radius:10px; text-decoration:none; font-weight:800; }
.firstbar .btn.alt{ border:2px solid #2560ec; background:#fff; color:#2560ec; }

/* Link shapes (body variants) */
body.lnk-pill .links a{ border-radius:999px; }
body.lnk-soft .links a{ border-radius:calc(var(--pl-radius) * .8); }
body.lnk-flat .links a{ border-radius:10px; box-shadow:none; }
body.lnk-glass .links a{ backdrop-filter:blur(3px); border:1px solid color-mix(in srgb, var(--pl-primary) 20%, transparent); }

/* Header density/layout (اختياري مبسّط) */
body.hdr-centered .profile-header{ align-items:center; text-align:center; }
body.hdr-compact .profile-header{ padding-top:1.6rem; padding-bottom:1.2rem; margin-top:3rem; }
body.hdr-wide .profile-header{ max-width:1100px; margin-inline:auto; }

/* Cards style & density */
body.cards-flat .profile-feed,body.cards-flat .slider-card{ box-shadow:none; border:1px solid var(--pl-card-border, var(--pl-border)); }
body.den-compact .links{ gap:.8rem; }
body.den-cozy .links{ gap:1rem; }
body.den-comfortable .links{ gap:1.19rem; }

/* Themed (mono) icons via CSS mask */
.ico-mask{
  width:1.1em; height:1.1em; display:inline-block; vertical-align:-.15em; background-color:currentColor;
  -webkit-mask:var(--ico) center/contain no-repeat; mask:var(--ico) center/contain no-repeat;
}
.social-btn .ico-mask{ width:22px; height:22px; }
.btn .ico-mask,.share-btns .ico-mask{ margin-inline-end:.4em; }

/* توريث الألوان للأزرار */
.share-btns button,.btn,.ai-personalize-btn{ color:var(--pl-text); text-decoration:none; }
.share-btns button:hover,.btn:hover,.ai-personalize-btn:hover{ color:#fff; }

/* Textarea (bio step) */
textarea{
  width:100%;
  min-height:200px;
  padding:12px;
  border:1px solid #dbe2f3;
  border-radius:12px;
  background: var(--clr-bg-light, var(--pl-surface));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1em;
  resize: vertical;
  color: var(--pl-text, var(--text));
}

/* Mobile: عند فتح اللوحة، لا تُخفِ زر الإحصائيات — استخدمه للإغلاق */
@media (max-width: 840px){
  body.stats-open .stats-toggle{ opacity:1; pointer-events:auto; }
}

/* تحسين خفيف للمسافة عند حالة الإغلاق */
.stats-toggle.is-close i{ margin-inline-end:.35rem; }

/* ضع زر الثيم فوق زر (+) بمسافة 12px دون تغيير التموضع الجانبي */
#themeBtn.add-link-btn.theme-btn{
  bottom: calc(98px + 53px + 12px); /* 98px (زر +) + 53px (حجم الزر) + 12px (فجوة) = 163px */
}

/* اجعل التمركز بالخصائص المنطقية ليتوافق مع RTL و الـ safe area */
.edit-btn,
.add-link-btn{
  position: fixed;
  inset-inline-end: max(16px, env(safe-area-inset-right));
  z-index: 130;
  transition: transform .28s var(--pl-timing, ease), background var(--pl-ease);
}

/* 1) الترس الكبير (يبقى كما هو أسفل الصفحة) */
#editToggle,
#saveBtn{
  inset-block-end: 22px;              /* كان bottom:22px */
  width: var(--fab-big);
  height: var(--fab-big);
}

/* 2) زر (+) */
#addBtn{
  inset-block-end: var(--fab-base);   /* كان bottom:98px */
  width: var(--fab-size);
  height: var(--fab-size);
}

/* 3) زر تغيير الثيم (فوق زر + بمقدار الحجم + الفجوة) */
#themeBtn.add-link-btn.theme-btn{
  inset-block-end: calc(var(--fab-base) + var(--fab-size) + var(--fab-gap));
}

/* 4) زر تسجيل الخروج (الطبقة التالية فوق الثيم) */
#logoutBtn.add-link-btn{
  inset-block-end: calc(var(--fab-base) + (2 * (var(--fab-size) + var(--fab-gap))));
  display: none;
}
body.is-editing #logoutBtn{ display: grid; }

/* عند فتح لوحة الإحصائيّات — كل الأزرار العائمة تتحرّك تلقائيًا بفضل القاعدة العامة: */
body.stats-open:not(.stats-left) .edit-btn,
body.stats-open:not(.stats-left) .add-link-btn{
  transform: translateX(calc(-1 * (var(--sp-w) + 12px)));
}
body.stats-open.stats-left .edit-btn,
body.stats-open.stats-left .add-link-btn{
  transform: none;
}






/***** Harmonize JS-injected UI spacing (wins over injected <style>) *****/

/* 1) حقول contenteditable أثناء التعديل */
body.is-editing [contenteditable="true"]{
  padding: calc(var(--pad,16px) * .35) calc(var(--pad,16px) * .45) !important;
  border-radius: .75rem !important;
  margin-inline: 8px;
}

/* 2) ترويسات الأقسام + مقابض السحب/العين */
.section-header{
  gap: var(--gap,16px) !important;
  margin-bottom: -10px;
}
.section-drag,
.section-visibility,
.section-remove{
  width: 38px !important; height: 38px !important;
  min-width:38px !important; min-height:38px !important;
  border-radius: .65rem !important;
  /* توحيد البوردر مع الثيم */
  border: 1px dashed var(--pl-border, #e5e7eb) !important;
}

/* القسم المخفي في وضع التعديل */
body.is-editing .section-hidden{
  outline:1px dashed var(--pl-border,#e5e7eb) !important;
  border-radius:.7rem !important;
}

/* 3) تلميحات الفراغ (روابط/سوشال) */
.edit-empty-tip{
  padding: .8rem 1rem !important;
  margin: var(--section-gap, 24px) auto !important;
  max-width: 800px !important;
}

/* 4) الشيبس الخاصة بالاهتمامات */
.profile-interests{ margin-top: var(--gap,16px) !important; }
#modalBox .int-item{
  padding: .4rem .55rem !important;
  border:1px solid var(--pl-border, #e5e7eb) !important;
  border-radius:.6rem !important;
}

/* 5) مودال السوشال: قائمة وروابط */
#socialModalBox .soc-list{
  gap: .6rem !important;
  max-height: 60vh !important;
}
#socialModalBox .soc-row{
  padding: .7rem .85rem !important;
  border:1px solid var(--pl-border,#e5e7eb) !important;
  border-radius:.75rem !important;
}

/* 6) صف أزرار المودالات (ثبات المسافة) */
#socialModalBox .btn-row,
#modalBox .btn-row{
  gap: .8rem !important;
}

/* 7) عدّاد الحروف/الكلمات — حتّى لا يزاحم النص */
.field-counter{ margin-inline-start:.35rem !important; opacity:.8 !important; }

/* 8) زر القلم (الصورة) — تبنّي القاعدة الأحدث فقط */
#avatarEdit{ display:none !important; }
body.is-editing #avatarEdit{ display:inline-flex !important; }
/* اجعل قسم الاهتمامات بدون خلفية/حد حتى وهو داخل .profile-feed */

.profile-interests {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ---- 22-links-drag-remove.css ---- */
/* ==== Links buttons: delete + drag side-by-side with explicit RTL flip ==== */

/* قاعدة افتراضية (LTR): كلاهما في جهة اليمين */
.links a .link-remove{
  position:absolute;
  top:10px;
  right:10px !important;
  left:auto !important;
  z-index:3;
}
.links a .drag-handle{
  position:absolute;
  top:10px;
  right:44px !important; /* بجانب الحذف */
  left:auto !important;
  z-index:3;
}

/* عند RTL: اقلبهما لنفس الجهة (اليسار) */
:root:dir(rtl) .links a .link-remove,
html[dir="rtl"] .links a .link-remove{
  left:10px !important;
  right:auto !important;
}
:root:dir(rtl) .links a .drag-handle,
html[dir="rtl"] .links a .drag-handle{
  left:44px !important;
  right:auto !important;
}

/* ---- 30-mobile-560.css ---- */
/* =========================================================
   (A) Mobile polish for edit mode — ≤ 560px
   ========================================================= */
@media (max-width: 560px){

  /* A1) ضغط الأزرار الطافية وتثبيتها على "سِكّة" عمودية */
  .edit-btn{ width:56px; height:56px; font-size:1.42rem; }
  .add-link-btn{ width:48px; height:48px; font-size:1.35rem; }
  .edit-btn, .add-link-btn{
    inset-inline-end: max(12px, env(safe-area-inset-right));
    box-shadow: var(--pl-shadow-sm);
  }
  /* ترتيب رأسي أنظف: (+) ثم الثيم ثم الخروج ثم الترس */
  #addBtn{ inset-block-end: 88px; }
  #themeBtn.add-link-btn.theme-btn{ inset-block-end: calc(88px + 48px + 10px); }
  #logoutBtn.add-link-btn{ inset-block-end: calc(88px + (2 * (48px + 10px))); }
  #editToggle, #saveBtn{ inset-block-end: 16px; }

  /* A2) عند فتح لوحة الإحصاءات لا تُزاح الأزرار خارج الشاشة بالكامل */
  body.stats-open:not(.stats-left) .edit-btn,
  body.stats-open:not(.stats-left) .add-link-btn{
    transform: translateX(calc(-1 * (min(var(--sp-w), 86vw) + 8px)));
  }

  /* A3) إحكام رأس القسم وحجم العناوين */
  .section-header{
    gap: .5rem !important;
    margin-bottom: .3rem !important;
  }
  .section-header h3{
    font-size: 1rem;
    line-height: 1.2;
  }

  /* A4) تبسيط الواجهة أثناء التعديل — أخف عناصر */
  body.is-editing .share-btns,
  body.is-editing .live-bar{
    display: none !important;
  }

  /* A5) تقليل الفراغات في الهيدر/الأفاتار */
  .profile-header{ padding-block: 1.1rem .7rem; }
  .avatar{ margin-top: 14px; width:116px; height:116px; }
  .profile-header p{ font-size: 1rem; margin-inline: 8px;}

  /* A6) السلايدر: بطاقات أقرب قليلًا وأقل ظلًا */
  .slider-card{
    margin-top: 18px; margin-bottom: 18px;
    box-shadow: var(--pl-shadow-sm);
  }
  .slider-section{
    padding: .9rem .55rem;
  }

  /* A7) شارة KPI رشيقة في الموبايل */
  .kpi-ribbon{
    padding: .45rem .55rem;
    box-shadow: var(--pl-shadow-sm);
  }
  .kpi-chip{
    padding: .65rem .7rem .45rem;
  }


  /* A9) مساحة كتابة أهدأ داخل contenteditable */
  body.is-editing [contenteditable="true"]{
    line-height: 1.5 !important;
  }
}

/* ---- 31-mobile-420.css ---- */
/* =========================================================
   (B) Micro-spacing & shadows tidy up (≤ 420px)
   ========================================================= */
@media (max-width: 420px){
  .social-strip{ gap: 8px; }
  .social-btn{ width: 38px; height: 38px; box-shadow: var(--pl-shadow-sm); }
  .links{ padding-inline: 8px; gap: .85rem; }
  .links a{ box-shadow: var(--pl-shadow-sm); }
  .profile-feed{ padding: .9rem .65rem; }
}

/* ---- 32-touch-refinements.css ---- */
/* =========================================================
   (C) Stats panel + toggle refinements for touch
   ========================================================= */
@media (hover: none) and (pointer: coarse){
  .stats-toggle{
    padding: .46rem .68rem;
    box-shadow: var(--pl-shadow-sm);
  }
  .sp-head{ margin-top: .6rem; }
  .sp-head .sp-range{ padding: .24rem .48rem; }
}

/* ---- 33-fab-safe-area.css ---- */
/* =========================================================
   (D) Prevent FABs from clashing with bottom safe area
   ========================================================= */
.edit-btn, .add-link-btn{
  inset-block-end: max(16px, env(safe-area-inset-bottom));
}


/* أخفِ الأقسام المعلّمة كفـارغة خارج وضع التعديل فقط */
body:not(.is-editing) [data-section][data-empty="1"]{
  display: none !important;
}







































/* =====================================================================
 * Bio.ly – Profile Editor extracted CSS
 * -------------------------------------
 * هذا الملف يحتوي على الأنماط التي كانت مكتوبة inline داخل profile.dist.js
 * وتم فصلها لتوضع في ملف CSS عام.
 * يمكنك دمج هذه القواعد في ملف CSS الرئيسي لديك (مثلاً profile.css).
 * ===================================================================== */

/* Confirm dialog */
.confirm-box h3 {
  margin: 0 0 .6rem;
}
.confirm-box .muted {
  margin: .2rem 0 .9rem;
}

/* Generic modal title inside modalBox (e.g. Interests loading) */
#modalBox > h3 {
  margin: 0 0 .6rem;
}

/* Avatar cropper toolbar */
#crReset {
  font-size: 1.1rem;
}

/* Interests modal */
#intSearch {
  width: 100%;
  margin: .3rem 0 .6rem;
  padding: .5rem;
  border: 1px solid var(--pl-border, #e5e7eb);
  border-radius: .5rem;
}

#intList.int-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .45rem;
  max-height: 46vh;
  overflow: auto;
}

.int-footer {
  display: flex;
  gap: .6rem;
  align-items: center;
  justify-content: space-between;
  margin-top: .8rem;
}

.int-label {
  font-size: .9rem;
  opacity: .8;
}

#intVis {
  padding: .35rem .5rem;
  border: 1px solid var(--pl-border, #e5e7eb);
  border-radius: .5rem;
}

#intCount {
  opacity: .8;
}

.btn-row.int-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .8rem;
}

/* AI suggestions mini list */
.mini-date {
  opacity: .7;
}

/* AI result text */
.ai-result-ok {
  color: #2bc07b;
}

/* QR popup */
#qrBox {
  display: flex;
  justify-content: center;
  margin: 10px 0 14px;
}

.qr-actions {
  display: flex;
  gap: .5rem;
  justify-content: flex-end;
}

/* Add-block modal (sections picker) */
.blk-card {
  border: 1px solid var(--border, #222838);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.blk-card-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.blk-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.blk-modal-title {
  margin: 0;
}

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

/* Mobile-friendly buttons */
@media (max-width: 640px){
  .links{
    gap: .65rem;
  }

  .links a{
    font-size: .98rem;
    padding: 0.9rem 1rem;
    gap: .55rem;
    border-radius: 999px;              /* كابسول ناعم للموبايل */
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
  }

  .links a .icon,
  .links a .ico-mask{
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }

  .links a .link-title{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;           /* لو العنوان طويل ما يكسر السطر */
  }
}













/* الأساس المشترك لكل الإعلانات */
.ad-banner{
  width: 100%;
  font-size: .95rem;
  color: var(--pl-text-dim);
}

/* شريط أسفل الصفحة – Powered by Bio.ly */
.ad-banner-footer{
  background: var(--pl-card-bg, var(--pl-surface));
  text-align: center;
  padding: 1.07rem 0 .93rem;
  border-top: 1px solid var(--pl-card-border, var(--pl-border));
  margin-top: 1.9rem;
  letter-spacing: .01em;
}

/* إعلان الهيدر الصغير تحت السوشيال */
.ad-banner-header{
  margin-top: .75rem;
  background: transparent;
  border: 0;
  text-align: center;
}

/* إعلان بين الأزرار (inline) */
.ad-banner-inline{
  margin: 1rem 0;
  background: var(--pl-card-bg, var(--pl-surface));
  border-radius: 12px;
  padding: .4rem 0 .2rem;
  overflow: hidden; /* علشان إطار AdSense يكون نظيف */
}
/* ====== Inline AdSense In-Article CTA ====== */
.ad-banner-inline-cta{
  margin-top: 1.4rem;
  margin-bottom: 1.4rem;
  padding: 0;
  background: transparent;
  border: 0;
}

/* مجرد حاوية ناعمة لو حبيت تضيف لها خلفية خفيفة لاحقًا */
.ad-banner-inline-cta .adsbygoogle{
  /* لا تغيّر الخلفية لو تريد شكل AdSense الافتراضي */
  /* تقدر تضيف margin-top/bottom لو تحب مسافة إضافية داخلية */
}
/* الإعلان بين الأزرار – نفس شكل الزر تقريبًا */
.links-ad-btn{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    padding: calc(var(--pad, 16px) * .95) var(--pad, 16px);
    border-radius: var(--pl-radius);
    font-weight: 600;
    font-size: 1.09rem;
    box-shadow: var(--pl-shadow);
    transition: background var(--pl-ease), transform .18s, box-shadow var(--pl-ease), color var(--pl-ease), border var(--pl-ease);
    background: var(--pl-btn-bg, var(--pl-primary, #444));
    color: var(--pl-btn-fg, var(--pl-link-fg, #fff));
    border: 1px solid var(--pl-btn-border, transparent);
    overflow: hidden;
    cursor: pointer;
    will-change: transform, box-shadow;
    word-break: break-word;
    overflow-wrap: anywhere;
    margin-top: .9rem;   /* نفس المسافة الرأسية بين الأزرار (عدّلها حسب تصميمك) */
}

/* إزالة أي padding/margin إضافي من الـ ad-banner الأساسي */
.ad-banner.links-ad-btn{
    background: transparent;
    border: none;
    padding: 0;
    margin-inline: 0;
}

/* جعل وحدة AdSense تملأ الزر بسلاسة */
.links-ad-btn .adsbygoogle{
    width: 100%;
}