:root{
  --bg1:#064e3b; --bg2:#02281e; --gold:#d4af37; --gold2:#fce588;
}
*{box-sizing:border-box;}
body{
  margin:0; font-family:'Segoe UI', Tahoma, sans-serif;
  background:linear-gradient(180deg,var(--bg2),#01140f 600px, #01140f);
  color:#fce588; min-height:100vh; padding-bottom:120px;
}

#splash{
  position:fixed; inset:0; z-index:999; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  background:radial-gradient(circle at 50% 35%, #0a4634, #01140f 75%);
  animation: splashOut .6s ease-in 1.8s forwards;
}
#splash img{
  width:150px; height:150px; border-radius:50%; object-fit:cover;
  border:4px solid var(--gold); box-shadow:0 0 30px rgba(212,175,55,.4);
}
#splash h2{ color:var(--gold2); font-size:1.15rem; margin:4px 18px; text-align:center; }
#splash .byline{ color:#b9dfce; font-size:.9rem; margin:0; }
@keyframes splashOut{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

header{
  text-align:center; padding:28px 16px 16px;
  background:linear-gradient(180deg,var(--bg1),var(--bg2));
}
#sheikh-photo{
  width:140px; height:140px; border-radius:50%; object-fit:cover;
  border:4px solid var(--gold); margin-bottom:12px;
  box-shadow:0 0 24px rgba(212,175,55,.35);
}
header h1{ font-size:1.3rem; margin:6px 0 2px; color:var(--gold2); }
header .subtitle{ font-size:.85rem; color:#b9dfce; margin:0 0 6px; }
header .byline{ font-size:.8rem; color:var(--gold); margin:0 0 10px; }
.book-links{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.book-open-btn{
  color:#1e2a1f; background:var(--gold2); border:none; cursor:pointer;
  font-size:.78rem; font-weight:bold; padding:7px 12px; border-radius:20px;
}

#book-overlay{
  position:fixed; inset:0; z-index:900; background:#01140f;
  display:flex; flex-direction:column;
}
#book-overlay.hidden{ display:none; }
.book-topbar{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg1); padding:10px 12px; gap:8px;
}
.book-tabs{ display:flex; gap:6px; }
.book-tab{
  background:#0f4433; border:1px solid var(--gold); color:#fce588;
  border-radius:16px; padding:6px 12px; font-size:.78rem; cursor:pointer;
}
.book-tab.active{ background:var(--gold); color:#1e2a1f; font-weight:bold; }
#book-close{
  background:none; border:none; color:#fce588; font-size:1.3rem; cursor:pointer;
}
.book-note{
  margin:0; padding:6px 14px; font-size:.72rem; color:#9fd3bb; background:#052a1f;
}
.book-fallback{
  display:block; text-align:center; padding:8px; background:#0f4433;
  color:var(--gold2); text-decoration:none; font-size:.82rem;
}
#book-frame{ flex:1; border:none; width:100%; background:#fff; }

#search-bar{ padding:14px 16px 4px; max-width:640px; margin:0 auto; display:flex; gap:8px; }
#search-input{
  flex:1; padding:12px 14px; border-radius:10px; border:1px solid var(--gold);
  background:#0a3328; color:#fce588; font-size:1rem; min-width:0;
}
#search-input::placeholder{ color:#8fb9a8; }
#download-all-btn{
  background:#0f4433; border:1px solid var(--gold); color:#fce588;
  border-radius:10px; padding:0 12px; font-size:.78rem; white-space:nowrap; cursor:pointer;
}

main{ max-width:640px; margin:0 auto; padding:8px 16px 24px; }

.card{
  background:#0a3328; border:1px solid #16543f; border-radius:14px;
  padding:12px 14px; margin-bottom:10px;
}
.card .title-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.card .title{ font-weight:bold; font-size:.98rem; }
.card .badge{ font-size:.7rem; color:#7fe3ac; border:1px solid #2a7a55; border-radius:20px; padding:2px 8px; flex-shrink:0; }
.card-row{ margin-top:8px; }
.play-btn{
  background:linear-gradient(180deg,#f3cf6a,#caa23a); border:none; color:#1e2a1f;
  width:42px; height:42px; border-radius:50%; font-size:1.05rem; cursor:pointer;
}

footer{ text-align:center; padding:26px 10px 10px; color:#8fb9a8; font-size:.85rem; }
.empty{ text-align:center; color:#8fb9a8; padding:30px; }

/* Persistent Now-Playing bar, styled after a dedicated nasheed-player app */
#player-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:500;
  background:linear-gradient(180deg,#0e5a43,#073425);
  border-top:1px solid var(--gold); border-radius:18px 18px 0 0;
  padding:10px 14px 14px; box-shadow:0 -6px 20px rgba(0,0,0,.4);
  max-width:640px; margin:0 auto;
}
#player-bar.hidden{ display:none; }
.player-top{ display:flex; align-items:center; gap:10px; }
#player-photo{ width:48px; height:48px; border-radius:50%; object-fit:cover; border:2px solid var(--gold); flex-shrink:0; }
.player-info{ flex:1; min-width:0; }
#player-title{ font-size:.85rem; font-weight:bold; color:var(--gold2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#player-time{ font-size:.7rem; color:#9fd3bb; }
#player-book{
  text-decoration:none; font-size:1.2rem; flex-shrink:0; opacity:.9;
}
#player-progress{ width:100%; margin:8px 0 4px; accent-color:var(--gold); }
.player-controls{ display:flex; align-items:center; justify-content:center; gap:14px; }
.player-controls button{
  background:#0f4433; border:1px solid var(--gold); color:#fce588;
  border-radius:20px; cursor:pointer; font-size:.8rem;
}
#player-speed{ min-width:40px; height:30px; }
#player-back, #player-fwd{ min-width:46px; height:30px; }
#player-play{
  width:50px; height:50px; border-radius:50%; font-size:1.2rem;
  background:linear-gradient(180deg,#f3cf6a,#caa23a); color:#1e2a1f; border:none;
}
#player-badge{ font-size:.68rem; color:#7fe3ac; min-width:50px; text-align:center; }