/* ════════════════════════════════════════════════════════════════════════════
   telegram-link.css — أنماط ربط حساب تلجرام + استعادة كلمة السر
   ────────────────────────────────────────────────────────────────────────────
   ⚠️ ملف مستقل قابل للحذف بالكامل بدون أي أثر على بقية المنصة.
       لإلغاء النظام: احذف هذا الملف + telegram-link.js + telegram-password-reset.js
       + سطر <link> في index.html + السطر الواحد في showApp() داخل auth.js.

   ⚠️ كل الأرقام في الـ UI إنجليزية ASCII. الخط: يرث من body (Tajawal).
   ⚠️ يدعم 4 ثيمات: dark (افتراضي) + light + pink + blue تلقائياً عبر
       استخدام CSS variables من main.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── متغيرات خاصة بالمكون (تعتمد على متغيرات main.css) ─── */
:root {
  --tg-blue: #229ED9;
  --tg-blue-deep: #0088CC;
  --tg-gold: #fbbf24;
  --tg-gold-warm: #d97706;
  --tg-indigo: #4f46e5;
}

/* ════════════════════════════════════════════════════════════════════════════
   (1) Banner علوي لطيف (أول 7 أيام)
   ════════════════════════════════════════════════════════════════════════════ */

.tg-link-banner {
  position: relative;
  background: linear-gradient(135deg, rgba(34,158,217,0.12), rgba(79,70,229,0.08));
  border: 1px solid rgba(34,158,217,0.25);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  animation: tgBannerSlideDown 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes tgBannerSlideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

.tg-link-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 50%, rgba(34,158,217,0.15), transparent 60%);
  pointer-events: none;
}

.tg-link-banner-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tg-blue), var(--tg-blue-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(34,158,217,0.35);
  position: relative;
  z-index: 1;
}
.tg-link-banner-icon i { color: #fff; font-size: 18px; }

.tg-link-banner-text {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.tg-link-banner-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.tg-link-banner-sub {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.tg-link-banner-btn {
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--tg-blue), var(--tg-blue-deep));
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s;
  box-shadow: 0 4px 14px rgba(34,158,217,0.3);
  position: relative;
  z-index: 1;
}
.tg-link-banner-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(34,158,217,0.45); }

.tg-link-banner-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.tg-link-banner-close:hover { color: var(--text-primary); }


/* ════════════════════════════════════════════════════════════════════════════
   (2) Modal الإجباري — تصميم سينمائي
   ════════════════════════════════════════════════════════════════════════════ */

.tg-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 16px;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tg-modal-overlay.active { display: flex; opacity: 1; }

.tg-modal {
  background: var(--bg-card);
  border-radius: 24px;
  width: 100%;
  max-width: 440px;
  margin: auto;
  padding: 28px 22px 22px;
  position: relative;
  border: 1px solid var(--border-color);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 100px rgba(34,158,217,0.12);
  overflow: hidden;
  transform: scale(0.95);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tg-modal-overlay.active .tg-modal { transform: scale(1); }

/* خلفية gradient لطيفة داخل الـ modal */
.tg-modal::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(34,158,217,0.10), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(79,70,229,0.08), transparent 55%);
  pointer-events: none;
  z-index: 0;
}

.tg-modal > * { position: relative; z-index: 1; }

/* جسيمات متحركة (decorative) */
.tg-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,158,217,0.5), transparent 70%);
  animation: tgParticleFloat 14s infinite ease-in-out;
  pointer-events: none;
  z-index: 0;
}
.tg-particle.p1 { width: 8px; height: 8px; top: 8%; left: 12%; animation-delay: 0s; }
.tg-particle.p2 { width: 12px; height: 12px; top: 18%; right: 14%; animation-delay: -4s; background: radial-gradient(circle, rgba(251,191,36,0.4), transparent 70%); }
.tg-particle.p3 { width: 6px; height: 6px; bottom: 25%; left: 8%; animation-delay: -8s; }
.tg-particle.p4 { width: 10px; height: 10px; bottom: 12%; right: 10%; animation-delay: -12s; background: radial-gradient(circle, rgba(79,70,229,0.4), transparent 70%); }

@keyframes tgParticleFloat {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
  50% { transform: translate(20px, -30px) scale(1.3); opacity: 0.8; }
}

/* ─── Logo التلجرام في الأعلى ─── */
.tg-logo-wrap {
  width: 78px;
  height: 78px;
  margin: 4px auto 14px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: tgGentleFloat 4s ease-in-out infinite;
}
@keyframes tgGentleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.tg-logo-glow {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34,158,217,0.45), transparent 65%);
  animation: tgPulseGlow 3s ease-in-out infinite;
}
@keyframes tgPulseGlow {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.18); opacity: 1; }
}

.tg-logo-circle {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--tg-blue), var(--tg-blue-deep));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 8px 28px rgba(34,158,217,0.5);
}
.tg-logo-circle svg { width: 32px; height: 32px; fill: #fff; }

/* ─── العنوان ─── */
.tg-modal-title {
  font-weight: 700;
  font-size: 1.45rem;
  text-align: center;
  color: var(--text-primary);
  margin-bottom: 6px;
  letter-spacing: 0.2px;
}
.tg-modal-subtitle {
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.88rem;
  margin-bottom: 20px;
  line-height: 1.55;
}

/* ─── قسم عرض الكود ─── */
.tg-code-section {
  background: linear-gradient(135deg, rgba(34,158,217,0.10), rgba(79,70,229,0.06));
  border: 1px solid rgba(34,158,217,0.25);
  border-radius: 16px;
  padding: 18px 14px;
  margin-bottom: 16px;
  position: relative;
}
.tg-code-section::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 22%;
  right: 22%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--tg-blue), transparent);
}

.tg-code-label {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-bottom: 12px;
  letter-spacing: 0.6px;
}

.tg-code-display {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
  direction: ltr;
}

.tg-code-digit {
  width: 38px;
  height: 48px;
  background: var(--bg-input);
  border: 1px solid rgba(34,158,217,0.30);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', 'Consolas', monospace;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--text-primary);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  position: relative;
}
.tg-code-digit::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 24%;
  right: 24%;
  height: 2px;
  background: var(--tg-gold);
  border-radius: 1px;
  opacity: 0.55;
}

.tg-copy-btn {
  width: 100%;
  padding: 9px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s;
}
.tg-copy-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
}
.tg-copy-btn.copied {
  background: rgba(81,207,102,0.15);
  color: var(--success);
  border-color: rgba(81,207,102,0.4);
}

/* ─── خطوات إرشادية ─── */
.tg-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 0 4px;
  direction: ltr;
}

.tg-step {
  flex: 1;
  text-align: center;
}
.tg-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(34,158,217,0.18), rgba(79,70,229,0.18));
  border: 1px solid rgba(34,158,217,0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 5px;
  color: var(--tg-blue);
  font-weight: 700;
  font-size: 0.9rem;
  font-family: 'Courier New', 'Consolas', monospace;
  font-feature-settings: "tnum";
}
.tg-step-text {
  font-size: 0.7rem;
  color: var(--text-secondary);
  line-height: 1.25;
  direction: rtl;
}
.tg-step-connector {
  flex: 0 0 auto;
  width: 14px;
  height: 1px;
  background: linear-gradient(to right, rgba(34,158,217,0.2), rgba(34,158,217,0.6), rgba(34,158,217,0.2));
  margin: 0 -1px;
  margin-bottom: 22px;
}

/* ─── الزر الكبير الرئيسي ─── */
.tg-open-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--tg-blue-deep) 0%, var(--tg-blue) 50%, var(--tg-blue-deep) 100%);
  background-size: 200% 100%;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  box-shadow: 0 8px 24px rgba(34,158,217,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
  animation: tgShimmer 3s ease-in-out infinite;
  margin-bottom: 14px;
  transition: transform 0.2s, box-shadow 0.2s;
}
@keyframes tgShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.tg-open-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(34,158,217,0.5);
}

/* 🔵 [TG_LINK STATE 2026-05-23] حالة معطّلة قبل وصول الرمز —
   تمنع فتح محادثة فاضية، وتُبلغ المستخدم بصرياً أن الرمز قيد التحضير. */
.tg-open-btn[disabled],
.tg-open-btn.is-disabled,
.tg-copy-btn[disabled],
.tg-copy-btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.35);
  animation: none !important;
  box-shadow: none !important;
  transform: none !important;
}
.tg-open-btn[disabled]:hover,
.tg-open-btn.is-disabled:hover {
  transform: none;
  box-shadow: none;
}

/* ─── Timer ─── */
.tg-timer-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}
.tg-timer-ring {
  width: 36px;
  height: 36px;
  position: relative;
}
.tg-timer-ring svg { transform: rotate(-90deg); }
.tg-timer-ring circle { fill: none; stroke-width: 3; }
.tg-timer-bg { stroke: rgba(255,255,255,0.08); }
.tg-timer-fill {
  stroke: var(--tg-blue);
  stroke-dasharray: 88;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.5s linear, stroke 0.3s;
}
.tg-timer-fill.warning { stroke: var(--warning); }
.tg-timer-fill.danger { stroke: var(--danger); }

.tg-timer-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-primary);
  font-family: 'Courier New', 'Consolas', monospace;
  font-feature-settings: "tnum";
  direction: ltr;
}
.tg-timer-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
}

/* ─── Status bar ─── */
.tg-status-bar {
  margin-top: 14px;
  padding-top: 14px;
  text-align: center;
  border-top: 1px solid var(--border-color);
  font-size: 0.78rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 32px;
}
.tg-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tg-gold);
  animation: tgStatusPulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes tgStatusPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.6; }
}
.tg-status-dot.success { background: var(--success); animation: none; }
.tg-status-dot.danger { background: var(--danger); animation: none; }

/* ─── أزرار ثانوية أسفل الـ modal ─── */
.tg-secondary-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}
.tg-secondary-actions button {
  flex: 1;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.2s;
}
.tg-secondary-actions button:hover {
  border-color: var(--primary);
  color: var(--text-primary);
}


/* ════════════════════════════════════════════════════════════════════════════
   (3) Modal النجاح
   ════════════════════════════════════════════════════════════════════════════ */

.tg-success-state .tg-modal {
  text-align: center;
}

.tg-success-icon-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 18px auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tg-success-rings {
  position: absolute;
  inset: -16px;
}
.tg-success-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(81,207,102,0.35);
  animation: tgSuccessExpand 2s ease-out infinite;
}
.tg-success-ring:nth-child(2) { animation-delay: 0.5s; }
.tg-success-ring:nth-child(3) { animation-delay: 1s; }
@keyframes tgSuccessExpand {
  0% { transform: scale(0.75); opacity: 1; border-width: 3px; }
  100% { transform: scale(1.7); opacity: 0; border-width: 1px; }
}

.tg-success-check {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, #22c55e, #15803d);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 40px rgba(34,197,94,0.5), 0 0 80px rgba(34,197,94,0.2);
  animation: tgBounceIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes tgBounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
.tg-success-check svg {
  width: 50px;
  height: 50px;
  fill: none;
  stroke: #fff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tg-success-title {
  font-weight: 700;
  font-size: 1.65rem;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.tg-success-sub {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 18px;
  line-height: 1.55;
}

.tg-username-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: linear-gradient(135deg, rgba(34,158,217,0.18), rgba(79,70,229,0.16));
  border: 1px solid rgba(34,158,217,0.30);
  border-radius: 22px;
  color: var(--tg-blue);
  font-weight: 700;
  font-size: 0.85rem;
  margin: 0 auto 22px;
  direction: ltr;
}
.tg-username-pill svg { width: 14px; height: 14px; fill: currentColor; }

.tg-benefits-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
  text-align: right;
}
.tg-benefit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  opacity: 0;
  animation: tgSlideIn 0.4s ease-out forwards;
}
.tg-benefit-item:nth-child(1) { animation-delay: 0.5s; }
.tg-benefit-item:nth-child(2) { animation-delay: 0.65s; }
.tg-benefit-item:nth-child(3) { animation-delay: 0.8s; }
.tg-benefit-item:nth-child(4) { animation-delay: 0.95s; }
@keyframes tgSlideIn {
  from { opacity: 0; transform: translateX(15px); }
  to { opacity: 1; transform: translateX(0); }
}

.tg-benefit-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(251,191,36,0.16), rgba(217,119,6,0.14));
  border: 1px solid rgba(251,191,36,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tg-gold);
  flex-shrink: 0;
}
.tg-benefit-icon i { font-size: 0.95rem; }
.tg-benefit-text {
  font-size: 0.82rem;
  color: var(--text-primary);
  line-height: 1.4;
}


/* ════════════════════════════════════════════════════════════════════════════
   (4) Modal استعادة كلمة السر (forgot password)
   ════════════════════════════════════════════════════════════════════════════ */

.tg-recovery-icon-wrap {
  width: 80px;
  height: 80px;
  margin: 8px auto 14px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tg-recovery-icon-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251,191,36,0.30), transparent 65%);
  animation: tgPulseGlow 2.5s ease-in-out infinite;
}
.tg-recovery-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tg-gold), var(--tg-gold-warm));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 8px 26px rgba(251,191,36,0.4);
}
.tg-recovery-icon svg { width: 32px; height: 32px; fill: #1a1f35; }

.tg-pwd-result-banner {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(34,158,217,0.08);
  border: 1px solid rgba(34,158,217,0.25);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 0.85rem;
  line-height: 1.55;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.tg-pwd-result-banner.error {
  background: rgba(255,107,107,0.08);
  border-color: rgba(255,107,107,0.3);
}
.tg-pwd-result-banner strong { color: var(--tg-blue); }


/* ════════════════════════════════════════════════════════════════════════════
   (5) شاشة تعيين كلمة سر جديدة (بعد فتح الرابط من تلجرام)
   ════════════════════════════════════════════════════════════════════════════ */

.tg-reset-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.tg-reset-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border-radius: 20px;
  border: 1px solid var(--border-color);
  padding: 28px 22px;
  box-shadow: var(--shadow-lg);
}

.tg-reset-card .tg-recovery-icon-wrap { margin-top: 0; }

.tg-strength-meter {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.tg-strength-bar {
  flex: 1;
  height: 4px;
  background: var(--border-color);
  border-radius: 2px;
  transition: background 0.3s;
}
.tg-strength-bar.active-1 { background: var(--danger); }
.tg-strength-bar.active-2 { background: var(--warning); }
.tg-strength-bar.active-3,
.tg-strength-bar.active-4 { background: var(--success); }

.tg-strength-text {
  font-size: 0.78rem;
  margin-top: 4px;
  color: var(--text-secondary);
}


/* ════════════════════════════════════════════════════════════════════════════
   (6) ضمان الأرقام الإنجليزية (Latin digits) داخل المكون
   ════════════════════════════════════════════════════════════════════════════
   هذا قسم احتياطي يضمن إن المتصفحات اللي قد تستبدل الأرقام (في بعض إعدادات
   اللغة العربية) لا تؤثر على الكود/التايمر/الـ OTP.
   ════════════════════════════════════════════════════════════════════════════ */

.tg-code-digit,
.tg-code-display,
.tg-timer-text,
.tg-step-circle,
.tg-username-pill {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}


/* ════════════════════════════════════════════════════════════════════════════
   (7) Responsive — موبايل
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 380px) {
  .tg-code-digit { width: 34px; height: 44px; font-size: 1.4rem; }
  .tg-modal-title { font-size: 1.25rem; }
  .tg-modal { padding: 22px 16px 18px; }
  .tg-link-banner { flex-wrap: wrap; }
  .tg-link-banner-btn { width: 100%; }
}


/* ════════════════════════════════════════════════════════════════════════════
   (8) تخصيصات لكل ثيم (تجاوزات بسيطة عند الحاجة)
   ════════════════════════════════════════════════════════════════════════════ */

/* Light theme — الـ glow ناعم أكثر */
:root[data-theme="light"] .tg-modal {
  box-shadow: 0 20px 60px rgba(15,23,42,0.18), 0 0 60px rgba(34,158,217,0.08);
}
:root[data-theme="light"] .tg-code-section {
  background: linear-gradient(135deg, rgba(34,158,217,0.06), rgba(79,70,229,0.04));
}
:root[data-theme="light"] .tg-particle,
:root[data-theme="light"] .tg-success-rings { opacity: 0.7; }

/* Pink theme — استبدال gradient الأزرق بوردي حيث ينسجم */
:root[data-theme="pink"] .tg-open-btn {
  background: linear-gradient(135deg, #c2185b 0%, #e91e63 50%, #c2185b 100%);
  background-size: 200% 100%;
  box-shadow: 0 8px 24px rgba(233,30,99,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}
:root[data-theme="pink"] .tg-open-btn:hover {
  box-shadow: 0 12px 32px rgba(233,30,99,0.5);
}

/* Purple theme — استبدال gradient الأزرق بالبنفسجي حيث ينسجم */
:root[data-theme="purple"] .tg-open-btn {
  background: linear-gradient(135deg, #9333ea 0%, #a855f7 50%, #9333ea 100%);
  background-size: 200% 100%;
  box-shadow: 0 8px 24px rgba(168,85,247,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}
:root[data-theme="purple"] .tg-open-btn:hover {
  box-shadow: 0 12px 32px rgba(168,85,247,0.5);
}