@font-face{font-family:UBNastaliq;src:local("Jameel Noori Nastaleeq"),local("Noto Nastaliq Urdu");font-display:swap}
.ub333-app{--navy:#0c2340;--gold:#c89b3c;--paper:#fffdf7;--ink:#172033;max-width:1180px;margin:24px auto;background:var(--paper);color:var(--ink);border-radius:26px;overflow:hidden;box-shadow:0 18px 60px #0c234020;font-family:UBNastaliq,"Noto Nastaliq Urdu",serif}
.ub333-app.ub333-dark{--paper:#101722;--ink:#eef2f7}
.ub333-hero{background:linear-gradient(135deg,#071a31,#123e6a);color:#fff;padding:38px 44px;display:flex;align-items:center;justify-content:space-between}
.ub333-hero h2{font-size:44px;margin:4px 0;line-height:1.5}.ub333-hero p{margin:0;opacity:.8;font-size:19px}.ub333-kicker{color:#f0c66b;letter-spacing:2px;font-family:Arial,sans-serif;font-size:12px}
.ub333-theme{width:48px;height:48px;border-radius:50%;border:1px solid #ffffff55;background:#ffffff12;color:#fff;font-size:24px;cursor:pointer}
.ub333-toolbar{padding:18px 28px;background:var(--paper);display:grid;grid-template-columns:1fr 150px 1.4fr auto;gap:14px;border-bottom:1px solid #8882}
.ub333-toolbar label{font-size:14px}.ub333-toolbar select,.ub333-toolbar input{display:block;width:100%;box-sizing:border-box;padding:11px 14px;border:1px solid #8893;border-radius:12px;background:var(--paper);color:var(--ink);font:inherit}
.ub333-font{display:flex;align-items:end;gap:5px}.ub333-font button{padding:10px 12px;border:0;border-radius:10px;background:var(--navy);color:#fff;cursor:pointer}
.ub333-reader{padding:34px 7%}.ub333-title{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--gold);padding-bottom:15px}.ub333-title span{color:var(--gold)}.ub333-title h1{font-size:34px;margin:3px 0}.ub333-count{background:#c89b3c18;padding:7px 13px;border-radius:99px}
.ub333-verses{font-size:25px;line-height:2.25}.ub333-verse{position:relative;margin:0;padding:7px 0 7px 70px}.ub333-verse sup{color:var(--gold);font-family:Arial,sans-serif;font-size:12px;font-weight:bold}.ub333-copy,.ub333-fav{opacity:0;border:0;background:transparent;color:var(--ink);cursor:pointer;font-size:17px}.ub333-verse:hover .ub333-copy,.ub333-verse:hover .ub333-fav{opacity:.65}.ub333-fav.is-fav{opacity:1;color:#c89b3c}
.ub333-nav{display:flex;justify-content:space-between;margin-top:32px}.ub333-nav a{background:var(--navy);color:#fff;text-decoration:none;padding:12px 20px;border-radius:12px}
.ub333-footer{text-align:center;padding:20px;background:#071a31;color:#ffffffaa;font-family:Arial,sans-serif;font-size:12px}.ub333-empty{padding:25px;border:1px solid #ddd;border-radius:12px}
@media(max-width:700px){.ub333-app{margin:8px;border-radius:18px}.ub333-hero{padding:25px}.ub333-hero h2{font-size:34px}.ub333-toolbar{grid-template-columns:1fr 1fr}.ub333-toolbar input{grid-column:1/-1}.ub333-reader{padding:25px 20px}.ub333-title h1{font-size:27px}.ub333-verses{font-size:21px;line-height:2.15}.ub333-verse{padding-left:0}.ub333-copy,.ub333-fav{opacity:.5}}

/* v2.1 typography + compact responsive fixes */
.ub333-app,.ub333-app select,.ub333-app input,.ub333-app button{
 font-family:"Jameel Noori Nastaleeq","Jameel Noori Nastaliq","Noto Nastaliq Urdu","Nafees Nastaleeq",serif;
}
.ub333-verses{font-size:23px;line-height:1.72}
.ub333-verse{margin:0;padding:2px 0 2px 58px}
.ub333-verse span{word-spacing:0;letter-spacing:0}
.ub333-toolbar label{min-width:0}
.ub333-toolbar select,.ub333-toolbar input{min-width:0;max-width:100%;height:52px}
.ub333-title{gap:12px}
@media(max-width:820px){
 .ub333-toolbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:14px}
 .ub333-toolbar input{grid-column:1/-1}
 .ub333-font{grid-column:1/-1;justify-content:center}
 .ub333-title{align-items:flex-start;flex-direction:column}
}
@media(max-width:480px){
 .ub333-toolbar{grid-template-columns:minmax(0,1fr)}
 .ub333-toolbar input,.ub333-font{grid-column:1}
 .ub333-reader{padding:20px 15px}
 .ub333-verses{font-size:20px;line-height:1.65}
 .ub333-verse{padding:2px 0}
 .ub333-hero{padding:22px 18px}
 .ub333-hero h2{font-size:30px}
}

/* v2.2 verse-number punctuation + mobile Nastaliq rendering */
.ub333-verse sup{
 display:inline-block;
 direction:ltr;
 unicode-bidi:isolate;
 margin-left:5px;
 vertical-align:super;
}
@media(max-width:480px){
 .ub333-app,.ub333-app select,.ub333-app input,.ub333-app button{
  font-family:"Jameel Noori Nastaleeq","Jameel Noori Nastaliq","Noto Nastaliq Urdu","Nafees Nastaleeq",serif !important;
 }
}