#pg-muqattaat{--mq-accent:#c9a84c;--mq-cyan:#28d7e8;--mq-blue:#2f7cff;--mq-green:#39d353}
#pg-muqattaat .st-hero{max-width:940px;margin-inline:auto}
.mq2-stats{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:.7rem;max-width:850px;margin:0 auto 1rem}
.mq2-stats>div{text-align:center;padding:.8rem;border-inline-start:1px solid rgba(201,168,76,.22)}
.mq2-stats>div:first-child{border-inline-start:none}.mq2-stats b{display:block;color:var(--mq-cyan);font-size:1.65rem}.mq2-stats span{color:var(--txt2);font-size:.78rem}
.mq2-controls{display:flex;justify-content:center;gap:.55rem;flex-wrap:wrap;margin:1rem auto;max-width:900px}.mq2-controls input,.mq2-controls select,.mq2-controls button{border:1px solid var(--bdr);background:var(--bg3);color:var(--txt);border-radius:8px;padding:.58rem .75rem;font-family:var(--font-main)}.mq2-controls input{flex:1;min-width:260px;max-width:520px}.mq2-controls button{color:var(--gold);cursor:pointer}
.mq2-section,.mq2-letter-section,.mq2-focus,.mq2-method{max-width:1080px;margin:1.15rem auto;padding:1rem 0}.mq2-section-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:.7rem;border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:.45rem}.mq2-section-head h3{margin:0;color:var(--mq-blue);font-family:var(--font-main);font-size:1.12rem}.mq2-section-head span{color:var(--txt3);font-size:.72rem}
.mq2-letter-bar{display:grid;grid-template-columns:repeat(14,minmax(54px,1fr));gap:.32rem;direction:rtl}.mq2-letter{border:0;border-bottom:2px solid transparent;background:transparent;color:var(--txt);padding:.35rem .12rem;cursor:pointer}.mq2-letter b{display:block;font-family:'Amiri',serif;font-size:1.75rem;line-height:1.2}.mq2-letter small{display:block;color:var(--txt3);font-size:.58rem}.mq2-letter:hover,.mq2-letter.active{color:var(--gold2);border-bottom-color:var(--gold2)}
.mq2-focus{display:flex;gap:1.2rem;align-items:stretch;max-width:900px}.mq2-focus.empty{justify-content:center;color:var(--txt3);padding:.8rem}.mq2-focus-letter{display:grid;place-items:center;min-width:150px;font-family:'Amiri',serif;font-size:5rem;color:var(--gold2);border-inline-end:1px solid rgba(201,168,76,.25)}.mq2-focus-data{flex:1}.mq2-focus-data h3{margin:.1rem 0 .6rem;color:var(--gold2)}.mq2-focus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}.mq2-focus-grid>div{text-align:center;padding:.4rem}.mq2-focus-grid span{display:block;color:var(--txt3);font-size:.66rem;margin-bottom:.15rem}.mq2-num{border:0;background:none;color:var(--mq-cyan);font-weight:800;font-size:1rem;cursor:pointer}.mq2-focus-combos,.mq2-surah-list{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem}.mq2-focus-combos button,.mq2-combo-link,.mq2-letter-inline{border:0;background:none;color:var(--gold2);font-family:'Amiri',serif;font-size:1.15rem;cursor:pointer}.mq2-surah-chip{display:inline-flex;align-items:center;gap:.3rem;border:1px solid rgba(201,168,76,.2);background:rgba(201,168,76,.05);color:var(--txt);border-radius:999px;padding:.25rem .55rem;cursor:pointer;font-family:var(--font-main)}.mq2-surah-chip b{color:var(--mq-cyan);font-size:.68rem}.mq2-surah-chip span{font-size:.72rem}
.mq2-combo-group{margin:.8rem 0}.mq2-combo-group h4{color:var(--txt2);font-size:.78rem;margin:.4rem 0}.mq2-combo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:.5rem}.mq2-combo-card{padding:.7rem;border-inline-start:2px solid rgba(47,124,255,.45);cursor:pointer;background:linear-gradient(90deg,rgba(47,124,255,.05),transparent)}.mq2-combo-card:hover{border-inline-start-color:var(--gold2)}.mq2-combo-text{font-family:'Amiri',serif;color:var(--gold2);font-size:1.55rem}.mq2-combo-meta{display:flex;gap:.5rem;flex-wrap:wrap;color:var(--mq-cyan);font-size:.65rem}.mq2-combo-surahs{color:var(--txt2);font-size:.72rem;margin-top:.25rem;line-height:1.6}.mq2-empty{text-align:center;color:var(--txt3);padding:1rem}
.mq2-groups{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}.mq2-groups article{padding:.75rem;border-top:2px solid rgba(201,168,76,.3);background:rgba(255,255,255,.015)}.mq2-groups h4{margin:0 0 .4rem;color:var(--gold2)}.mq2-group-combos{display:flex;gap:.3rem}.mq2-group-combos span{font-family:'Amiri',serif;color:var(--mq-cyan);font-size:1.15rem}
.mq2-table-wrap{overflow:auto}.mq2-table{width:100%;border-collapse:collapse;font-size:.78rem}.mq2-table th{color:var(--txt2);font-weight:600;padding:.55rem;border-bottom:1px solid var(--bdr);white-space:nowrap}.mq2-table td{text-align:center;padding:.45rem;border-bottom:1px solid rgba(255,255,255,.045)}.mq2-table tr:hover td{background:rgba(255,255,255,.02)}.mq2-table.compact{max-width:480px;margin:auto}
.mq2-two{display:grid;grid-template-columns:minmax(360px,.8fr) minmax(460px,1.2fr);gap:1rem;max-width:1080px;margin:auto}.mq2-two>.mq2-section{width:100%}
.mq2-network{overflow:hidden}.mq2-network svg{width:100%;height:auto;max-height:500px}.mq2-network line{stroke:rgba(77,166,255,.16);stroke-width:1}.mq2-network g{cursor:pointer}.mq2-network circle.surah{fill:#111827;stroke:rgba(201,168,76,.45)}.mq2-network circle.letter{fill:#102137;stroke:#2f7cff}.mq2-network circle.letter.active{fill:#604b12;stroke:#e8c96a}.mq2-network text{text-anchor:middle;fill:#c8d1e1;font-size:8px}.mq2-network text.letter-t{font-family:'Amiri',serif;font-size:17px;fill:#fff}
.mq2-heat-wrap{overflow:auto}.mq2-heat{border-collapse:separate;border-spacing:2px;min-width:930px;margin:auto}.mq2-heat th{font-size:.62rem;color:var(--txt3);padding:.18rem}.mq2-heat tbody th button{border:0;background:none;color:var(--gold2);font-family:'Amiri',serif;font-size:1.05rem;cursor:pointer}.mq2-heat td{width:18px;height:18px;text-align:center;border-radius:3px;background:rgba(255,255,255,.025);color:transparent}.mq2-heat td.on{background:rgba(47,124,255,.55);color:#fff}
.mq2-verses-head{display:flex;justify-content:center;align-items:center;gap:.8rem;margin:1rem 0}.mq2-verses-head h3{font-family:'Amiri',serif;font-size:1.7rem;color:var(--gold2);margin:0}.mq2-verses-head span{color:var(--txt3);font-size:.72rem}.mq2-verses-list{display:grid;gap:.45rem}.mq2-verse{display:grid;grid-template-columns:130px 1fr 100px;align-items:center;gap:.8rem;text-align:right;border:0;border-bottom:1px solid rgba(255,255,255,.06);background:none;color:var(--txt);padding:.6rem;cursor:pointer}.mq2-verse span{color:var(--gold2);font-size:.72rem}.mq2-verse b{font-family:'Amiri',serif;font-size:1.1rem}.mq2-verse small{color:var(--mq-cyan)}
.mq2-method{border-top:1px solid rgba(201,168,76,.18);color:var(--txt2);font-size:.78rem;line-height:1.9}.mq2-method h3{color:var(--gold2);margin:.2rem 0}.mq2-method p{margin:0}
@media(max-width:900px){.mq2-letter-bar{grid-template-columns:repeat(7,1fr)}.mq2-focus-grid{grid-template-columns:repeat(2,1fr)}.mq2-groups{grid-template-columns:repeat(2,1fr)}.mq2-two{grid-template-columns:1fr}.mq2-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.mq2-focus{display:block}.mq2-focus-letter{border:0;border-bottom:1px solid rgba(201,168,76,.25);min-height:100px}.mq2-letter-bar{grid-template-columns:repeat(7,1fr)}.mq2-groups{grid-template-columns:1fr}.mq2-verse{grid-template-columns:1fr;text-align:center}.mq2-stats{grid-template-columns:repeat(2,1fr)}}


/* v3 — compact controls, centered headers, surah totals */
.mq2-controls-compact{max-width:420px!important;justify-content:center!important}
.mq2-controls-compact select,.mq2-controls-compact button{min-width:150px;text-align:center}
.mq2-table thead th,.mq2-table tfoot th{text-align:center!important;vertical-align:middle!important}
.mq2-table tfoot th{border-top:2px solid rgba(201,168,76,.35);border-bottom:0;color:var(--gold2);padding:.65rem .55rem;background:rgba(201,168,76,.045);font-weight:800}
.mq2-surah-table th,.mq2-surah-table td{text-align:center!important}


/* v4 — remove filter controls, pair tables, widen network, add matrix totals */
.mq2-controls{display:none!important}
.mq2-table-pair{display:grid;grid-template-columns:minmax(640px,1.5fr) minmax(390px,.9fr);gap:1.2rem;max-width:1240px;margin:0 auto;align-items:start}
.mq2-table-pair>.mq2-section{width:100%;max-width:none;margin:1.15rem 0}
.mq2-table-pair .mq2-table.compact{max-width:none;width:100%}
.mq2-network{width:100%;max-width:1280px;margin:0 auto;overflow:visible}
.mq2-network svg{display:block;width:100%;height:auto;max-height:none;min-height:620px}
.mq2-network line{stroke-width:1.25}
.mq2-network text{font-size:11px}
.mq2-network text.letter-t{font-size:22px}
.mq2-heat thead th,.mq2-heat tfoot th{text-align:center;vertical-align:middle}
.mq2-heat-row-total,.mq2-heat-total-head,.mq2-heat-grand-total{color:var(--mq-cyan)!important;background:rgba(201,168,76,.08)!important;min-width:48px;font-weight:800!important}
.mq2-heat tfoot th{border-top:2px solid rgba(201,168,76,.35);padding:.35rem .22rem;color:var(--gold2);background:rgba(201,168,76,.045)}
.mq2-heat-grand-total{color:var(--gold2)!important}
@media(max-width:1000px){.mq2-table-pair{grid-template-columns:1fr}.mq2-network svg{min-height:500px}}
@media(max-width:600px){.mq2-network svg{min-height:380px}}


/* v5 final layout and interaction fixes */
.mq2-table-pair{display:block!important}
.mq2-network-section{width:100%!important;max-width:none!important}
.mq2-network{width:100%!important;max-width:1380px!important;margin:0 auto!important;overflow:visible!important}
.mq2-network svg{display:block!important;width:100%!important;height:auto!important;min-height:680px!important;max-height:none!important}
.mq2-network line{transition:opacity .15s,stroke .15s,stroke-width .15s}
.mq2-network line.dim{opacity:.06}
.mq2-network line.active{opacity:1;stroke:#4da6ff!important;stroke-width:3!important}
.mq2-network .mq-net-node{cursor:pointer;transition:opacity .15s}
.mq2-network .mq-net-node.dim{opacity:.18}
.mq2-network .mq-net-node.active circle{stroke:#e8c96a!important;stroke-width:3!important;filter:drop-shadow(0 0 6px rgba(232,201,106,.5))}
.mq2-network-status{text-align:center;color:var(--text-sec);font-size:.85rem;margin-top:.5rem;min-height:1.5rem}
.mq2-heat-row-total,.mq2-heat-total-head,.mq2-heat-grand-total{text-align:center!important;vertical-align:middle!important}
.mq2-heat tbody th.mq2-heat-row-total{padding-inline:0!important}
@media(max-width:1000px){.mq2-network svg{min-height:560px!important}}
@media(max-width:600px){.mq2-network svg{min-height:400px!important}}


/* v6 — reliable matrix tooltip and named network relations */
.mq2-matrix-tooltip{position:fixed;z-index:100000;left:0;top:0;max-width:320px;padding:.55rem .75rem;border:1px solid rgba(232,201,106,.55);border-radius:9px;background:#111722;color:#f5e7b5;font-size:.8rem;font-weight:700;line-height:1.55;box-shadow:0 8px 24px rgba(0,0,0,.45);pointer-events:none;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease;direction:rtl;text-align:right}
.mq2-matrix-tooltip.show{opacity:1;visibility:visible;transform:translateY(0)}
.mq2-heat td,.mq2-heat thead th{cursor:help}
.mq2-network-status{max-width:1050px;margin:.7rem auto 0;line-height:1.8}
.mq2-network-status b{color:var(--gold2)}
.mq2-network-status span{color:var(--mq-cyan)}