*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#080C0A;--surface:#0F1512;--surface2:#151D19;--border:#1E2A24;
  --text:#E8EDE9;--text-dim:#6B7E72;--text-muted:#3A4D42;
  --accent:#7BCEA0;--accent-dim:rgba(123,206,160,0.08);--accent-glow:rgba(123,206,160,0.15);
  --active-bg:rgba(123,206,160,0.06);--shadow:rgba(0,0,0,0.5);
  --font-ar:'Noto Kufi Arabic','Noto Naskh Arabic',serif;
  --font-body:'DM Sans','Noto Sans',sans-serif;
  --font-mono:'DM Mono',monospace;
}
[data-theme="light"]{
  --bg:#F4F1EC;--surface:#FFFFFF;--surface2:#EDE9E3;--border:#D5CFC6;
  --text:#1A1A1A;--text-dim:#5C5C5C;--text-muted:#9A9488;
  --accent:#2D8B5E;--accent-dim:rgba(45,139,94,0.07);--accent-glow:rgba(45,139,94,0.15);
  --active-bg:rgba(45,139,94,0.06);--shadow:rgba(0,0,0,0.08);
}

html{font-size:16px}
@media(min-width: 768px){ html{font-size:18px} }
@media(min-width: 1200px){ html{font-size:20px} }
@media(min-width: 1920px){ html{font-size:26px} }

body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background .35s,color .35s; display:flex; flex-direction:column;}
body.rtl{direction:rtl}
body.rtl .prayer-row{flex-direction:row-reverse}
body.rtl .left{flex-direction:row-reverse}
body.rtl .setting-group select{background-position:left 14px center;padding:10px 14px 10px 32px}
body.rtl .search-wrap{direction:ltr}
body.rtl .adhkar-top{flex-direction:row-reverse}
body.rtl .adhkar-trans{text-align:right}

body::before{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events:none;z-index:0;
  will-change: transform; transform: translateZ(0);
}

body.loaded .top-bar, body.loaded header, body.loaded .location-bar,
body.loaded .next-prayer-hero, body.loaded .divider, body.loaded .prayer-row,
body.loaded .controls-row, body.loaded .adhkar-wrap, body.loaded .mosques-wrap, body.loaded footer {
    animation: none !important;
    opacity: 1 !important;
}

.app{position:relative;z-index:1;width:100%;max-width:480px;margin:0 auto;padding:0 24px;display:flex;flex-direction:column;flex:1;}

.top-bar{display:flex;justify-content:space-between;align-items:center;padding:16px 0 0;opacity:0;animation:fadeUp .6s ease forwards .1s}
.top-actions{display:flex;gap:8px;align-items:center}
.icon-btn{background:var(--surface);border:1px solid var(--border);color:var(--text-dim);width:34px;height:34px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;flex-shrink:0}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.icon-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}

/* PWA Install Button */
#install-btn { display: none; }
#install-btn.show { display: flex; }

/* Dynamic style replacements for CSP compliance */
.icon-wrapper-flex{display:flex}
.font-ar{font-family:var(--font-ar)}
.footer-author{font-family:var(--font-ar);font-size:1.1rem;color:var(--accent);display:inline-block;margin-top:4px}
.error-mt{margin-top:20px}

.lang-wrap{position:relative}
.lang-btn{background:var(--surface);border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-body);font-size:.7rem;padding:6px 12px;border-radius:100px;cursor:pointer;transition:all .3s;display:flex;align-items:center;gap:5px;white-space:nowrap}
.lang-btn:hover{border-color:var(--accent);color:var(--accent)}
.lang-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.5}
.lang-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:6px;min-width:230px;max-height:350px;overflow-y:auto;display:none;box-shadow:0 16px 48px var(--shadow);z-index:200}
body.rtl .lang-dropdown{right:auto;left:0}
.lang-dropdown.open{display:block}
.lang-dropdown::-webkit-scrollbar{width:4px}
.lang-dropdown::-webkit-scrollbar-track{background:transparent}
.lang-dropdown::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.lang-option{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:8px;cursor:pointer;transition:background .2s;font-size:.8rem;color:var(--text-dim)}
.lang-option:hover{background:var(--surface2)}
.lang-option.active{color:var(--accent);background:var(--accent-dim)}
.lang-option .native{font-size:.75rem;opacity:.6}

header{padding:32px 0 8px;text-align:center}
.bismillah{font-family:var(--font-ar);font-size:1.1rem;color:var(--text-muted);margin-bottom:20px;opacity:0;animation:fadeUp .8s ease forwards .2s;direction:rtl}
.logo{font-family:var(--font-body);font-weight:600;font-size:1.05rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);opacity:0;animation:fadeUp .6s ease forwards .05s; margin:0;}

.dashboard-grid {display:flex; flex-direction:column; width:100%; gap:0; flex:1;}
.dash-col-left {display:flex; flex-direction:column; align-items:center;}
.dash-col-right {display:flex; flex-direction:column; width:100%;}

.location-bar{text-align:center;padding:14px 0 6px;opacity:0;animation:fadeUp .7s ease forwards .3s}
.location-name{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:500;color:var(--text-dim);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:color .2s}
.location-name:hover{color:var(--accent)}
.location-name svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2}
.hijri-date{font-family:var(--font-ar);font-size:.73rem;color:var(--text-muted);margin-top:3px;direction:rtl}
.gregorian-date{font-family:var(--font-mono);font-size:.63rem;color:var(--text-muted);margin-top:2px;opacity:.6}

.next-prayer-hero{text-align:center;padding:32px 0 24px;opacity:0;animation:fadeUp .8s ease forwards .45s}
.next-label{font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.next-name-en{font-family:var(--font-body);font-size:2.5rem;font-weight:300;color:var(--text);letter-spacing:-.02em;line-height:1.1}
.next-name-local{font-size:.95rem;color:var(--text-dim);margin-top:3px;display:block}
.next-name-ar{font-family:var(--font-ar);font-size:1.05rem;color:var(--text-muted);display:block;margin-top:3px;direction:rtl}
.next-time{font-family:var(--font-mono);font-size:1.35rem;font-weight:300;color:var(--accent);margin-top:8px;letter-spacing:.05em}
.countdown{font-family:var(--font-mono);font-size:.73rem;color:var(--text-muted);margin-top:5px; font-variant-numeric: tabular-nums;}

.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent);margin:0 20px 20px;opacity:0;animation:fadeUp .8s ease forwards .55s; display:block;}

.prayer-list{display:flex;flex-direction:column;gap:2px; width:100%;}
.prayer-row{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-radius:10px;transition:background .3s;opacity:0;animation:fadeUp .6s ease forwards}
.prayer-row:nth-child(1){animation-delay:.6s}.prayer-row:nth-child(2){animation-delay:.65s}.prayer-row:nth-child(3){animation-delay:.7s}.prayer-row:nth-child(4){animation-delay:.75s}.prayer-row:nth-child(5){animation-delay:.8s}.prayer-row:nth-child(6){animation-delay:.85s}
.prayer-row.is-next{background:var(--active-bg);border:1px solid var(--accent-glow)}
.prayer-row.is-passed{opacity:.4!important}
.prayer-row .left{display:flex;align-items:baseline;gap:8px}
.prayer-row .name-group{display:flex;flex-direction:column;gap:1px}
.prayer-row .name-en{font-weight:500;font-size:.9rem;color:var(--text)}
.prayer-row .name-local{font-size:.68rem;color:var(--text-muted)}
.prayer-row .ar-name{font-family:var(--font-ar);font-size:.73rem;color:var(--text-muted);direction:rtl}
.prayer-row .time{font-family:var(--font-mono);font-size:.88rem;color:var(--text-dim); font-variant-numeric: tabular-nums;}
.prayer-row.is-next .name-en{color:var(--accent)}.prayer-row.is-next .time{color:var(--accent)}

.controls-row {display:flex; justify-content:center; gap: 12px; padding: 20px 0 10px; opacity:0; animation:fadeUp .6s ease forwards .95s; width:100%;}
.pill-btn{background:var(--surface);border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-body);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:8px 20px;border-radius:100px;cursor:pointer;transition:all .3s; display:flex; align-items:center; justify-content:center; gap: 6px;}
.pill-btn:hover{border-color:var(--accent);color:var(--accent)}
.pill-btn.active{background:var(--accent); color:var(--bg); border-color:var(--accent); font-weight:600;}

.mosques-wrap, .adhkar-wrap {width: 100%; display: flex; flex-direction: column; align-items: center; opacity:0; animation:fadeUp .6s ease forwards .95s;}
.mosques-panel, .adhkar-panel {max-height:0; overflow:hidden; transition:max-height .5s ease, opacity .3s ease; opacity:0; width:100%;}
.mosques-panel.open, .adhkar-panel.open {max-height: 1200px; opacity:1; margin-bottom: 15px; overflow-y:auto; scrollbar-width: none;}
.mosques-panel.open::-webkit-scrollbar, .adhkar-panel.open::-webkit-scrollbar { display: none; }
.mosques-list, .adhkar-list {display: flex; flex-direction: column; gap: 8px; padding: 10px 0;}
.adhkar-item {background: var(--surface); border: 1px solid var(--border); padding: 18px 20px; border-radius: 12px; display: flex; flex-direction: column; gap: 12px;}
.adhkar-top {display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;}
.adhkar-ar {font-family: var(--font-ar); font-size: 1.15rem; color: var(--text); line-height: 1.7; flex: 1; direction: rtl;}
.adhkar-count {font-family: var(--font-mono); font-size: .8rem; color: var(--accent); background: var(--active-bg); padding: 4px 10px; border-radius: 6px; white-space: nowrap; margin-top:4px;}
.adhkar-trans {font-size: .8rem; color: var(--text-dim); line-height: 1.5; text-align: left;}

.mosque-item {background: var(--surface); border: 1px solid var(--border); padding: 14px 18px; border-radius: 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; transition:background .2s}
.mosque-item:hover {background: var(--surface2);}
.mosque-info {display: flex; flex-direction: column; gap: 4px; flex: 1}
.mosque-name {font-size: .95rem; color: var(--text); font-weight: 500;}
.mosque-addr {font-size: .7rem; color: var(--text-dim);}
.mosque-dist {font-family: var(--font-mono); font-size: .8rem; color: var(--accent); background: var(--active-bg); padding: 4px 8px; border-radius: 6px; white-space: nowrap;}

.settings-panel{max-height:0;overflow:hidden;transition:max-height .4s,opacity .3s;opacity:0; width:100%;}
.settings-panel.open{max-height:500px;opacity:1}
.settings-inner{padding:10px 0 20px;display:flex;flex-direction:column;gap:14px}
.setting-group label{display:block;font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:7px}
.setting-group select{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);font-family:var(--font-body);font-size:.83rem;padding:9px 36px 9px 14px;border-radius:8px;outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236B7E72' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;transition:border-color .2s}
.setting-group select:focus{border-color:var(--accent)}
.setting-group select option{background:var(--surface);color:var(--text)}

.search-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:18px;padding:40px 0}
.search-screen h2{font-weight:400;font-size:1.1rem;color:var(--text);text-align:center}
.search-screen p{font-size:.8rem;color:var(--text-dim);text-align:center;max-width:300px;line-height:1.5}
.search-wrap{width:100%;max-width:340px;position:relative}
.search-wrap input{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);font-family:var(--font-body);font-size:.9rem;padding:12px 16px 12px 40px;border-radius:10px;outline:none;transition:border-color .2s}
.search-wrap input:focus{border-color:var(--accent)}
.search-wrap input::placeholder{color:var(--text-muted)}
.search-wrap .search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--text-muted);fill:none;stroke-width:1.5}
.search-results{width:100%;max-width:340px;display:flex;flex-direction:column;gap:2px;max-height:260px;overflow-y:auto}
.search-result-item{padding:12px 14px;border-radius:8px;cursor:pointer;transition:background .2s;font-size:.83rem;color:var(--text-dim);line-height:1.4}
.search-result-item:hover{background:var(--surface2);color:var(--text)}
.search-result-item .sr-city{color:var(--text);font-weight:500}
.search-result-item .sr-detail{font-size:.72rem;opacity:.6;display:block;margin-top:2px}
.search-loading{font-size:.75rem;color:var(--text-muted);padding:12px 0;text-align:center}
.search-error{font-size:.75rem;color:#c97a5a;padding:8px 0;text-align:center;width:100%;max-width:340px}
.or-divider{display:flex;align-items:center;gap:12px;width:100%;max-width:340px;color:var(--text-muted);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.or-divider::before,.or-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.retry-gps-btn{background:none;border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-body);font-size:.75rem;padding:8px 20px;border-radius:100px;cursor:pointer;transition:all .3s}
.retry-gps-btn:hover{border-color:var(--accent);color:var(--accent)}
.search-controls {display:flex; gap:10px;}

footer{margin-top:auto;padding:20px 0 28px;text-align:center;opacity:0;animation:fadeUp .6s ease forwards 1.1s; width:100%;}
footer p{font-size:.58rem;color:var(--text-muted);line-height:1.6}
.made-with{font-size:.65rem;color:var(--text-dim);margin-top:16px;line-height:1.7}

.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:14px}
.loading-spinner{width:26px;height:26px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
.loading-text{font-size:.73rem;color:var(--text-muted)}

@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ─── ACCESSIBILITY ─── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.icon-btn:focus-visible,.pill-btn:focus-visible,.lang-btn:focus-visible,.retry-gps-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.search-result-item:focus-visible,.lang-option:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;background:var(--surface2)}
.location-name:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ─── RESPONSIVE ─── */
@media(min-width: 1024px) and (min-height: 600px) {
  html { font-size: 18px; }
  .app { max-width: 1000px; padding: 0 40px; }
  .dashboard-grid { flex-direction: row; gap: 60px; align-items: flex-start; justify-content: center; }
  .dash-col-left { flex: 1; position: sticky; top: 40px; padding-top: 20px; max-height: calc(100vh - 80px); overflow-y: auto; scrollbar-width: none; }
  .dash-col-left::-webkit-scrollbar { display: none; }
  .dash-col-right { flex: 1.2; padding-top: 20px; }
  .divider { display: none; }
  .next-prayer-hero { padding: 40px 0 0; }
  .controls-row { justify-content: flex-start; }
}

@media(min-width: 1920px) {
  html { font-size: 26px; }
  .app { max-width: 1600px; padding: 0 60px; height: 100dvh; justify-content: center; }
  header { padding: 20px 0 0; }
  .dashboard-grid { gap: 100px; flex: 1; align-items: center; }
  .dash-col-left { position: relative; top: 0; max-height: none; }
  .controls-row { display: none; }
  .mosques-wrap, .adhkar-wrap { opacity: 1; animation: none; }
  .mosques-panel, .adhkar-panel { max-height: none; opacity: 1; overflow: visible; margin-bottom: 0; }
  .prayer-list { gap: 6px; }
  .mosques-list, .adhkar-list { gap: 12px; }
  footer { padding: 10px 0 20px; }
}

@media(max-width:380px){
  .next-name-en{font-size:2.1rem}
  .app{padding:0 18px}
}