/* ====== أساسيات ====== */
* { margin:0; padding:0; box-sizing:border-box; }
:root{
  --bg:#0a0a0f;
  --bg2:#12121a;
  --card:#1a1a24;
  --card-hover:#22222e;
  --border:#2a2a38;
  --text:#f5f5f7;
  --muted:#9a9aad;
  --accent:#ff2d6a;
  --accent2:#8b5cf6;
  --grad:linear-gradient(135deg,#ff2d6a,#8b5cf6,#3b82f6);
  --radius:16px;
}
:root[data-theme="light"]{
  --bg:#f5f5fa; --bg2:#ffffff; --card:#ffffff; --card-hover:#f0f0f5;
  --border:#e2e2ee; --text:#1a1a24; --muted:#6b6b80;
}
html{ scroll-behavior:smooth; overflow-x:hidden; }
/* وصول (accessibility): تركيز واضح بلوحة المفاتيح */
:focus-visible{ outline:2px solid var(--accent2); outline-offset:2px; border-radius:4px; }
.skip-link{ position:absolute; right:-9999px; top:8px; background:var(--accent); color:#fff;
  padding:10px 18px; border-radius:10px; z-index:1000; font-weight:700; }
.skip-link:focus{ right:8px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }
body{
  /* سلسلة خطوط واسعة تضمن ظهور كل اللغات والرموز بلا مربعات (□) */
  font-family:'Tajawal','Segoe UI','Noto Sans Arabic','Noto Sans','Noto Sans CJK SC',
    system-ui,Tahoma,Arial,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji',sans-serif;
  background:var(--bg); color:var(--text);
  direction:rtl; overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; }

/* ====== الهيدر ====== */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(10,10,15,.85); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav{
  max-width:1280px; margin:auto; padding:14px 20px;
  display:flex; align-items:center; gap:24px;
}
.logo{ font-size:26px; font-weight:900; white-space:nowrap; }
.logo span{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.nav-links{ display:flex; gap:4px; flex:1; align-items:center; }
.nav-links a{
  color:var(--muted); font-size:14.5px; font-weight:600; transition:.2s;
  display:inline-flex; align-items:center; gap:6px; line-height:1;
  padding:8px 12px; border-radius:10px; white-space:nowrap;
}
.nav-links a:hover{ color:var(--text); background:var(--card); }

/* شريط الإجراءات — كل العناصر بنفس الارتفاع والمحاذاة */
.nav-actions{ display:flex; gap:8px; align-items:center; }
.nav-actions > *{ margin:0; }
.nav-actions .btn,
.nav-actions .credits,
.nav-actions #authChip{
  height:40px; padding:0 16px; border-radius:20px;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-size:14px; font-weight:700; line-height:1; box-sizing:border-box; white-space:nowrap;
}
.credits{
  background:var(--card); border:1px solid var(--border);
  color:var(--accent); font-weight:700;
}
/* أزرار الأيقونات المربّعة/الدائرية بنفس الارتفاع */
.nav-actions .nav-icon{
  width:40px; height:40px; padding:0; border-radius:50%;
  font-size:16px; display:inline-flex; align-items:center; justify-content:center;
}
.member-chip{ background:linear-gradient(135deg,rgba(255,45,106,.2),rgba(139,92,246,.2)); border-color:var(--accent); }
.btn{
  border:none; border-radius:12px; padding:10px 22px;
  font-size:15px; font-weight:700; transition:.2s;
  display:inline-flex; align-items:center; justify-content:center; gap:6px; line-height:1;
}
.btn-primary{ background:var(--grad); color:#fff; }
.btn-primary:hover{ opacity:.9; transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--border); }
.btn-ghost:hover{ background:var(--card); }
.menu-toggle{ display:none; background:none; border:none; color:var(--text); font-size:26px; }

/* ====== البطل (Hero) ====== */
.hero{
  position:relative; text-align:center; padding:90px 20px 50px;
  background:radial-gradient(ellipse 80% 55% at 50% -5%, rgba(139,92,246,.28), transparent),
             radial-gradient(ellipse 55% 45% at 80% 10%, rgba(255,45,106,.16), transparent);
}
.hero h1{ font-size:clamp(30px,5vw,56px); font-weight:900; line-height:1.3; }
.hero h1 span{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p{ color:var(--muted); font-size:18px; margin:18px auto 34px; max-width:640px; }

.studio-tabs{ display:flex; justify-content:center; gap:10px; margin-bottom:26px; flex-wrap:wrap; }
.studio-tab{
  background:var(--card); border:1px solid var(--border); color:var(--muted);
  padding:10px 24px; border-radius:24px; font-size:15px; font-weight:700; transition:.2s;
}
.studio-tab.active{ color:#fff; border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 0 24px rgba(255,45,106,.35); }

/* صندوق الإنشاء */
.create-box{
  max-width:760px; margin:auto; background:var(--card);
  border:1px solid var(--border); border-radius:22px; padding:22px; text-align:right;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
}
.create-box textarea{
  width:100%; min-height:120px; background:transparent; border:none; outline:none;
  color:var(--text); font-family:inherit; font-size:17px; resize:vertical;
}
.create-box textarea::placeholder{ color:var(--muted); }
.create-controls{ display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap; }
.select-pill{
  background:var(--bg2); border:1px solid var(--border); color:var(--text);
  padding:9px 16px; border-radius:12px; font-size:14px; font-family:inherit;
}
.create-controls .btn-primary{ margin-right:auto; border-radius:50px; padding:12px 30px; }
.router-hint{ color:var(--muted); font-size:13.5px; display:flex; align-items:center; gap:6px; }
.create-controls .btn-primary:disabled{ opacity:.6; cursor:wait; }

/* شريط الاشتراك */
.promo{
  max-width:760px; margin:26px auto 0;
  background:linear-gradient(90deg,rgba(139,92,246,.35),rgba(255,45,106,.3));
  border:1px solid rgba(139,92,246,.4); border-radius:18px;
  padding:16px 22px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
.promo p{ margin:0; font-size:15px; }
.promo .btn{ background:#fff; color:#111; border-radius:50px; padding:9px 22px; white-space:nowrap; }

/* ====== عدّاد الإحصائيات ====== */
.stats{
  display:flex; justify-content:center; gap:50px; flex-wrap:wrap;
  padding:44px 20px; border-bottom:1px solid var(--border);
}
.stat{ text-align:center; }
.stat b{ font-size:34px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat span{ display:block; color:var(--muted); font-size:14px; margin-top:4px; }

/* ====== قسم الأدوات ====== */
.section{ max-width:1280px; margin:auto; padding:60px 20px; }
.section-title{ font-size:clamp(24px,3.4vw,38px); font-weight:900; text-align:center; margin-bottom:12px; }
.section-sub{ color:var(--muted); text-align:center; margin-bottom:36px; }

.toolbar{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center; margin-bottom:30px; }
.search{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  display:flex; align-items:center; padding:0 16px; min-width:280px; flex:1; max-width:440px;
}
.search input{
  background:transparent; border:none; outline:none; color:var(--text);
  font-family:inherit; font-size:15px; padding:13px 10px; width:100%;
}
.cats{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.cat-btn{
  background:var(--card); border:1px solid var(--border); color:var(--muted);
  padding:9px 18px; border-radius:24px; font-size:14px; font-weight:700; transition:.2s;
}
.cat-btn:hover{ color:var(--text); }
.cat-btn.active{ background:var(--grad); color:#fff; border-color:transparent; }

.grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px;
}
/* بطاقة بأسلوب Pollo: صورة حقيقية كخلفية + اسم الأداة */
.tool-card{
  background:var(--card); border:1px solid var(--border); border-radius:18px;
  transition:.25s; position:relative; overflow:hidden; cursor:pointer;
  min-height:96px; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:16px 20px;
}
.tool-card .card-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.55; transition:.35s;
}
.tool-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,15,.25), rgba(10,10,15,.55));
}
.tool-card:hover{ transform:translateY(-4px) scale(1.01); border-color:var(--accent2); box-shadow:0 10px 30px rgba(139,92,246,.25); }
.tool-card:hover .card-bg{ opacity:.8; transform:scale(1.06); }
.tool-card h3{
  position:relative; z-index:2; font-size:16.5px; font-weight:800;
  text-shadow:0 2px 8px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.9);
}
.tool-card .card-icon{ position:relative; z-index:2; font-size:20px; margin-left:8px; }
.tool-stars{ position:relative; z-index:2; display:block; color:#f5b301; font-size:13px; font-weight:700; margin-top:6px; text-shadow:0 1px 4px rgba(0,0,0,.9); }
.tool-card p{ display:none; }
.tool-icon{
  width:52px; height:52px; border-radius:14px; font-size:26px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg2); border:1px solid var(--border); margin-bottom:14px;
}
.badge-hot{
  position:absolute; top:10px; left:10px; z-index:3; background:var(--grad); color:#fff;
  font-size:11px; font-weight:800; padding:3px 10px; border-radius:20px;
}
.no-results{ text-align:center; color:var(--muted); padding:50px 0; grid-column:1/-1; font-size:17px; }

/* ====== بطاقة موحّدة (بوتات + أدوات) — منقولة من bots.html لتُشارَك ====== */
.bot-card{
  background:var(--card); border:1px solid var(--border); border-radius:18px;
  padding:22px; transition:.25s; position:relative; overflow:hidden;
}
.bot-banner{ margin:-22px -22px 16px; height:110px; position:relative; display:block; }
.bot-banner img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.85; }
.bot-banner::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, var(--card)); }
.bot-card:hover{ transform:translateY(-5px); border-color:#a855f7; box-shadow:0 10px 30px rgba(168,85,247,.2); }
.bot-head{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.bot-avatar{
  width:54px; height:54px; border-radius:16px; font-size:26px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#7e22ce,#3b82f6);
}
.bot-card h3{ font-size:16px; }
.bot-user{ color:#a855f7; font-size:13px; direction:ltr; display:inline-block; }
.bot-card p{ color:var(--muted); font-size:13.5px; line-height:1.7; min-height:44px; }
.bot-rating{ font-size:13px; font-weight:700; color:#f5b301; margin:8px 0 4px; }
.bot-actions{ margin-top:14px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.bot-actions .btn{ font-size:13.5px; padding:8px 18px; border-radius:10px; }
.badge-row{ position:absolute; top:12px; left:12px; display:flex; gap:6px; z-index:3; }
.b-badge{ font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:20px; color:#fff; }
.b-featured{ background:linear-gradient(135deg,#a855f7,#ff2d6a); }
.b-new{ background:#10b981; }
.b-soon{ background:#64748b; }

/* ====== الأسعار ====== */
.pricing-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; max-width:1050px; margin:auto; }
.price-card{
  background:var(--card); border:1px solid var(--border); border-radius:20px;
  padding:32px 26px; text-align:center; position:relative; transition:.25s;
}
.price-card:hover{ transform:translateY(-5px); }
.price-card.featured{ border-color:var(--accent); box-shadow:0 0 40px rgba(255,45,106,.25); }
.price-card .plan{ font-size:18px; font-weight:800; color:var(--muted); }
.price-card .price{ font-size:44px; font-weight:900; margin:14px 0; }
.price-card .price small{ font-size:15px; color:var(--muted); font-weight:400; }
.price-card ul{ list-style:none; margin:20px 0 26px; text-align:right; }
.price-card li{ padding:8px 0; color:var(--muted); font-size:14.5px; }
.price-card li::before{ content:"✓ "; color:var(--accent); font-weight:900; }
.tag-popular{
  position:absolute; top:-13px; right:50%; transform:translateX(50%);
  background:var(--grad); color:#fff; font-size:12px; font-weight:800;
  padding:5px 18px; border-radius:20px;
}

/* ====== الفوتر ====== */
footer{ background:var(--bg2); border-top:1px solid var(--border); margin-top:40px; }
.footer-grid{
  max-width:1280px; margin:auto; padding:56px 20px 30px;
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:34px;
}
.footer-grid h4{ margin-bottom:16px; font-size:16px; }
.footer-grid a{ display:block; color:var(--muted); font-size:14px; padding:5px 0; transition:.2s; }
.footer-grid a:hover{ color:var(--text); }
.footer-about p{ color:var(--muted); font-size:14px; line-height:1.8; margin-top:12px; max-width:320px; }
.copyright{ text-align:center; color:var(--muted); font-size:13px; padding:20px; border-top:1px solid var(--border); }

/* ====== ميزات مشتركة: مفضلة، toast، زر أعلى، هيكل تحميل ====== */
.fav-btn{
  position:absolute; top:10px; right:10px; z-index:4;
  background:rgba(0,0,0,.55); border:none; border-radius:50%;
  width:34px; height:34px; font-size:16px; line-height:1; cursor:pointer;
  backdrop-filter:blur(4px); transition:.2s;
}
.fav-btn:hover{ transform:scale(1.15); background:rgba(0,0,0,.75); }
.fav-btn.on{ animation:pop .3s; }

#nova-toast{
  position:fixed; bottom:28px; right:50%; transform:translate(50%,20px);
  background:var(--card); border:1px solid var(--border); color:var(--text);
  padding:12px 22px; border-radius:14px; font-size:15px; font-weight:700;
  box-shadow:0 12px 40px rgba(0,0,0,.5); opacity:0; pointer-events:none;
  transition:.3s; z-index:500;
}
#nova-toast.show{ opacity:1; transform:translate(50%,0); }

#back-top{
  position:fixed; bottom:24px; left:24px; z-index:150;
  width:48px; height:48px; border-radius:50%; border:none;
  background:var(--grad); color:#fff; font-size:22px; cursor:pointer;
  opacity:0; pointer-events:none; transform:translateY(20px); transition:.3s;
  box-shadow:0 8px 24px rgba(139,92,246,.4);
}
#back-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }

/* شارات الفلترة السريعة */
.quick-filters{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:22px; }
.qf-btn{
  background:var(--bg2); border:1px solid var(--border); color:var(--muted);
  padding:8px 18px; border-radius:24px; font-size:14px; font-weight:700; transition:.2s; font-family:inherit; cursor:pointer;
}
.qf-btn:hover{ color:var(--text); }
.qf-btn.active{ background:var(--grad); color:#fff; border-color:transparent; }
.cat-count{ opacity:.6; font-size:12px; margin-right:4px; }

/* ===== مبدّل النوع (أدوات ↔ بوتات) — عنصر مجزّأ أنيق ===== */
.type-toggle{
  display:inline-flex; gap:4px; padding:5px; margin:0 auto 22px;
  background:var(--bg2); border:1px solid var(--border); border-radius:30px;
}
.type-toggle{ display:flex; width:max-content; max-width:100%; }
.tt-btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:11px 26px; border:none; border-radius:24px; background:transparent;
  color:var(--muted); font-family:inherit; font-size:15px; font-weight:800;
  transition:.2s; white-space:nowrap;
}
.tt-btn:hover{ color:var(--text); }
.tt-btn.active{ background:var(--grad); color:#fff; box-shadow:0 6px 20px rgba(124,92,255,.35); }
.tt-count{
  font-size:12.5px; font-weight:700; padding:2px 9px; border-radius:20px;
  background:rgba(255,255,255,.14); color:inherit; opacity:.9;
}
.tt-btn:not(.active) .tt-count{ background:var(--card); }
/* توسيط المبدّل وحده دون التأثير على بقية القسم */
.type-toggle{ margin-inline:auto; }
@media (max-width:600px){
  .tt-btn{ padding:10px 18px; font-size:14px; }
  .type-toggle{ width:100%; }
  .tt-btn{ flex:1; justify-content:center; }
}

/* ظهور تدريجي عند التمرير */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* هيكل تحميل الصورة (shimmer) */
.card-bg, .bot-banner img{ background:linear-gradient(100deg,#1a1a24 30%,#22222e 50%,#1a1a24 70%); background-size:200% 100%; animation:shimmer 1.4s infinite; }
@keyframes shimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }

/* الأسئلة الشائعة */
.faq-list{ max-width:760px; margin:auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:2px 20px; transition:.2s; }
.faq-item[open]{ border-color:var(--accent2); }
.faq-item summary{ cursor:pointer; padding:18px 0; font-weight:700; font-size:16px; list-style:none; position:relative; padding-left:30px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; position:absolute; left:0; top:16px; font-size:22px; color:var(--accent); transition:.2s; }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ color:var(--muted); line-height:1.9; padding:0 0 18px; font-size:14.5px; }

/* قسم كيف تعمل الشبكة */
.how-grid{ display:flex; align-items:stretch; justify-content:center; gap:14px; flex-wrap:wrap; max-width:1000px; margin:auto; }
.how-card{ flex:1; min-width:230px; background:var(--card); border:1px solid var(--border); border-radius:18px; padding:26px; position:relative; }
.how-card .how-num{ width:34px; height:34px; border-radius:50%; background:var(--grad); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:900; margin-bottom:14px; }
.how-card h3{ font-size:17px; margin-bottom:10px; }
.how-card p{ color:var(--muted); font-size:14px; line-height:1.8; }
.how-arrow{ display:flex; align-items:center; font-size:26px; color:var(--accent2); }
@media (max-width:760px){ .how-arrow{ transform:rotate(90deg); } }

/* ====== الدفع والاشتراك ====== */
.checkout-modal{ max-width:500px; }
.co-plans{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:12px; }
.co-plan{ position:relative; background:var(--bg2); border:1.5px solid var(--border); border-radius:14px;
  padding:12px 6px; cursor:pointer; font-family:inherit; color:var(--text); display:flex; flex-direction:column; align-items:center; gap:4px; transition:.2s; }
.co-plan:hover{ border-color:var(--accent2); }
.co-plan.sel{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.co-plan b{ font-size:13px; }
.co-plan .co-credits{ color:var(--muted); font-size:12px; }
.co-plan .co-price{ font-size:20px; font-weight:900; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.co-badge{ position:absolute; top:-9px; right:50%; transform:translateX(50%); background:var(--grad); color:#fff; font-size:9.5px; font-weight:800; padding:2px 8px; border-radius:20px; white-space:nowrap; }
.co-label{ font-size:13px; font-weight:700; color:var(--muted); margin-bottom:6px; }
.co-methods{ display:flex; flex-direction:column; gap:7px; margin-bottom:12px; }
.co-method{ display:flex; align-items:center; gap:12px; background:var(--bg2); border:1.5px solid var(--border);
  border-radius:12px; padding:10px 14px; cursor:pointer; font-family:inherit; color:var(--text); text-align:right; transition:.2s; }
.co-method:hover{ border-color:var(--accent2); }
.co-method.sel{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.co-mic{ font-size:24px; width:32px; text-align:center; }
.co-mtext{ display:flex; flex-direction:column; }
.co-mtext small{ color:var(--muted); font-size:12px; }
.co-pay{ width:100%; padding:15px; font-size:16px; }
.co-secure{ text-align:center; color:var(--muted); font-size:12px; margin-top:12px; }

/* تسجيل الدخول */
.login-modal{ max-width:400px; text-align:center; }
.auth-social{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.auth-sbtn{ width:100%; padding:12px; }
.auth-social-row{ display:flex; gap:10px; }
.auth-social-row .auth-sbtn{ flex:1; }
.auth-or{ position:relative; text-align:center; margin:14px 0; }
.auth-or::before{ content:""; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--border); }
.auth-or span{ position:relative; background:var(--card); padding:0 12px; color:var(--muted); font-size:13px; }
#authForm{ display:flex; flex-direction:column; gap:10px; }
#authForm input{ background:var(--bg2); border:1px solid var(--border); color:var(--text); border-radius:12px; padding:13px 14px; font-family:inherit; font-size:15px; text-align:right; }
#authForm input:focus{ border-color:var(--accent2); outline:none; }
.auth-switch{ margin-top:14px; color:var(--muted); font-size:14px; }
.auth-switch a{ color:var(--accent); font-weight:700; }
.auth-passwrap{ position:relative; }
.auth-passwrap input{ width:100%; padding-left:44px; }
.auth-eye{ position:absolute; left:8px; top:50%; transform:translateY(-50%); background:none; border:none; font-size:16px; cursor:pointer; opacity:.7; }
.auth-eye:hover{ opacity:1; }
.auth-strength{ text-align:right; }
.as-bar{ height:5px; background:var(--bg2); border-radius:20px; overflow:hidden; margin-bottom:4px; }
.as-bar span{ display:block; height:100%; width:0; border-radius:20px; transition:.3s; }
.auth-strength small{ font-size:12px; }
.auth-remember{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13.5px; cursor:pointer; }
.auth-remember input{ width:auto; }
.auth-forgot{ text-align:center; margin:12px 0 0; }
.auth-forgot a{ color:var(--muted); font-size:13px; }
.auth-forgot a:hover{ color:var(--accent); }

/* مساعدة الاختصارات */
.shortcuts-list{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.sc-row{ display:flex; align-items:center; gap:14px; }
.sc-row kbd{ background:var(--bg2); border:1px solid var(--border); border-radius:8px; padding:5px 12px;
  font-family:monospace; font-size:13px; min-width:110px; text-align:center; color:var(--accent); }
.sc-row span{ color:var(--muted); font-size:14px; }

/* شارة تكلفة الرصيد + باقات الشحن */
.cost-badge{ display:inline-flex; align-items:center; background:var(--bg2); border:1px solid var(--border);
  color:var(--accent); font-size:13px; font-weight:800; padding:9px 14px; border-radius:12px; }
.topup-plans{ display:flex; flex-direction:column; gap:10px; margin:18px 0; }
.topup-plan{ display:flex; justify-content:space-between; align-items:center; background:var(--bg2);
  border:1px solid var(--border); border-radius:12px; padding:15px 18px; font-size:16px; font-weight:700;
  color:var(--text); font-family:inherit; cursor:pointer; transition:.2s; }
.topup-plan:hover{ border-color:var(--accent); transform:translateY(-2px); }
.topup-plan span{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:18px; }

/* ====== لوحة الأوامر (بحث شامل) ====== */
#palette{
  position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(6px);
  display:none; align-items:flex-start; justify-content:center; z-index:400; padding:80px 20px;
}
#palette.open{ display:flex; }
.palette-box{
  background:var(--card); border:1px solid var(--border); border-radius:18px;
  width:100%; max-width:560px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:pop .2s ease;
}
#palInput{
  width:100%; padding:20px 22px; background:transparent; border:none; outline:none;
  color:var(--text); font-family:inherit; font-size:18px; border-bottom:1px solid var(--border);
}
.palette-results{ max-height:52vh; overflow-y:auto; }
.pal-item{
  display:flex; align-items:center; gap:12px; padding:13px 20px; color:var(--text);
  font-size:15px; border-bottom:1px solid var(--border); transition:.12s;
}
.pal-item span{ font-size:20px; }
.pal-item em{ margin-right:auto; color:var(--muted); font-size:12px; font-style:normal;
  background:var(--bg2); padding:3px 10px; border-radius:20px; }
.pal-item.sel, .pal-item:hover{ background:var(--card-hover); }
.pal-empty{ padding:30px; text-align:center; color:var(--muted); }
.palette-hint{ padding:10px 20px; font-size:12px; color:var(--muted); background:var(--bg2); }

/* ====== نافذة الأداة ====== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(6px);
  display:none; align-items:center; justify-content:center; z-index:200; padding:20px;
}
.modal-overlay.open{ display:flex; }
.modal{
  background:var(--card); border:1px solid var(--border); border-radius:22px;
  max-width:560px; width:100%; padding:34px; position:relative;
  max-height:90vh; overflow-y:auto; overscroll-behavior:contain;
  animation:pop .25s ease;
}
/* نافذة الاشتراك: مضغوطة لتتّسع في الشاشة */
.checkout-modal{ padding:24px 22px; }
.checkout-modal h2{ font-size:20px; margin:2px 0 6px; }
.checkout-modal > p{ margin-bottom:12px; font-size:13.5px; }
@keyframes pop{ from{ transform:scale(.92); opacity:0; } to{ transform:scale(1); opacity:1; } }
.modal-close{
  position:absolute; top:16px; left:16px; background:var(--bg2); border:1px solid var(--border);
  color:var(--text); width:36px; height:36px; border-radius:50%; font-size:16px;
}
.modal .tool-icon{ width:64px; height:64px; font-size:32px; }
.modal h2{ margin:6px 0 10px; }
.modal p{ color:var(--muted); line-height:1.8; margin-bottom:22px; }
.modal textarea{
  width:100%; min-height:100px; background:var(--bg2); border:1px solid var(--border);
  border-radius:14px; padding:14px; color:var(--text); font-family:inherit; font-size:15px;
  outline:none; resize:vertical; margin-bottom:16px;
}
.modal .btn-primary{ width:100%; padding:14px; border-radius:14px; font-size:16px; }
.modal-result{
  margin-top:18px; background:var(--bg2); border:1px dashed var(--border);
  border-radius:14px; padding:18px; color:var(--muted); font-size:14px; display:none; text-align:center;
}

/* ====== استجابة ====== */
@media (max-width:820px){
  .nav-links{ display:none; position:absolute; top:100%; right:0; left:0;
    background:var(--bg2); flex-direction:column; padding:18px; border-bottom:1px solid var(--border); }
  .nav-links.open{ display:flex; }
  .menu-toggle{ display:block; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .stats{ gap:28px; }
}
@media (max-width:480px){
  .footer-grid{ grid-template-columns:1fr; }
  .hero{ padding-top:56px; }
}

/* قائمة الحساب المنسدلة */
.auth-menu{ z-index:2000; min-width:180px; background:var(--card,#161622); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:6px; box-shadow:0 12px 40px rgba(0,0,0,.5); display:flex; flex-direction:column; gap:2px; animation:authMenuIn .14s ease; }
@keyframes authMenuIn{ from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }
.auth-menu a, .auth-menu button{ display:block; width:100%; text-align:start; background:none; border:none; color:var(--text,#e8e8f0); font:inherit; padding:10px 12px; border-radius:10px; cursor:pointer; text-decoration:none; transition:background .15s; }
.auth-menu a:hover, .auth-menu button:hover{ background:rgba(255,255,255,.08); }
.auth-menu #authLogout{ color:#f87171; }

/* الدفع اليدوي — التعليمات والنموذج */
.co-instructions{ margin:10px 0 }
.co-instr-card{ background:var(--bg2,#12121c); border:1px solid var(--border,#262636); border-radius:14px; padding:11px }
.co-instr-title{ font-size:14px; margin-bottom:10px }
.co-account{ background:#0f0f18; border:1px dashed #3a3a52; border-radius:10px; padding:9px; text-align:center; font-family:monospace; font-size:17px; letter-spacing:1px; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px }
.co-account:hover{ border-color:var(--accent,#7c5cff) }
.co-copy{ font-size:12px; color:var(--muted,#9a9ab0); font-family:system-ui }
.co-instr-card small{ display:block; margin-top:8px; color:var(--muted,#9a9ab0); font-size:12.5px }
.co-form{ display:grid; gap:9px; margin:10px 0 }
.co-field label{ display:block; font-size:13px; color:var(--muted,#9a9ab0); margin-bottom:6px }
.co-field input[type=text],.co-field input[type=tel],.co-field input:not([type=file]){ width:100%; padding:11px 13px; border-radius:11px; border:1px solid var(--border,#333349); background:#0f0f18; color:#fff; font-size:14.5px }
.co-field input[type=file]{ width:100%; color:var(--muted,#9a9ab0); font-size:13px }
.co-field input:focus{ outline:none; border-color:var(--accent,#7c5cff) }

/* تبويبات لوحة الأدمن */
.admtab{ padding:7px 14px; border-radius:10px; background:var(--bg2,#12121c); border:1px solid var(--border,#262636); color:var(--muted,#9a9ab0); cursor:pointer; font-weight:600; font-size:13px; }
.admtab.active{ background:var(--grad); color:#fff; border-color:transparent; }
/* شريط إعلان الموقع */
#nova-announce{ background:linear-gradient(135deg,#7c5cff,#ff2d95); color:#fff; text-align:center; padding:10px 40px; font-size:14px; font-weight:600; position:relative; transition:background .4s; }
#nova-announce #nova-ann-cta{ display:inline-block; margin-inline-start:10px; background:rgba(255,255,255,.22); color:#fff; padding:3px 12px; border-radius:20px; font-size:13px; text-decoration:none; white-space:nowrap; }
#nova-announce #nova-ann-cta:hover{ background:rgba(255,255,255,.35); }
#nova-announce #nova-ann-cta[hidden]{ display:none; }

/* ===== وسائط الإعلان (صورة/فيديو) =====
   الصندوق ثابت الأبعاد و object-fit:cover يقصّ أي مقاس ليملأه دون تشويه —
   فلا تكسر صورة عمودية أو فيديو عريض ارتفاعَ الشريط. */
#nova-announce.has-media{ display:flex; align-items:center; justify-content:center; gap:12px; padding:8px 44px; }
#nova-announce.has-media > span{ text-align:start; }
#nova-ann-media{ flex:0 0 auto; width:92px; height:52px; border-radius:8px; overflow:hidden;
  background:rgba(0,0,0,.18); box-shadow:0 2px 10px rgba(0,0,0,.25); }
#nova-ann-media[hidden]{ display:none; }
#nova-ann-media img, #nova-ann-media video{
  width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width:600px){
  #nova-announce.has-media{ gap:8px; padding:8px 38px; font-size:13px; }
  #nova-ann-media{ width:60px; height:40px; }
  #nova-announce #nova-ann-cta{ padding:2px 9px; font-size:12px; }
}

/* ===== أماكن العرض اللطيفة (لا تُزيح المحتوى ولا تحجبه) ===== */
/* زر الإجراء — مشترك بين كل الأماكن */
.ann-cta{ display:inline-block; background:rgba(255,255,255,.22); color:#fff; padding:3px 12px;
  border-radius:20px; font-size:13px; text-decoration:none; white-space:nowrap; margin-inline-start:10px; }
.ann-cta:hover{ background:rgba(255,255,255,.35); }
/* الوسائط: صندوق ثابت + cover = أي مقاس يملأ بلا تشويه */
.nova-ann-corner .ann-media, .nova-ann-inline .ann-media, .nova-ann-frow .ann-media{
  overflow:hidden; background:rgba(0,0,0,.18); flex:0 0 auto; }
.nova-ann-corner .ann-media img, .nova-ann-corner .ann-media video,
.nova-ann-inline .ann-media img, .nova-ann-inline .ann-media video,
.nova-ann-frow .ann-media img, .nova-ann-frow .ann-media video{
  width:100%; height:100%; object-fit:cover; display:block; }

/* 2) بطاقة ركنية — تنزلق بعد 15 ثانية فوق المحتوى بلا إزاحته */
.nova-ann-corner{ position:fixed; inset-block-end:20px; inset-inline-start:20px; z-index:60;
  width:min(310px,calc(100vw - 40px)); color:#fff; border-radius:16px; padding:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.4); display:flex; flex-direction:column; gap:10px;
  transform:translateY(20px); opacity:0; transition:transform .3s, opacity .3s; }
.nova-ann-corner.in{ transform:translateY(0); opacity:1; }
.nova-ann-corner .ann-media{ width:100%; height:110px; border-radius:10px; }
.nova-ann-corner .ann-txt{ font-size:13.5px; font-weight:600; line-height:1.6; }
.nova-ann-corner .ann-cta{ margin:8px 0 0; }
.nova-ann-corner .ann-x{ position:absolute; inset-inline-end:8px; inset-block-start:8px;
  background:rgba(0,0,0,.3); border:0; color:#fff; width:24px; height:24px; border-radius:50%; cursor:pointer; font-size:12px; }
@media (max-width:600px){ .nova-ann-corner{ inset-block-end:76px; inset-inline-start:12px; } }

/* 3) بطاقة داخل شبكة الأدوات — تبدو كمحتوى طبيعي */
.nova-ann-inline{ border-radius:18px; padding:18px; color:#fff; display:flex; flex-direction:column;
  gap:12px; justify-content:center; min-height:150px; }
.nova-ann-inline .ann-media{ width:100%; height:80px; border-radius:10px; }
.nova-ann-inline .ann-txt{ font-size:14px; font-weight:700; line-height:1.6; }
.nova-ann-inline .ann-cta{ margin:6px 0 0; align-self:flex-start; }

/* 4) شريط الفوتر — سلبي تماماً */
.nova-ann-footer{ display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.nova-ann-frow{ display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:12px; color:#fff; }
.nova-ann-frow .ann-media{ width:64px; height:40px; border-radius:8px; }
.nova-ann-frow .ann-body{ flex:1; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.nova-ann-frow .ann-txt{ font-size:13px; font-weight:600; }
#nova-announce button{ position:absolute; inset-inline-end:12px; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.25); border:0; color:#fff; width:24px; height:24px; border-radius:50%; cursor:pointer; }


/* ============================================================
   ===== التجاوب الشامل: حاسوب · لوحي · هاتف =====
   المبدأ: السيولة أولاً (clamp / min / auto-fit) ثم نقاط كسر
   للتغييرات البنيوية فقط — لا قائمة مقاسات ثابتة لكل جهاز.
   ============================================================ */

/* 1) 🔴 فيض الشبكة على الهواتف الصغيرة (iPhone SE 320px):
      minmax(290px,1fr) لا ينكمش تحت 290px، والمتاح 280px → فيض 10px.
      min(290px,100%) يسمح للعمود بالانكماش لعرض الحاوية. */
.grid{ grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr)); }
.pricing-grid{ grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); }

/* 2) حشوة الأقسام تتنفّس مع الشاشة بدل 20px ثابتة */
.section{ padding-inline:clamp(14px,4vw,20px); padding-block:clamp(36px,6vw,60px); }
.nav{ padding-inline:clamp(12px,3vw,20px); gap:clamp(10px,2vw,24px); }
.hero{ padding-inline:clamp(14px,4vw,20px); }
.hero p{ font-size:clamp(15px,2.2vw,18px); }

/* 3) الإحصائيات: فجوة سائلة + عمودان على الهاتف بدل تكدّس عشوائي */
.stats{ gap:clamp(18px,5vw,50px); padding-block:clamp(28px,5vw,44px); }
.stat b{ font-size:clamp(26px,4vw,34px); }

/* 4) النوافذ: الحشوة تتقلّص، ولا تتجاوز الشاشة أبداً */
.modal{ padding:clamp(20px,4vw,34px); max-height:min(90vh,900px); }
.modal-overlay{ padding:clamp(10px,3vw,20px); }

/* 5) 👆 أهداف اللمس ≥44px (توصية WCAG) — الأزرار الصغيرة صعبة على الإصبع */
@media (pointer:coarse){
  .btn, .qf-btn, .cat-btn, .menu-toggle, .auth-sbtn, .studio-tab{ min-height:44px; }
  .fav-btn{ min-width:40px; min-height:40px; }
}

/* ===== 6) الأجهزة اللوحية (لم تكن مغطّاة إطلاقاً) ===== */
@media (min-width:601px) and (max-width:1024px){
  .how-grid{ gap:12px; }
  .how-card{ min-width:min(230px,100%); }
  .footer-grid{ grid-template-columns:repeat(2,1fr); gap:24px; }
  .create-box{ max-width:100%; }
}

/* ===== 7) الهواتف ===== */
@media (max-width:600px){
  .logo{ font-size:clamp(18px,5.5vw,22px); }
  .nav{ gap:10px; padding:12px 14px; }
  /* الأزرار النصية في الشريط تزحم الهاتف وتسبّب تمريراً أفقياً — نُبقي الرصيد
     وزر الدخول (كأيقونة) والقائمة فقط. «ابدأ مجاناً» مكرّرة في البطل والقائمة. */
  .nav-actions .btn-ghost{ display:none; }
  .nav-actions .btn-primary{ display:none; }
  .nav-actions{ gap:6px; }
  .credits{ font-size:12px; padding:5px 9px; }
  /* زر الحساب/الدخول أيقونة مدمجة على الهاتف (النص يزحم) */
  .nav-actions #authChip{ width:40px; padding:0; font-size:0; }
  .nav-actions #authChip::before{ content:"👤"; font-size:18px; }
  .nav-actions #authChip.member-chip::before{ content:"⭐"; }

  .stats{ display:grid; grid-template-columns:1fr 1fr; }
  .studio-tabs{ gap:6px; }
  .studio-tab{ font-size:13px; padding:8px 12px; }
  .create-box{ padding:16px; border-radius:18px; }
  .create-box textarea{ min-height:92px; font-size:16px; }  /* 16px يمنع تكبير iOS التلقائي */
  .create-controls{ flex-direction:column; align-items:stretch; gap:10px; }
  .router-hint{ text-align:center; font-size:12px; }

  .grid{ gap:12px; }
  .how-arrow{ display:none; }          /* الأسهم بلا معنى عمودياً */
  .price-card{ padding:24px 18px; }
  .modal{ border-radius:18px; }
  .section-title{ margin-bottom:8px; }
  /* الجداول العريضة (لوحة الأدمن) تنزلق أفقياً بدل كسر الصفحة */
  table{ min-width:max-content; }
}

/* ===== 8) الهواتف الصغيرة جداً (≤360px) ===== */
@media (max-width:360px){
  .stats{ grid-template-columns:1fr; }
  .modal{ padding:16px; }
  .btn{ font-size:13px; }
}

/* ===== 9) الشاشات العريضة: لا يتمدّد النص بلا حدّ ===== */
@media (min-width:1600px){
  .section, .nav{ max-width:1440px; }
}

/* 10) الوضع الأفقي على الهاتف: الارتفاع شحيح */
@media (max-height:500px) and (orientation:landscape){
  .hero{ padding-block:28px; }
  .modal{ max-height:96vh; padding:16px; }
}

/* 11) لا يفيض شيء أفقياً مهما طال المحتوى */
img, video, canvas, svg{ max-width:100%; height:auto; }
pre, code{ overflow-x:auto; max-width:100%; }
.tool-card, .price-card, .how-card, .bot-card{ min-width:0; }   /* يسمح للنص بالانكماش داخل الشبكة */

.badge-soon{position:absolute;top:10px;left:10px;background:rgba(120,120,140,.92);color:#fff;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;backdrop-filter:blur(4px);z-index:2}