*{box-sizing:border-box}html,body{margin:0;background:#000;color:#fff;font-family:'Amiri',serif}button,input,a{font:inherit}button,a{touch-action:manipulation}button{color:#fff;background:#1c1e21;border:1px solid #42464a;border-radius:18px;padding:14px 18px;cursor:pointer;min-height:64px}button:hover{background:#292c31}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #ffe083;outline-offset:3px}button:disabled{opacity:.4;cursor:default}.app{max-width:600px;height:100dvh;max-height:900px;min-height:500px;margin:auto;padding:24px;display:flex;flex-direction:column;gap:14px}header{display:flex;align-items:center;justify-content:space-between;min-height:68px}h1{font-size:36px;margin:4px 0}.emblem{color:#ffe083;margin-right:12px}.eyebrow{font-size:14px;color:#c9cbd1}h2{font-size:24px;margin:12px 0}section{min-height:0;display:flex;flex-direction:column;flex:1;gap:12px}[hidden]{display:none!important}label{font-size:18px}.searchbox{display:flex;align-items:center;background:#17191d;border:1px solid #54575f;border-radius:20px;min-height:76px;padding:4px 12px}input{width:100%;border:0;background:transparent;color:white;font-size:24px;min-width:0}input::placeholder{color:#b0b3b8;font-size:20px}.searchbox button{border:0;background:transparent;font-size:30px;padding:8px;min-width:52px}.actions{display:flex;gap:12px}.actions button{flex:1;font-size:19px;min-height:74px}#status{font-size:16px;color:#d5d7de;margin:0;min-height:20px}.scroll{overflow:auto;min-height:0;flex:1;padding:4px 4px 24px;scroll-padding:16px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffe083 #17191d}.result{margin-bottom:14px;padding:16px;background:#17191d;border:1px solid #42464a;border-radius:22px}.versebutton{display:block;border:0;background:transparent;padding:0;width:100%;text-align:right;font-size:27px;line-height:1.9;min-height:88px}.versebutton:hover{background:transparent}.meta{display:flex;align-items:center;justify-content:space-between;color:#dadce3;gap:12px}.hint{font-size:14px;color:#bbc0ca}mark{color:#fff3ac;background:#5c4717;border-radius:5px;padding:1px 3px;box-shadow:0 0 0 1px #ad9149}.empty{padding:26px 10px;text-align:center;line-height:1.9;color:#d5d7de}.empty strong{color:#ffe083;display:block;font-size:28px;margin-bottom:12px}footer{font-size:13px;color:#b0b3b8;display:flex;justify-content:space-between;gap:8px}#pager{display:flex;align-items:center;justify-content:space-between;gap:8px}#pager button{min-height:48px}.selected{border-color:#ffe083}.dialoghead{display:flex;align-items:center;justify-content:space-between}dialog{color:#fff;background:#111317;border:1px solid #74716a;border-radius:24px;padding:20px;width:calc(100% - 32px);max-width:570px;max-height:90dvh;overflow:auto}dialog::backdrop{background:#000c}dialog p{line-height:1.8;font-size:20px}dialog a{display:block;color:#ffe083;margin:14px 0;padding:12px;border:1px solid #5a5350;border-radius:12px}#letters{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin:16px 0}#letters button{padding:4px;min-height:56px;font-size:25px;border-radius:10px}#keys #query{display:block;border:1px solid #555;padding:16px;min-height:65px;font-size:24px;white-space:pre-wrap}#back{align-self:flex-start}.reading{font-size:27px;line-height:2}@media(min-width:550px) and (max-height:650px){.app{padding:16px;height:600px;gap:8px}header{min-height:55px}h1{font-size:30px}section{gap:8px}.actions button{min-height:72px}.searchbox{min-height:64px}footer{font-size:12px}}@media(max-width:400px){.app{padding:16px}.actions button{font-size:17px;padding:10px}input{font-size:22px}#letters button{min-height:48px}footer{font-size:12px}}
.guide{max-width:650px;margin:auto;padding:24px}.guide p,.guide li{font-size:20px;line-height:1.9}.guide a{color:#ffe083}
.readnav{display:flex;gap:10px;flex-shrink:0}.readnav button{flex:1;min-height:48px;padding:8px 12px;font-size:18px}.scroll:focus-visible{outline:2px solid #ffe083;outline-offset:1px}.result{overflow-wrap:anywhere}.reading{margin-top:0}
#context{position:relative}.continue{display:block;width:100%;margin-top:12px;min-height:48px;color:#ffe083;font-size:18px}
#keys{position:fixed;inset:auto 0 0;margin:0 auto;width:min(600px,100%);max-width:600px;padding:16px 8px 24px;border-radius:24px 24px 0 0;background:#252527;border-color:#444449}#keys .dialoghead{padding:0 10px}#keys h2{font-size:20px}#keys .dialoghead button{min-height:40px;padding:4px 14px;border:0;background:#444447}#keys #query{margin:8px 8px 16px;background:#161618;border:1px solid #55555a;border-radius:12px;font-size:22px;min-height:56px;padding:12px}#letters{display:flex;flex-direction:column;gap:10px;margin:12px 0}#letters .keyboard-row{display:flex;direction:ltr;gap:5px;justify-content:center}#letters button,#variants button{flex:1;min-width:0;min-height:52px;padding:0;border:0;border-radius:7px;background:#636366;box-shadow:0 2px 0 #151516;font-size:26px;color:#fff}#letters .row-1{padding-inline:14px}#letters .keyboard-erase{background:#414144;font-size:24px;flex:1.2}.keyboard-bottom{display:flex;direction:ltr;gap:6px;margin-top:12px}.keyboard-bottom button{min-height:52px;padding:6px 12px;font-size:18px;border:0;border-radius:7px;background:#414144;box-shadow:0 2px 0 #151516}.keyboard-bottom #space{flex:1;background:#636366}.keyboard-bottom #done{background:#0a84ff;color:white;min-width:80px}#variants{display:flex;direction:ltr;gap:8px;padding:10px 80px}#letters button:active,#variants button:active{background:#96969b;transform:translateY(1px)}@media(max-width:400px){#letters button{font-size:23px;min-height:48px}#letters .keyboard-row{gap:4px}.keyboard-bottom button{padding:6px 8px;font-size:16px}.keyboard-bottom #done{min-width:60px}}
/* Keep the surah label close to the verse while preserving all text sizes. */
.versebutton{min-height:0;margin-bottom:6px}.reading{margin-bottom:6px}.meta>span{align-self:flex-start;padding-top:6px}
#back{min-height:36px;padding:6px 10px;border-radius:12px;font-size:14px}#detailtitle{font-size:18px;line-height:1.5;margin:6px 0}.meta>span{font-size:14px;padding-top:4px}
/* Naskh is the shared typeface throughout the site. */
.versebutton,.reading{font-family:'Amiri',serif;font-weight:400}
/* Keep the existing Arabic keyboard visible below results, with one search field. */
#keys{position:static;inset:auto;margin:0;width:100%;max-width:none;max-height:none;flex-shrink:0;padding:8px;border:1px solid #444449;border-radius:16px}
#keys #query{display:block;width:calc(100% - 16px);margin:0 8px 10px}
/* Search entry and results are separate views within the same screen. */
#keys{margin-top:auto}
#matchcount{display:block;min-height:18px;font-size:14px;line-height:1.3;color:#ffe083;text-align:right;margin:0 8px 6px}
/* Show the result count at the far left within the keyboard's entry box. */
#keys .keyboard-query{display:flex;direction:rtl;align-items:center;min-height:56px;margin:0 8px 10px;background:#161618;border:1px solid #55555a;border-radius:12px}
#keys .keyboard-query #query{flex:1;min-width:0;width:0;min-height:54px;margin:0;padding:12px;border:0;background:transparent;border-radius:12px}
#keys .keyboard-query #matchcount{flex-shrink:0;direction:ltr;min-width:40px;min-height:0;margin:0;padding:0 12px;font-size:14px;line-height:1.3;text-align:left}
/* Black keyboard, including the search key and its entry field. */
#keys{background:#000;border-color:#333}
#keys .keyboard-query{background:#000;border-color:#333}
#keys .keyboard-query #query{background:#000}
#keys #letters button,#keys #variants button,#keys .keyboard-bottom button,#keys .keyboard-bottom #space,#keys .keyboard-bottom #done{background:#000;border:1px solid #333;box-shadow:none}
button,button:hover,dialog{background:#000}
/* Slightly stronger Naskh strokes without changing text size. */
html,body{font-weight:500}
.versebutton,.reading{font-weight:500}
/* One gold selection frame in reading, around the whole verse card. */
#context .versebutton:focus-visible{outline:none}
/* A small increase for the primary reading text. */
.versebutton,.reading{font-size:29px}
#diacritics{display:flex;direction:rtl;gap:6px;padding:8px 0}
#diacritics button{flex:1;min-width:0;min-height:48px;padding:4px;border:1px solid #333;border-radius:7px;background:#000;font-size:27px}
/* Compact auxiliary keys leave more room for the space bar. */
.keyboard-bottom #symbols,.keyboard-bottom #marks{font-size:14px;padding:6px 7px;flex:0 0 auto}
.keyboard-bottom #space{flex:2;min-width:100px}
@media(max-width:400px){.keyboard-bottom #symbols,.keyboard-bottom #marks{font-size:12px;padding:6px 5px}.keyboard-bottom #space{min-width:75px}}
@font-face{font-family:'Amiri';src:url('/fonts/Amiri-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Amiri';src:url('/fonts/Amiri-Bold.woff2') format('woff2');font-weight:500 900;font-style:normal;font-display:swap}
.result{background:#000}
.tafsir{background:#000;border-top:1px solid #333;margin-top:10px;padding-top:10px;font-size:19px;line-height:1.9;font-weight:500}.tafsir p{margin:0 0 12px}