/* Ayat / QuranKarem 3.0.0 — completely scoped; no theme-specific dependencies. */
.qk {
  --qk-bg: #f6f7f3; --qk-panel: #ffffff; --qk-panel2: #f9faf7;
  --qk-text: #182d27; --qk-muted: #71817a; --qk-faint: #a0aaa3;
  --qk-line: #e4eae4; --qk-green: #12583e; --qk-green2: #0b4331;
  --qk-accent: #cba667; --qk-soft: #e9f2ec; --qk-shadow: 0 14px 45px rgba(20,50,40,.055);
  color: var(--qk-text); background: var(--qk-bg); border: 1px solid var(--qk-line);
  border-radius: 22px; padding: 0 36px; font-family: Tahoma, 'Segoe UI', Arial, sans-serif;
  font-size: 15px; line-height: 1.8; position: relative; isolation: isolate;
  min-height: 640px; overflow: clip; direction: rtl;
}
.qk[data-qk-theme="dark"] {
  --qk-bg: #101d1a; --qk-panel: #192a25; --qk-panel2: #1e322b;
  --qk-text: #f1f4ec; --qk-muted: #b3c4b9; --qk-faint: #7f968a;
  --qk-line: #30443b; --qk-green: #6dd2a0; --qk-green2: #8fdfb4;
  --qk-accent: #d7b57b; --qk-soft: #253e32; --qk-shadow: 0 15px 36px rgba(0,0,0,.22);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  .qk[data-qk-theme="auto"] {
    --qk-bg: #101d1a; --qk-panel: #192a25; --qk-panel2: #1e322b;
    --qk-text: #f1f4ec; --qk-muted: #b3c4b9; --qk-faint: #7f968a;
    --qk-line: #30443b; --qk-green: #6dd2a0; --qk-green2: #8fdfb4;
    --qk-accent: #d7b57b; --qk-soft: #253e32; --qk-shadow: 0 15px 36px rgba(0,0,0,.22);
    color-scheme: dark;
  }
}
.qk *, .qk *::before, .qk *::after { box-sizing: border-box; }
.qk [hidden] { display: none !important; }
.qk a { color: inherit; text-decoration: none; }
.qk button, .qk input, .qk select { font: inherit; }
.qk button { cursor: pointer; }
.qk button:disabled { opacity: .45; cursor: not-allowed; }
.qk a:focus-visible, .qk button:focus-visible, .qk input:focus-visible, .qk select:focus-visible {
  outline: 3px solid var(--qk-accent); outline-offset: 3px;
}
.qk h1,.qk h2,.qk h3,.qk p { margin: 0; color: inherit; }
.qk h1,.qk h2,.qk h3 { line-height: 1.4; }
.qk .qk-skip { position: absolute; z-index: 50; top: -100px; right: 10px; padding: 12px; background: var(--qk-panel); }
.qk .qk-skip:focus { top: 12px; }
.qk .qk-head { min-height: 91px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--qk-line); gap: 18px; }
.qk .qk-logo { display: flex; align-items: center; gap: 12px; min-width: 0; }
.qk .qk-logo-mark { height: 49px; width: 49px; display: grid; place-items: center; background: #12583e; color: #f0cf8b; border-radius: 15px; font-size: 30px; line-height: 1; }
.qk .qk-logo b { font-size: 22px; letter-spacing: -.5px; display: block; line-height: 1.35; }
.qk .qk-logo small { font-size: 11px; color: var(--qk-muted); display: block; }
.qk .qk-head-actions { display: flex; align-items: center; gap: 18px; }
.qk .qk-head-link { font-weight: 700; font-size: 13px; color: var(--qk-muted); transition: color .2s; }
.qk .qk-head-link:hover,.qk .qk-head-link.is-active { color: var(--qk-green); }
.qk .qk-mode { display: flex; align-items: center; gap: 6px; background: var(--qk-panel); border: 1px solid var(--qk-line); border-radius: 10px; padding: 8px 12px; color: var(--qk-text); font-size: 13px; }
.qk .qk-mode:hover { border-color: var(--qk-accent); }
.qk .qk-eyebrow,.qk .qk-section-index { font-size: 12px; font-weight: 800; letter-spacing: .1px; color: var(--qk-green); }
.qk .qk-eyebrow-dot { display: inline-block; vertical-align: middle; height: 8px; width: 8px; border-radius: 50%; background: var(--qk-accent); margin-left: 6px; }
.qk .qk-hero { display: grid; grid-template-columns: minmax(0,1.12fr) minmax(260px,.88fr); min-height: 455px; gap: 20px; align-items: center; background: linear-gradient(120deg,#e7eee7, #f9f7ee 54%, #f6f7f3); border-radius: 20px; margin-top: 25px; padding: 40px 7%; overflow: hidden; }
.qk[data-qk-theme="dark"] .qk-hero { background: linear-gradient(120deg,#1d3d2e,#172a23 70%); }
@media (prefers-color-scheme: dark) { .qk[data-qk-theme="auto"] .qk-hero { background: linear-gradient(120deg,#1d3d2e,#172a23 70%); } }
.qk .qk-hero h1 { font-size: 43px; letter-spacing: -1.4px; margin: 14px 0 17px; font-weight: 800; }
.qk .qk-hero h1 em { font-style: normal; color: #157044; }
.qk[data-qk-theme="dark"] .qk-hero h1 em { color: #80d0a1; }
.qk .qk-hero p { font-size: 15px; max-width: 550px; color: #5e7267; }
.qk[data-qk-theme="dark"] .qk-hero p { color: var(--qk-muted); }
.qk .qk-hero-actions { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-top: 28px; }
.qk .qk-btn { min-height: 44px; padding: 10px 19px; border-radius: 12px; font-size: 13px; font-weight: 800; display: inline-flex; gap: 14px; align-items: center; justify-content: center; border: 1px solid transparent; }
.qk .qk-btn-primary { background: #12583e; color: #fff; }
.qk .qk-btn-primary:hover { background: #0a3e2b; color: #fff; }
.qk .qk-btn-outline { background: var(--qk-panel); border-color: var(--qk-line); color: var(--qk-text); }
.qk .qk-btn-outline:hover { border-color: var(--qk-accent); color: var(--qk-green); }
.qk .qk-hero-facts { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11px; color: #64796d; margin-top: 25px; }
.qk .qk-hero-art { display: grid; place-items: center; min-height: 338px; position: relative; }
.qk .qk-arch { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 290px; height: 315px; background: radial-gradient(circle at 50% 45%,#1a7653,#0b3d2c 75%); color: #f6e6bd; border: 2px solid #d1b279; outline: 9px solid rgba(27,93,64,.11); border-radius: 150px 150px 28px 28px; box-shadow: 0 18px 35px rgba(5,60,35,.17); }
.qk .qk-arch::before { content: ''; position: absolute; width: 257px; height: 278px; border: 1px solid rgba(241,221,167,.35); border-radius: 138px 138px 22px 22px; pointer-events: none; }
.qk .qk-arch-glyph { font-size: 45px; line-height: 1.8; }
.qk .qk-arch-line { width: 52px; height: 1px; background: #e0c490; margin: 12px 0 18px; }
.qk .qk-arch-name { font-weight: 800; font-size: 22px; }
.qk .qk-arch-sub { margin-top: 8px; font-size: 12px; color: #d9d4bb; }
.qk .qk-spark { position: absolute; font-style: normal; color: #b49855; font-size: 34px; }
.qk .qk-spark-a { top: 24px; right: 20px; }.qk .qk-spark-b { bottom: 18px; left: 0; font-size: 24px; }
.qk .qk-resume { margin-top: 17px; background: var(--qk-panel); border: 1px solid var(--qk-line); padding: 16px 22px; border-radius: 15px; display: flex; gap: 14px; align-items: center; }
.qk .qk-resume-icon { display: grid; place-items: center; height: 44px; width: 44px; border-radius: 12px; background: var(--qk-soft); color: var(--qk-green); font-size: 25px; }
.qk .qk-resume b { font-size: 14px; }.qk .qk-resume p { color: var(--qk-muted); font-size: 12px; }
.qk .qk-small-link { margin-right: auto; color: var(--qk-green); font-weight: 800; font-size: 12px; }
.qk .qk-section { margin: 66px 0; }
.qk .qk-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.qk .qk-section-heading h2 { font-size: 28px; letter-spacing: -.5px; margin-top: 4px; }
.qk .qk-section-heading p { color: var(--qk-muted); font-size: 13px; margin-top: 6px; }
.qk .qk-heading-deco { color: var(--qk-accent); font-size: 47px; }
.qk .qk-languages { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.qk .qk-language-card { display: flex; align-items: center; min-height: 158px; background: var(--qk-panel); border: 1px solid var(--qk-line); border-radius: 17px; padding: 24px; gap: 17px; box-shadow: var(--qk-shadow); transition: transform .2s,border-color .2s; }
.qk .qk-language-card:hover { border-color: var(--qk-accent); transform: translateY(-3px); }
.qk .qk-language-symbol { width: 65px; height: 65px; flex: 0 0 65px; display: grid; place-items: center; background: var(--qk-soft); color: var(--qk-green); font-size: 21px; font-weight: 800; border-radius: 16px; text-transform: uppercase; }
.qk .qk-language-content { display: grid; gap: 1px; }
.qk .qk-language-content small { color: var(--qk-muted); font-size: 11px; }.qk .qk-language-content strong { font-size: 21px; }.qk .qk-language-content > span { font-size: 12px; color: var(--qk-muted); }
.qk .qk-language-arrow { margin-right: auto; font-size: 21px; color: var(--qk-green); align-self: flex-start; }
.qk .qk-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.qk .qk-step { background: var(--qk-panel); border: 1px solid var(--qk-line); border-radius: 17px; padding: 24px; }
.qk .qk-step > span { color: var(--qk-faint); font-size: 12px; font-weight: 800; }.qk .qk-step-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; color: var(--qk-green); background: var(--qk-soft); font-size: 24px; margin: 18px 0; }
.qk .qk-step h3 { font-size: 16px; }.qk .qk-step p { font-size: 12px; color: var(--qk-muted); margin-top: 7px; }
.qk .qk-verse-banner { margin-bottom: 45px; padding: 30px 35px; border-radius: 18px; background: #104e38; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 15px; overflow: hidden; }
.qk .qk-verse-banner span:not(.qk-verse-emblem) { font-size: 12px; color: #d6c291; }.qk .qk-verse-banner p { font-size: 23px; margin: 11px 0; }.qk .qk-verse-banner small { color: #c7d9ce; }
.qk .qk-verse-emblem { font-size: 90px; color: #d9bc79; opacity: .22; line-height: 1; }
.qk .qk-footer { display: flex; justify-content: space-between; gap: 12px; padding: 23px 0; margin-top: 26px; border-top: 1px solid var(--qk-line); font-size: 11px; color: var(--qk-muted); }
.qk .qk-backline { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--qk-muted); margin: 27px 0 20px; flex-wrap: wrap; }.qk .qk-backline a:hover { color: var(--qk-green); }
.qk .qk-page-banner { background: #104e38; border-radius: 18px; padding: 30px 35px; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.qk .qk-page-banner .qk-section-index { color: #d9bf89; }.qk .qk-page-banner h1 { font-size: 30px; margin: 6px 0 6px; }.qk .qk-page-banner p { color: #d3e3d9; font-size: 13px; }
.qk .qk-banner-stats { display: flex; gap: 23px; align-items: center; text-align: center; flex-shrink: 0; }.qk .qk-banner-stats > div { display: grid; }.qk .qk-banner-stats b { font-size: 27px; line-height: 1.3; }.qk .qk-banner-stats span { color: #cee2d5; font-size: 11px; }.qk .qk-stat-divider { height: 47px; width: 1px; background: #4a8d6c; }
.qk .qk-directory-layout { display: grid; grid-template-columns: 268px minmax(0,1fr); gap: 22px; align-items: start; margin-top: 27px; }
.qk .qk-filters { background: var(--qk-panel); border: 1px solid var(--qk-line); border-radius: 17px; padding: 23px; position: sticky; top: 12px; }
.qk .qk-filter-title { margin-bottom: 22px; }.qk .qk-filter-title h2 { font-size: 18px; }
.qk .qk-field { display: grid; gap: 8px; margin: 0 0 18px; }.qk .qk-field > span:first-child { font-weight: 700; font-size: 12px; }
.qk .qk-field select,.qk .qk-input-wrap { width: 100%; background: var(--qk-panel2); border: 1px solid var(--qk-line); border-radius: 10px; height: 45px; color: var(--qk-text); }
.qk .qk-field select { padding: 0 12px; }.qk .qk-input-wrap { display: flex; align-items: center; gap: 8px; padding: 0 12px; min-width: 0; }.qk .qk-input-wrap > span { font-size: 20px; color: var(--qk-muted); }
.qk .qk-input-wrap input { border: 0; background: transparent; padding: 0; height: 100%; min-width: 0; width: 100%; color: var(--qk-text); box-shadow: none; font-size: 13px; }
.qk .qk-input-wrap input:focus { outline: 0; }.qk .qk-input-wrap:focus-within { outline: 2px solid var(--qk-accent); }
.qk .qk-favorite-filter { display: flex; align-items: center; gap: 8px; color: var(--qk-text); font-weight: 700; font-size: 12px; cursor: pointer; }
.qk .qk-favorite-filter input { accent-color: #176342; width: 16px; height: 16px; margin: 0; }
.qk .qk-link-button { background: transparent; border: 0; color: var(--qk-green); font-size: 12px; font-weight: 800; padding: 8px 0; text-align: right; }.qk .qk-link-button:hover { text-decoration: underline; }
.qk .qk-filter-note { font-size: 11px; color: var(--qk-muted); padding-top: 15px; border-top: 1px solid var(--qk-line); margin-top: 10px; }
.qk .qk-results { min-width: 0; }.qk .qk-results-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 6px 0 20px; }
.qk .qk-results-head h2 { font-size: 23px; margin-top: 3px; }.qk .qk-results-head h2 small { color: var(--qk-muted); font-size: 12px; font-weight: 500; }
.qk .qk-display-controls { display: flex; gap: 4px; border: 1px solid var(--qk-line); border-radius: 10px; background: var(--qk-panel); padding: 4px; }
.qk .qk-display-controls button { border: 0; background: transparent; color: var(--qk-muted); padding: 4px 10px; border-radius: 7px; font-size: 20px; }
.qk .qk-display-controls button[aria-pressed="true"] { background: var(--qk-soft); color: var(--qk-green); }
.qk .qk-reciters { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.qk .qk-reciter { background: var(--qk-panel); border: 1px solid var(--qk-line); border-radius: 15px; position: relative; transition: border-color .2s,box-shadow .2s; min-width: 0; }
.qk .qk-reciter:hover { border-color: var(--qk-accent); box-shadow: var(--qk-shadow); }
.qk .qk-reciter-link { display: flex; min-width: 0; align-items: center; gap: 12px; padding: 20px 15px 20px 42px; }
.qk .qk-reciter-avatar { width: 53px; height: 53px; flex: 0 0 53px; border-radius: 13px; background: var(--qk-soft); color: var(--qk-green); font-size: 24px; display: grid; place-items: center; }
.qk .qk-reciter-info { display: grid; gap: 3px; min-width: 0; }.qk .qk-reciter-info strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.qk .qk-reciter-info > span { font-size: 11px; color: var(--qk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.qk .qk-reciter-info small { font-size: 10px; color: var(--qk-green); }.qk .qk-reciter-info small i { font-style: normal; }
.qk .qk-reciter-arrow { color: var(--qk-faint); font-size: 20px; margin-right: auto; }.qk .qk-favorite { position: absolute; top: 12px; left: 11px; width: 29px; height: 29px; background: var(--qk-panel2); border: 1px solid var(--qk-line); border-radius: 9px; display: grid; place-items: center; color: var(--qk-muted); font-size: 20px; line-height: 1; }
.qk .qk-favorite[aria-pressed="true"] { background: #fdf2dc; border-color: #e1c68e; color: #92692d; }
.qk .qk-reciters.is-list { grid-template-columns: 1fr; }.qk .qk-reciters.is-list .qk-reciter-link { padding-top: 13px; padding-bottom: 13px; }
.qk .qk-empty { padding: 44px 20px; text-align: center; border: 1px dashed var(--qk-line); border-radius: 15px; color: var(--qk-muted); }.qk .qk-empty > span { font-size: 44px; }.qk .qk-empty h3 { color: var(--qk-text); font-size: 16px; margin: 8px 0; }.qk .qk-empty p { font-size: 12px; margin-bottom: 10px; }
.qk .qk-listen-banner { display: flex; gap: 17px; align-items: center; background: var(--qk-panel); border: 1px solid var(--qk-line); padding: 25px; border-radius: 16px; }
.qk .qk-listen-avatar { width: 76px; height: 76px; flex: 0 0 76px; display: grid; place-items: center; border-radius: 18px; background: #12583e; color: #f6dda9; font-size: 36px; }
.qk .qk-listen-info { min-width: 0; }.qk .qk-listen-info h1 { font-size: 27px; margin: 3px 0; }.qk .qk-listen-info p { font-size: 12px; color: var(--qk-muted); }.qk .qk-return { margin-right: auto; }
.qk .qk-listen-layout { display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 18px; align-items: start; margin-top: 24px; }
.qk .qk-tracks-panel,.qk .qk-reader-panel { background: var(--qk-panel); border: 1px solid var(--qk-line); border-radius: 16px; padding: 23px; min-width: 0; }
.qk .qk-tracks-panel .qk-results-head { margin: 0 0 20px; }.qk .qk-tab-button { padding: 8px 12px; border: 1px solid var(--qk-line); border-radius: 10px; color: var(--qk-green); background: var(--qk-panel2); font-weight: 800; font-size: 12px; }
.qk .qk-surah-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }.qk .qk-surah-tools .qk-input-wrap { flex: 1; min-width: 180px; }
.qk .qk-tracks { padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--qk-line); }
.qk .qk-track { display: flex; align-items: center; border-bottom: 1px solid var(--qk-line); position: relative; transition: background .15s; }.qk .qk-track:hover,.qk .qk-track.is-selected { background: var(--qk-soft); }
.qk .qk-track-main { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; text-align: right; background: transparent; border: none; padding: 13px 8px; color: var(--qk-text); }
.qk .qk-track-no { width: 40px; height: 41px; border-radius: 10px; display: grid; place-items: center; background: var(--qk-panel2); border: 1px solid var(--qk-line); color: var(--qk-green); font-size: 12px; flex: 0 0 40px; font-weight: 800; }
.qk .qk-track-text { display: grid; gap: 1px; }.qk .qk-track-text strong { font-size: 14px; }.qk .qk-track-text small { font-size: 11px; color: var(--qk-muted); }
.qk .qk-track-action { color: var(--qk-green); margin-right: auto; padding: 0 10px; }.qk .qk-track-direct { background: var(--qk-panel2); color: var(--qk-green); border-radius: 7px; padding: 2px 7px; margin-left: 8px; font-size: 14px; }
.qk .qk-track-direct:hover { background: var(--qk-soft); }
.qk .qk-track .qk-favorite { position: static; flex: 0 0 31px; margin-left: 8px; }
.qk .qk-reader-panel { position: sticky; top: 12px; }.qk .qk-reader-panel h2 { font-size: 20px; margin: 7px 0 8px; }.qk .qk-reader-panel p { color: var(--qk-muted); font-size: 12px; }
.qk .qk-reader-emblem { font-size: 56px; color: var(--qk-green); background: var(--qk-soft); border-radius: 14px; text-align: center; margin: 20px 0; padding: 20px 0; }
.qk .qk-reader-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; border-top: 1px solid var(--qk-line); margin-top: 20px; padding-top: 17px; font-size: 12px; }
.qk .qk-reader-controls input { min-width: 80px; width: 110px; accent-color: #176342; }.qk .qk-reader-controls output { color: var(--qk-muted); font-size: 11px; }
.qk .qk-reader-panel .qk-reader-disclaimer a { color: var(--qk-green); text-decoration: underline; }
.qk .qk-reader-panel .qk-reader-disclaimer { font-size: 11px; border-top: 1px solid var(--qk-line); margin-top: 16px; padding-top: 13px; }
.qk .qk-reading-view { margin: 26px 0 40px; padding: 25px; border: 1px solid var(--qk-line); border-radius: 16px; background: var(--qk-panel); }
.qk .qk-reading-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.qk .qk-reading-header h2 { font-size: 23px; }.qk [data-qk-reading-state] { color: var(--qk-muted); font-size: 12px; padding: 7px 0; }
.qk .qk-reading-paper { background: #fffdf5; color: #263227; margin-top: 18px; padding: 34px 25px; border: 2px solid #dccb98; border-radius: 14px; text-align: center; }
.qk .qk-bismillah { font-size: 34px; margin-bottom: 20px; color: #1b6644; }.qk .qk-verses { line-height: 2.8; font-family: 'Traditional Arabic','Amiri','Noto Naskh Arabic',serif; font-size: 30px; }
.qk .qk-verse { display: inline; margin: 0 3px; unicode-bidi: plaintext; }.qk .qk-verse-num { color: #82672e; font-size: .75em; white-space: nowrap; }
.qk.qk-listening { padding-bottom: 196px; }
.qk .qk-player { position: fixed; z-index: 400; bottom: 12px; left: max(18px, calc((100vw - 1180px) / 2)); right: max(18px, calc((100vw - 1180px) / 2)); border-radius: 17px; background: #124f39; color: #f7f8f3; border: 1px solid #477c5e; box-shadow: 0 16px 50px rgba(0,20,12,.30); padding: 13px 22px; }
.qk .qk-player-top { display: flex; align-items: center; gap: 13px; }.qk .qk-player-illustration { background: #286a4b; width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border-radius: 11px; color: #e8cc94; font-size: 26px; }
.qk .qk-player-title { display: grid; min-width: 130px; gap: 1px; }.qk .qk-player-title small { font-size: 10px; color: #b3d7be; }.qk .qk-player-title strong { font-size: 14px; color: #fff; }.qk .qk-player-title span { font-size: 10px; color: #d6e9dc; }
.qk .qk-player-buttons { display: flex; align-items: center; gap: 9px; margin-right: auto; direction: ltr; }.qk .qk-player-buttons button { width: 37px; height: 37px; border-radius: 50%; background: transparent; color: #fff; border: 1px solid #6e9a7e; display: grid; place-items: center; line-height: 1; }
.qk .qk-player-buttons .qk-play-main { width: 47px; height: 47px; background: #f5f1e5; border-color: #f5f1e5; color: #12523c; font-size: 18px; }
.qk .qk-player-bottom { display: flex; align-items: center; gap: 17px; margin-top: 8px; }.qk .qk-player-bottom audio { min-width: 0; width: 100%; height: 33px; flex: 1; border-radius: 8px; }
.qk .qk-player-more { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 11px; }.qk .qk-player-more button,.qk .qk-player-more select,.qk .qk-player-more a { background: #225d46; border: 1px solid #55856b; color: #fff; border-radius: 7px; padding: 4px 7px; font-size: 11px; white-space: nowrap; }.qk .qk-player-more button[aria-pressed="true"] { background: #e1c588; color: #123e2d; }.qk .qk-player-more label { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.qk .qk-player-more select option { color: #222; background: #fff; }
.qk.qk-listening { overflow: visible; }
@media (max-width: 1000px) {
  .qk { padding: 0 22px; }
  .qk .qk-directory-layout { grid-template-columns: 228px minmax(0,1fr); gap: 15px; }
  .qk .qk-reciters { grid-template-columns: minmax(0,1fr); }
  .qk .qk-listen-layout { grid-template-columns: minmax(0,1fr) 240px; }
  .qk .qk-player { left: 15px; right: 15px; }
}
@media (max-width: 760px) {
  .qk { border-radius: 12px; padding: 0 14px; font-size: 14px; }
  .qk .qk-head { min-height: 78px; }.qk .qk-logo-mark { width: 42px; height: 42px; font-size: 25px; }.qk .qk-logo b { font-size: 19px; }
  .qk .qk-head-actions { gap: 9px; }.qk .qk-head-link { display: none; }.qk .qk-mode { padding: 6px 10px; }
  .qk .qk-hero { grid-template-columns: 1fr; padding: 30px 23px; margin-top: 15px; min-height: auto; gap: 5px; }.qk .qk-hero h1 { font-size: 31px; margin: 11px 0; }.qk .qk-hero p { font-size: 13px; }
  .qk .qk-hero-art { min-height: 235px; }.qk .qk-arch { width: 190px; height: 210px; border-radius: 100px 100px 20px 20px; }.qk .qk-arch::before { width: 167px; height: 183px; border-radius: 92px 92px 14px 14px; }
  .qk .qk-arch-glyph { font-size: 32px; }.qk .qk-arch-name { font-size: 17px; }.qk .qk-arch-sub { font-size: 9px; }.qk .qk-arch-line { margin: 4px 0 7px; }
  .qk .qk-section { margin: 43px 0; }.qk .qk-section-heading h2 { font-size: 23px; }.qk .qk-languages,.qk .qk-steps { grid-template-columns: 1fr; }.qk .qk-language-card { min-height: 126px; padding: 18px; }
  .qk .qk-verse-banner { padding: 24px; }.qk .qk-verse-banner p { font-size: 17px; }.qk .qk-verse-emblem { font-size: 40px; }
  .qk .qk-resume { flex-wrap: wrap; }.qk .qk-small-link { margin-right: 0; width: 100%; }
  .qk .qk-page-banner { padding: 22px; flex-wrap: wrap; }.qk .qk-page-banner h1 { font-size: 23px; }.qk .qk-banner-stats { width: 100%; justify-content: flex-start; }
  .qk .qk-directory-layout { grid-template-columns: 1fr; }.qk .qk-filters { position: static; }.qk .qk-reciters { grid-template-columns: 1fr; }
  .qk .qk-listen-layout { grid-template-columns: 1fr; }.qk .qk-reader-panel { position: static; }.qk .qk-listen-banner { flex-wrap: wrap; padding: 19px; }.qk .qk-listen-avatar { width: 57px; height: 57px; flex-basis: 57px; font-size: 24px; }.qk .qk-listen-info h1 { font-size: 21px; }.qk .qk-return { width: 100%; margin-right: 0; }
  .qk .qk-tracks-panel { padding: 14px; }.qk .qk-results-head h2 { font-size: 18px; }.qk .qk-reading-view { padding: 14px; }.qk .qk-reading-paper { padding: 20px 12px; }.qk .qk-reading-header { flex-wrap: wrap; }
  .qk.qk-listening { padding-bottom: 260px; }.qk .qk-player { bottom: 6px; left: 6px; right: 6px; border-radius: 12px; padding: 9px 12px; }.qk .qk-player-bottom { flex-direction: column; align-items: stretch; gap: 7px; }.qk .qk-player-bottom audio { flex: auto; width: 100%; }.qk .qk-player-more { justify-content: center; }.qk .qk-player-title strong { font-size: 12px; }
  .qk .qk-footer { flex-wrap: wrap; }.qk .qk-track-main { gap: 9px; }.qk .qk-track-text strong { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .qk *, .qk *::before, .qk *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}