:root{
  --primary:#4F46E5;
  --primary-dark:#3730A3;
  --secondary:#FFB703;
  --accent:#06D6A0;
  --pink:#FF5DA2;
  --sky:#38BDF8;
  --bg:#F9FBFF;
  --ink:#1E1B4B;
  --ink-soft:#5B5A7A;
}
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Nunito', sans-serif;
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;
}
main.container {
  overflow-x: clip;
}
h1,h2,h3,h4,.display-font{ font-family:'Baloo 2',cursive; }

.navbar-app{ background:#fff; border-bottom:1px solid rgba(79,70,229,.08); padding:.9rem 0; }
.brand-logo-img{ width:34px; height:34px; border-radius:8px; object-fit:contain; flex-shrink:0; }
.brand-logo{ font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.4rem; color:var(--primary); text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; }
.brand-logo span{ color:var(--secondary); }
.nav-link-app{ color:var(--ink-soft); font-weight:700; text-decoration:none; }
.btn-primary-app{ background:var(--primary); color:#fff; font-weight:800; border:none; border-radius:999px; padding:.5rem 1.2rem; text-decoration:none; }
.btn-ghost-app{ background:transparent; border:2px solid var(--primary); color:var(--primary); font-weight:800; border-radius:999px; padding:.4rem 1.1rem; }

.card-app{ background:#fff; border-radius:20px; padding:1.6rem; border:1px solid rgba(79,70,229,.08); box-shadow:0 14px 34px rgba(30,27,75,.06); max-width:100%; }

@media (max-width: 768px) {
  .card-app {
    padding: 1.15rem 1rem;
    border-radius: 16px;
  }
  .row {
    --bs-gutter-x: 0.85rem;
  }
}

.table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100%;
}
.table-responsive > .table,
.table-responsive > .table-app,
.table-app {
  min-width: 720px;
}
.table-responsive table th,
.table-responsive table td,
.table-app th,
.table-app td {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.progress-app{ height:12px; border-radius:999px; background:#EEF0FB; overflow:hidden; }
.progress-app-bar{ height:100%; background:linear-gradient(90deg,var(--accent),var(--sky)); border-radius:999px; }

.badge-pill-app{ display:inline-flex; align-items:center; gap:6px; background:#F1F0FE; color:var(--primary); font-weight:800; padding:.45rem .9rem; border-radius:999px; font-size:.85rem; }

.options-list { display: flex; flex-direction: column; gap: 8px; }
.option-choice {
  display: flex !important;
  align-items: center;
  gap: 12px;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 0.55rem 0.95rem !important;
  margin-bottom: 0 !important;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #ffffff;
  min-height: 44px;
  box-sizing: border-box;
}
.option-choice:hover { border-color: var(--primary) !important; background: #F8FAFC !important; }
.option-choice.selected,
.option-choice.active,
.option-choice:has(input:checked) {
  border-color: var(--primary) !important;
  background: #EEF0FB !important;
  color: var(--primary) !important;
  font-weight: 700;
}
.option-choice input[type="radio"] {
  margin: 0 !important;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
}
.option-choice-text {
  flex: 1;
  line-height: 1.35;
  word-break: break-word;
}

.timer-pill{ background:var(--pink); color:#fff; font-weight:800; border-radius:999px; padding:.5rem 1.1rem; }
.timer-pill.low-time{ background:#DC2626; animation:pulseTimer 1s infinite; }
@keyframes pulseTimer{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }

.qnav-dot {
  width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.92rem; background: #F1F5F9; color: #64748B; cursor: pointer; border: 2px solid transparent;
  outline: none; transition: all 0.15s ease; user-select: none; -webkit-tap-highlight-color: transparent;
}
.qnav-dot:hover { background: #E2E8F0; color: #1E293B; }
.qnav-dot.answered { background: #10B981 !important; color: #fff !important; border-color: #059669 !important; }
.qnav-dot.current {
  border: 2.5px solid #4F46E5 !important; background: #EEF2FF !important; color: #4F46E5 !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.3) !important; font-weight: 900 !important; transform: scale(1.06);
}
.qnav-dot.answered.current {
  background: #10B981 !important; color: #fff !important; border: 2.5px solid #4F46E5 !important;
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.45) !important;
}
.qnav-dot.bookmarked { box-shadow: inset 0 0 0 2px #F59E0B !important; }

.form-control-app{ border:2px solid #E7E7F6; border-radius:12px; padding:.7rem 1rem; font-weight:700; width:100%; }

/* Mobile Drawer (Yondan ochiladigan zamonaviy oq va ixcham panel) */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.drawer-backdrop.show {
  opacity: 1;
  visibility: visible;
}

.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  width: 260px;
  max-width: 82vw;
  background: #ffffff;
  color: var(--ink);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 8px 0 28px rgba(30, 27, 75, 0.12);
  border-right: 1px solid #EAEAF4;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-drawer.open {
  transform: translateX(0);
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #F0F0F8;
  background: #ffffff;
  flex-shrink: 0;
}
.btn-close-drawer {
  background: #F1F3FA;
  border: none;
  color: #64748B;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.btn-close-drawer:hover {
  background: #E2E8F0;
  color: #0F172A;
}

.drawer-user-card {
  padding: 0.45rem 0 !important;
  display: flex;
  align-items: center;
  gap: 10px;
  background: transparent !important;
  margin-bottom: 0.5rem !important;
  border: none !important;
}
.drawer-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, #4F46E5, #6366F1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25);
}
.drawer-user-info {
  flex: 1;
  min-width: 0;
}
.drawer-user-name {
  font-weight: 800;
  font-size: 0.9rem;
  color: #1E1B4B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drawer-role-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  color: #4F46E5;
  background: #EEF0FB;
  padding: 1px 7px;
  border-radius: 999px;
  margin-top: 1px;
}

.drawer-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.drawer-link {
  display: block;
  padding: 0.5rem 0.85rem;
  color: #475569;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  border-radius: 10px;
  transition: all 0.15s ease;
}
.drawer-link:hover {
  background: #F8FAFC;
  color: #4F46E5;
}
.drawer-link.active {
  background: #EEF0FB;
  color: #4F46E5;
  font-weight: 800;
}

.drawer-footer {
  padding: 0.65rem 0.9rem calc(0.95rem + env(safe-area-inset-bottom, 0px)) 0.9rem;
  border-top: 1px solid #F0F0F8;
  background: #ffffff;
  margin-top: auto;
  flex-shrink: 0;
}
.drawer-logout-btn {
  width: 100%;
  background: #FEF2F2;
  border: 1px solid #FEE2E2;
  color: #DC2626;
  font-weight: 800;
  font-size: 0.86rem;
  border-radius: 10px;
  padding: 0.52rem 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
}
.drawer-logout-btn:hover {
  background: #DC2626;
  border-color: #DC2626;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.22);
}
.drawer-logout-btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.drawer-logout-btn:hover svg {
  transform: translateX(2px);
}

/* PUBG Avatar Hoshiyalari (Global) */
.avatar-frame-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  padding: 4px;
  box-sizing: border-box;
  transition: all 0.25s ease;
}
.avatar-frame-wrap.frame-bronze {
  border: 3.5px solid #CD7F32;
  box-shadow: 0 0 12px rgba(205, 127, 50, 0.6), inset 0 0 8px rgba(205, 127, 50, 0.35);
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.2), transparent);
}
.avatar-frame-wrap.frame-cyber-neon {
  border: 3.5px solid #06B6D4;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.8), inset 0 0 10px rgba(6, 182, 212, 0.45);
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(59, 130, 246, 0.2));
}
.avatar-frame-wrap.frame-fire-phoenix {
  border: 3.5px solid #EF4444;
  box-shadow: 0 0 18px rgba(239, 68, 68, 0.85), 0 0 10px rgba(245, 158, 11, 0.85), inset 0 0 8px rgba(239, 68, 68, 0.4);
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(245, 158, 11, 0.2));
}
.avatar-frame-wrap.frame-emerald {
  border: 3.5px solid #10B981;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.85), inset 0 0 10px rgba(16, 185, 129, 0.45);
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.25), rgba(5, 150, 105, 0.15));
}
.avatar-frame-wrap.frame-royal-gold {
  border: 4px double #EAB308;
  box-shadow: 0 0 20px rgba(234, 179, 8, 0.85), inset 0 0 12px rgba(234, 179, 8, 0.5);
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.3), rgba(251, 191, 36, 0.2));
}
.avatar-frame-wrap.frame-pubg-mythic {
  border: 4px solid #EC4899;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.3), rgba(139, 92, 246, 0.3));
  box-shadow: 0 0 22px rgba(236, 72, 153, 0.85), 0 0 14px rgba(139, 92, 246, 0.85), inset 0 0 12px rgba(236, 72, 153, 0.5);
  animation: pubgMythicPulse 3s infinite ease-in-out;
}

/* Matematik formulalar va darajalar stili */
sup {
  font-size: 0.76em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.45em;
  font-weight: 700;
}
sub {
  font-size: 0.76em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  bottom: -0.25em;
}
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.4rem 0;
}

/* Ko'p qatorli savollar va dasturlash kodlari stili */
.question-text {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  color: #1E293B;
  white-space: pre-wrap;
  word-break: break-word;
}
.q-title {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.35;
}
.code-snippet-box {
  background: #1E293B;
  color: #F8FAFC;
  padding: 0.85rem 1.1rem;
  border-radius: 8px;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0.6rem 0;
  overflow-x: auto;
  border-left: 4px solid var(--primary);
  text-align: left;
}
.code-snippet-box code {
  color: inherit;
  background: transparent;
  padding: 0;
  font-family: inherit;
}

/* =========================================================
   PUBG MOBILE USLUBIDAGI PREMIUM AVATAR HOSHIYALARI
   ========================================================= */
.avatar-frame-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  padding: 4px;
  box-sizing: border-box;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  isolation: isolate;
}

/* 1. QIROLLIK OLTINI (PUBG CONQUEROR GOLD WINGS & BADGE) */
.avatar-frame-wrap.frame-royal-gold {
  background: linear-gradient(135deg, #FFE259 0%, #D4AF37 35%, #8A6208 70%, #FFD700 100%);
  border: 2.5px solid #FFE57F;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.75), inset 0 0 10px rgba(212, 175, 55, 0.6), 0 4px 12px rgba(0, 0, 0, 0.35);
}
.avatar-frame-wrap.frame-royal-gold::before {
  content: '👑';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 15px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 6px rgba(255, 215, 0, 0.9));
  z-index: 2;
  pointer-events: none;
}
.avatar-frame-wrap.frame-royal-gold::after {
  content: 'CONQ';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #FFE57F 0%, #B8860B 100%);
  color: #1A1A1A;
  font-family: 'Baloo 2', 'Impact', sans-serif;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.5px;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid #FFF8DC;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}

/* 2. PUBG AFSONAVIY (PUBG MYTHIC GOD-TIER WINGS & NEON AURA) */
.avatar-frame-wrap.frame-pubg-mythic {
  background: linear-gradient(135deg, #FF007F 0%, #7928CA 40%, #4338CA 75%, #FF007F 100%);
  border: 2.5px solid #F472B6;
  box-shadow: 0 0 22px rgba(236, 72, 153, 0.85), 0 0 12px rgba(139, 92, 246, 0.85), inset 0 0 10px rgba(236, 72, 153, 0.5);
  animation: pubgMythicPulse 3s infinite ease-in-out;
}
.avatar-frame-wrap.frame-pubg-mythic::before {
  content: '⚡';
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 8px #EC4899);
  z-index: 2;
  pointer-events: none;
}
.avatar-frame-wrap.frame-pubg-mythic::after {
  content: 'MYTHIC';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #F472B6 0%, #7C3AED 100%);
  color: #FFFFFF;
  font-family: 'Baloo 2', 'Impact', sans-serif;
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid #FBCFE8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  line-height: 1.2;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}
@keyframes pubgMythicPulse {
  0%, 100% {
    box-shadow: 0 0 22px rgba(236, 72, 153, 0.85), 0 0 10px rgba(139, 92, 246, 0.85);
  }
  50% {
    box-shadow: 0 0 26px rgba(139, 92, 246, 0.95), 0 0 14px rgba(6, 182, 212, 0.85);
  }
}

/* 3. NEON KIBERSPORT (CYBER MECHA FRAME & CORNER BRACKETS) */
.avatar-frame-wrap.frame-cyber-neon {
  background: linear-gradient(135deg, #06B6D4 0%, #3B82F6 50%, #F59E0B 100%);
  border: 2.5px solid #22D3EE;
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.85), 0 0 8px rgba(245, 158, 11, 0.6), inset 0 0 10px rgba(6, 182, 212, 0.45);
}
.avatar-frame-wrap.frame-cyber-neon::before {
  content: '🎯';
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 6px #06B6D4);
  z-index: 2;
  pointer-events: none;
}
.avatar-frame-wrap.frame-cyber-neon::after {
  content: 'CYBER';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #06B6D4 0%, #0369A1 100%);
  color: #FFFFFF;
  font-family: 'Baloo 2', 'Impact', sans-serif;
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid #67E8F9;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}

/* 4. OLOVLI QASOSKOR (FIRE PHOENIX WINGS & BLINDING MAGMA) */
.avatar-frame-wrap.frame-fire-phoenix {
  background: linear-gradient(135deg, #DC2626 0%, #EA580C 45%, #FACC15 100%);
  border: 2.5px solid #F87171;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.85), 0 0 10px rgba(245, 158, 11, 0.85), inset 0 0 10px rgba(239, 68, 68, 0.5);
}
.avatar-frame-wrap.frame-fire-phoenix::before {
  content: '🔥';
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 8px #EA580C);
  z-index: 2;
  pointer-events: none;
}
.avatar-frame-wrap.frame-fire-phoenix::after {
  content: 'FLAME';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #EF4444 0%, #991B1B 100%);
  color: #FFFFFF;
  font-family: 'Baloo 2', 'Impact', sans-serif;
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid #FCA5A5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}

/* 5. SMARAGD SEHRGAR (ROYAL EMERALD GEMSTONES & JADE FILIGREE) */
.avatar-frame-wrap.frame-emerald {
  background: linear-gradient(135deg, #10B981 0%, #059669 45%, #F59E0B 100%);
  border: 2.5px solid #34D399;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.85), 0 0 8px rgba(234, 179, 8, 0.6), inset 0 0 10px rgba(16, 185, 129, 0.45);
}
.avatar-frame-wrap.frame-emerald::before {
  content: '💎';
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 6px #10B981);
  z-index: 2;
  pointer-events: none;
}
.avatar-frame-wrap.frame-emerald::after {
  content: 'JADE';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #10B981 0%, #065F46 100%);
  color: #FFFFFF;
  font-family: 'Baloo 2', 'Impact', sans-serif;
  font-size: 7.5px;
  font-weight: 900;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid #6EE7B7;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}

/* 6. BRONZA JANGCHI (BATTLE HARDENED BRONZE ARMOR) */
.avatar-frame-wrap.frame-bronze {
  background: linear-gradient(135deg, #CD7F32 0%, #8C5523 50%, #CD7F32 100%);
  border: 2.5px solid #DDA15E;
  box-shadow: 0 0 12px rgba(205, 127, 50, 0.7), inset 0 0 8px rgba(205, 127, 50, 0.4), 0 4px 10px rgba(0, 0, 0, 0.35);
}
.avatar-frame-wrap.frame-bronze::before {
  content: '🛡️';
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));
  z-index: 2;
  pointer-events: none;
}
.avatar-frame-wrap.frame-bronze::after {
  content: 'WARRIOR';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #CD7F32 0%, #5E3A1A 100%);
  color: #FFFFFF;
  font-family: 'Baloo 2', 'Impact', sans-serif;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.4px;
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid #E9C46A;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}