@font-face{font-family:Arabic;src:url('assets/arabic.ttf')}*{box-sizing:border-box}body{margin:0;background:#142d38;color:#f5f5ee;font:24px/1.5 Arabic,Tahoma,sans-serif;overflow:hidden}.backdrop,.shade{position:fixed;inset:0}.backdrop{background:center/cover url('assets/nature-01.jpg');transition:opacity 1.4s ease}.shade{background:linear-gradient(90deg,rgba(9,30,40,.25),rgba(8,26,34,.77)),linear-gradient(0deg,rgba(7,24,32,.85),transparent 70%)}main{position:relative;height:100vh;padding:4vh 5vw}header,footer,.panel-head{display:flex;align-items:center;justify-content:space-between}.identity{font-size:38px;letter-spacing:1px}.identity span{display:block;font-size:16px;letter-spacing:0;color:#e4ddd0}.status{font-size:17px;color:#dae7df}.clock-block{margin:3vh 0 4vh}.clock{font:300 155px Arabic,sans-serif;font-size:clamp(65px,8vw,155px);line-height:1.25;width:max-content}.muted{color:#c3d1d1;font-size:21px}.glass{background:rgba(18,43,51,.87);border:1px solid rgba(236,244,241,.24);border-radius:22px;box-shadow:0 12px 55px #06171f25}@supports(backdrop-filter:blur(16px)){.glass{background:rgba(20,44,52,.64);backdrop-filter:blur(16px)}}.information{display:flex;gap:24px;max-width:1400px}.information article{padding:26px 32px;min-width:0}.prayer{flex:1.5}.appointment{flex:1}.eyebrow{color:#d8d4bd;font-size:17px}h1,h2,p{margin:8px 0}h1{font-size:36px;font-weight:500}h2{font-size:28px;font-weight:500;overflow-wrap:break-word}#countdown{font-size:30px;color:#eadab1;text-align:right}.prayer-times{display:flex;justify-content:space-between;gap:14px;margin-top:20px}.prayer-times span{display:block;font-size:18px}.prayer-times b{font-size:25px;font-weight:500}.prayer-times .next{color:#f1dca0;border-bottom:2px solid #e6ce91}small{font-size:14px;color:#cad5d2}button,input,select{font:inherit}button{border:1px solid #ffffff38;background:#ffffff0a;color:inherit;border-radius:13px;padding:10px 20px;cursor:pointer;min-height:54px}button:focus,input:focus,select:focus{outline:4px solid #f2dda5;outline-offset:5px;background:#48616a;box-shadow:0 0 0 8px #112f3c}button:hover{background:#ffffff20}.dock{display:flex;gap:15px;width:max-content;padding:15px;margin:4vh auto 0}.dock button{min-width:150px}.apps{display:flex;justify-content:center;gap:18px;margin:14px}.apps button{font-size:19px}footer{position:absolute;bottom:2.5vh;left:5vw;right:5vw;color:#c9d7d6;font-size:14px}.panel{position:absolute;inset:14vh 5vw 8vh;padding:30px;overflow:auto;background:rgba(13,36,46,.97)}.panel-head{margin-bottom:30px}.panel-content label,label{display:block;margin:18px 0}input,select{background:#183e4d;color:white;border:1px solid #70949f;border-radius:8px;padding:10px;margin:8px;max-width:90%;direction:ltr}.row{padding:20px 0;border-bottom:1px solid #b5caca35}.row button{margin:8px}.row p{font-size:21px}.code{font:70px monospace;letter-spacing:12px;color:#f2dda5;direction:ltr}.modal{position:fixed;inset:0;background:#04131bcc;display:flex;align-items:center;justify-content:center;z-index:10}.modal article{padding:45px;max-width:80vw}.modal button{margin:15px}[hidden]{display:none!important}#toast{position:fixed;bottom:30px;left:30px;background:#163f4e;padding:15px;border-radius:12px;display:none}#event-time{font-size:22px}@media(max-height:800px){body{font-size:21px}.clock-block{margin:1vh 0 2vh}.information article{padding:18px 26px}.dock{margin-top:3vh}.clock{font-size:85px}.prayer-times{margin-top:10px}header .identity{font-size:28px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.apps{justify-content:flex-start;max-width:100%;overflow-x:auto;padding:8px 4px}.apps button{flex-shrink:0}
@font-face{font-family:Tajawal;src:url('assets/tajawal-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Tajawal;src:url('assets/tajawal-medium.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Tajawal;src:url('assets/tajawal-bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:ArefRuqaa;src:url('assets/aref-ruqaa.ttf') format('truetype');font-weight:400;font-display:swap}
body{font-family:Tajawal,Tahoma,sans-serif;font-weight:400;line-height:1.55}
.clock{font-family:Tajawal,sans-serif;font-weight:400;line-height:1.12;font-variant-numeric:tabular-nums;letter-spacing:-.035em}
.identity{font-weight:700;letter-spacing:0}.identity span{font-weight:400}
#date{font-size:25px;line-height:1.8}#hijri{font-size:22px;line-height:1.8}
.calendar-month{font-family:ArefRuqaa,serif;font-size:1.65em;font-weight:400;display:inline-block;margin-inline:6px;line-height:1.3}
#next-prayer{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;min-height:100px;font-weight:500}
html[lang=ar] .prayer-name{font-family:ArefRuqaa,serif;font-size:68px;font-weight:400;line-height:1.65}
.prayer-at{font-family:Tajawal,sans-serif;font-size:35px;font-weight:500;direction:ltr;font-variant-numeric:tabular-nums;white-space:nowrap}
.prayer-times b,#countdown,.code{font-family:Tajawal,sans-serif;font-variant-numeric:tabular-nums}
.prayer-times span{font-size:20px;line-height:1.7}.prayer-times b{font-size:28px;font-weight:500}
.dock button{font-weight:500}.eyebrow{font-size:20px}h1,h2{font-weight:500}
@media(max-height:800px){html[lang=ar] .prayer-name{font-size:50px}#next-prayer{min-height:76px}.prayer-at{font-size:29px}#date{font-size:23px}#hijri{font-size:21px}}
@media(max-height:800px){.dock{padding:10px;margin-top:2vh}.information article{padding:16px 22px}}
.clock-block{margin:2vh 0 2vh}#date,#hijri{line-height:1.5}.calendar-month{font-size:1.5em;line-height:1.2}
html[lang=ar] .prayer-name{line-height:1.35}#next-prayer{min-height:88px}
@media(max-height:800px){.clock-block{margin:0 0 1vh}.clock{font-size:72px;line-height:1.05}#date{font-size:20px;line-height:1.35}#hijri{font-size:18px;line-height:1.35}.calendar-month{font-size:1.4em;line-height:1.1}html[lang=ar] .prayer-name{font-size:46px;line-height:1.3}#next-prayer{min-height:60px;margin:4px 0}#countdown{font-size:24px;line-height:1.35}.eyebrow{font-size:17px}.prayer-times{margin-top:8px}.prayer-times span{font-size:17px;line-height:1.4}.prayer-times b{font-size:23px}small{font-size:12px}.dock{margin-top:1.5vh}.dock button{min-height:46px;padding:7px 18px}.apps{margin:6px 0;padding:4px}.apps button{min-height:42px;font-size:17px}}

