/* ═══════════════════════════════════════════════════════
   SHARED / RESET — تصفير المتصفح + أدوات عامة
   ═══════════════════════════════════════════════════════ */

/* ── RESET ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
  height: 100%;
  overflow: hidden;
}
body {
  background: var(--bg);
  color: var(--txt);
  font-family: 'Tajawal', sans-serif;
  display: flex;
  flex-direction: column;
  transition: background .3s, color .3s;
}
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-thumb {
  background: var(--brd2);
  border-radius: 20px;
}


/* ── UTILITIES ── */
.wrap {
  padding: 14px 14px 80px;
  max-width: 680px;
  margin: 0 auto;
}
.xt {
  position: fixed;
  top: 58px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: var(--gold);
  color: #3d2800;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .74rem;
  font-weight: 700;
  padding: 5px 18px;
  border-radius: 30px;
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: all .3s;
  box-shadow: 0 4px 20px rgba(191, 135, 0, .3);
}
.xt.on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.cfw {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 800;
  overflow: hidden;
}
.cdot {
  position: absolute;
  border-radius: 50%;
  animation: cfal 1.5s ease-in forwards;
}
@keyframes cfal {
  from {
    opacity: 1;
    transform: translateY(-10px) rotate(0);
  }
  to {
    opacity: 0;
    transform: translateY(100vh) rotate(540deg);
  }
}
.rip {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 0, 0, .06);
  transform: scale(0);
  animation: rip_ .6s ease-out forwards;
  pointer-events: none;
}
[data-dark] .rip {
  background: rgba(255, 255, 255, .08);
}
@keyframes rip_ {
  to {
    transform: scale(4);
    opacity: 0;
  }
}
.empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--muted);
}
.empty-ic {
  font-size: 2.4rem;
  display: block;
  margin-bottom: 10px;
}


/* ═══════════════════════════════════════════════════════
   مقياس الموبايل — القرار الجوهري:
   التصميم مبني على rem صغيرة (بعضها 4.8px فعلياً على أساس 16px)
   الحل الصحيح: رفع الجذر نفسه على الشاشات الصغيرة، فيكبر كل
   شيء بتناسق كامل دون لمس مئات القيم المتفرقة
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html { font-size: 18px; }
}
@media (max-width: 480px) {
  html { font-size: 20px; }
}

/* ── أهداف اللمس: لا زر تفاعلي أصغر من إصبع ── */
@media (max-width: 768px) {
  .tvm-btn { padding: 8px 14px; }
  .tntbtn { min-width: 40px; min-height: 36px; }
  .tr-crumb { padding: 5px 13px; }
  .tl-info { font-size: .7rem; padding: 4px 6px; }
  .tl-row { padding-top: 11px; padding-bottom: 11px; }
  .fb { padding: 7px 13px; }
  .sfact-x, .onb-skip { padding: 8px; }
}

/* ═══ أرضية المقروئية: لا نص وظيفي أصغر من ~9px على الموبايل ═══ */
@media (max-width: 768px) {
  .tgen-label { font-size: .44rem !important; }
  .tr-mchip, .tpath-m, .trel-why { font-size: .46rem !important; }
  .tl-formula, .tr-formula { font-size: .5rem !important; }
  .tr-b { font-size: .62rem !important; }
  .tl-ar, .tr-ar { font-size: .56rem !important; }
  .wtg span, .wpc { font-size: .48rem !important; }
}