:root{--green:#0b3d2e;--green2:#14532f;--cream:#f7f3e8;--card:#ffffff;--ink:#1c2420;--muted:#66706a;--gold:#b98a2f}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Tahoma,Arial,sans-serif;background:var(--cream);color:var(--ink)}
.app-header{background:var(--green);color:#fff;padding:18px 16px 14px;text-align:center}
.app-header h1{margin:0 0 6px;font-size:22px}
.lang-switch{display:flex;gap:8px;justify-content:center;margin-bottom:10px}
.lang-btn{border:1px solid rgba(255,255,255,.6);background:transparent;color:#fff;border-radius:999px;padding:6px 16px;font-size:14px;cursor:pointer}
.lang-btn.active{background:#fff;color:var(--green);font-weight:700}
.city-line{font-size:18px;font-weight:700}
.clock{font-size:15px;font-weight:400;opacity:.9;margin-inline-start:8px}
.date-line{font-size:13px;opacity:.85;margin-top:4px}
.tabs{display:flex;gap:8px;justify-content:center;padding:10px;background:#e9e2cf}
.tab{border:1px solid var(--green);background:#fff;color:var(--green);border-radius:999px;padding:9px 22px;font-size:16px;cursor:pointer}
.tab.active{background:var(--green);color:#fff}
.tabs.sub{background:transparent;padding:10px 0}
.view{max-width:720px;margin:0 auto;padding:12px}
.countdown{text-align:center;font-size:18px;font-weight:700;margin:10px 0 14px}
.card{background:var(--card);border-radius:14px;padding:14px;margin-bottom:12px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.source-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.tag{background:#eef3ee;border:1px solid #cfe0d2;color:var(--green);border-radius:999px;padding:4px 12px;font-size:14px;font-weight:700}
.notice{background:#fdf3d8;border:1px solid #eed9a0;border-radius:10px;padding:10px;font-size:14px;margin:8px 0}
.times-grid{display:grid;gap:6px}
.prayer-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;gap:8px;padding:8px 4px;border-bottom:1px solid #eee}
.prayer-row:last-child{border-bottom:none}
.p-name{font-weight:700;text-align:start}
.adhan{font-weight:700;text-align:center}
.iqama{color:var(--muted);font-size:14px;text-align:end}
.jumuah{margin-top:10px;font-size:14px;color:var(--green2);font-weight:700}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:1px solid var(--green);background:#fff;color:var(--green);border-radius:999px;padding:10px 18px;font-size:15px;cursor:pointer}
.btn.primary{background:var(--green);color:#fff}
.btn.small{padding:6px 12px;font-size:13px}
input[type=search],select{width:100%;padding:11px;border:1px solid #ccc;border-radius:10px;font-size:16px;margin:6px 0 10px}
.results,.mosques,.adhkar-list{list-style:none;margin:0;padding:0}
.results li,.mosques li{padding:10px;border-bottom:1px solid #eee;cursor:pointer}
.results li:hover,.mosques li:hover{background:#f4f1e6}
.mosques li{cursor:default}
.mosques .m-name{font-weight:700}
.mosques .m-meta{color:var(--muted);font-size:13px}
.hint{color:var(--muted);font-size:13px}
.footer-note{color:var(--muted);font-size:13px;text-align:center}
.adhkar-head{display:flex;justify-content:space-between;align-items:center;margin:8px 0}
.adhkar-list li{background:#fff;border-radius:12px;padding:12px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.07)}
.adhkar-list .a-text{line-height:1.9;font-size:17px;direction:rtl;text-align:right}
.adhkar-list .a-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.a-count{font-weight:700}
.a-count button{margin-inline-start:6px}
.done{opacity:.6}
.done .a-text{text-decoration:none}
@media(max-width:480px){.app-header h1{font-size:19px}.tab{padding:8px 16px;font-size:15px}}