/* ═══════════════════════════════════════════════════════════
   SpeedTest Pro — Custom Styles
   كل الأنماط المخصصة التي لا تغطيها Tailwind
   ═══════════════════════════════════════════════════════════ */

/* ─── متغيرات CSS ─────────────────────────────────────── */
:root {
  --cyan    : #06b6d4;
  --blue    : #3b82f6;
  --indigo  : #6366f1;
  --green   : #10b981;
  --amber   : #f59e0b;
  --purple  : #a855f7;
  --red     : #ef4444;

  --bg-base : #070b14;
  --bg-card : rgba(255,255,255,0.03);
  --border  : rgba(255,255,255,0.07);
}

/* Light mode overrides */
html:not(.dark) {
  --bg-base : #f0f4ff;
  --bg-card : rgba(255,255,255,0.80);
  --border  : rgba(0,0,0,0.08);
}
html:not(.dark) body {
  background: var(--bg-base);
  color: #1e293b;
}
html:not(.dark) .glass-card {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow: 0 4px 32px rgba(0,0,0,0.08);
}
html:not(.dark) #meterValue {
  background: linear-gradient(to bottom,#1e293b,#475569);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html:not(.dark) .metric-card {
  background: rgba(255,255,255,0.9);
  border-color: rgba(0,0,0,0.06);
}
html:not(.dark) #bgCanvas { opacity: 0.3; }

/* ─── الخطوط ──────────────────────────────────────────── */
body {
  font-family: 'Cairo', 'Inter', sans-serif;
  background: var(--bg-base);
}
html[lang="en"] body,
body.ltr {
  font-family: 'Inter', 'Cairo', sans-serif;
  direction: ltr;
}

/* ─── كرت زجاجي glassmorphism ─────────────────────────── */
.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 24px 48px rgba(0,0,0,0.40);
}

/* ─── كروت المقاييس ───────────────────────────────────── */
.metric-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.metric-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4),
              0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent) inset;
}
/* الخط الملون أعلى كل كارت */
.metric-top-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.7;
  border-radius: 9999px;
}

/* ─── انتقال القوس ─────────────────────────────────────── */
.arc-transition {
  transition: stroke-dasharray .25s ease;
}

/* ─── الإبرة ───────────────────────────────────────────── */
.needle-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: bottom center;
  transform: translateX(-50%) translateY(-100%) rotate(0deg);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}

/* ─── حلقات النبض ──────────────────────────────────────── */
.pulse-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  opacity: 0;
  animation: pulseRing 2.4s ease-out infinite;
}
.pulse-ring-1 { width: 140px; height: 140px; animation-delay: 0s;   }
.pulse-ring-2 { width: 170px; height: 170px; animation-delay: 0.6s; }
.pulse-ring-3 { width: 200px; height: 200px; animation-delay: 1.2s; }

@keyframes pulseRing {
  0%   { transform: scale(.8); opacity: .7; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* ─── زر البدء: توهج متحرك أثناء الاختبار ─────────────── */
.start-btn.testing {
  animation: btnGlow 1.8s ease-in-out infinite;
}
@keyframes btnGlow {
  0%,100% { box-shadow: 0 0 40px rgba(6,182,212,.4); }
  50%      { box-shadow: 0 0 80px rgba(6,182,212,.9), 0 0 120px rgba(99,102,241,.4); }
}

/* ─── موجة التشغيل ─────────────────────────────────────── */
.wave-bar {
  display: inline-block;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(to top, var(--cyan), var(--indigo));
  animation: waveBar 1s ease-in-out infinite alternate;
  transform-origin: bottom;
}
@keyframes waveBar {
  0%   { height: 6px;  }
  100% { height: 44px; }
}

/* ─── نقاط التحميل ─────────────────────────────────────── */
.loading-dots::after {
  content: '';
  display: inline-block;
  animation: dots 1.4s steps(4, end) infinite;
}
@keyframes dots {
  0%  { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}

/* ─── أنيميشن ظهور ─────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fadein {
  animation: fadeInUp .6s ease both;
}

/* ─── شريط التمرير المخصص ──────────────────────────────── */
.custom-scroll::-webkit-scrollbar        { width: 4px; }
.custom-scroll::-webkit-scrollbar-track  { background: rgba(255,255,255,.03); border-radius: 2px; }
.custom-scroll::-webkit-scrollbar-thumb  { background: rgba(6,182,212,.3); border-radius: 2px; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background: rgba(6,182,212,.6); }

/* ─── بطاقة الجودة: شارات ───────────────────────────────── */
.quality-badge {
  display: inline-block;
}
.quality-excellent {
  background: rgba(16,185,129,.15);
  color: #10b981;
  border: 1px solid rgba(16,185,129,.3);
}
.quality-good {
  background: rgba(6,182,212,.15);
  color: #06b6d4;
  border: 1px solid rgba(6,182,212,.3);
}
.quality-fair {
  background: rgba(245,158,11,.15);
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,.3);
}
.quality-poor {
  background: rgba(239,68,68,.15);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,.3);
}

/* حالات الاستخدام tags */
.use-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: #94a3b8;
  transition: background .2s;
}
.use-tag:hover { background: rgba(255,255,255,.09); }

/* ─── بطاقة المشاركة ───────────────────────────────────── */
.share-preview {
  background: linear-gradient(135deg,#0d1225 0%,#111827 60%,#0a0e1a 100%);
  border: 1px solid rgba(6,182,212,.25);
  position: relative;
}
.share-shine {
  position: absolute;
  top: -60%; left: -60%;
  width: 220%; height: 220%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg,
    rgba(6,182,212,.04) 60deg,
    transparent 120deg
  );
  animation: rotateSlow 12s linear infinite;
  pointer-events: none;
}
@keyframes rotateSlow {
  to { transform: rotate(360deg); }
}

/* ─── عنصر السجل ────────────────────────────────────────── */
.history-row {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 12px 14px;
  transition: background .2s, border-color .2s, transform .2s;
  animation: fadeInUp .35s ease both;
}
.history-row:hover {
  background: rgba(255,255,255,.045);
  border-color: rgba(6,182,212,.25);
  transform: translateX(-3px);
}
html[lang="en"] .history-row:hover,
body.ltr .history-row:hover {
  transform: translateX(3px);
}

/* ─── تعليمات تدريج العداد ──────────────────────────────── */
/* نقاط التدريج تُولَّد بـ JS على SVG، لا تحتاج CSS إضافي */

/* ─── Toast ─────────────────────────────────────────────── */
#toast.show {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* ─── canvas الخلفية ────────────────────────────────────── */
#bgCanvas { opacity: .6; }

/* ═══════════════════════════════════════════════════════════
   قسم تشخيص الشبكة — Network Diagnostics
   ═══════════════════════════════════════════════════════════ */

/* صفوف المعلومات */
.net-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  gap: 12px;
}
.net-info-label {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  flex-shrink: 0;
}
.net-info-value {
  font-size: 13px;
  color: #e2e8f0;
  font-weight: 600;
  text-align: end;
  word-break: break-word;
}
html:not(.dark) .net-info-value { color: #1e293b; }
html:not(.dark) .net-info-row   { border-color: rgba(0,0,0,0.06); }

/* ─── Leaflet Dark Theme Override ────────────────────────── */
#leafletMap {
  background: #0d1225;
  z-index: 0;
}

/* Tiles شبه شفافة مظلمة */
#leafletMap .leaflet-tile {
  filter: brightness(0.7) saturate(0.6) hue-rotate(190deg);
}

/* زر بوبأب الخريطة */
.leaflet-popup-content-wrapper {
  background: #111827 !important;
  border: 1px solid rgba(6,182,212,0.3) !important;
  border-radius: 14px !important;
  color: #e2e8f0 !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6) !important;
  padding: 0 !important;
}
.leaflet-popup-content {
  margin: 0 !important;
  padding: 16px !important;
  min-width: 200px;
}
.leaflet-popup-tip {
  background: #111827 !important;
  border: 1px solid rgba(6,182,212,0.3) !important;
}
.leaflet-popup-close-button {
  color: #64748b !important;
  font-size: 18px !important;
  top: 8px !important;
  right: 8px !important;
}

/* إخفاء شريط Leaflet الافتراضي */
.leaflet-control-attribution { display: none !important; }

/* زر zoom مخصص */
.leaflet-control-zoom {
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 10px !important;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  background: rgba(17,24,39,0.95) !important;
  color: #94a3b8 !important;
  border-color: rgba(255,255,255,0.08) !important;
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  font-size: 16px !important;
  transition: color .2s, background .2s !important;
}
.leaflet-control-zoom-in:hover,
.leaflet-control-zoom-out:hover {
  background: rgba(6,182,212,0.15) !important;
  color: #06b6d4 !important;
}

/* مؤشر الموقع المخصص */
.custom-marker-pulse {
  position: relative;
  width: 20px;
  height: 20px;
}
.custom-marker-pulse::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(6,182,212,0.6);
  animation: markerPulse 2s ease-out infinite;
}
.custom-marker-pulse::after {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px solid rgba(6,182,212,0.3);
  animation: markerPulse 2s ease-out infinite .4s;
}
@keyframes markerPulse {
  0%   { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Spinner تحميل الخريطة */
.map-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(6,182,212,0.15);
  border-top-color: #06b6d4;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════
   قسم تقييم السرعة — Speed Rating
   ═══════════════════════════════════════════════════════════ */

/* بطاقة حالة الاستخدام */
.use-case-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.025);
  text-align: center;
  transition: all .25s ease;
  position: relative;
  overflow: hidden;
}
.use-case-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--uc-color, #06b6d4);
  opacity: 0;
  transition: opacity .3s;
}
.use-case-card.enabled {
  border-color: color-mix(in srgb, var(--uc-color) 30%, transparent);
  background: color-mix(in srgb, var(--uc-color) 6%, transparent);
}
.use-case-card.enabled::before { opacity: 0.8; }
.use-case-card.enabled:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3),
              0 0 0 1px color-mix(in srgb, var(--uc-color) 25%, transparent) inset;
}
.use-case-card.disabled {
  opacity: 0.4;
  filter: grayscale(0.6);
}
.use-case-icon { font-size: 1.75rem; line-height: 1; }
.use-case-name {
  font-size: 11px;
  font-weight: 700;
  color: #e2e8f0;
  line-height: 1.3;
}
.use-case-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid;
}
.uc-ok   { background: rgba(16,185,129,.12); color:#10b981; border-color:rgba(16,185,129,.3); }
.uc-no   { background: rgba(239,68,68,.12);  color:#ef4444; border-color:rgba(239,68,68,.3); }
.uc-warn { background: rgba(245,158,11,.12); color:#f59e0b; border-color:rgba(245,158,11,.3); }

html:not(.dark) .use-case-card { background: rgba(255,255,255,0.9); }

/* شريط التقييم */
#ratingBar {
  background: linear-gradient(90deg,#ef4444,#f59e0b 40%,#10b981 75%,#06b6d4);
}

/* ═══════════════════════════════════════════════════════════
   سجل الاختبارات الكامل — Full History Table
   ═══════════════════════════════════════════════════════════ */

.history-table-row {
  display: grid;
  grid-template-columns: 1fr repeat(4,auto);
  gap: 12px;
  align-items: center;
  padding: 14px 20px;
  transition: background .2s;
  animation: fadeInUp .3s ease both;
}
@media (min-width:640px) {
  .history-table-row { grid-template-columns: 2fr repeat(4,1fr); }
}
.history-table-row:hover { background: rgba(255,255,255,0.025); }

/* badge التقييم في صف السجل */
.tier-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid;
}
.tier-excellent { background:rgba(6,182,212,.12);  color:#06b6d4; border-color:rgba(6,182,212,.3); }
.tier-good      { background:rgba(16,185,129,.12); color:#10b981; border-color:rgba(16,185,129,.3);}
.tier-fair      { background:rgba(245,158,11,.12); color:#f59e0b; border-color:rgba(245,158,11,.3);}
.tier-poor      { background:rgba(239,68,68,.12);  color:#ef4444; border-color:rgba(239,68,68,.3); }

/* ═══════════════════════════════════════════════════════════
   قسم VPN — VPN Cards
   ═══════════════════════════════════════════════════════════ */

.vpn-card { transition: transform .25s ease, box-shadow .25s ease; }
.vpn-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.45);
}

.free-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(16,185,129,.12);
  color: #10b981;
  border: 1px solid rgba(16,185,129,.28);
  white-space: nowrap;
  flex-shrink: 0;
}

.feature-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #94a3b8;
}

.vpn-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all .2s ease;
}
.vpn-btn:hover { transform: translateX(-2px); }
html[lang="en"] .vpn-btn:hover,
body.ltr .vpn-btn:hover { transform: translateX(2px); }

html:not(.dark) .feature-tag {
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.08);
  color: #475569;
}
html:not(.dark) .vpn-card { background: white; }

/* ─── Responsive tweaks ─────────────────────────────────── */
@media (max-width: 640px) {
  .metric-card { padding: 14px 10px; }
  #leafletMap  { height: 280px !important; }
  .net-info-value { font-size: 12px; }
}
@media (max-width: 400px) {
  #meterValue { font-size: 3.5rem; }
}

/* ─── ألوان نص التقييم — tier-text ─────────────────────── */
.tier-text-excellent { color: #06b6d4; }
.tier-text-good      { color: #10b981; }
.tier-text-fair      { color: #f59e0b; }
.tier-text-poor      { color: #ef4444; }

/* ─── الجدول الكامل: حذف عمود الموبايل المخفي بصواب ──── */
.history-table-row {
  /* تحديث: عمود إضافي للـ mobile fallback */
  grid-template-columns: 1fr;
}
@media (min-width:640px) {
  .history-table-row { grid-template-columns: 2fr repeat(4,1fr) !important; }
}

/* ─── Phase dots active/done states ─────────────────────── */
.phase-item.active .phase-dot {
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}
.phase-item.active span:last-child { color: var(--cyan); }

.phase-item.done .phase-dot {
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}
.phase-item.done span:last-child { color: #10b981; }

/* ═══════════════════════════════════════════════════════════
   ░░░ AdSense Banners ░░░
   ═══════════════════════════════════════════════════════════ */
.adsense-banner {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}
.adsense-inner {
  position: relative;
  min-height: 100px;
  border-radius: 16px;
  border: 1px dashed rgba(148,163,184,0.15);
  background: rgba(15,23,42,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.adsense-label {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  letter-spacing: .05em;
  color: rgba(148,163,184,0.4);
  text-transform: uppercase;
  font-weight: 600;
  background: rgba(15,23,42,0.8);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.1);
  white-space: nowrap;
  pointer-events: none;
}
.adsense-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  pointer-events: none;
  user-select: none;
}
/* حجم بانر الوسط */
.adsense-mid .adsense-inner  { min-height: 100px; }
/* بانر داخل المدونة */
.adsense-inline .adsense-inner { min-height: 80px; }
/* بانر أسفل الصفحة */
.adsense-bottom .adsense-inner { min-height: 100px; }

/* ═══════════════════════════════════════════════════════════
   ░░░ Blog Section ░░░
   ═══════════════════════════════════════════════════════════ */

/* ── غلاف المقالة ───────────────────────────────────────── */
.blog-card { transition: transform .3s ease, box-shadow .3s ease; }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 32px 64px rgba(0,0,0,.5); }

.blog-cover {
  position: relative;
  height: 200px;
  overflow: hidden;
}
@media (min-width:768px) { .blog-cover { height: 240px; } }

.blog-cover-1 {
  background: linear-gradient(135deg,
    rgba(6,182,212,.15) 0%,
    rgba(99,102,241,.15) 50%,
    rgba(168,85,247,.10) 100%),
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 20px,
      rgba(255,255,255,.015) 20px,
      rgba(255,255,255,.015) 21px
    );
  border-bottom: 1px solid rgba(6,182,212,.15);
}
/* أيقونات زخرفية للغلاف الأول */
.blog-cover-1::before {
  content: '📶 ⚡ 🌐 📡 💻 🔧';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 2.5rem;
  letter-spacing: 1.5rem;
  opacity: .12;
  white-space: nowrap;
  pointer-events: none;
}
.blog-cover-1::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%,
    rgba(6,182,212,.18) 0%, transparent 70%);
}

.blog-cover-2 {
  background: linear-gradient(135deg,
    rgba(239,68,68,.12) 0%,
    rgba(168,85,247,.12) 50%,
    rgba(99,102,241,.10) 100%),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 20px,
      rgba(255,255,255,.015) 20px,
      rgba(255,255,255,.015) 21px
    );
  border-bottom: 1px solid rgba(239,68,68,.15);
}
.blog-cover-2::before {
  content: '🛡️ 🔒 👨‍👩‍👧 🚫 🔐 🌿';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 2.5rem;
  letter-spacing: 1.5rem;
  opacity: .12;
  white-space: nowrap;
  pointer-events: none;
}
.blog-cover-2::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 100%,
    rgba(239,68,68,.15) 0%, transparent 70%);
}

.blog-cover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  z-index: 1;
}
.blog-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(6,182,212,.18);
  color: #06b6d4;
  border: 1px solid rgba(6,182,212,.30);
  backdrop-filter: blur(8px);
}
.blog-category-red {
  background: rgba(239,68,68,.18);
  color: #f87171;
  border-color: rgba(239,68,68,.30);
}

/* ── بيانات القراءة ─────────────────────────────────────── */
.blog-read-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: #94a3b8;
  border: 1px solid rgba(255,255,255,.08);
}

/* ── هيكل المقالة ──────────────────────────────────────── */
.blog-body { display: flex; flex-direction: column; gap: 14px; }

.blog-body h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: #f1f5f9;
  margin-top: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.blog-body h4 i { font-size: 13px; }

.blog-body p {
  font-size: 13px;
  line-height: 1.85;
  color: #94a3b8;
}
.blog-body strong { color: #cbd5e1; font-weight: 600; }

/* ── tips ────────────────────────────────────────────────── */
.blog-tip {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(245,158,11,.07);
  border: 1px solid rgba(245,158,11,.20);
  font-size: 12.5px;
  line-height: 1.75;
  color: #94a3b8;
}
.blog-tip-red {
  background: rgba(239,68,68,.07);
  border-color: rgba(239,68,68,.20);
}
.blog-tip-blue {
  background: rgba(14,165,233,.07);
  border-color: rgba(14,165,233,.20);
}

/* ── قائمة نقاط ─────────────────────────────────────────── */
.blog-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.blog-list li {
  display: flex;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.7;
  color: #94a3b8;
}
.blog-list strong { color: #cbd5e1; }

/* ── DNS grid ────────────────────────────────────────────── */
.blog-dns-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (min-width:768px) { .blog-dns-grid { grid-template-columns: repeat(4,1fr); } }

.blog-dns-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--dns-color) 6%, rgba(15,23,42,1));
  border: 1px solid color-mix(in srgb, var(--dns-color) 20%, transparent);
  transition: transform .2s, border-color .2s;
}
.blog-dns-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--dns-color) 35%, transparent);
}
.blog-dns-logo {
  font-size: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--dns-color) 12%, transparent);
  flex-shrink: 0;
}

/* ── Steps ────────────────────────────────────────────────── */
.blog-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.blog-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.blog-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #06b6d4, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.blog-code {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(6,182,212,.12);
  color: #06b6d4;
  border: 1px solid rgba(6,182,212,.20);
}

/* ── Apps grid ───────────────────────────────────────────── */
.blog-apps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (min-width:768px) { .blog-apps-grid { grid-template-columns: repeat(4,1fr); } }

.blog-app-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--app-color) 6%, rgba(15,23,42,1));
  border: 1px solid color-mix(in srgb, var(--app-color) 18%, transparent);
  transition: transform .2s, border-color .2s;
}
.blog-app-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--app-color) 32%, transparent);
}

/* ── وسوم المقالة ────────────────────────────────────────── */
.blog-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: #94a3b8;
  border: 1px solid rgba(255,255,255,.08);
  transition: background .2s, color .2s;
}
.blog-tag:hover {
  background: rgba(6,182,212,.12);
  color: #06b6d4;
  border-color: rgba(6,182,212,.25);
}

/* ── Light mode overrides ────────────────────────────────── */
.light-mode .blog-body p { color: #475569; }
.light-mode .blog-body strong { color: #1e293b; }
.light-mode .blog-body h4 { color: #0f172a; }
.light-mode .blog-list li { color: #475569; }
.light-mode .blog-dns-card { background: color-mix(in srgb, var(--dns-color) 5%, #f8fafc); border-color: color-mix(in srgb, var(--dns-color) 18%, transparent); }
.light-mode .blog-app-card { background: color-mix(in srgb, var(--app-color) 5%, #f8fafc); border-color: color-mix(in srgb, var(--app-color) 15%, transparent); }
.light-mode .blog-step    { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.07); }
.light-mode .blog-tip     { background: rgba(245,158,11,.06); }
.light-mode .blog-tip-red { background: rgba(239,68,68,.06); }
.light-mode .blog-tip-blue { background: rgba(14,165,233,.06); }
.light-mode .blog-tag { background: rgba(0,0,0,.05); color: #475569; border-color: rgba(0,0,0,.10); }
.light-mode .blog-read-badge { background: rgba(0,0,0,.04); color: #64748b; border-color: rgba(0,0,0,.08); }
.light-mode .adsense-inner { background: rgba(248,250,252,.8); border-color: rgba(148,163,184,.2); }
.light-mode .adsense-label { background: rgba(248,250,252,.9); color: rgba(100,116,139,.5); border-color: rgba(148,163,184,.15); }