/* IlmuAlam Quran Engine (Enterprise) © 2026 ilmualam.com — v2.2 SEO/UX */
:where(.ilmq){
  --g:#249749;--d:#0c3808;--bg:#fff;--card:#fff;--muted:#f5fbf6;
  --text:#0c3808;--sub:rgba(12,56,8,.75);--bd:rgba(12,56,8,.12);
  --sh:0 10px 22px rgba(0,0,0,.06);--r:16px;--r2:14px;--pad:14px;
  --fzA:28px;--fzT:16px;
  max-width:920px;margin:18px auto;position:relative;
  font-family:-apple-system,BlinkMacSystemFont,"Inter",Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;
  line-height:1.5;color:var(--text);background:transparent;
}
@media (prefers-color-scheme:dark){
  :where(.ilmq){--bg:#071d12;--card:#0a2517;--muted:#092216;--text:#e8fff0;--sub:rgba(232,255,240,.78);--bd:rgba(232,255,240,.14);--sh:0 16px 40px rgba(0,0,0,.35)}
}
:where(.ilmq[data-mode="light"]){--bg:#fff;--card:#fff;--muted:#f5fbf6;--text:#0c3808;--sub:rgba(12,56,8,.75);--bd:rgba(12,56,8,.12);--sh:0 10px 22px rgba(0,0,0,.06)}
:where(.ilmq[data-mode="dark"]){--bg:#071d12;--card:#0a2517;--muted:#092216;--text:#e8fff0;--sub:rgba(232,255,240,.78);--bd:rgba(232,255,240,.14);--sh:0 16px 40px rgba(0,0,0,.35)}

.ilmq *{box-sizing:border-box}
.ilmq a{color:inherit}
.ilmq button,.ilmq select,.ilmq input{font:inherit}
.ilmq button{touch-action:manipulation}
.ilmq .sr{position:absolute!important;left:-9999px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}

.ilmq .hdr{background:linear-gradient(135deg,var(--g),var(--d));color:#fff;border-radius:var(--r);padding:16px;box-shadow:0 12px 26px rgba(12,56,8,.18)}
.ilmq .hdr h2{margin:0;font-size:clamp(1.45rem,4vw,1.85rem);letter-spacing:.2px;color:#fff}
.ilmq .hdr .ms{font-weight:850;margin-top:2px}
.ilmq .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ilmq .pill{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:5px 9px;border-radius:999px;font-size:.88rem;color:#fff}

.ilmq .hero{margin:14px 0;padding:16px;border-radius:var(--r);background:linear-gradient(135deg,var(--g),#1a7038);color:#fff;text-align:center}
.ilmq .hero h3{margin:0 0 6px;font-size:1.12rem;color:#fff}
.ilmq .hero p{margin:0 auto 10px;max-width:70ch;opacity:.98}
.ilmq .hero .cta{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ilmq .btn{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--g);text-decoration:none;font-weight:800;padding:9px 12px;border-radius:12px;border:0;box-shadow:0 10px 18px rgba(0,0,0,.12);cursor:pointer}
.ilmq .btn:active{transform:translateY(1px)}
.ilmq .btn.ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.22);box-shadow:none}

.ilmq .player{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0;padding:11px;border-radius:var(--r);border:1px solid rgba(36,151,73,.22);background:color-mix(in srgb,var(--muted) 92%,transparent);position:sticky;top:8px;z-index:20;}
.ilmq .pp{width:44px;height:44px;border-radius:13px;border:0;background:linear-gradient(135deg,var(--g),var(--d));color:#fff;display:grid;place-items:center;box-shadow:0 10px 18px rgba(12,56,8,.16);cursor:pointer;font-weight:800}
.ilmq .info{flex:1;min-width:150px}
.ilmq .bar{height:9px;background:rgba(12,56,8,.13);border-radius:999px;overflow:hidden;cursor:pointer}
.ilmq .bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--g),var(--d));border-radius:inherit}
.ilmq .tmeta{display:flex;justify-content:space-between;gap:8px;margin-top:5px;font-size:.86rem;color:var(--sub)}
.ilmq select{border-radius:12px;border:1px solid var(--bd);padding:9px;background:var(--card);color:var(--text);min-width:190px}
.ilmq .player select,.ilmq .player select[data-bind="qari"]{flex:0 1 170px;min-width:120px;max-width:170px;width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.ilmq .tools{display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:space-between;margin:10px 0 12px;padding:0;text-align:center}
.ilmq .tabs{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:3px;padding:3px;border:1px solid var(--bd);border-radius:11px;background:var(--muted)}
.ilmq .tab{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:5px 9px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--sub);font-size:12px;line-height:1.2;font-weight:700;white-space:nowrap;cursor:pointer;transition:background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease}
.ilmq .tab:hover{background:var(--card);color:var(--text);border-color:var(--bd)}
.ilmq .tab[aria-selected="true"]{background:var(--card);color:var(--d);border-color:rgba(36,151,73,.30);box-shadow:0 1px 4px rgba(0,0,0,.06)}
.ilmq .act{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}
.ilmq .chip{appearance:none;-webkit-appearance:none;border:1px solid var(--bd);background:var(--card);color:var(--text);padding:7px 9px;border-radius:10px;font-size:12px;font-weight:750;line-height:1.2;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.025)}
.ilmq .chip:hover{border-color:rgba(36,151,73,.36);background:var(--muted)}
.ilmq .chip.mode{min-width:34px}

.ilmq .set{margin:10px 0 16px;border:1px solid var(--bd);background:var(--card);border-radius:var(--r);padding:12px}
.ilmq .set summary{cursor:pointer;font-weight:850}
.ilmq .set .row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:10px;color:var(--sub)}
.ilmq .set .row label{display:flex;align-items:center;gap:9px;white-space:nowrap}
.ilmq label{font-weight:750}
.ilmq .set input[type="checkbox"]{appearance:auto;-webkit-appearance:auto;width:18px;height:18px;display:inline-block;opacity:1;visibility:visible;accent-color:var(--g);cursor:pointer}
.ilmq .set input[type="range"]{-webkit-appearance:none;appearance:none;width:220px;height:28px;background:transparent;margin:0;padding:0;border:0;outline:0}
.ilmq .set input[type="range"]::-webkit-slider-runnable-track{height:9px;border-radius:999px;background:rgba(36,151,73,.17);border:1px solid rgba(12,56,8,.13)}
.ilmq .set input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:21px;height:21px;border-radius:999px;background:linear-gradient(135deg,var(--g),var(--d));border:2px solid rgba(255,255,255,.8);box-shadow:0 8px 16px rgba(0,0,0,.16);margin-top:-7px;cursor:pointer}
.ilmq .set input[type="range"]::-moz-range-track{height:9px;border-radius:999px;background:rgba(36,151,73,.17);border:1px solid rgba(12,56,8,.13)}
.ilmq .set input[type="range"]::-moz-range-thumb{width:21px;height:21px;border-radius:999px;background:linear-gradient(135deg,var(--g),var(--d));border:2px solid rgba(255,255,255,.8);box-shadow:0 8px 16px rgba(0,0,0,.16);cursor:pointer}

.ilmq .verses{display:flex;flex-direction:column;gap:10px}
.ilmq .loading{padding:14px;border-radius:var(--r);background:var(--muted);border:1px dashed rgba(36,151,73,.35);color:var(--sub)}
.ilmq .v{width:100%;max-width:100%;min-width:0;overflow:hidden;background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:12px;box-shadow:var(--sh);scroll-margin-top:92px;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}
.ilmq .v:hover{border-color:rgba(36,151,73,.26)}
.ilmq .v:target{border-color:rgba(36,151,73,.65);box-shadow:0 0 0 3px rgba(36,151,73,.10),var(--sh)}
.ilmq .top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.ilmq .no{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:850;font-size:12px;background:rgba(36,151,73,.12);padding:5px 9px;border-radius:999px;border:1px solid rgba(36,151,73,.22);white-space:nowrap}
.ilmq .no:hover{text-decoration:none;background:rgba(36,151,73,.18)}
.ilmq .va{display:flex;gap:5px;align-items:center;justify-content:flex-end;min-width:0;flex-wrap:wrap}
.ilmq .vbtn{appearance:none;-webkit-appearance:none;border:1px solid var(--bd);background:var(--card);color:var(--text);border-radius:9px;padding:6px 8px;font-size:11.5px;line-height:1.2;font-weight:750;cursor:pointer}
.ilmq .vbtn:hover{background:var(--muted);border-color:rgba(36,151,73,.30)}
.ilmq .vbtn.p{min-width:31px;background:linear-gradient(135deg,var(--g),var(--d));color:#fff;border:0}
.ilmq .vbtn.star{min-width:31px}
.ilmq .vbtn.star.on{color:#a17c00;border-color:#c9a227;background:rgba(201,162,39,.10)}

.ilmq .arab{direction:rtl;font-family:'Amiri','Traditional Arabic',serif;text-align:right;font-weight:600;margin:11px 0 7px;font-size:var(--fzA);line-height:2.15;min-width:0}
.ilmq .rumi,.ilmq .mal{display:block;direction:ltr;text-align:left!important;width:100%;max-width:100%;min-width:0;margin-left:0;margin-right:0;padding-left:0;padding-right:0;text-indent:0;box-sizing:border-box;overflow-wrap:break-word;word-break:normal;white-space:normal}
.ilmq .rumi{margin-top:0;margin-bottom:8px;color:var(--sub);font-size:var(--fzT);font-style:italic;line-height:1.55}
.ilmq .mal{margin-top:0;margin-bottom:0;color:var(--text);font-size:var(--fzT);font-style:normal;line-height:1.58}
.ilmq .arab.hide,.ilmq .rumi.hide,.ilmq .mal.hide{display:none}
.ilmq .v.playing{border-color:rgba(36,151,73,.52);box-shadow:0 0 0 2px rgba(36,151,73,.08),var(--sh)}
.ilmq .v.playing .no{background:linear-gradient(135deg,var(--g),var(--d));color:#fff;border-color:transparent}

.ilmq .foot{margin:14px 0 0;padding:12px;border-radius:var(--r);border:1px solid var(--bd);background:var(--card);color:var(--sub);display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:center}
.ilmq .wm{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.ilmq .toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:var(--d);color:#fff;padding:9px 12px;border-radius:12px;box-shadow:0 16px 30px rgba(0,0,0,.22);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:9999;font-size:13px}
.ilmq .toast.on{opacity:1}
.ilmq :is(button,a,select,input,summary):focus-visible{outline:2px solid var(--g);outline-offset:2px}

@media (max-width:768px){
  :where(.ilmq){margin:12px auto}
  .ilmq .player{top:6px;padding:10px}
  .ilmq select{min-width:150px}
  .ilmq .set input[type="range"]{width:180px}
  .ilmq .arab{font-size:var(--fzA)}
  .ilmq .tools{justify-content:center}
}
@media (max-width:520px){
  .ilmq .tools{gap:6px}
  .ilmq .tabs{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;padding:3px}
  .ilmq .tab{width:100%;min-width:0;min-height:29px;padding:5px 2px;font-size:11.25px;border-radius:7px}
  .ilmq .act{width:100%;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
  .ilmq .chip{width:100%;min-width:0;padding:7px 3px;font-size:10.75px;border-radius:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ilmq .v{padding:11px;border-radius:14px}
  .ilmq .top{align-items:flex-start}
  .ilmq .va{gap:4px}
  .ilmq .vbtn{padding:6px 7px;font-size:10.75px;border-radius:8px}
}
@media (max-width:390px){
  .ilmq .player select,.ilmq .player select[data-bind="qari"]{flex-basis:150px;max-width:150px;width:150px}
  .ilmq .act{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ilmq .chip{font-size:11px}
  .ilmq .va .vbtn[data-act="copy"],.ilmq .va .vbtn[data-act="share"]{padding-inline:6px}
}
@media (prefers-reduced-motion:reduce){
  .ilmq *, .ilmq *::before, .ilmq *::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

@media print{
  .ilmq.print-target,.ilmq.print-target *{visibility:visible!important}
  .ilmq.print-target{position:absolute!important;left:0!important;top:0!important;width:100%!important;max-width:none!important;margin:0!important;color:#000!important;background:#fff!important}
  .ilmq.print-target .player,.ilmq.print-target .tools,.ilmq.print-target .set,.ilmq.print-target .hero .cta,.ilmq.print-target .va,.ilmq.print-target .toast,.ilmq.print-target audio{display:none!important}
  .ilmq.print-target .hdr,.ilmq.print-target .hero{background:#fff!important;color:#000!important;box-shadow:none!important;border:1px solid #ccc!important}
  .ilmq.print-target .hdr *,.ilmq.print-target .hero *{color:#000!important}
  .ilmq.print-target .v{break-inside:avoid;page-break-inside:avoid;box-shadow:none!important;border:1px solid #ddd!important;color:#000!important;background:#fff!important}
  .ilmq.print-target .arab,.ilmq.print-target .rumi,.ilmq.print-target .mal{display:block!important;color:#000!important}
  .ilmq.print-target .no{color:#000!important;background:#fff!important;border-color:#bbb!important;text-decoration:none!important}
  .ilmq.print-target .foot{box-shadow:none!important;background:#fff!important;color:#000!important}
}