.tqibla{--q-gold:#d9a441;--q-gold2:#f5d27b;--q-bg:#171511;--q-panel:#211d17;--q-border:#4b3820;--q-text:#fff7e8;--q-muted:#b8ad9b;box-sizing:border-box;width:100%;max-width:430px;margin:0 auto;padding:12px 12px 14px;border-radius:18px;background:radial-gradient(ellipse at 50% 0%,#302416 0%,var(--q-bg) 60%);color:var(--q-text);font-family:inherit;overflow:hidden}.tqibla *{box-sizing:border-box}.tqibla [hidden]{display:none!important}.tqibla__steps{min-height:230px;display:grid;place-items:center;text-align:center}.tqibla__step{width:100%;padding:12px 8px}.tqibla__step-symbol{font-size:38px;color:var(--q-gold2);margin-bottom:4px}.tqibla__step strong{display:block;color:var(--q-gold2);font-size:16px;margin:0 0 7px}.tqibla__step p{font-size:12px;line-height:1.5;color:var(--q-muted);max-width:300px;margin:0 auto 14px}.tqibla__figure-eight{font-size:90px;line-height:1;color:#176d67;font-weight:700;margin:0 auto 8px;transform:scaleX(1.35)}.tqibla__step-status{font-size:11px;color:var(--q-muted);margin:0 0 12px}.tqibla__compass-wrap{display:flex;justify-content:center;padding:0 0 10px}.tqibla__compass{position:relative;width:min(66vw,260px);aspect-ratio:1;border-radius:50%;border:2px solid var(--q-gold);background:radial-gradient(circle,#282117 0%,#15130f 68%,#090807 100%);box-shadow:0 0 0 5px #d9a44112,inset 0 0 20px #d9a44112,0 7px 18px #0007;overflow:hidden}.tqibla__rose{position:absolute;inset:0;border-radius:50%;transform:rotate(0deg);will-change:transform;transition:transform .12s linear}.tqibla__ticks{position:absolute;inset:8px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#d9a441 0deg 1deg,transparent 1deg 15deg);mask:radial-gradient(circle,transparent 0 84%,#000 85% 88%,transparent 89%);-webkit-mask:radial-gradient(circle,transparent 0 84%,#000 85% 88%,transparent 89%)}.tqibla__label{position:absolute;font-weight:800;color:var(--q-gold2);font-size:11px;z-index:2}.tqibla__label--n{top:10%;left:50%;transform:translateX(-50%)}.tqibla__label--ne{top:19%;right:20%}.tqibla__label--e{right:10%;top:50%;transform:translateY(-50%)}.tqibla__label--se{bottom:19%;right:20%}.tqibla__label--s{bottom:10%;left:50%;transform:translateX(-50%)}.tqibla__label--sw{bottom:19%;left:20%}.tqibla__label--w{left:10%;top:50%;transform:translateY(-50%)}.tqibla__label--nw{top:19%;left:20%}.tqibla__qibla-marker{position:absolute;z-index:4;left:50%;top:50%;width:32px;height:32px;margin:-16px 0 0 -16px;display:grid;place-items:center;font-size:20px;filter:drop-shadow(0 2px 3px #000);transform:rotate(0deg) translateY(-91px);transform-origin:center;will-change:transform}.tqibla__qibla-marker span{display:block;transform:rotate(0deg);background:#0d0b08;border:1px solid var(--q-gold);border-radius:7px;padding:2px;font-size:16px}.tqibla__hub{position:absolute;width:17px;height:17px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;background:linear-gradient(135deg,#fff0b5,#b77a1b);border:2px solid #6c4a1b;z-index:5;box-shadow:0 0 0 3px #0c0a07}.tqibla__degree-card{text-align:center;border:1px solid var(--q-border);background:linear-gradient(145deg,#211b12,#171511);border-radius:13px;padding:9px 8px;margin-bottom:8px}.tqibla__degree{display:block;font-size:clamp(28px,8vw,38px);line-height:1.05;font-weight:900;color:var(--q-gold2);font-variant-numeric:tabular-nums}.tqibla__degree-caption{display:block;font-size:10px;color:var(--q-muted);margin-top:3px}.tqibla__direction{display:block;font-size:11px;font-weight:700;color:var(--q-gold);margin-top:3px}.tqibla__status-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;color:var(--q-muted);padding:3px 1px}.tqibla__badge{font-size:9px;font-weight:800;white-space:nowrap;border:1px solid #65502c;border-radius:999px;padding:5px 7px;color:var(--q-gold2)}.tqibla__badge.is-active{border-color:#416c37;color:#b4e5a5;background:#1c301a}.tqibla__notice{font-size:10px;line-height:1.45;color:var(--q-muted);margin:6px 0 9px;text-align:center}.tqibla__actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.tqibla__button{font:inherit;font-size:11px;font-weight:800;cursor:pointer;border-radius:10px;padding:10px 12px;min-height:38px;transition:filter .15s ease}.tqibla__button:disabled{opacity:.45;cursor:not-allowed}.tqibla__button:focus-visible{outline:2px solid #fff;outline-offset:3px}.tqibla__button--primary{background:linear-gradient(135deg,#f1c765,#c18a2c);color:#21170a;border:1px solid #e9b84d}.tqibla__button--secondary{background:#fff0;color:var(--q-gold2);border:1px solid var(--q-border)}.tqibla__button:hover{filter:brightness(1.08)}.tqibla__step .tqibla__button{width:min(100%,300px);margin:3px auto}.tqibla__step .tqibla__button--secondary{display:block}@media(min-width:520px){.tqibla{padding:14px}.tqibla__compass{width:min(56vw,260px)}}@media(max-height:700px){.tqibla{padding:8px}.tqibla__steps{min-height:190px}.tqibla__compass{width:min(58vw,220px)}.tqibla__qibla-marker{transform:rotate(0deg) translateY(-76px)}}