.qtv-hifz{--green:#0d5b45;--green2:#13795b;--ink:#17342d;--muted:#6d7f79;--line:#dce8e3;--surface:#f7faf8;--card:#fff;--soft:#edf6f2;--ayah:#102d25;--shadow:rgba(13,91,69,.10);max-width:1080px;margin:32px auto;padding:28px;font-family:inherit;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:28px;box-shadow:0 18px 60px var(--shadow);transition:.25s ease}
.qtv-hifz *{box-sizing:border-box}
.qtv-hifz__topbar{direction:ltr!important;display:flex;justify-content:center;align-items:start;margin-bottom:18px}
.qtv-hifz__heading{min-width:0}.qtv-hifz[dir="rtl"] .qtv-hifz__heading{direction:rtl;text-align:right}.qtv-hifz[dir="ltr"] .qtv-hifz__heading{direction:ltr;text-align:left}
.qtv-hifz__eyebrow{display:block;color:var(--green2);font-weight:800;letter-spacing:.08em}.qtv-hifz h1{margin:5px 0 8px;font-size:clamp(30px,5vw,52px);line-height:1.1}.qtv-hifz p{margin:0;color:var(--muted);font-size:17px}
.qtv-hifz__top-actions{direction:ltr!important;display:grid;grid-template-columns:1fr 1fr;gap:10px;width:min(100%,620px);padding:12px;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:0 10px 28px var(--shadow)}
.qtv-setting{direction:rtl;display:flex;flex-direction:column;gap:7px;min-width:0;margin:0}.qtv-hifz[dir="ltr"] .qtv-setting{direction:ltr}
.qtv-setting__label{display:block;font-size:13px;font-weight:800;line-height:1.35;color:var(--muted);padding-inline:3px;white-space:nowrap}
.qtv-setting__control{height:52px;min-width:0;width:100%;display:flex;align-items:center;gap:10px;padding:0 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.5);transition:.2s ease}
.qtv-setting__control:hover{border-color:var(--green2)}.qtv-setting__control:focus-within,.qtv-theme-toggle:focus-visible{outline:none;border-color:var(--green2);box-shadow:0 0 0 3px rgba(19,121,91,.14)}
.qtv-setting__icon,.qtv-theme-toggle__icon{flex:0 0 28px;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--soft);color:var(--green2);font-size:19px;line-height:1}
.qtv-setting__control--select select{flex:1;width:100%;min-width:0;height:100%;padding:0;border:0!important;outline:0!important;background:transparent!important;color:var(--ink);font:inherit;font-weight:800;box-shadow:none!important}
#qtv-language{direction:ltr!important;text-align:left!important;text-align-last:left!important;unicode-bidi:isolate!important;padding-left:12px!important;padding-right:32px!important}.qtv-hifz #qtv-language option{direction:ltr!important;text-align:left!important;unicode-bidi:isolate!important}
.qtv-theme-toggle{cursor:pointer;font:inherit;font-weight:800;justify-content:flex-start;white-space:nowrap;overflow:hidden}.qtv-theme-toggle__text{display:block;min-width:0;overflow:visible;text-overflow:clip;white-space:nowrap;line-height:1.3}
.qtv-hifz__controls{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;margin:18px 0}.qtv-hifz__controls label{display:flex;flex-direction:column;gap:7px;font-weight:700}.qtv-hifz select{min-height:48px;padding:0 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);font:inherit;outline:none}.qtv-hifz select:focus{border-color:var(--green2);box-shadow:0 0 0 3px rgba(19,121,91,.12)}
.qtv-hifz__stage{position:relative;min-height:420px;display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:clamp(24px,6vw,70px);overflow:hidden}.qtv-hifz__placeholder{text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;color:var(--muted)}.qtv-hifz__placeholder[hidden]{display:none!important}.qtv-hifz__placeholder strong{color:var(--ink);font-size:22px}.qtv-hifz__mic-icon{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--green2);font-size:32px;box-shadow:inset 0 0 0 8px rgba(255,255,255,.45)}
.qtv-hifz__ayah{display:none;text-align:center;font-family:"Amiri Quran","KFGQPC Uthmanic Script HAFS","Traditional Arabic",serif;font-size:clamp(33px,5vw,58px);line-height:2;color:var(--ayah);direction:rtl}.qtv-hifz__ayah.is-visible{display:block;animation:qtvReveal .55s ease}
.qtv-hifz__muqattaat-note{display:block;margin-top:16px;padding:9px 14px;border-radius:12px;background:rgba(198,40,40,.08);color:#c62828;font-size:14px;font-weight:800;line-height:1.55;text-align:center;direction:rtl}
.qtv-hifz__muqattaat-note[hidden]{display:none!important}
.qtv-hifz[data-theme="dark"] .qtv-hifz__muqattaat-note{background:rgba(255,107,107,.12);color:#ff8a8a}

.qtv-hifz__actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:18px}.qtv-btn{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:13px 22px;border-radius:999px;font:inherit;font-weight:800;cursor:pointer}.qtv-btn--primary{background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;border-color:transparent;min-width:170px}.qtv-btn:disabled{opacity:.5;cursor:not-allowed}.qtv-hifz__status{text-align:center;margin-top:14px;font-weight:800;color:var(--green)}.qtv-hifz__privacy{text-align:center;margin-top:8px;font-size:13px;color:var(--muted)}
.qtv-hifz.is-listening .qtv-hifz__mic-icon{animation:qtvPulse 1.2s infinite}.qtv-hifz.is-success .qtv-hifz__stage{border-color:#92d4b8;box-shadow:0 0 0 5px rgba(19,121,91,.08)}
.qtv-hifz[data-theme="dark"]{--green:#4fc69b;--green2:#6ad7ae;--ink:#eefaf5;--muted:#aec3ba;--line:#304b42;--surface:#101b17;--card:#172720;--soft:#203b31;--ayah:#f4fff9;--shadow:rgba(0,0,0,.32);color-scheme:dark}.qtv-hifz[data-theme="dark"] .qtv-btn--primary{color:#08251c;background:linear-gradient(135deg,#51c99e,#80e0bc)}.qtv-hifz[data-theme="dark"] .qtv-setting__control{box-shadow:none}.qtv-hifz[data-theme="dark"] .qtv-hifz__mic-icon{box-shadow:inset 0 0 0 8px rgba(255,255,255,.025)}
@keyframes qtvPulse{50%{transform:scale(1.12);box-shadow:0 0 0 14px rgba(19,121,91,.08)}}@keyframes qtvReveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:900px){
  .qtv-hifz__top-actions{max-width:620px}
}
@media(max-width:760px){
  .qtv-hifz{margin:8px;padding:12px;border-radius:16px}
  .qtv-hifz__topbar{margin-bottom:10px}
  .qtv-hifz__top-actions{grid-template-columns:1fr 1fr;gap:7px;padding:8px;border-radius:14px}
  .qtv-setting{gap:4px}
  .qtv-setting__label{font-size:10px;padding-inline:1px}
  .qtv-setting__control{height:40px;padding:0 8px;gap:5px;border-radius:10px;font-size:12px}
  .qtv-setting__icon,.qtv-theme-toggle__icon{flex-basis:22px;width:22px;height:22px;border-radius:7px;font-size:14px}
  #qtv-language{padding-left:3px!important;padding-right:18px!important;font-size:12px!important}
  .qtv-theme-toggle__text{font-size:11px;white-space:nowrap!important}

  .qtv-hifz__controls{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr) minmax(0,1.15fr);gap:6px;margin:10px 0}
  .qtv-hifz__controls label{gap:4px;font-size:10px;min-width:0}
  .qtv-hifz select{width:100%;min-width:0;min-height:38px;height:38px;padding:0 6px;border-radius:10px;font-size:11px}

  .qtv-hifz__stage{min-height:300px;padding:18px 10px;border-radius:16px}
  .qtv-hifz__placeholder{gap:6px}
  .qtv-hifz__placeholder strong{font-size:16px;line-height:1.45}
  .qtv-hifz__placeholder span{font-size:12px;line-height:1.55}
  .qtv-hifz__mic-icon{width:48px;height:48px;font-size:22px}
  .qtv-hifz__ayah{font-size:clamp(25px,8vw,38px);line-height:1.85}
  .qtv-hifz__muqattaat-note{margin-top:10px;padding:7px 9px;font-size:11px;border-radius:9px}

  .qtv-hifz__actions{display:grid;grid-template-columns:1.25fr .75fr .9fr;gap:6px;margin-top:10px}
  .qtv-btn,.qtv-btn--primary{min-width:0;width:100%;padding:9px 5px;border-radius:12px;font-size:11px;white-space:nowrap}
  .qtv-hifz__status{margin-top:8px;font-size:11px}
}
@media(max-width:390px){
  .qtv-hifz{margin:4px;padding:8px}
  .qtv-hifz__top-actions{gap:5px;padding:6px}
  .qtv-setting__control{height:36px;padding:0 5px}
  .qtv-setting__label{font-size:9px}
  .qtv-theme-toggle__text,#qtv-language{font-size:10px!important}
  .qtv-hifz__controls{gap:4px}
  .qtv-hifz select{height:35px;min-height:35px;padding:0 4px;font-size:10px}
  .qtv-hifz__controls label{font-size:9px}
  .qtv-hifz__stage{min-height:270px;padding:14px 7px}
  .qtv-btn,.qtv-btn--primary{font-size:10px;padding:8px 3px}
}

/* AppMySite / mobile WebView tap reliability */
#qtv-start,#qtv-stop,#qtv-reset{touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;position:relative;z-index:2;}