:root{
  --bg:#f5f1ea;
  --card:#ffffff;
  --primary:#0a4d3a;
  --primary-hover:#0d6b4f;
  --primary-ghost:rgba(10,77,58,.08);
  --primary-ghost-strong:rgba(10,77,58,.14);
  --accent:#c49a2a;
  --text:#1c1c28;
  --text-secondary:#5f5f72;
  --text-muted:#9a9aaa;
  --border:#e6e1d8;
  --shadow-sm:0 2px 8px rgba(10,77,58,.05);
  --shadow-md:0 4px 20px rgba(10,77,58,.08);
  --shadow-lg:0 8px 40px rgba(10,77,58,.12);
  --radius:20px;
  --radius-sm:14px;
}

*,*::before,*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
  -webkit-tap-highlight-color:transparent;
}

html{scroll-behavior:smooth;}

body{
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--bg);
  color:var(--text);
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{
  text-decoration:none;
  color:inherit;
}

button{
  font-family:inherit;
  cursor:pointer;
}

/* HEADER */
.app-header{
  position:sticky;
  top:0;
  z-index:10;
  height:64px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 18px;
  background:rgba(245,241,234,.86);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(230,225,216,.8);
}

.back-btn{
  width:42px;
  height:42px;
  border:none;
  border-radius:14px;
  background:var(--card);
  color:var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-sm);
}

.header-title{
  font-size:19px;
  font-weight:800;
  color:var(--primary);
}

/* CONTAINER */
.container{
  padding:18px 18px 110px;
  position:relative;
  z-index:1;
}

/* QURAN TOGGLE */
.quran-toggle{
  display:flex;
  gap:8px;
  padding:7px;
  margin-bottom:18px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.65);
  border-radius:22px;
  box-shadow:var(--shadow-md);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.toggle-btn{
  flex:1;
  border:none;
  padding:12px 8px;
  border-radius:16px;
  background:transparent;
  color:var(--text-muted);
  font-size:13px;
  font-weight:700;
  transition:.25s ease;
}

.toggle-btn.active{
  background:var(--primary-ghost-strong);
  color:var(--primary);
}

/* SURAH LIST */
.surah-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  animation:fadeUp .45s ease both;
}

.surah-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px;
  background:var(--card);
  border-radius:18px;
  color:var(--text);
  box-shadow:var(--shadow-sm);
  border:1px solid rgba(255,255,255,.7);
  transition:.25s ease;
}

.surah-item:active{
  transform:scale(.98);
}

.surah-item:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}

.surah-item strong{
  display:block;
  font-size:15px;
  font-weight:800;
  margin-bottom:4px;
}

.surah-item small{
  display:block;
  font-size:12.5px;
  color:var(--text-secondary);
  line-height:1.4;
}

.surah-item span{
  flex-shrink:0;
  padding:7px 10px;
  border-radius:999px;
  background:var(--primary-ghost);
  color:var(--primary);
  font-size:12px;
  font-weight:700;
}

.surah-list p{
  background:var(--card);
  border-radius:16px;
  padding:16px;
  color:var(--text-secondary);
  box-shadow:var(--shadow-sm);
}

/* BOTTOM NAV */
 .bottom-nav {
      position: fixed;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 100;
      width: calc(100% - 32px);
      max-width: 448px;
      animation: navSlideUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
    }

    .nav-pill {
      display: flex;
      align-items: stretch;
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 22px;
      padding: 8px 6px;
      box-shadow: 0 8px 40px rgba(10, 77, 58, 0.12),
                  0 1px 0 rgba(255,255,255,0.6) inset;
      border: 1px solid rgba(255, 255, 255, 0.5);
      position: relative;
    }

    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 6px 0 4px;
      font-size: 11px;
      font-weight: 500;
      color: var(--text-muted);
      transition: color 0.3s ease;
      position: relative;
      z-index: 1;
      border-radius: 16px;
      cursor: pointer;
    }

    .nav-item i {
      font-size: 18px;
      transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .nav-item.active {
      color: var(--primary);
      font-weight: 700;
    }

    .nav-item.active i {
      transform: scale(1.15);
    }

/* ANIMATION */
@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(16px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* DESKTOP */
@media(min-width:481px){
  body{
    border-left:1px solid var(--border);
    border-right:1px solid var(--border);
    box-shadow:0 0 60px rgba(10,77,58,.06);
  }
}