:root{
  --bg:#07090d; --fg:#f3efe6; --muted:#9aa1ad; --gold:#d8b46a; --card:#11151c; --line:#232a35;
  --ar-font:'Amiri Quran','Scheherazade New','Amiri',serif;
  --ui:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --safe-top:env(safe-area-inset-top,0px); --safe-bot:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font-family:var(--ui);overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.hidden{display:none!important}
.muted{color:var(--muted)} .small{font-size:12px}

.topbar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;justify-content:center;align-items:center;padding:calc(10px + var(--safe-top)) 14px 10px;background:linear-gradient(#07090dcc,transparent);pointer-events:none}
.topbar>*{pointer-events:auto}
.tabs{display:flex;gap:18px}
.tab{font-weight:600;font-size:16px;color:var(--muted);padding:6px 2px;border-bottom:2px solid transparent}
.tab.active{color:var(--fg);border-color:var(--fg)}
.streak{position:absolute;right:14px;top:calc(12px + var(--safe-top));font-size:14px;font-weight:600;background:#ffffff14;border-radius:20px;padding:4px 10px}

.feed{height:100%;height:100dvh;overflow-y:scroll;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
.feed::-webkit-scrollbar{display:none}
.slide{position:relative;height:100%;height:100dvh;scroll-snap-align:start;scroll-snap-stop:always;display:flex;flex-direction:column;justify-content:center;padding:calc(70px + var(--safe-top)) 76px calc(90px + var(--safe-bot)) 22px;overflow:hidden}
.slide::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 30%,var(--tint,#16202b) 0%,transparent 60%);opacity:.9;z-index:-1}
.slide .inner{flex:0 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none;padding-right:2px}
.slide .inner::-webkit-scrollbar{display:none}
.bismillah{font-family:var(--ar-font);direction:rtl;text-align:center;color:var(--gold);font-size:24px;margin-bottom:14px;opacity:.9}
.ar{font-family:var(--ar-font);direction:rtl;text-align:right;line-height:2.15;font-size:var(--ar-size,32px);margin:0 0 18px;word-spacing:2px}
.ar .num{font-family:var(--ar-font);color:var(--gold);font-size:.8em;margin-right:6px;white-space:nowrap}
.en{font-size:var(--en-size,17px);line-height:1.55;color:#d9d5cc;margin:0}
body.no-tr .en{display:none}
.ref{flex:none;margin-top:18px;font-size:14px;padding-top:10px;border-top:1px solid #ffffff14}
.ref b{font-weight:600}
.ref .sub{color:var(--muted);font-size:12px;margin-top:2px}
.progress{position:absolute;left:0;bottom:calc(64px + var(--safe-bot));height:2px;background:var(--gold);width:0;transition:width .25s linear;opacity:.8}

.actions{position:absolute;right:10px;bottom:calc(120px + var(--safe-bot));display:flex;flex-direction:column;gap:16px;align-items:center;z-index:5}
.act{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:#e8e4da;min-width:52px}
.act .ic{width:46px;height:46px;border-radius:50%;background:#ffffff16;display:grid;place-items:center;font-size:15px;font-weight:600;backdrop-filter:blur(6px)}
.act svg{width:21px;height:21px;fill:currentColor;stroke:none}
.act[data-act=copy] svg,.act[data-act=reciter] svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.act.on .ic{background:var(--gold);color:#111}
.cont{flex:none;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:9px 16px 9px 12px;border-radius:22px;border:1px solid #d8b46a99;background:#d8b46a1f;color:var(--gold);font-size:14px;font-weight:600}
.cont .ic{display:grid;place-items:center}
.cont svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.cont:active{background:#d8b46a40}
.hint{flex:none;align-self:flex-start;position:relative;display:flex;gap:10px;align-items:flex-start;margin-top:10px;max-width:min(300px,100%);padding:10px 12px;border-radius:12px;background:#f3efe6;color:#111;font-size:13px;line-height:1.4;animation:hintIn .3s ease}
.hint::before{content:"";position:absolute;top:-6px;left:22px;border:6px solid transparent;border-top:0;border-bottom-color:#f3efe6}
.hint-x{flex:none;font-size:13px;padding:0 2px;color:#444}
@keyframes hintIn{from{opacity:0;transform:translateY(-4px)}}
.backchip{position:absolute;left:12px;top:calc(12px + var(--safe-top));font-size:13px;font-weight:600;background:#ffffff14;border-radius:20px;padding:5px 11px;color:var(--fg)}
.loading{display:grid;place-items:center;color:var(--muted)}

.bottombar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;justify-content:space-around;padding:8px 6px calc(8px + var(--safe-bot));background:linear-gradient(transparent,#07090df0 40%)}
.bb{display:flex;flex-direction:column;align-items:center;font-size:18px;gap:2px;min-width:64px;color:#e8e4da}
.bb span{font-size:11px;color:var(--muted)}

.start{position:fixed;inset:0;z-index:50;background:radial-gradient(100% 70% at 50% 35%,#1a2430,var(--bg));display:grid;place-items:center;text-align:center;padding:30px}
.start-inner{max-width:360px}
.logo{font-family:var(--ar-font);font-size:72px;color:var(--gold);line-height:1.3}
.start h1{margin:0 0 6px;font-size:28px;letter-spacing:.5px}
.start p{margin:6px 0 22px}
.primary{background:var(--gold);color:#111;font-weight:600;padding:14px 44px;border-radius:30px;font-size:17px}

.sheet{position:fixed;inset:0;z-index:55;background:#0008;display:flex;align-items:flex-end;justify-content:center}
.sheet-panel{width:100%;max-width:560px;max-height:82dvh;background:var(--card);border-radius:18px 18px 0 0;display:flex;flex-direction:column;padding-bottom:var(--safe-bot)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.sheet-head h2{margin:0;font-size:17px}
.close{font-size:18px;padding:4px 8px;min-width:40px;min-height:40px}
.sheet-body{overflow-y:auto;padding:8px 0}
.search{margin:6px 16px 8px;width:calc(100% - 32px);padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#0b0e13;color:var(--fg);font:inherit}
.row{display:flex;align-items:center;gap:12px;padding:11px 18px;width:100%;text-align:left;border-bottom:1px solid #ffffff08}
.row:hover{background:#ffffff08}
.row .n{width:32px;height:32px;border-radius:8px;background:#ffffff10;display:grid;place-items:center;font-size:13px;flex:none}
.row .t{flex:1;min-width:0}
.row .t b{font-weight:500}
.row .t div{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .a{font-family:var(--ar-font);font-size:20px;color:var(--gold)}
.opt{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid #ffffff08;gap:12px}
.opt select{background:#0b0e13;color:var(--fg);border:1px solid var(--line);border-radius:8px;padding:8px;font:inherit;max-width:60%}
.switch{width:46px;height:26px;border-radius:13px;background:#333;position:relative;flex:none}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s}
.switch.on{background:var(--gold)} .switch.on::after{left:23px}
.empty{padding:30px 18px;color:var(--muted);text-align:center}
.note{padding:14px 18px;color:var(--muted);font-size:12px;line-height:1.5}

.toast{position:fixed;left:50%;bottom:calc(90px + var(--safe-bot));transform:translateX(-50%) translateY(20px);background:#fff;color:#111;padding:9px 16px;border-radius:20px;font-size:14px;opacity:0;transition:.2s;z-index:60;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%)}
@media (min-width:700px){.slide{padding-left:max(22px,calc(50vw - 300px));padding-right:max(76px,calc(50vw - 300px))}.actions{right:max(10px,calc(50vw - 360px))}}

/* ---------- study sheet (v0.3) ---------- */
.study{position:fixed;inset:0;z-index:57;background:#000a;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .18s ease}
.study.closing{animation:fadeOut .18s ease forwards}
.study-panel{width:100%;max-width:600px;height:min(86dvh,760px);background:var(--card);border-radius:20px 20px 0 0;display:flex;flex-direction:column;padding-bottom:var(--safe-bot);box-shadow:0 -10px 40px #0008;transition:transform .2s ease;animation:sheetUp .22s cubic-bezier(.2,.8,.2,1)}
.study.closing .study-panel{transform:translateY(40%)!important}
@keyframes sheetUp{from{transform:translateY(100%)}} @keyframes fadeIn{from{opacity:0}} @keyframes fadeOut{to{opacity:0}}
.study-grab{display:flex;justify-content:center;padding:8px 0 2px;touch-action:none}
.study-grab span{width:40px;height:5px;border-radius:3px;background:#ffffff30}
.study-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:4px 14px 10px 18px;touch-action:none}
.study-head h2{margin:0;font-size:17px;font-weight:600}
.study-sub{color:var(--muted);font-size:12px;margin-top:2px}
.study-tabs{display:flex;gap:5px;padding:0 12px 10px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.study-tabs::-webkit-scrollbar{display:none}
.stab{flex:none;min-height:36px;padding:8px 11px;border-radius:18px;background:#ffffff0d;color:#d9d5cc;font-size:13px;font-weight:500;white-space:nowrap}
.stab.on{background:var(--gold);color:#111;font-weight:600}
.stab:focus-visible,.study button:focus-visible,.study select:focus-visible,.study a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.study-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:14px 18px 28px;line-height:1.6;font-size:15px;color:#e6e2d8}
.study-body:focus{outline:none}
.st-loading{display:flex;align-items:center;gap:10px;color:var(--muted);padding:18px 2px;font-size:14px}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid #ffffff22;border-top-color:var(--gold);animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.st-error{padding:14px;border-radius:12px;background:#ffffff08;color:#d9d5cc;font-size:14px}
.st-error p{margin:0 0 10px}
.ghost{border:1px solid var(--line);border-radius:18px;padding:7px 14px;font-size:13.5px;color:var(--fg);background:#ffffff08}
.ghost.gold{border-color:#d8b46a99;color:var(--gold);background:#d8b46a14}
.src{font-size:12px;color:var(--muted);line-height:1.5;margin:10px 0 0}
.src-link{display:inline-block;padding:8px 2px;margin:-8px 0;color:var(--gold);text-decoration:none;border-bottom:1px solid #d8b46a55}
@media (prefers-reduced-motion:reduce){.study,.study-panel,.study.closing{animation:none!important;transition:none!important}}
.ar{cursor:pointer}
.act[data-act=study] svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
@media (max-height:760px){.actions{gap:9px;bottom:calc(104px + var(--safe-bot))}.act .ic{width:40px;height:40px}.act svg{width:19px;height:19px}}
.st-bar{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.st-label{font-size:12px;color:var(--muted);flex:none;text-transform:uppercase;letter-spacing:.06em}
.st-select{flex:1;min-width:0;background:#0b0e13;color:var(--fg);border:1px solid var(--line);border-radius:10px;padding:9px 10px;font:inherit;font-size:14px}
.tafsir-out h3{font-size:16px;color:var(--gold);margin:14px 0 6px;font-weight:600}
.tafsir-out h4{font-size:15px;margin:12px 0 4px}
.tafsir-out p{margin:0 0 10px}
.tafsir-out p[dir=auto]:lang(ar),.tafsir-out .ar-text,.tafsir-out.ar-text{font-family:var(--ar-font);font-size:19px;line-height:2}
.tafsir-out blockquote{margin:8px 0;padding-left:12px;border-left:2px solid #d8b46a66}
.covers{font-size:12.5px;color:var(--gold);margin:0 0 8px!important}
.clamp{position:relative;max-height:var(--clamp,24em);overflow:hidden}
.clamp.open{max-height:none}
.clamp.clamped:not(.open)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(transparent,var(--card))}
.more{margin-top:6px}
.empty.left{text-align:left;padding:14px 0}
.st-hint{font-size:13px;color:var(--muted);margin:0 0 12px}
.wchips{display:flex;flex-wrap:wrap;gap:8px}
.wchip{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:76px;max-width:46%;padding:10px 10px 9px;border-radius:14px;background:#ffffff0a;border:1px solid var(--line);text-align:center;transition:background .15s,border-color .15s}
.wchip:active{transform:scale(.97)}
.wchip.playing{border-color:var(--gold);background:#d8b46a1f}
.w-ar{font-family:var(--ar-font);font-size:26px;line-height:1.7;color:var(--fg)}
.w-tr{font-size:12px;color:var(--gold);font-style:italic}
.w-en{font-size:13px;color:#d9d5cc;line-height:1.3}
.wchips.compact .wchip{min-width:64px;padding:7px 8px}
.wchips.compact .w-ar{font-size:21px}
.st-h{font-size:15px;font-weight:600;margin:4px 0 4px;color:var(--fg)}
.st-h~.st-h{margin-top:22px}
.rel-list{display:flex;flex-direction:column;gap:10px}
.rel-card{background:#ffffff08;border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.rel-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;font-size:14px}
.rel-ar{font-family:var(--ar-font);font-size:22px;line-height:2;margin:0 0 6px;text-align:right}
.rel-en{font-size:14.5px;line-height:1.55;color:#d9d5cc;margin:0}
.trby{font-size:11.5px;color:var(--muted);margin:6px 0 0;opacity:.85}
body.no-tr .trby{display:none}
.linkbtn{margin-top:10px;font-size:13px;color:var(--gold);text-decoration:underline;text-underline-offset:3px;padding:8px}
.about-h{font-size:15px;margin:18px 0 6px}
.about-list{margin:0;padding-left:18px;font-size:14px;line-height:1.55;color:#d9d5cc}
.about-list li{margin-bottom:6px}
.about-list a{color:var(--gold)}
#btnAbout{margin-top:12px}
.tr-card{margin:0 0 12px;padding:12px 14px;background:#ffffff08;border:1px solid var(--line);border-radius:14px}
.tr-card blockquote{margin:0 0 8px;font-size:15.5px;line-height:1.6;color:var(--fg)}
.tr-card .src{margin:0}
.search-form{display:flex;flex-direction:column;gap:10px;position:sticky;top:0;background:var(--card);padding-bottom:8px;z-index:1}
.search-in{width:100%;background:#0b0e13;color:var(--fg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;font-size:16px}
.search-in:focus{outline:2px solid #d8b46a99;outline-offset:1px}
.seg{display:inline-flex;align-self:flex-start;background:#ffffff0a;border-radius:18px;padding:3px}
.seg-b{padding:6px 16px;min-height:36px;border-radius:15px;font-size:13px;color:var(--muted)}
.seg-b.on{background:var(--gold);color:#111;font-weight:600}
.search-status{font-size:12.5px;color:var(--muted);margin:4px 0 10px;min-height:18px}
.search-list{display:flex;flex-direction:column;gap:8px}
.sr{background:#ffffff08;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.sr-main{display:block;width:100%;text-align:left;padding:12px 14px}
.sr-main:active{background:#ffffff0d}
.sr-ref{font-size:13.5px;color:var(--gold)}
.sr-ar{font-family:var(--ar-font);font-size:20px;line-height:1.9;margin:4px 0;text-align:right}
.sr-ar.clean{font-family:'Amiri','Scheherazade New',serif}
.sr-en{font-size:14px;line-height:1.5;margin:4px 0 0;color:#d9d5cc}
.sr-by{display:block;font-size:11.5px;color:var(--muted);margin-top:4px}
.sr mark,.sr-ar mark{background:#d8b46a40;color:inherit;border-radius:3px;padding:0 1px}
.sr-tools{display:flex;gap:8px;padding:0 14px 12px}
.sr-ex{padding:0 14px 12px;font-size:14px;line-height:1.55}
.sr-ex-t{margin:0 0 6px}
.sr-go{display:flex;justify-content:space-between;width:100%;padding:14px;border-radius:14px;background:#d8b46a1a;border:1px solid #d8b46a66;color:var(--gold)}
.search-foot{padding:10px 0 20px;text-align:center}
.search-foot .src{text-align:left}
.sheet-body.padded{padding:8px 16px 16px}
.search-body .search-form{padding-top:6px}
.cont-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.cont-row .cont{margin-top:0}
.studywrap{flex:none}
.sw-sum{list-style:none;display:inline-flex;align-items:center;gap:7px;padding:9px 14px 9px 11px;border-radius:22px;border:1px solid var(--line);background:#ffffff0d;color:var(--fg);font-size:14px;font-weight:600;cursor:pointer}
.sw-sum::-webkit-details-marker{display:none}
.sw-sum svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.studywrap[open] .sw-sum{border-color:#d8b46a99;color:var(--gold)}
.sw-cards{position:absolute;left:12px;right:82px;bottom:calc(96px + var(--safe-bot));max-height:min(56dvh,520px);overflow-y:auto;overscroll-behavior:contain;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 10px 40px #000a;z-index:6;padding:6px;animation:hintIn .18s ease}
.sc{border-bottom:1px solid var(--line)}
.sc:last-child{border-bottom:0}
.sc-sum{list-style:none;display:flex;flex-direction:column;gap:2px;padding:12px 12px;cursor:pointer;position:relative}
.sc-sum::-webkit-details-marker{display:none}
.sc-sum::after{content:"›";position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:20px;transition:transform .15s}
.sc[open] .sc-sum::after{transform:translateY(-50%) rotate(90deg)}
.sc-sum b{font-size:14.5px}
.sc-sum span{font-size:12px;color:var(--muted)}
.sc-sum:focus-visible,.sw-sum:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sc-body{padding:0 12px 14px;font-size:14px;line-height:1.55}
.sc-text{margin:0 0 8px}
.sc-text.ar-text{font-family:var(--ar-font);font-size:18px;line-height:2}
.sc-reflect{font-size:16px;line-height:1.5;margin:0 0 8px;color:var(--fg)}
.sc-body .rel-card{padding:10px 12px}
.sc-body .rel-ar{font-size:19px}

@media (max-width:400px){.study-tabs{gap:4px;padding:0 8px 10px}.stab{padding:8px 8px;font-size:12.5px}}

/* ---------- v0.3: keep-reading pill ---------- */
.cont{padding:8px 14px 8px 11px;gap:10px;text-align:left;max-width:100%}
.cont-t{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.cont-l{font-size:14px;font-weight:600}
.cont-s{font-size:11.5px;font-weight:500;color:#e9dcbf;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cont-arr{font-size:16px;margin-left:2px}
.cont-row+.hint{margin-top:10px}

/* ---------- top bar: Qibla ---------- */
.top-right{position:absolute;right:12px;top:calc(9px + var(--safe-top));display:flex;gap:6px;align-items:center}
.top-right .streak{position:static}
.qibla-btn{display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:4px 10px 4px 7px;border-radius:20px;background:#ffffff14;color:var(--fg);font-size:13px;font-weight:600}
.qibla-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6}
.qibla-btn svg .fill{fill:var(--gold);stroke:none}
@media (max-width:400px){.qibla-btn span{display:none}.qibla-btn{padding:4px 7px;min-width:36px;justify-content:center}}
.study-titles{flex:1;min-width:0}
.st-share svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}

/* ---------- start: shared verse ---------- */
.start.deep .start-inner h1{font-size:24px}
.start.deep #startLead{color:var(--gold);font-weight:600;font-size:17px}
#startDeep{color:var(--muted);margin:14px 0 6px}

/* ---------- share sheet ---------- */
.share-body{display:flex;flex-direction:column;gap:10px}
.sh-row{display:flex;flex-wrap:wrap;gap:8px}
.sh-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;border-radius:20px;background:#ffffff12;border:1px solid var(--line);color:var(--fg);font-size:14px;font-weight:500;text-decoration:none}
.primary-sm{background:var(--gold);color:#111;border-color:transparent;font-weight:600}
.sh-seg{align-self:flex-start}
.sh-themes{display:flex;gap:8px;flex-wrap:wrap}
.sh-theme{min-height:40px;padding:6px 14px;border-radius:12px;font-size:13px;font-weight:600;border:2px solid transparent}
.sh-theme.on{border-color:var(--gold)}
.sh-preview{display:flex;justify-content:center;background:#0003;border-radius:14px;padding:10px}
.sh-canvas{width:auto;max-width:100%;height:min(46dvh,420px);border-radius:8px;box-shadow:0 6px 24px #0008}
.sh-preview[data-size="story"] .sh-canvas{height:min(52dvh,480px)}

/* ---------- qibla ---------- */
.qibla-body{display:flex;flex-direction:column;gap:10px}
.qb-why{margin:4px 0 0;font-size:14px;line-height:1.45}
.qb-start .primary{padding:12px 30px;font-size:16px}
.qb-msg:empty{display:none}
.qb-msg{font-size:14px;line-height:1.45}
.qb-msg.warn{background:#d8b46a1f;border:1px solid #d8b46a66;border-radius:12px;padding:10px 12px}
.qb-result{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.qb-dial{width:min(64vw,260px);aspect-ratio:1}
.qb-svg{width:100%;height:100%}
.qb-rose,.qb-arrow{transform-origin:100px 100px;transform-box:view-box;transition:transform .25s ease-out}
.qb-ring{fill:#ffffff08;stroke:var(--line);stroke-width:1.5}
.qb-ticks line{stroke:var(--muted)}
.qb-n{fill:#e06a5a;font:700 16px Inter,sans-serif;text-anchor:middle;dominant-baseline:middle}
.qb-c{fill:var(--muted);font:600 13px Inter,sans-serif;text-anchor:middle;dominant-baseline:middle}
.qb-head{fill:var(--gold)}
.qb-tail{fill:#ffffff40}
.qb-kaaba{fill:#111;stroke:var(--gold);stroke-width:1.5}
.qb-pin{fill:var(--fg)}
.qb-top{fill:var(--fg)}
.qb-big{margin:6px 0 0;font-size:22px;font-weight:600}
.qb-sub{margin:0;color:var(--muted);font-size:13px;line-height:1.45}
.qb-live{margin-top:6px}
.qb-status{font-size:15px;font-weight:600;margin:4px 0}
.qb-status.ok{color:#6fd39a}
.qb-manual summary{cursor:pointer;color:var(--gold);font-size:14px;padding:10px 0;min-height:40px}
.qb-l{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted);margin-bottom:10px}
.qb-l select,.qb-l input{min-height:40px;padding:8px 10px;border-radius:10px;background:#ffffff0d;border:1px solid var(--line);color:var(--fg);font-size:15px}
.qb-l input,.qb-l select{width:100%;min-width:0;box-sizing:border-box}
.qb-coords{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 10px;align-items:end}
.qb-coords .qb-go{grid-column:1/-1}