/* Modern minimal tailwind-inspired utility-ish custom CSS (no external dependency) */
@import url('https://fonts.googleapis.com/css2?family=Amiri+Quran&family=Scheherazade+New:wght@400;700&display=swap');
:root { --bg:#0f1115; --bg-alt:#171a21; --card:#1f242d; --border:#2c313c; --text:#e2e8f0; --muted:#8892a0; --accent:#16a34a; --accent-hover:#22c55e; --danger:#dc2626; --radius:14px; --focus:0 0 0 2px #16a34a55; font-size:16px; }
* { box-sizing:border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, 'Helvetica Neue', Arial, sans-serif; -webkit-font-smoothing:antialiased; }
body { min-height:100vh; display:flex; flex-direction:column; }

h1,h2,h3,h4 { margin:0 0 .6rem; font-weight:600; letter-spacing:.5px; }
p { line-height:1.6; }

header { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); background: rgba(15,17,21,.75); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:40; }
.bar { display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding:.9rem 0; }
.brand { display:flex; gap:.9rem; align-items:center; }
.logo { width:48px; height:48px; background:linear-gradient(135deg,#16a34a,#065f46); border-radius:16px; display:flex; align-items:center; justify-content:center; font-weight:700; letter-spacing:.5px; }
.logo, .logo * { color:#fff; }
.muted { color:var(--muted); font-size:.85rem; }
.wrap { width:100%; max-width:1180px; margin:0 auto; padding:0 1.1rem; }

main.wrap { flex:1; width:100%; }
footer { text-align:center; padding:2.5rem 1rem 3rem; font-size:.8rem; color:var(--muted); }

.row { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.grid { display:grid; }
.grid.g-3 { grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:1rem; }

.card { background:var(--card); border:1px solid var(--border); padding:1.05rem 1.15rem; border-radius:var(--radius); position:relative; box-shadow:0 4px 8px -2px #0005; }
.card + .card { margin-top:.9rem; }
.list .card { margin-top:.9rem; }

input,select,textarea { background:var(--bg-alt); color:var(--text); border:1px solid var(--border); padding:.75rem .9rem; border-radius:12px; font:inherit; width:100%; outline:none; transition:.2s border, .2s background; }
input:focus,select:focus,textarea:focus { border-color:var(--accent); box-shadow:var(--focus); }

.btn { --btn-bg:var(--bg-alt); --btn-color:var(--text); --btn-border:var(--border); background:var(--btn-bg); color:var(--btn-color); border:1px solid var(--btn-border); padding:.7rem 1.05rem; border-radius:12px; cursor:pointer; font:600 0.92rem/1 system-ui; display:inline-flex; gap:.5rem; align-items:center; letter-spacing:.4px; text-decoration:none; transition:.2s background,.2s border,.2s transform; }
.btn:hover { background:#242a33; }
.btn:active { transform:translateY(1px); }
.btn.primary { --btn-bg:var(--accent); --btn-border:#15803d; --btn-color:#fff; }
.btn.primary:hover { background:var(--accent-hover); }
.badge { background:var(--accent); color:#fff; font-size:.65rem; padding:.25rem .5rem; border-radius:6px; vertical-align:middle; }

.mono { font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace; font-size:.75rem; letter-spacing:.5px; color:var(--muted); }

/* Utility */
.space-y > * + * { margin-top:1rem; }
.center { text-align:center; }
.flex { display:flex; }
.justify-between { justify-content:space-between; }
.items-center { align-items:center; }

/* Responsive tweaks */
@media (max-width: 820px){
  .bar { flex-direction:column; align-items:flex-start; }
  .logo { width:40px; height:40px; font-size:.85rem; }
  h1 { font-size:1.35rem; }
}
@media (max-width:520px){
  .grid.g-3 { grid-template-columns:1fr; }
  .card { padding:.95rem .95rem; }
  header .row { width:100%; }
  .row input { flex:1; }
}

/* Prose styling for AI answer */
.ai-answer { line-height:1.65; }
.ai-answer h3 { margin-top:1.4rem; font-size:1.05rem; }
.ai-answer ul { padding-left:1.2rem; margin:.5rem 0 1rem; }
.ai-answer code { background:var(--bg-alt); padding:.15rem .4rem; border-radius:6px; font-size:.8rem; }

/* Scrollbar styling (webkit) */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#2b323d; border-radius:20px; border:2px solid #14171c; }
::-webkit-scrollbar-thumb:hover { background:#36404d; }

/* ===================== */
/* WhatsApp-like variant */
/* ===================== */
body.wa { --bg:#0b141a; --bg-alt:#111b21; --card:#1e282f; --border:#223038; --accent:#00a884; --accent-hover:#019276; --radius:18px; }
body.wa header { background:linear-gradient(135deg,#0d1f24,#0b141a); border-bottom:1px solid #132027; }
body.wa .logo { background:linear-gradient(135deg,#00a884,#017561); }
body.wa .card { box-shadow:0 2px 4px -1px #0007; }
body.wa .muted { color:#80919c; }
body.wa main.wrap { padding-top:1rem; }
body.wa .bar { padding:.75rem 0 .55rem; }
body.wa footer { padding-bottom:5.5rem; }

/* Prayer times widget */
.prayer-panel { display:flex; flex-direction:column; gap:.9rem; }
.prayer-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.75rem; }
.prayer-head .dates { font:600 .78rem/1.2 system-ui; display:flex; flex-direction:column; gap:.25rem; }
.prayer-head .dates span { display:inline-block; }
.clock { font:700 1.35rem/1.1 system-ui; letter-spacing:1px; }
.prayer-grid { display:flex; flex-wrap:wrap; gap:.65rem; }
.pray-box { flex:1; min-width:92px; background:var(--bg-alt); border:1px solid var(--border); padding:.65rem .55rem .6rem; border-radius:14px; display:flex; flex-direction:column; gap:.35rem; align-items:center; justify-content:center; position:relative; }
.pray-box strong { font:600 .95rem/1 system-ui; letter-spacing:.4px; color:#f472b6; }
.pray-box .label { font:600 .62rem/1 system-ui; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); }
.pray-box.next { outline:2px solid #16a34a; box-shadow:0 0 0 4px #16a34a22; }
.pray-box.current { background:linear-gradient(135deg,#16a34a33,#16a34a11); border-color:#1c8f57; }
.pray-box.past strong { opacity:.55; }
.pray-loc { font:600 .6rem/1.2 system-ui; letter-spacing:.4px; color:var(--muted); }
@media (max-width:640px){ .pray-box { min-width:78px; padding:.55rem .5rem; } .clock { font-size:1.15rem; } }

/* Bottom navigation */
.nav-bottom { position:fixed; z-index:60; left:0; right:0; bottom:0; display:flex; justify-content:space-around; background:var(--bg-alt); border-top:1px solid var(--border); padding:.4rem .35rem env(safe-area-inset-bottom); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.nav-bottom a { flex:1; text-align:center; text-decoration:none; color:var(--muted); font:600 .7rem/1.1 system-ui; display:flex; flex-direction:column; gap:.35rem; align-items:center; padding:.55rem .25rem .45rem; border-radius:12px; transition:.25s background,.25s color; }
.nav-bottom a .ico { font-size:1.25rem; line-height:1; }
.nav-bottom a.active { background:var(--card); color:var(--accent); }
.nav-bottom a:hover { background:#1f2932; color:var(--text); }

@media (min-width:900px){ /* desktop widen + subtle */
  .nav-bottom { left:50%; transform:translateX(-50%); max-width:760px; border:1px solid var(--border); border-bottom:none; border-radius:24px 24px 0 0; }
  body.wa footer { padding-bottom:4rem; }
}

/* Hide old top nav row when using wa variant (we replaced with bottom nav) */
body.wa header .row { display:none !important; }

/* Chat bubble primitives (for future AI / conversation style) */
.bubble { background:var(--card); padding:.7rem .9rem; border-radius:18px; margin:.25rem 0; max-width:640px; position:relative; }
.bubble.me { background:var(--accent); color:#fff; margin-left:auto; }
.bubble small { display:block; opacity:.6; font-size:.6rem; margin-top:.35rem; }

/* Utility spacing for pages with bottom nav */
body.wa main { padding-bottom:5.2rem; }

/* Floating mode toggle for Qur'an page */
.mode-toggle { position:fixed; left:50%; transform:translateX(-50%); bottom:56px; z-index:70; display:flex; gap:.4rem; background:rgba(17,27,33,.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid var(--border); padding:.45rem .55rem; border-radius:22px; box-shadow:0 6px 18px -4px #000c; }
.mode-toggle .mt-btn { background:transparent; border:0; color:var(--muted); font:600 .7rem/1 system-ui; display:flex; align-items:center; gap:.35rem; padding:.55rem .8rem; border-radius:14px; cursor:pointer; letter-spacing:.3px; transition:.25s background,.25s color; }
.mode-toggle .mt-btn .ico { font-size:1.1rem; }
.mode-toggle .mt-btn:hover { background:#223038; color:var(--text); }
.mode-toggle .mt-btn.active { background:var(--accent); color:#fff; box-shadow:0 2px 4px -1px #0009; }
@media (max-width:560px){ .mode-toggle { bottom:62px; padding:.35rem .4rem; } .mode-toggle .mt-btn { padding:.45rem .6rem; } }

/* Mini copy buttons & toast */
.mini-copy { background:var(--bg-alt); border:1px solid var(--border); color:var(--muted); font:600 .6rem/1 system-ui; padding:.35rem .5rem; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; gap:.25rem; transition:.25s background,.25s color; }
.mini-copy:hover { background:#223038; color:var(--text); }
.toast { position:fixed; left:50%; bottom:120px; transform:translate(-50%,20px); background:var(--card); border:1px solid var(--border); padding:.65rem 1rem; border-radius:14px; font:600 .75rem/1 system-ui; color:var(--text); box-shadow:0 8px 22px -6px #000c; opacity:0; transition:.3s opacity,.35s transform; z-index:90; }
.toast.show { opacity:1; transform:translate(-50%,0); }

/* Chips for perawi & book filters */
.chips { display:flex; flex-wrap:wrap; gap:.55rem; }
.chip { background:var(--bg-alt); border:1px solid var(--border); padding:.5rem .85rem; border-radius:999px; font:600 .68rem/1 system-ui; color:var(--muted); cursor:pointer; transition:.25s background,.25s color, .25s border; }
.chip:hover { background:#223038; color:var(--text); }
.chip.active { background:var(--accent); color:#fff; border-color:#058766; }

/* hadist modern UI */
.perawi-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.85rem; }
.perawi-card { background:var(--card); border:1px solid var(--border); padding:.85rem .9rem; border-radius:16px; cursor:pointer; display:flex; flex-direction:column; gap:.4rem; position:relative; transition:.25s border,.25s background,.25s transform; }
.perawi-card:hover { background:#243038; border-color:#2f414b; transform:translateY(-2px); }
.perawi-card .pc-name { font:600 .85rem/1.25 system-ui; letter-spacing:.3px; }
.perawi-card .pc-meta { font-size:.65rem; color:var(--muted); }
.panel-head h2 { margin:0; font-size:1.2rem; }
.detail-head { position:sticky; top:64px; z-index:30; display:flex; flex-direction:column; gap:.8rem; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); background:rgba(17,27,33,.85); border:1px solid var(--border); margin-bottom:1rem; }
.detail-head .info { display:flex; align-items:center; gap:.8rem; }
.back-btn { background:var(--bg-alt); border:1px solid var(--border); color:var(--text); font:600 .75rem/1 system-ui; padding:.55rem .7rem; border-radius:10px; cursor:pointer; }
.back-btn:hover { background:#223038; }
.filters { display:flex; flex-wrap:wrap; gap:.5rem; }
.search-bar .sb-wrap { display:flex; gap:.5rem; align-items:center; }
.icon-btn { background:var(--accent); border:1px solid #0f6c55; color:#fff; padding:.55rem .75rem; border-radius:12px; cursor:pointer; font-size:.85rem; display:inline-flex; align-items:center; justify-content:center; }
.icon-btn:hover { background:var(--accent-hover); }
.hadist-results { display:flex; flex-direction:column; gap:.9rem; }
.hadist-item { background:var(--card); border:1px solid var(--border); padding:.95rem 1rem 1rem; border-radius:18px; position:relative; }
.hadist-item .hi-head { display:flex; justify-content:space-between; align-items:flex-start; gap:.7rem; margin-bottom:.4rem; }
.hadist-item .hi-ref { font-size:.75rem; color:var(--muted); }
.hadist-item .badge.grade { background:#475569; font-weight:500; }
.hadist-item .hi-ar { font-size:22px; line-height:2; margin-top:.25rem; }
.hadist-item .hi-tr { font-size:.78rem; line-height:1.6; margin-top:.55rem; }
.card-hover { transition:.25s box-shadow,.25s transform,.25s background; }
.card-hover:hover { box-shadow:0 4px 14px -3px #0008; }
.skeleton-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.85rem; }
.sk-card { height:72px; background:linear-gradient(90deg,#1e282f,#25323a,#1e282f); background-size:200% 100%; border-radius:16px; animation:shimmer 1.4s linear infinite; }
@keyframes shimmer { 0%{background-position:0 0;} 100%{background-position:200% 0;} }
@media (max-width:680px){ .detail-head { top:56px; } .hadist-item .hi-ar { font-size:20px; } }

/* Highlight pulse for targeted ayat */
.pulse { box-shadow:0 0 0 0 rgba(0,168,132,0.6); animation:pulseGlow 1.2s ease-out 3; position:relative; }
@keyframes pulseGlow { 0%{ box-shadow:0 0 0 0 rgba(0,168,132,0.7); } 70%{ box-shadow:0 0 0 12px rgba(0,168,132,0); } 100%{ box-shadow:0 0 0 0 rgba(0,168,132,0); } }

/* Qur'an Arabic font stack */
.quran-ar { font-family:'Amiri Quran','Scheherazade New','Noto Naskh Arabic','Traditional Arabic','Times New Roman',serif; font-size:20px; line-height:2; font-weight:400; }
.surah-ar.quran-ar { font-size:23px; }
.quran-ar mark { background:rgba(0,168,132,.25); color:inherit; }

/* Mode tabs (search vs explore) */
.mode-tabs { display:flex; gap:.5rem; flex-wrap:wrap; }
.mode-tabs .mtab { background:var(--bg-alt); border:1px solid var(--border); color:var(--muted); font:600 .7rem/1 system-ui; padding:.55rem .85rem; border-radius:12px; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; letter-spacing:.3px; transition:.25s background,.25s color,.25s border; }
.mode-tabs .mtab:hover { background:#223038; color:var(--text); }
.mode-tabs .mtab.active { background:var(--accent); border-color:#058766; color:#fff; }