:root{--bg:#F5F6FB;--card:#fff;--ink:#171A2B;--mut:#767B95;--line:#E8EAF3;
  --blue:#3A5FA0;--gold:#C8A84B;--vh:1vh}
[data-theme=night]{--bg:#0B1020;--card:#141B2F;--ink:#EEF2FF;--mut:#8994B2;
  --line:#222C45;--blue:#4C7DF0;--gold:#E3BE68}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);min-height:calc(var(--vh)*100);
  font:15px/1.5 -apple-system,'Segoe UI',Inter,Roboto,sans-serif;
  display:flex;flex-direction:column}

nav{display:flex;align-items:center;gap:10px;padding:14px 18px}
nav .mark{width:32px;height:32px;border-radius:11px}
nav .ttl{font-weight:650;letter-spacing:-.2px}
nav .ttl b{color:var(--gold)}
nav .sp{flex:1}
.btn{border:1px solid var(--line);background:var(--card);color:var(--ink);
  border-radius:999px;padding:8px 15px;font:inherit;font-size:13px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px}
.btn:active{opacity:.7}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.btn.ghost{background:transparent}
.btn.danger{color:#c0392b}

main{flex:1;width:100%;max-width:560px;margin:0 auto;padding:4px 18px 34px}
h1{font-size:26px;font-weight:680;letter-spacing:-.7px;margin:10px 0 4px}
.sub{color:var(--mut);font-size:13.5px;margin:0 0 18px}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:20px}
.tile{display:block;text-decoration:none;color:#fff;border-radius:20px;padding:18px 16px;
  min-height:104px;position:relative;overflow:hidden}
.tile.quran{background:linear-gradient(140deg,#3A5FA0,#6C8FD6)}
.tile.prayer{background:linear-gradient(140deg,#1E5B45,#3F8F70)}
.tile .k{font-size:11px;letter-spacing:1.7px;text-transform:uppercase;opacity:.78}
.tile .n{font-size:19px;font-weight:680;letter-spacing:-.4px;margin-top:4px}
.tile .d{font-size:12px;opacity:.85;margin-top:3px;line-height:1.35}

section{margin-bottom:22px}
.hd{display:flex;align-items:baseline;gap:8px;margin:0 0 10px}
.hd h2{font-size:15px;font-weight:640;margin:0;letter-spacing:-.2px}
.hd .sp{flex:1}
.hd button{font-size:12.5px;color:var(--blue);background:none;border:none;cursor:pointer;
  font:inherit;font-weight:560}

.card{background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:15px 17px;margin-bottom:10px}
.card h3{margin:0 0 2px;font-size:16px;font-weight:640;letter-spacing:-.2px}
.card .addr{color:var(--mut);font-size:12.5px;margin-bottom:10px}
.row{display:flex;gap:6px}
.cell{flex:1;text-align:center;padding:7px 3px;border-radius:9px;background:var(--bg);
  border:1px solid var(--line)}
.cell b{display:block;font-size:14.5px;font-weight:640;font-variant-numeric:tabular-nums}
.cell span{font-size:9.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--mut)}
.jum{margin-top:9px;font-size:12.5px;color:var(--mut)}
.jum b{color:var(--ink);font-variant-numeric:tabular-nums}
.cardfoot{display:flex;align-items:center;gap:10px;margin-top:11px}
.cardfoot .sp{flex:1}
.cardfoot a{font-size:11.5px;color:var(--mut)}

.empty{color:var(--mut);font-size:13.5px;background:var(--card);border:1px dashed var(--line);
  border-radius:18px;padding:20px 18px;text-align:center}

input,select{width:100%;font:inherit;font-size:16px;padding:11px 13px;border-radius:11px;
  border:1px solid var(--line);background:var(--card);color:var(--ink)}
input:focus,select:focus{outline:2px solid var(--blue);outline-offset:1px}
label{display:block;font-size:12px;color:var(--mut);margin:12px 0 5px;
  text-transform:uppercase;letter-spacing:1.1px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:0 11px}
.fields .wide{grid-column:1/-1}

.sheetbg{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;z-index:30;
  align-items:center;justify-content:center;padding:18px}
.sheetbg.open{display:flex}
.sheet{background:var(--bg);width:100%;max-width:520px;border-radius:18px;
  padding:18px 20px 22px;max-height:calc(var(--vh)*84);overflow:auto;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.45)}
.sheet h2{margin:0 0 10px;font-size:17px}
.hits{list-style:none;margin:10px 0 0;padding:0}
.hits li{display:flex;align-items:center;gap:10px;padding:11px 4px;
  border-bottom:1px solid var(--line)}
.hits .nm{flex:1}
.hits .nm small{display:block;color:var(--mut);font-size:12px}

.note{color:var(--mut);font-size:12.5px;margin:8px 0 0}
.err{color:#c0392b;font-size:13px;margin:10px 0 0}
.ok{color:#1E5B45;font-size:13px;margin:10px 0 0}
footer{padding:20px 18px 30px;color:var(--mut);font-size:11.5px;text-align:center;
  border-top:1px solid var(--line);line-height:1.7}
footer a{color:var(--mut)}