* { box-sizing: border-box; }
      html, body { margin: 0; height: 100%; -webkit-tap-highlight-color: transparent; }
      #page, #page * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
      body {
        background: #fffaf0;
        color: #1a1612;
        font-family: "Segoe UI", sans-serif;
        display: flex;
        flex-direction: column;
        height: 100dvh;
        overflow: hidden;
      }
      header {
        background: #fffaf0;
        color: #6a5e4c;
        padding: calc(0.28rem + env(safe-area-inset-top)) 0.75rem 0.05rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.35rem;
      }
      header a {
        color: #8a7d68;
        text-decoration: none;
        font-size: 1rem;
        line-height: 1;
      }
      a.home-brand { display: flex; align-items: center; gap: 0.22rem; flex: none; color: #12352c; font-weight: 700; font-size: 0.68rem; line-height: 1; height: 1rem; }
      a.home-brand img { width: 1rem; height: 1rem; border-radius: 22%; display: block; }
      header h1 { margin: 0; font-size: 0.9rem; font-weight: 500; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .num {
        text-align: center;
        color: #8a7d68;
        font-size: 0.68rem;
        padding: 0.05rem 0 calc(0.22rem + env(safe-area-inset-bottom));
        background: #fffaf0;
      }
      .page {
        --rows: 15;
        flex: 1;
        min-height: 0;
        margin: 0;
        padding-bottom: 0.55rem; /* A: cüzi alt boşluq */
        background: #fffaf0;
        border: none;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
      }
      .page.mid { justify-content: center; position: relative; }
      .page.mid .line { flex: 0 0 calc(100% / var(--rows)); }
      .page.mid .line:not(.surah) { transform: translateY(calc(var(--up, 0px) * -1)); }
      .page.mid .line.surah {
        position: absolute;
        left: 0;
        right: 0;
        height: calc(100% / var(--rows));
        flex: none;
        top: calc(50% - var(--up, 0px) - var(--half, 3.5) * 100% / var(--rows) - 155% / var(--rows));
      }
      .line {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        white-space: nowrap;
        direction: rtl; /* the ayah runs are flex items: lay them out right-to-left like the text inside them */
      }
      .line.surah { color: #1a1612; }
      .shead {
        position: relative;
        width: 96%;
        height: 96%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }
      .shead img { position: absolute; inset: 0; width: 100%; height: 100%; }
      .snames {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.28em;
        direction: rtl;
      }
      .sname {
        font-family: surahnames, serif;
        line-height: 1;
        color: #1a1612;
      }
      .basmala {
        font-family: QCF1, serif;
        font-size: 1em;
        line-height: 1;
        direction: rtl;
        color: #1a1612;
      }
      .line.stack { flex: 1.75 1 0; flex-direction: column; justify-content: center; }
      .line.stack .shead { height: 52%; width: 90%; }
      .line.stack .basmala { font-size: 0.72em; }
      @media (orientation: portrait) and (max-width: 520px) {
        .page:not(.mid) { justify-content: center; }
        .page:not(.mid) .line { flex: 0 1 calc(100% / 17.2); } /* A: cüzi qısaltma */
        .page:not(.mid) .line.stack { flex: 0 1 calc(175% / 17.2); }
      }
      @media (orientation: landscape) and (max-height: 520px) {
        header { display: none; }
        .num { display: none; }
        .page {
          margin: 0;
          border: none;
          border-radius: 0;
          overflow: auto;
          touch-action: pan-y;
          justify-content: flex-start;
          padding: 0.55em 0 0.8em;
        }
        .page.mid { justify-content: flex-start; }
        .page .line,
        .page.mid .line,
        .page.mid .line.surah,
        .page.mid .line:not(.surah) {
          flex: 0 0 auto;
          position: static;
          top: auto;
          height: auto;
          min-height: 2.45em;
          transform: none;
        }
        .shead { height: 1.45em; width: 94%; }
      }
      @media (orientation: landscape) and (min-height: 521px) {
        header, .num { display: none; }
        .page { margin: 0; border: none; border-radius: 0; overflow: hidden; }
      }
      #gate {
        position: fixed;
        inset: 0;
        z-index: 20;
        background: #f6f1e4;
        color: #161310;
        display: flex;
        flex-direction: column;
        font-family: "Segoe UI", sans-serif;
      }
      #gate[hidden] { display: none; }
      .idx-head {
        text-align: center;
        padding: calc(0.65rem + env(safe-area-inset-top)) 0.85rem 0.55rem;
        color: #1a3330;
      }
      .brand-row { display: flex; align-items: center; justify-content: center; gap: 0.7rem; text-decoration: none; color: inherit; cursor: pointer; }
      .app-icon {
        width: 3.35rem; height: 3.35rem; border-radius: 22%;
        box-shadow: 0 3px 12px rgba(8, 28, 22, 0.28);
        flex-shrink: 0;
      }
      .brand-tx { text-align: start; min-width: 0; }
      .brand-tx strong { display: block; font-size: 1.28rem; font-weight: 680; letter-spacing: -0.02em; color: #12352c; }
      .brand-tx span { display: block; margin-top: 0.05rem; font-size: 0.78rem; font-weight: 550; color: #6d6456; }
      .home-bar { display: flex; justify-content: flex-end; align-items: center; gap: 0.45rem; margin-top: 0.75rem; }
      .home-ico, .home-search {
        width: 2.5rem; height: 2.5rem; flex: 0 0 auto; border: 1.5px solid rgba(18,53,44,0.28); border-radius: 50%;
        background: #fffaf0; color: #12352c; display: grid; place-items: center; cursor: pointer; padding: 0;
      }
      .home-search, .home-ico.home-hi { background: #12352c; color: #e4c98a; border-color: #12352c; box-shadow: 0 2px 8px rgba(18,53,44,0.2); }
      .home-ico svg, .home-search svg { width: 1.15rem; height: 1.15rem; }
      .recent-pop { margin-top: 0.5rem; background: #fffaf0; border: 1px solid rgba(196,165,110,0.6); border-radius: 0.9rem; padding: 0.35rem; box-shadow: 0 6px 18px rgba(18,53,44,0.12); }
      .recent-pop[hidden] { display: none; }
      .recent-pop button { display: flex; width: 100%; justify-content: space-between; align-items: center; border: 0; background: none; padding: 0.6rem 0.7rem; border-radius: 0.6rem; font: 600 0.92rem "Segoe UI", sans-serif; color: #12352c; cursor: pointer; }
      .recent-pop button + button { border-top: 1px solid rgba(196,165,110,0.3); }
      .recent-pop button span { color: #8a7d68; font-weight: 550; font-size: 0.82rem; }
      .recent-pop p { margin: 0.5rem; text-align: center; color: #6d6456; font-size: 0.88rem; }
      .home-search.on { background: #c4a56e; color: #12352c; }
      .home-q { margin-top: 0.42rem; }
      .home-q[hidden] { display: none; }
      .home-q input {
        width: 100%; border: 1px solid rgba(196, 165, 110, 0.75); background: #fffaf0;
        border-radius: 0.75rem; padding: 0.55rem 0.75rem;
        font: 550 0.95rem "Segoe UI", sans-serif; color: #1a3330; outline: none;
      }
      .home-q input:focus { border-color: #12352c; }
      .home-empty { margin: 0.35rem 0.2rem 0; text-align: center; color: #6d6456; font-size: 0.88rem; }
      .home-empty[hidden] { display: none; }
      .qm-pop {
        position: fixed; z-index: 60; overflow: auto;
        background: #fffaf0; border: 1.5px solid #c4a56e; border-radius: 0.95rem;
        box-shadow: 0 12px 32px rgba(16, 34, 32, 0.2); padding: 0.3rem;
      }
      .qm-pop[hidden] { display: none; }
      .qm-pop .lang-opt {
        display: flex; width: 100%; border: 0; background: transparent; border-radius: 0.65rem;
        padding: 0.58rem 0.7rem; font: 640 0.92rem "Segoe UI", sans-serif; color: #1a3330;
        text-align: start; cursor: pointer;
      }
      .qm-pop .lang-opt.on { background: #12352c; color: #e4c98a; }
      .qm-pop .qm-res { padding: 0.42rem 0.4rem; }
      .qm-pop .qm-list { padding: 0.1rem; }
      .qm-set .home-set { display: flex; flex-direction: column; gap: 0.28rem; }
      .set-line {
        display: flex; align-items: center; gap: 0.4rem; width: 100%;
        min-height: 2.05rem; padding: 0.26rem 0.55rem;
        border-radius: 0.72rem; border: 1px solid rgba(196, 165, 110, 0.72);
        background: #fffaf0; color: #1a3330;
        font: 600 0.84rem "Segoe UI", sans-serif; text-align: start; cursor: pointer;
      }
      .set-line .k {
        flex: 0 0 4.5rem; font-size: 0.66rem; font-weight: 750;
        letter-spacing: 0.06em; text-transform: uppercase; color: #8a6a2e;
      }
      .set-line .v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 640; }
      .set-line .chev { color: #a08a58; font-size: 0.72rem; }
      .qm-size-row {
        display: flex; align-items: center; gap: 0.55rem; margin-top: 0.65rem;
        padding: 0.45rem 0.55rem; border-radius: 0.75rem; background: #fffaf0;
        border: 1px solid rgba(196, 165, 110, 0.5);
      }
      .qm-size-row > .k {
        font-size: 0.66rem; font-weight: 750; letter-spacing: 0.05em;
        text-transform: uppercase; color: #8a6a2e;
      }
      .qm-size-row .qm-size { margin-inline-start: auto; }
      #rows { flex: 1; overflow: auto; padding-bottom: calc(0.6rem + env(safe-area-inset-bottom)); }
      #rows[hidden] { display: none; }
      #ahits { flex: 1; overflow: auto; padding-bottom: calc(0.6rem + env(safe-area-inset-bottom)); }
      #ahits[hidden] { display: none; }
      .ahit {
        width: 100%; border: 0; border-bottom: 1px solid rgba(26, 51, 48, 0.1);
        background: transparent; text-align: start; padding: 0.55rem 0.95rem; font: inherit; color: inherit; cursor: pointer;
      }
      .ahit b { display: block; color: #8a6a2e; font-size: 0.78rem; font-weight: 750; letter-spacing: 0.02em; }
      .ahit p {
        margin: 0.12rem 0 0; direction: rtl; text-align: right; color: #1a1612;
        font-family: "Noto Naskh Arabic", "Amiri", "Scheherazade New", serif;
        font-size: 1.2rem; line-height: 1.75;
      }
      .ahit-more { margin: 0; padding: 0.7rem; text-align: center; color: #6d6456; font-size: 0.82rem; }
      .srow, .jrow {
        width: 100%;
        border: 0;
        font: inherit;
        text-align: start;
        color: inherit;
      }
      .srow {
        display: grid;
        grid-template-columns: 2.2rem 1fr auto;
        gap: 0.55rem;
        align-items: center;
        min-height: 3.15rem;
        padding: 0.4rem 0.95rem;
        background: transparent;
        border-bottom: 1px solid rgba(26, 51, 48, 0.1);
      }
      .srow b { display: block; color: #1a3330; font-size: 1.02rem; font-weight: 650; }
      .srow small { display: block; color: #5c675f; font-size: 0.8rem; font-weight: 500; }
      .srow .no, .srow .pg, .jrow .pg { color: #5c675f; font-variant-numeric: tabular-nums; }
      .srow .no { font-size: 1.05rem; }
      .srow .pg, .jrow .pg { font-size: 0.85rem; }
      .jrow {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 2.35rem;
        padding: 0.4rem 0.95rem;
        background: #e7e4d8;
        color: #1a3330;
        font-weight: 650;
        font-size: 0.92rem;
      }
      .ay { border-radius: 0; }
      .line { --g: 0.09em; }
      .w { margin-inline-start: var(--g); }
      .w.w0 { margin-inline-start: 0; }
      .ay.hl { background: rgba(196, 165, 110, 0.36); }
      .hdr-acts { margin-inline-start: auto; display: flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; }
      .gear { background: none; border: 0; color: #8a7d68; padding: 0.15rem; line-height: 0; cursor: pointer; }
      .gear svg { width: 1.35rem; height: 1.35rem; display: block; }
      .gear svg { width: 1.15rem; height: 1.15rem; }
      .qm-back { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; justify-content: center; background: rgba(16, 34, 32, 0.4); font-family: "Segoe UI", sans-serif; }
      .qm-back[hidden] { display: none; }
      .qm-sheet { width: min(100%, 34rem); max-height: 88%; display: flex; flex-direction: column; background: #f6f1e4; color: #161310; border: 1.5px solid #c4a56e; border-bottom: 0; border-radius: 1.3rem 1.3rem 0 0; padding: 0.8rem 0.85rem calc(0.8rem + env(safe-area-inset-bottom)); }
      .qm-ayah { max-height: 62%; }
      .qm-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.1rem 0.3rem 0.55rem; }
      .qm-head h2 { margin: 0; font-size: 1.05rem; font-weight: 600; color: #1a3330; }
      .qm-nav { display: flex; gap: 0.3rem; margin-inline-start: auto; }
      .qm-close { margin-inline-start: auto; border: 0; background: none; color: #24584e; font: inherit; font-weight: 600; font-size: 0.92rem; cursor: pointer; }
      .qm-nav + .qm-close { margin-inline-start: 0.2rem; }
      .qm-scroll, .qm-body { overflow-y: auto; padding: 0 0.3rem; }
      .qm-sec { padding: 0.6rem 0; border-top: 1px solid rgba(26, 51, 48, 0.12); }
      .qm-sec h3 { margin: 0 0 0.5rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #5c675f; }
      .qm-note { margin: 0 0 0.5rem; font-size: 0.8rem; color: #5c675f; }
      .qm-size { display: flex; align-items: center; gap: 0.9rem; }
      .qm-size b { min-width: 3.2rem; text-align: center; color: #1a3330; }
      .qm-chip, .qm-rb { border: 1px solid rgba(26, 51, 48, 0.25); border-radius: 999px; background: none; color: #1a3330; font: inherit; font-size: 0.84rem; font-weight: 600; padding: 0.32rem 0.8rem; white-space: nowrap; cursor: pointer; }
      .qm-chip:disabled, .qm-rb:disabled { opacity: 0.35; }
      .qm-rb.main { background: #1a3330; border-color: #1a3330; color: #f3e7d0; }
      .qm-rb.sel { background: #f3e7d0; border-color: #c4a56e; }
      .qm-rb.danger { background: #a33; border-color: #a33; color: #fff; }
      .qm-rb.ghost { border-color: transparent; padding: 0.32rem 0.45rem; }
      .qm-list { list-style: none; margin: 0; padding: 0; }
      .qm-res { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.4rem; border-radius: 0.7rem; }
      .qm-res + .qm-res { border-top: 1px solid rgba(26, 51, 48, 0.08); }
      .qm-res.on { background: #efe3c6; }
      .qm-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
      .qm-tx b { font-size: 0.95rem; font-weight: 600; }
      .qm-tx small { font-size: 0.78rem; color: #5c675f; }
      .qm-err { color: #a33 !important; }
      .qm-bar { display: block; height: 4px; border-radius: 4px; background: rgba(26, 51, 48, 0.12); overflow: hidden; margin-top: 0.2rem; }
      .qm-bar[hidden] { display: none; }
      .qm-bar i { display: block; height: 100%; background: #24584e; transition: width 0.2s; }
      .qm-act { display: flex; gap: 0.3rem; flex-shrink: 0; }
      .qm-tabs { display: flex; gap: 0.3rem; padding: 0 0.3rem 0.5rem; }
      .qm-tab { flex: 1; border: 0; border-radius: 0.6rem; padding: 0.42rem; font: inherit; font-weight: 600; font-size: 0.9rem; background: rgba(26, 51, 48, 0.07); color: #5c675f; cursor: pointer; }
      .qm-tab.on { background: #1a3330; color: #e4c98a; }
      .qm-pick { margin: 0 0.3rem 0.5rem; padding: 0.4rem 0.6rem; border: 1px solid rgba(26, 51, 48, 0.25); border-radius: 0.6rem; background: #fbf6ec; font: inherit; }
      .qm-body { line-height: 1.7; }
      .qm-body[lang="ar"] { font-family: "Amiri", "Noto Naskh Arabic", serif; line-height: 1.9; }
      .qm-body p { margin: 0 0 0.6rem; white-space: pre-line; }
      .qm-src { display: block; font-size: 0.8rem; color: #5c675f; font-family: "Segoe UI", sans-serif; margin-bottom: 0.3rem; }
      .qm-fn { font-size: 0.82em; color: #5c675f; border-top: 1px solid rgba(26, 51, 48, 0.12); padding-top: 0.4rem; }
      .qm-icons { display: flex; flex-wrap: nowrap; overflow-x: auto; align-items: center; gap: 0.35rem; padding: 0 0.2rem 0.45rem; margin-bottom: 0.35rem; border-bottom: 1px solid rgba(196, 165, 110, 0.45); }
      .qm-ic { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border: 1px solid rgba(196, 165, 110, 0.7); border-radius: 999px; background: #fbf6ec; color: #1a3330; cursor: pointer; padding: 0; }
      .qm-ic svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
      .qm-ic.on { background: #f3e7d0; color: #8a6a2e; }
      .qm-ic.on svg { fill: #c4a56e; stroke: #8a6a2e; }
      .qm-ic.end { margin-inline-start: auto; border-color: transparent; background: none; }
      .qm-toast { position: fixed; left: 50%; top: calc(3rem + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 40; background: #1a3330; color: #f3e7d0; padding: 0.5rem 1rem; border-radius: 999px; font: 600 0.88rem "Segoe UI", sans-serif; }
      .qm-toast[hidden] { display: none; }
      .qm-set { background: #f3ecdc; }
      .qm-set .qm-scroll { padding: 0.1rem 0.15rem 0.4rem; }
      .qm-card { background: #fffaf0; border: 1px solid rgba(196, 165, 110, 0.45); border-radius: 1rem; box-shadow: 0 2px 10px rgba(60, 45, 20, 0.07); padding: 0.75rem 0.8rem; margin-bottom: 0.7rem; }
      .qm-card-h { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.6rem; }
      .qm-card-h h3 { margin: 0; font-size: 0.98rem; font-weight: 650; color: #1a3330; }
      .qm-card-h small { margin-inline-start: auto; font-size: 0.75rem; color: #8a7d68; background: #f3e7d0; border-radius: 999px; padding: 0.1rem 0.5rem; }
      .qm-card-ic { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 0.6rem; background: #1a3330; color: #e4c98a; flex-shrink: 0; }
      .qm-card-ic svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
      .qm-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
      .qm-chip.on { background: #1a3330; border-color: #1a3330; color: #e4c98a; }
      .qm-card .qm-res { padding: 0.55rem 0.15rem; border-radius: 0.6rem; }
      .qm-card .qm-res.on { background: #f6ecd4; padding-inline: 0.45rem; }
      .qm-card .qm-rb { font-size: 0.78rem; padding: 0.28rem 0.7rem; }
      .qm-grp { margin: 0.5rem 0 0.1rem; padding-top: 0.45rem; border-top: 1px solid rgba(196, 165, 110, 0.35); font-size: 0.74rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: #8a6a2e; list-style: none; }
      .qm-list > .qm-grp:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
      .qm-grp + .qm-res { border-top: 0 !important; }
      .qm-back.qm-page { align-items: stretch; justify-content: stretch; background: #f6f1e4; z-index: 40; }
      .qm-back.qm-page .qm-set {
        width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0;
        padding: 0; background: #f6f1e4; display: flex; flex-direction: column; min-height: 0;
      }
      .qm-page-bar {
        display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0;
        min-height: 3.1rem; padding: calc(0.2rem + env(safe-area-inset-top)) 0.35rem 0.2rem;
        background: #fffaf0; border-bottom: 1px solid rgba(26, 51, 48, 0.1);
      }
      .qm-page-bar h2 { margin: 0; flex: 1; text-align: center; font-size: 1.08rem; font-weight: 650; color: #12352c; }
      .qm-page-back {
        width: 2.5rem; height: 2.5rem; border: 0; background: none; color: #12352c;
        font-size: 1.9rem; line-height: 1; cursor: pointer; padding: 0;
      }
      .qm-page-sp { width: 2.5rem; flex-shrink: 0; }
      .qm-back.qm-page .qm-scroll { flex: 1; min-height: 0; -webkit-overflow-scrolling: touch; padding: 0.9rem 0.9rem calc(1rem + env(safe-area-inset-bottom)); }
      .qm-back.qm-page .home-set { gap: 0.45rem; }
      .set-sec { margin: 0.95rem 0.2rem 0.15rem; font-size: 0.7rem; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; color: #8a6a2e; }
      .set-sec:first-child { margin-top: 0; }
      .set-card {
        display: flex; align-items: center; gap: 0.7rem; width: 100%;
        min-height: 3.05rem; padding: 0.5rem 0.7rem;
        border-radius: 0.9rem; border: 1px solid rgba(196, 165, 110, 0.72);
        background: #fffaf0; color: #1a3330; text-align: start; cursor: pointer; font: inherit;
      }
      .set-card.static { cursor: default; }
      .set-card .ic {
        width: 2.05rem; height: 2.05rem; flex: 0 0 auto; display: grid; place-items: center;
        border-radius: 0.58rem; background: #12352c; color: #e4c98a;
      }
      .set-card .ic svg { width: 1.12rem; height: 1.12rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
      .set-card .tx { flex: 1; min-width: 0; }
      .set-card .tx b { display: block; font-size: 0.96rem; font-weight: 650; line-height: 1.2; color: #12352c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .set-card .v { flex: 0 1 auto; max-width: 42%; font-size: 0.8rem; font-weight: 600; line-height: 1.2; color: #8a6a2e; text-align: end; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .set-card .chev { flex: 0 0 auto; color: #a08a58; font-size: 1.25rem; line-height: 1; }
      [dir="rtl"] .set-card .chev { display: inline-block; transform: scaleX(-1); }
      .set-card .qm-size { flex: 0 0 auto; gap: 0.28rem; }
      .set-card .qm-size .qm-chip { padding: 0.18rem 0.5rem; min-width: 2.15rem; font-size: 0.82rem; }
      .set-card .qm-size b { min-width: 2.5rem; font-size: 0.86rem; font-weight: 700; }
      .qm-legal { display: flex; flex-direction: column; gap: 0.7rem; }
      .qm-legal section { background: #fffaf0; border: 1px solid rgba(196, 165, 110, 0.5); border-radius: 0.9rem; padding: 0.75rem 0.85rem; }
      .qm-legal h3 { margin: 0 0 0.28rem; font-size: 0.72rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: #8a6a2e; }
      .qm-legal p { margin: 0; line-height: 1.6; font-size: 0.94rem; color: #1a3330; }
      .qm-legal a { display: block; margin-top: 0.35rem; color: #8a6a2e; word-break: break-all; font-size: 0.84rem; }
      .qm-page-list { display: flex; flex-direction: column; gap: 0.4rem; }
      .qm-page-list .lang-opt {
        display: flex; width: 100%; border: 1px solid rgba(196, 165, 110, 0.72);
        background: #fffaf0; border-radius: 0.75rem; padding: 0.72rem 0.85rem;
        font: 640 0.98rem "Segoe UI", sans-serif; color: #1a3330; text-align: start; cursor: pointer;
      }
      .qm-page-list .lang-opt.on { background: #12352c; color: #e4c98a; border-color: #12352c; }
      .qm-set .qm-note { text-align: center; margin: 0.85rem 0 0.3rem; }
      [dir="rtl"] .set-line .chev { display: inline-block; transform: scaleX(-1); }
      .qm-step { border: 1px solid #c4a56e; border-radius: 999px; background: #1a3330; color: #f3e7d0; font: 600 0.82rem "Segoe UI", sans-serif; padding: 0.38rem 0.75rem; cursor: pointer; }
      .qm-step:disabled { opacity: 0.3; }
      .qm-ayah .qm-head h2 { font-size: 1.1rem; }
      .qj{position:fixed;inset:0;z-index:36;background:rgba(16,34,32,.45);display:flex;align-items:flex-end;font-family:"Segoe UI",sans-serif}
      .qj[hidden]{display:none}
      .qj-box{width:100%;max-height:75vh;overflow:auto;background:#fffaf0;border-radius:20px 20px 0 0;box-shadow:0 -6px 24px #0004;padding:18px;color:#2b2b22}
      .qj-in{width:100%;background:#efe6cc;border:0;border-radius:12px;padding:12px;font-size:1rem;outline:none}
      .qj-h{color:#8a8168;font-size:.75rem;margin:12px 0 2px}
      .qj-row{display:flex;width:100%;justify-content:space-between;align-items:center;gap:.5rem;padding:10px 0;border:0;border-bottom:1px solid #eadfc0;background:none;font:inherit;font-size:.9rem;text-align:start;color:inherit}
      .qj-b{background:#3e4a2c;color:#fff;border-radius:10px;padding:3px 9px;font-size:.75rem;white-space:nowrap}
      .qj-d{color:#8a8168;font-size:.75rem}
      .qm-menu { position: fixed; inset: 0; z-index: 35; display: flex; align-items: center; justify-content: center; background: rgba(16, 34, 32, 0.45); padding: 1rem; font-family: "Segoe UI", sans-serif; }
      .qm-menu[hidden] { display: none; }
      .qm-menu-box { width: min(100%, 20rem); background: #fffaf0; border: 1.5px solid #c4a56e; border-radius: 1.1rem; padding: 1rem; display: flex; flex-direction: column; gap: 0.5rem; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); }
      .qm-menu-box > b { color: #1a3330; font-size: 0.95rem; margin-bottom: 0.2rem; text-align: center; }
      .qm-opt { border: 1px solid rgba(196, 165, 110, 0.7); border-radius: 0.8rem; background: #fbf6ec; padding: 0.75rem; font: 600 1rem "Segoe UI", sans-serif; color: #1a3330; text-align: start; cursor: pointer; }
      .qm-opt.ghost { border-color: transparent; background: none; text-align: center; color: #5c675f; font-size: 0.9rem; }
      .qm-prev { width: min(100%, 24rem); max-height: 92vh; }
      .qm-prev img { width: 100%; min-height: 0; flex: 1; object-fit: contain; border-radius: 0.5rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); }
      .qm-prev-row { display: flex; gap: 0.4rem; justify-content: center; }
      .qm-selbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(2rem + env(safe-area-inset-bottom)); z-index: 25; display: flex; align-items: center; gap: 0.4rem; background: #fffaf0; border: 1.5px solid #c4a56e; border-radius: 999px; padding: 0.4rem 0.45rem 0.4rem 0.9rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); font-family: "Segoe UI", sans-serif; white-space: nowrap; }
      .qm-selbar[hidden] { display: none; }
      .qm-count { font-weight: 650; font-size: 0.86rem; color: #1a3330; margin-inline-end: 0.2rem; }
      .qm-cmp { position: fixed; inset: 0; z-index: 33; background: #f6f1e4; display: flex; flex-direction: column; font-family: "Segoe UI", sans-serif; color: #161310; }
      .qm-cmp[hidden] { display: none; }
      .qm-cmp-h { display: flex; align-items: center; gap: 0.45rem; padding: calc(0.55rem + env(safe-area-inset-top)) 0.8rem 0.55rem; background: #fffaf0; border-bottom: 1px solid rgba(196, 165, 110, 0.55); }
      .qm-cmp-h .qm-full-t small { color: #8a6a2e; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.68rem; }
      .qm-cmp-h .qm-step { min-width: 2.2rem; }
      .qm-cmp-ed { border: 1.3px solid #c4a56e; background: #fffaf0; color: #1a3330; border-radius: 1rem; padding: 0.3rem 0.6rem; font-size: 0.76rem; font-weight: 700; white-space: nowrap; }
      .qm-cmp-ar { font-family: QMHafs, serif; text-align: center; line-height: 2; color: #1a1612; padding: 0.5rem 1rem 0.4rem; background: #fffaf0; border-bottom: 1px solid rgba(196, 165, 110, 0.45); max-height: 30vh; overflow-y: auto; flex: none; }
      .qm-cmp-tabs { display: flex; gap: 0.25rem; margin: 0.6rem 0.8rem 0; background: #ebe2cc; border-radius: 0.8rem; padding: 0.2rem; overflow-x: auto; scrollbar-width: none; flex: none; }
      .qm-cmp-tabs::-webkit-scrollbar { display: none; }
      .qm-cmp-tab { flex: 1 0 auto; min-width: 4.2rem; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 0; background: none; font: inherit; font-size: 0.76rem; font-weight: 700; padding: 0.45rem 0.6rem; border-radius: 0.6rem; color: #5c675f; }
      .qm-cmp-tab.on { background: #1a3330; color: #fff; }
      .qm-cmp-rail { flex: 1; min-height: 0; display: flex; gap: 0.7rem; padding: 0.7rem 0.8rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 0.8rem; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: none; direction: ltr; }
      .qm-cmp-rail::-webkit-scrollbar { display: none; }
      .qm-cmp-card { flex: 0 0 84%; scroll-snap-align: start; display: flex; flex-direction: column; min-height: 0; background: #fffaf0; border: 1px solid rgba(196, 165, 110, 0.6); border-radius: 1.1rem; padding: 0.85rem 0.9rem; }
      .qm-cmp-card { cursor: zoom-in; }
      .qm-cmp-fs { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; background: #f6f1e4; }
      .qm-cmp-fs-b { flex: 1; overflow: auto; padding: 0.9rem 1.1rem 2rem; background: #fffaf0; }
      .qm-cmp-card:only-child { flex-basis: 100%; }
      .qm-cmp-card h4 { margin: 0 0 0.5rem; display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.82rem; color: #1a3330; }
      .qm-cmp-card h4 small { color: #8a6a2e; font-weight: 650; flex: none; }
      .qm-cmp-tx { flex: 1; overflow-y: auto; line-height: 1.6; }
      .qm-cmp-tx p { margin: 0 0 0.6rem; }
      .qm-cmp-tx[lang="ar"] { line-height: 1.9; }
      .qm-cmp-h .qm-full-t { flex: 1; min-width: 0; }
      .qm-cmp-h .qm-full-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .qm-cmp-hint { margin: 0 0.8rem 0.4rem; border: 1px dashed #c4a56e; background: #fffaf0; color: #8a6a2e; border-radius: 0.8rem; padding: 0.45rem 0.6rem; font: inherit; font-size: 0.78rem; font-weight: 650; }
      .qm-cmp-dots { display: flex; justify-content: center; gap: 0.35rem; padding: 0 0 calc(0.8rem + env(safe-area-inset-bottom)); flex: none; }
      .qm-cmp-dots i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: #d9cba8; transition: width 0.2s; }
      .qm-cmp-dots i.on { background: #1a3330; width: 1.2rem; border-radius: 1rem; }
      .qm-wb { margin: 0; font-family: QMHafs, serif; }
      .qm-wb-r { padding: 0.35rem 0; border-bottom: 1px dashed rgba(196, 165, 110, 0.5); }
      .qm-wb-r:last-child { border-bottom: 0; }
      .qm-wb dt { display: inline; font-weight: 700; color: #8a6a2e; }
      .qm-wb dt::after { content: ": "; color: #8a7d68; }
      .qm-wb dd { display: inline; margin: 0; font-family: "Segoe UI", system-ui, sans-serif; }
      .qm-w-none { margin: 0; color: #8a7d68; font-style: italic; font-family: "Segoe UI", sans-serif; font-size: 0.85rem; }
      .qm-wb-none { font-family: "Segoe UI", sans-serif; color: #8a7d68; font-style: italic; text-align: center; margin-top: 1rem; }
      .qm-credit { display: block; color: #8a6a2e; font-size: 0.7rem; margin-top: 0.15rem; }
      .qm-credit[hidden] { display: none; }
      .qm-info { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; margin-inline-start: 0.35rem; padding: 0; border-radius: 50%; border: 1px solid #8a6a2e; background: transparent; color: #8a6a2e; font: italic 700 0.7rem/1 Georgia, serif; vertical-align: middle; cursor: pointer; }
      .qm-info.on { background: #8a6a2e; color: #fff; }
      .qm-pick-src h3 { margin: 0 0 0.3rem; font-size: 0.95rem; color: #1a3330; text-align: center; }
      .qm-src-list { list-style: none; margin: 0; padding: 0; max-height: 55vh; overflow-y: auto; }
      .qm-src-list li { display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.1rem; border-bottom: 1px solid rgba(196, 165, 110, 0.3); font-size: 0.85rem; }
      .qm-src-list li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
      .qm-src-list li:not(.on) span { color: #8a7d68; }
      .qm-ck { width: 1.4rem; height: 1.4rem; border-radius: 0.4rem; border: 1.5px solid #c4a56e; background: #fffaf0; color: #fff; font-weight: 800; padding: 0; flex: none; }
      .qm-src-list li.on .qm-ck { background: #1a3330; border-color: #1a3330; }
      .qm-mv { width: 1.8rem; height: 1.8rem; border: 1px solid rgba(196, 165, 110, 0.7); border-radius: 0.5rem; background: #fffaf0; color: #1a3330; padding: 0; flex: none; }
      .qm-mv:disabled { opacity: 0.3; }
      .qm-w-ar { display: block; font-family: QMHafs, serif; font-size: 1.45em; font-weight: 400; color: #1a1612; line-height: 1.7; }
      .qm-w-sirac { margin: 0; line-height: 1.8; font-size: 0.95rem; color: #3a3228; }
      .qm-w-sirac small { font-family: "Segoe UI", sans-serif; font-size: 0.66rem; font-weight: 750; letter-spacing: 0.03em; color: #fff; background: #8a6a2e; border-radius: 0.4rem; padding: 0.05rem 0.35rem; margin-inline-end: 0.35rem; white-space: nowrap; }
      .w.wsel { background: rgba(26, 51, 48, 0.16); border-radius: 0.2em; }
      .qm-wpop { position: fixed; z-index: 36; max-width: min(18rem, calc(100vw - 16px)); background: #fffaf0; border: 1.5px solid #c4a56e; border-radius: 0.9rem; padding: 0.55rem 0.75rem 0.5rem; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.22); display: flex; flex-direction: column; gap: 0.25rem; font-family: "Segoe UI", sans-serif; }
      .qm-wp-gear { position: absolute; top: 0.3rem; left: 0.3rem; width: 1.9rem; height: 1.9rem; padding: 0.3rem; border: 0; background: transparent; color: #8a6a2e; }
      .qm-wp-gear svg { width: 100%; height: 100%; }
      .qm-wp-ch { display: flex; gap: 0.3rem; flex-wrap: wrap; justify-content: center; border-top: 1px dashed #d9c49b; padding-top: 0.45rem; margin-top: 0.15rem; }
      .qm-wp-ch[hidden] { display: none; }
      .qm-wp-opt { font: 650 0.78rem "Segoe UI", sans-serif; border: 1.5px solid #c4a56e; background: #fff; color: #5b4a2c; border-radius: 1rem; padding: 0.3rem 0.7rem; min-height: 2rem; }
      .qm-wp-opt.on { background: #1d3b33; border-color: #1d3b33; color: #fff; }
      .qm-wp-opt:disabled { opacity: 0.4; }
      .qm-wps { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.35); display: flex; align-items: flex-end; justify-content: center; }
      .qm-wps-card { background: #fffaf0; width: 100%; max-width: 30rem; border-radius: 1.1rem 1.1rem 0 0; padding: 0.9rem 1rem 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; font-family: "Segoe UI", sans-serif; }
      .qm-wps-h { display: flex; align-items: center; justify-content: space-between; font-size: 1.05rem; }
      .qm-wps-tip { margin: 0; color: #7a6a50; font-size: 0.85rem; }
      .qm-wps-card .qm-wp-ch { border: 0; padding: 0; }
      .qm-wps-prev { position: relative !important; max-width: none; align-self: center; width: min(18rem, 100%); }
      .qm-wps-prev::after { display: none; }
      .ay.qm-mk:not(.hl) { background: color-mix(in srgb, var(--mc) 13%, transparent); }
      .qm-np { z-index: 61; } .qm-np2 { z-index: 62; }
      .qm-np .qm-wps-card { max-height: 88vh; overflow-y: auto; gap: 0.45rem; padding-bottom: calc(1.2rem + env(safe-area-inset-bottom)); color: #161310; }
      .qm-np-grab { display: block; width: 2.6rem; height: 0.3rem; border-radius: 3px; background: #d8c7a2; margin: 0 auto; }
      .qm-np-l { margin: 0.35rem 0 0; font-size: 0.7rem; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; color: #8a6a2e; }
      .qm-np-ta { width: 100%; box-sizing: border-box; min-height: 7rem; resize: vertical; border: 1.4px solid #c4a56e; border-radius: 0.8rem; padding: 0.65rem 0.75rem; font: inherit; font-size: 0.95rem; line-height: 1.5; background: #fff; color: #2a241c; }
      .qm-np-ta:focus, .qm-np-in:focus { outline: 2px solid rgba(26, 51, 48, 0.35); outline-offset: 1px; }
      .qm-np-dots { display: flex; gap: 0.6rem; }
      .qm-np-dot { width: 2rem; height: 2rem; border-radius: 50%; border: 3px solid #fffaf0; box-shadow: 0 0 0 1.3px #c4a56e; padding: 0; cursor: pointer; }
      .qm-np-dot.on { box-shadow: 0 0 0 2.6px #1a3330; }
      .qm-np-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
      .qm-np-chip { border: 1.3px solid #c4a56e; border-radius: 999px; background: #fffaf0; color: #1a3330; font: inherit; font-size: 0.85rem; font-weight: 650; padding: 0.34rem 0.8rem; cursor: pointer; white-space: nowrap; }
      .qm-np-chip.on { background: #1a3330; border-color: #1a3330; color: #fff; }
      .qm-np-chip.add { border-style: dashed; color: #8a6a2e; }
      .qm-np-in { flex: 1; min-width: 0; border: 1.3px solid #c4a56e; border-radius: 0.7rem; padding: 0.4rem 0.6rem; font: inherit; font-size: 0.9rem; background: #fff; color: #1a1612; }
      .qm-np-chips .qm-np-in { flex: 1 1 8rem; }
      .qm-np-row { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
      .qm-np-row .qm-rb { padding: 0.72rem 1rem; font-size: 0.98rem; border-radius: 0.9rem; }
      .qm-np-save { flex: 1; }
      .qm-np-fl { display: flex; flex-direction: column; gap: 0.45rem; }
      .qm-np-fr { display: flex; align-items: center; gap: 0.45rem; }
      .qm-np-fr small { color: #8a7d68; white-space: nowrap; font-size: 0.75rem; }
      .qm-nl-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.3rem; margin: 0 -0.1rem 0.3rem; scrollbar-width: none; }
      .qm-nl { display: flex; flex-direction: column; gap: 0.55rem; }
      .qm-nl-it { background: #fffaf0; border: 1px solid rgba(196, 165, 110, 0.55); border-inline-end: 5px solid var(--c); border-radius: 1rem; padding: 0.6rem 0.8rem; cursor: pointer; }
      .qm-nl-top { display: flex; align-items: center; gap: 0.45rem; }
      .qm-nl-top b { font-size: 0.86rem; color: #1a3330; white-space: nowrap; }
      .qm-nl-sp { flex: 1; }
      .qm-nl-top small { font-size: 0.74rem; color: #8a7d68; white-space: nowrap; }
      .qm-nl-tag { font-size: 0.68rem; font-weight: 800; color: #fff; border-radius: 0.4rem; padding: 0.12rem 0.4rem; max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .qm-nl-ed { margin-inline-start: -0.2rem; padding: 0.1rem 0.35rem; }
      .qm-nl-ar { margin: 0.15rem 0 0; font-family: QMHafs, serif; font-size: 1.15rem; line-height: 1.95; text-align: right; color: #1a1612; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .qm-nl-n { margin: 0.1rem 0 0; font-size: 0.88rem; line-height: 1.45; color: #3a3226; white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
      .qm-nl-empty { text-align: center; color: #6d6456; padding: 2rem 1rem; } .qm-nl-empty p { margin: 0 0 0.4rem; font-weight: 650; color: #1a3330; }
      .qm-nl-io { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1.2rem; }
      .qm-hz { position: fixed; inset: 0; z-index: 34; background: #f6f1e4; display: flex; flex-direction: column; font-family: "Segoe UI", sans-serif; color: #161310; }
      .qm-hz[hidden] { display: none; }
      .qm-hz-h { background: #fffaf0; }
      .qm-hz-h .qm-full-t small { color: #8a6a2e; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.68rem; }
      .qm-hz-h .qm-full-t b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .qm-hz-modes { flex-wrap: nowrap; overflow-x: auto; padding: 0.55rem 0.8rem; border-bottom: 1px solid rgba(196, 165, 110, 0.3); scrollbar-width: none; }
      .qm-hz-b { flex: 1; overflow-y: auto; padding: 0.6rem 0.9rem calc(1.4rem + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 0.5rem; }
      .qm-hz-list { display: flex; flex-direction: column; }
      .qm-hz-ay { margin: 0; padding: 0.35rem 0.4rem; font-family: QMHafs, serif; font-size: 1.4rem; line-height: 2.05; text-align: right; color: #1a1612; border-bottom: 1px dashed rgba(196, 165, 110, 0.5); border-radius: 0.4rem; cursor: pointer; transition: filter 0.2s; }
      .qm-hz-ay.cur { background: rgba(196, 165, 110, 0.26); }
      .qm-hz-ay.blur { filter: blur(6px); opacity: 0.72; user-select: none; }
      .qm-hz-ay.mem { box-shadow: inset -4px 0 0 #2f6b52; }
      .qm-hz-tip, .qm-hz-cap { text-align: center; margin: 0; font-size: 0.8rem; color: #7a6a50; }
      .qm-hz-cnt { display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin-top: 0.3rem; }
      .qm-hz-pm { width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 1.3px solid #c4a56e; background: #fffaf0; color: #1a3330; font-size: 1.3rem; cursor: pointer; }
      .qm-hz-ring { width: 5.2rem; height: 5.2rem; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: conic-gradient(#2f6b52 var(--p), #e8dcc2 0); }
      .qm-hz-ring b { width: 4.1rem; height: 4.1rem; border-radius: 50%; background: #f6f1e4; display: grid; place-items: center; font-size: 1.15rem; font-weight: 800; color: #1a3330; direction: ltr; }
      .qm-hz-ring.done b { color: #2f6b52; }
      .qm-hz-tg { justify-content: center; }
      .qm-hz-tg { flex-wrap: nowrap; gap: 0.3rem; }
      .qm-hz-tg .qm-np-chip { padding: 0.3rem 0.62rem; }
      .qm-hz-tg .qm-hz-ti { flex: 0 0 3.1rem; width: 3.1rem; text-align: center; padding: 0.3rem 0.2rem; }
      .qm-hz-lb { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; font-size: 0.78rem; font-weight: 700; color: #8a6a2e; }
      .qm-hz-tg .qm-hz-lb { flex: 0 0 auto; }
      .qm-hz-sel { width: 100%; }
      .qm-hz-go { padding: 0.75rem; font-size: 1rem; border-radius: 0.9rem; margin-top: 0.4rem; }
      .qm-hz-mem { flex: 1; } .qm-hz-mem.on { background: #2f6b52; border-color: #2f6b52; color: #fff; }
      .qm-hz-next { flex: 1.4; }
      .qm-hz-card { display: block; width: 100%; text-align: start; font: inherit; color: inherit; background: #fffaf0; border: 1px solid rgba(196, 165, 110, 0.55); border-radius: 1rem; padding: 0.65rem 0.85rem; cursor: pointer; }
      .qm-hz-card.main { border: 1.6px solid #1a3330; cursor: default; }
      .qm-hz-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.45rem; }
      .qm-hz-row b { color: #1a3330; } .qm-hz-row small { color: #8a7d68; font-size: 0.78rem; }
      .qm-hz-big { font-size: 1.6rem; }
      .qm-hz-bar { display: block; height: 8px; border-radius: 4px; background: #e8dcc2; overflow: hidden; }
      .qm-hz-bar i { display: block; height: 100%; background: #2f6b52; } .qm-hz-bar i.part { background: #c4a56e; }
      .qm-pl-sum { display: flex; flex-direction: column; margin: 0 0.2rem 0.5rem; } .qm-pl-sum b { color: #1a3330; font-size: 1.05rem; } .qm-pl-sum small { color: #8a7d68; font-size: 0.8rem; }
      .qm-pl-tabs { margin-bottom: 0.6rem; }
      .qm-pl-card { background: #fffaf0; border: 1px solid rgba(196, 165, 110, 0.55); border-radius: 1rem; padding: 0.7rem; margin-bottom: 0.55rem; }
      .qm-pl-card.main { border: 1.6px solid #1a3330; } .qm-pl-card.main > b { color: #1a3330; } .qm-pl-card.main p { margin: 0.3rem 0 0.2rem; color: #6d6456; font-size: 0.88rem; line-height: 1.45; }
      .qm-pl-mon { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; } .qm-pl-mon b { color: #1a3330; text-transform: capitalize; }
      .qm-pl-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; }
      .qm-pl-cal i { font-style: normal; color: #8a7d68; font-size: 0.66rem; font-weight: 700; padding-bottom: 2px; white-space: nowrap; overflow: hidden; }
      .qm-pl-d { aspect-ratio: 1; border-radius: 0.55rem; border: 1px solid rgba(196, 165, 110, 0.45); background: #fffaf0; color: #1a3330; font: inherit; font-size: 0.84rem; padding: 0; cursor: pointer; }
      .qm-pl-d:disabled { background: transparent; border-color: transparent; color: #b8ad98; cursor: default; }
      .qm-pl-cal .x { visibility: hidden; }
      .qm-pl-d.s-d { background: #2f6b52; border-color: #2f6b52; color: #fff; }
      .qm-pl-d.s-m { background: #f3dcd6; border-color: #a8443a; color: #a8443a; }
      .qm-pl-d.s-v { background: repeating-linear-gradient(45deg, #efe6d4, #efe6d4 4px, #fffaf0 4px, #fffaf0 8px); color: #8a7d68; }
      .qm-pl-d.now { outline: 2px solid #1a3330; outline-offset: -2px; font-weight: 800; }
      .qm-pl-lg { display: flex; gap: 0.8rem; margin-top: 0.55rem; font-size: 0.74rem; color: #6d6456; flex-wrap: wrap; } .qm-pl-lg span { display: inline-flex; align-items: center; gap: 0.3rem; }
      .qm-pl-lg i { width: 0.75rem; height: 0.75rem; border-radius: 0.2rem; background: #fffaf0; border: 1px solid #c4a56e; } .qm-pl-lg i.s-d { background: #2f6b52; border-color: #2f6b52; } .qm-pl-lg i.s-m { background: #f3dcd6; border-color: #a8443a; }
      .qm-pl-cnt { display: flex; gap: 0.5rem; } .qm-pl-cnt .c { flex: 1; text-align: center; display: flex; flex-direction: column; } .qm-pl-cnt b { font-size: 1.5rem; color: #1a3330; } .qm-pl-cnt small { font-size: 0.74rem; color: #8a7d68; }
      .qm-pl-day { background: #fffaf0; border: 1px solid rgba(196, 165, 110, 0.55); border-inline-end: 5px solid #e8dcc2; border-radius: 1rem; padding: 0.6rem 0.8rem; }
      .qm-pl-day.big { margin-bottom: 0.55rem; border-inline-end-width: 6px; }
      .qm-pl-day.s-d { border-inline-end-color: #2f6b52; } .qm-pl-day.s-m { border-inline-end-color: #a8443a; } .qm-pl-day.s-t { border-inline-end-color: #1a3330; border-color: #1a3330; }
      .qm-pl-day b { color: #1a3330; } .qm-pl-st { font-weight: 700; color: #8a7d68; } .s-d .qm-pl-st { color: #2f6b52; } .s-m .qm-pl-st { color: #a8443a; } .s-t .qm-pl-st { color: #1a3330; }
      .qm-pl-rng { font-size: 0.86rem; color: #3a3226; margin-top: 0.15rem; } .qm-pl-pg { display: block; font-size: 0.74rem; color: #8a7d68; }
      .qm-pl-day .qm-np-row { margin-top: 0.45rem; } .qm-pl-day .qm-rb { padding: 0.42rem 0.8rem; font-size: 0.85rem; border-radius: 0.8rem; }
      .qm-pl-done.on { background: #2f6b52; border-color: #2f6b52; color: #fff; }
      .qm-pl-new { display: flex; flex-direction: column; gap: 0.45rem; } .qm-pl-ci { flex: 0 0 5.5rem !important; width: 5.5rem; }
      .qm-pl-calc small { color: #6d6456; font-size: 0.82rem; } .qm-pl-end { text-align: center; }
      .s-tabs { display: flex; gap: 0.4rem; margin-top: 0.5rem; overflow-x: auto; scrollbar-width: none; }
      .s-tab { flex: 0 0 auto; border: 1.3px solid #c4a56e; border-radius: 999px; background: #fffaf0; color: #1a3330; font: inherit; font-size: 0.84rem; font-weight: 650; padding: 0.32rem 0.85rem; cursor: pointer; }
      .s-tab.on { background: #1a3330; border-color: #1a3330; color: #fff; }
      .s-src { margin-top: 0.45rem; width: 100%; border: 1px solid rgba(196, 165, 110, 0.75); background: #fffaf0; border-radius: 0.7rem; padding: 0.4rem 0.6rem; font: inherit; font-size: 0.85rem; color: #1a3330; }
      .s-src[hidden], .s-info[hidden], .s-nav[hidden] { display: none; }
      .s-info { margin: 0.45rem 0.1rem 0; font-size: 0.78rem; color: #6d6456; }
      .s-go { border: 0; background: #1a3330; color: #f3e7d0; border-radius: 999px; padding: 0.3rem 0.8rem; font: inherit; font-size: 0.8rem; font-weight: 650; margin-top: 0.3rem; cursor: pointer; }
      .s-hit b { display: flex; justify-content: space-between; } .s-hit b small { color: #8a7d68; font-weight: 600; }
      .ahit p.s-ar { font-family: QMHafs, serif; font-size: 1.2rem; line-height: 1.95; text-align: right; color: #1a1612; }
      .ahit p.s-tx { font-family: inherit; font-size: 0.88rem; line-height: 1.5; color: #3a3226; text-align: start; }
      .ahit p.s-tx[dir="rtl"] { font-size: 0.98rem; }
      .s-hit mark { background: rgba(196, 165, 110, 0.55); color: inherit; border-radius: 0.25rem; padding: 0 0.08rem; }
      button.ahit-more { display: block; width: 100%; border: 0; background: none; font: inherit; cursor: pointer; font-weight: 700; color: #1a3330; }
      .s-nav { position: fixed; left: 0.8rem; right: 0.8rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 22; background: #1a3330; color: #f3e7d0; border-radius: 1rem; padding: 0.5rem 0.6rem; display: flex; align-items: center; gap: 0.45rem; font: 700 0.9rem "Segoe UI", sans-serif; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); max-width: 32rem; margin: 0 auto; }
      .s-nb { width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.12); color: #f3e7d0; font: inherit; font-size: 1.15rem; cursor: pointer; flex: 0 0 auto; }
      .s-nb:disabled { opacity: 0.35; }
      .s-nt { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .qm-wps-btn { margin: 0 0 0.6rem; width: 100%; }
      .qm-wpop[hidden] { display: none; }
      .qm-wpop::after { content: ""; position: absolute; left: calc(var(--ax, 50%) - 7px); bottom: -8px; border: 7px solid transparent; border-top-color: #c4a56e; border-bottom: 0; }
      .qm-wpop.below::after { bottom: auto; top: -8px; border: 7px solid transparent; border-bottom-color: #c4a56e; border-top: 0; }
      .qm-wpop .qm-w-ar { font-size: 1.6rem; text-align: center; }
      .qm-wp-ref { color: #8a7d68; font-size: 0.68rem; text-align: center; direction: ltr; }
      .qm-wp-none { margin: 0; font-size: 0.85rem; color: #5c675f; }
      .qm-gh { line-height: 1.9; }
      .qm-gh p { margin: 0 0 0.55rem; }
      .qm-gh-q { color: #8a6a2e; font-weight: 400; font-family: QMHafs, serif; font-size: 1.08em; }
      .qm-gh-n { color: #8a6a2e; font-family: "Segoe UI", sans-serif; font-size: 0.65em; margin: 0 0.1em; }
      .qm-gh-notes { margin: 0.6rem 0 0; padding: 0.5rem 1.2rem 0 0; border-top: 1px solid rgba(196, 165, 110, 0.5); font-size: 0.8em; color: #6a6052; }
      .qm-w-iq small { background: #2f6b52; }
      .qm-full { position: fixed; inset: 0; z-index: 32; background: #fffaf0; display: flex; flex-direction: column; font-family: "Segoe UI", sans-serif; color: #161310; }
      .qm-full[hidden] { display: none; }
      .qm-full-h { display: flex; align-items: center; gap: 0.6rem; padding: calc(0.55rem + env(safe-area-inset-top)) 0.8rem 0.55rem; border-bottom: 1px solid rgba(196, 165, 110, 0.55); background: #f6f1e4; }
      .qm-full-t { display: flex; flex-direction: column; min-width: 0; }
      .qm-full-t b { color: #1a3330; font-size: 1.12rem; }
      .qm-full-t small { color: #8a7d68; font-size: 0.78rem; }
      .qm-switch { margin-inline-start: auto; display: flex; background: rgba(26, 51, 48, 0.08); border-radius: 999px; padding: 0.18rem; }
      .qm-switch button { border: 0; background: none; border-radius: 999px; padding: 0.35rem 0.75rem; font: 600 0.82rem "Segoe UI", sans-serif; color: #5c675f; cursor: pointer; }
      .qm-switch button.on { background: #1a3330; color: #e4c98a; }
      .qm-full-b { flex: 1; overflow-y: auto; touch-action: pan-y; will-change: transform; padding: 0.6rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
      .qm-full-src { margin: 0.2rem 0 0.6rem; font-size: 0.78rem; color: #8a7d68; text-align: center; }
      .qm-blk { padding: 0.9rem 0.2rem; border-bottom: 1px solid rgba(196, 165, 110, 0.35); scroll-margin-top: 0.3rem; }
      .qm-blk.cur { background: #f6ecd4; border-radius: 0.8rem; padding-inline: 0.6rem; }
      .qm-blk-s { margin: 0 0 0.5rem; text-align: center; color: #8a6a2e; font-size: 0.85rem; letter-spacing: 0.05em; }
      .qm-ar { margin: 0 0 0.5rem; font-family: QMHafs, "Amiri", serif; line-height: 2; text-align: right; color: #1a1612; }
      .qm-tx2 { line-height: 1.7; color: #2c332f; }
      .qm-tx2[lang="ar"] { font-family: "Amiri", "Noto Naskh Arabic", serif; line-height: 1.9; }
      .qm-tx2 p { margin: 0 0 0.45rem; white-space: pre-line; }
      .qm-range { display: inline-block; font-size: 0.72rem; color: #8a6a2e; background: #f3e7d0; border-radius: 999px; padding: 0.05rem 0.5rem; margin-bottom: 0.3rem; }
      .qm-full-nav { display: flex; justify-content: space-between; gap: 0.5rem; padding-top: 1rem; }
      .qm-empty { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; padding: 0.8rem 0; color: #5c675f; }
      @font-face { font-family: QMJuz; src: url(/yazi-fonts/uthmanic-hafs.woff2) format("woff2"); font-display: swap; }
      .htabs { display: flex; background: #12352c; }
      .htabs button { flex: 1; border: 0; background: none; color: #c9bf9f; font: 700 0.92rem "Segoe UI", sans-serif; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.5rem 0; border-bottom: 3px solid transparent; cursor: pointer; }
      .htabs button.on { color: #fffaf0; border-bottom-color: #c4a56e; }
      #jrows { flex: 1; overflow: auto; padding-bottom: calc(0.6rem + env(safe-area-inset-bottom)); }
      #jrows[hidden] { display: none; }
      .jhd { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background: #f3e7d0; color: #12352c; font-weight: 650; font-size: 1rem; width: 100%; border: 0; font-family: inherit; cursor: pointer; }
      .qrow { display: grid; grid-template-columns: 1fr auto; gap: 0.6rem; align-items: center; width: 100%; border: 0; border-bottom: 1px solid rgba(26,51,48,0.1); background: transparent; padding: 0.6rem 1rem; text-align: start; font: inherit; color: inherit; cursor: pointer; }
      .qrow p { margin: 0; direction: rtl; unicode-bidi: isolate; text-align: left; font-family: QMJuz, "Noto Naskh Arabic", "Amiri", serif; font-size: 1.2rem; line-height: 1.7; color: #1a1612; }
      .qrow small { display: block; color: #4f6b3a; font-size: 0.82rem; font-weight: 550; }
      .qrow .pg { background: #f3e7d0; color: #8a6a2e; border-radius: 999px; padding: 0.15rem 0.6rem; font-size: 0.85rem; font-variant-numeric: tabular-nums; min-width: 2rem; text-align: center; }