@font-face{font-family:Amiri;src:url('AmiriQuran.ttf')}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#101b19;color:#f5eddb;font-family:Amiri,serif}button,input{font:inherit}a{color:inherit}header{min-height:92px;display:flex;align-items:center;gap:24px;padding:14px 28px;border-bottom:1px solid #8c76494f;background:#182522}header .home{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:bold;font-size:21px;white-space:nowrap}header .home img{object-fit:contain}header .heading{margin:auto;text-align:center}h1{margin:0;font-size:29px;line-height:1.4;color:#e8cc8c}header p{margin:0;color:#b9c1ae;font-size:14px}.back{text-decoration:none;color:#e0bd74;font-size:15px;white-space:nowrap}header nav{display:flex;gap:14px;align-items:center}main{display:grid;grid-template-columns:minmax(0,1fr) 330px;direction:ltr;height:calc(100vh - 92px);min-height:560px}.viewer{position:relative;overflow:hidden;background:radial-gradient(circle,#20312b 0,#15221f 65%,#101a18 100%);touch-action:none;direction:rtl}.viewer canvas{width:100%;height:100%;display:block;cursor:grab}.viewer canvas:active{cursor:grabbing}.loading{position:absolute;inset:0;display:grid;place-items:center;font-size:21px;color:#e8cc8c;background:#15221f}.loading[hidden]{display:none}.controls{position:absolute;bottom:50px;left:18px;display:flex;gap:6px}.controls button{background:#20352f;border:1px solid #a88c5880;border-radius:8px;color:#f4dfa9;min-width:38px;height:38px;cursor:pointer;font-size:22px}.hint{position:absolute;bottom:12px;left:14px;right:14px;text-align:center;color:#b9c5b3;font-size:13px;pointer-events:none}.sidebar{direction:rtl;overflow:auto;padding:20px;border-left:1px solid #8c76494f;background:#1a2925}.sidebar label{display:block;color:#e8cc8c;margin-bottom:8px;font-size:17px}.sidebar input{width:100%;background:#0f1e1a;color:#fff8e9;border:1px solid #977e53;border-radius:9px;padding:10px 12px;outline:none}.sidebar input:focus{border-color:#f3cf84}.letters{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:14px 0 21px}.letters button{background:#263b32;color:#eddec0;border:1px solid #997d4f80;border-radius:7px;min-height:37px;cursor:pointer;font-size:20px}.letters button.active,.letters button:hover{background:#bd9853;color:#18231d}.details{border-top:1px solid #9177476b;padding-top:14px}.details h2{font-size:23px;color:#f0cf8d;margin:0 0 4px}.details p{margin:5px 0 12px;color:#c9d0c0;line-height:1.7}.details .meta{font-size:14px;color:#bca97e}.root-list,.word-list{display:flex;flex-wrap:wrap;gap:7px;max-height:calc(100vh - 345px);overflow:auto;align-content:start}.root-list button,.word-list button{background:#263a32;color:#f6e4bb;border:1px solid #83724c;border-radius:6px;padding:4px 8px;cursor:pointer}.root-list button:hover,.word-list button:hover{background:#a4874b;color:#13211c}.word-list button{display:flex;flex-direction:column;line-height:1.3;text-align:right}.word-list small{color:#c2cbb9;font-size:12px}.empty{color:#d5b87b!important}@media(max-width:800px){header{min-height:78px;padding:8px 12px;gap:10px;flex-wrap:wrap}header .home span{display:none}header .heading{text-align:right}h1{font-size:21px}header p{font-size:11px}header nav{width:100%;justify-content:space-between}.back{font-size:12px}main{height:auto;min-height:0;display:flex;flex-direction:column}.viewer{height:70vh;min-height:440px}.sidebar{height:auto;min-height:290px;border-left:0;border-top:1px solid #8c76494f}.root-list,.word-list{max-height:300px}}
.view-switch{display:flex;gap:3px!important;align-items:stretch!important;padding:3px;border:1px solid #8e7950;border-radius:10px;background:#10221f;white-space:nowrap}.view-switch a{padding:8px 10px;text-decoration:none;color:#d5c69e;font-size:13px;border-radius:7px}.view-switch a[aria-current=page]{background:#b99856;color:#102522;font-weight:bold}.view-switch a:hover:not([aria-current=page]){background:#27423b;color:#fff1c9}@media(max-width:800px){header .view-switch{width:100%;justify-content:center}.view-switch a{flex:1;text-align:center}}
.controls button{display:flex;align-items:center;justify-content:center;min-width:40px;width:40px;height:40px;padding:0;font:600 23px/1 Arial,Tahoma,sans-serif;overflow:hidden}