/* ───────────────────────────────────────────────────────────────
   QIBLA COMPASS — integrated premium UI
   ───────────────────────────────────────────────────────────────
   Extracted from inline <style id="qiblaIntegratedStyles">.
   Scoped under #screenQibla so it cannot leak elsewhere.
   Load LAST in the stylesheet cascade (after quran-v4.css) to
   preserve the specificity order the inline block had.
   ─────────────────────────────────────────────────────────────── */

#screenQibla .qibla-integrated-wrap{display:flex;flex-direction:column;gap:18px}
  #screenQibla .qibla-premium{position:relative;overflow:hidden;background:radial-gradient(circle at 20% 20%,rgba(197,150,64,.08),transparent 40%),radial-gradient(circle at 80% 80%,rgba(18,156,117,.06),transparent 35%),linear-gradient(180deg,#0b1733,#071126);border:1px solid rgba(197,150,64,.16)}
  #screenQibla .qibla-premium::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.03),transparent 34%);pointer-events:none}
  #screenQibla .qibla-intro{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border:1px solid rgba(197,150,64,.12);border-radius:18px;background:rgba(9,18,39,.72)}
  #screenQibla .qibla-intro-copy{max-width:720px}
  #screenQibla .qibla-intro-title{font-size:1.8rem;margin:0 0 6px;color:#f6f1df}
  #screenQibla .qibla-intro-sub{color:rgba(232,237,245,.75);line-height:1.55}
  #screenQibla .qibla-permission-note{margin-top:10px;font-size:.92rem;color:#d6c28b}
  #screenQibla .qibla-enable-btn{white-space:nowrap}
  #screenQibla .qibla-stage{display:grid;grid-template-columns:minmax(280px,1.2fr) minmax(260px,.8fr);gap:22px;align-items:center}
  #screenQibla .qibla-compass-shell{position:relative;display:flex;align-items:center;justify-content:center;padding:12px}
  #screenQibla .qibla-compass-premium{position:relative;width:min(78vw,420px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.04),transparent 32%),radial-gradient(circle at 50% 50%,#0d1935,#071026 72%);box-shadow:0 16px 44px rgba(0,0,0,.35),0 0 0 1px rgba(197,150,64,.12),0 0 42px rgba(197,150,64,.14)}
  #screenQibla .qibla-compass-premium::before{content:'';position:absolute;inset:10px;border-radius:50%;border:1px solid rgba(197,150,64,.22);box-shadow:inset 0 0 0 10px rgba(255,255,255,.02)}
  #screenQibla .qibla-compass-premium::after{content:'';position:absolute;inset:22px;border-radius:50%;border:1px solid rgba(255,255,255,.06)}
  #screenQibla .qibla-compass-face{position:absolute;inset:0;transition:transform .18s ease-out}
  #screenQibla .qibla-cardinal{position:absolute;left:50%;top:16px;transform:translateX(-50%);font-size:2rem;font-weight:700;color:#ecd99c;text-shadow:0 1px 10px rgba(236,217,156,.18)}
  #screenQibla .qibla-cardinal--e{top:50%;left:auto;right:22px;transform:translateY(-50%)}
  #screenQibla .qibla-cardinal--s{top:auto;bottom:16px;transform:translateX(-50%)}
  #screenQibla .qibla-cardinal--w{top:50%;left:22px;transform:translateY(-50%)}
  #screenQibla .qibla-ticks{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,0) 0 4deg,rgba(255,255,255,.06) 4deg 5deg,rgba(255,255,255,0) 5deg 10deg);-webkit-mask:radial-gradient(circle,transparent 57%,#000 57.5%,#000 66%,transparent 66.5%);mask:radial-gradient(circle,transparent 57%,#000 57.5%,#000 66%,transparent 66.5%)}
  #screenQibla .qibla-line{position:absolute;inset:0;transform-origin:50% 50%;transition:transform .18s ease-out}
  #screenQibla .qibla-beam{position:absolute;left:50%;top:11%;transform:translateX(-50%);width:5px;height:37%;border-radius:999px;background:linear-gradient(to top,rgba(24,159,118,.06),rgba(24,159,118,.45),#32d1a1);box-shadow:0 0 14px rgba(50,209,161,.38)}
  #screenQibla .qibla-marker{position:absolute;left:50%;top:4%;transform:translateX(-50%);width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.10),rgba(9,18,39,.78));border:2px solid rgba(50,209,161,.55);box-shadow:0 0 24px rgba(50,209,161,.28),0 6px 14px rgba(0,0,0,.28)}
  #screenQibla .qibla-marker img{width:44px;height:44px;object-fit:contain}
  #screenQibla .qibla-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f9ebbd,#d0a64b 60%,#946b1d 100%);box-shadow:0 0 22px rgba(208,166,75,.28)}
  #screenQibla .qibla-needle-fixed{position:absolute;left:50%;top:50%;width:28px;height:170px;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 8px 10px rgba(0,0,0,.24))}
  #screenQibla .qibla-needle-fixed svg{display:block;width:100%;height:100%}
  #screenQibla .qibla-copy{display:flex;flex-direction:column;gap:14px}
  #screenQibla .qibla-cityline{font-size:.95rem;color:rgba(232,237,245,.75)}
  #screenQibla .qibla-headline{font-size:2rem;color:#f7f2df;margin:0}
  #screenQibla .qibla-status-line{font-size:1.02rem;color:#b8c3d7;line-height:1.55}
  #screenQibla .qibla-warning{padding:12px 14px;border-radius:14px;background:rgba(197,150,64,.10);border:1px solid rgba(197,150,64,.18);color:#ead8a8;font-size:.94rem;line-height:1.5}
  #screenQibla .qibla-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
  #screenQibla .qibla-inline-status{min-height:22px;font-size:.92rem;color:rgba(232,237,245,.78)}
  #screenQibla .qibla-facing-badge{display:none;align-self:flex-start;padding:7px 12px;border-radius:999px;background:rgba(24,159,118,.16);border:1px solid rgba(50,209,161,.32);color:#81efca;font-weight:600}
  #screenQibla .qibla-facing-badge.is-visible{display:inline-flex}
  #screenQibla .qibla-compass-premium.is-facing{box-shadow:0 16px 44px rgba(0,0,0,.35),0 0 0 1px rgba(50,209,161,.30),0 0 48px rgba(50,209,161,.22)}
  #screenQibla .qibla-compass-premium.is-facing .qibla-marker{box-shadow:0 0 28px rgba(50,209,161,.45),0 6px 14px rgba(0,0,0,.28)}
  #screenQibla .qibla-help{font-size:.92rem;color:rgba(232,237,245,.7)}
  @media (max-width: 900px){#screenQibla .qibla-stage{grid-template-columns:1fr}#screenQibla .qibla-copy{align-items:flex-start}#screenQibla .qibla-compass-premium{width:min(86vw,410px)}}