/* iimaan/assets/app.css */
:root{
  --brand:#3fb6a8;
  --brand-2:#6ad3c8;
}
.bg-gradient-light{
  background: linear-gradient(180deg, #ffffff, #f2fffc);
  min-height:100vh;
}
.card-soft{
  border:0; border-radius:1rem; box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.btn-brand{
  background: var(--brand); color:#fff; border:none;
}
.btn-brand:hover{ filter:brightness(0.95); color:#fff; }
.mobile-nav{
  position:fixed; left:0; right:0; bottom:0; background:#fff; display:flex; justify-content:space-around; padding:6px 8px; border-top:1px solid #eee;
}
.mobile-nav .nav-item{
  flex:1; text-align:center; color:#444; text-decoration:none; font-size:12px;
}
.mobile-nav .nav-item i{ display:block; font-size:20px; }
.big-counter{
  width: 220px; height:220px; border-radius:50%; border:8px solid var(--brand-2); display:flex; align-items:center; justify-content:center; font-size:42px; font-weight:700; margin: 20px auto; background:#fff;
}
.qibla-arrow{
  width: 120px; height: 120px; margin:auto; position:relative;
}
.qibla-arrow::before{
  content:''; position:absolute; left:50%; top:50%; width:4px; height:55px; background:var(--brand); transform-origin: bottom center; transform: translate(-50%, -100%) rotate(0deg);
}
.qibla-arrow .center{ position:absolute; left:50%; top:50%; width:10px; height:10px; background:#333; border-radius:50%; transform:translate(-50%, -50%); }
.list-tile{ display:flex; align-items:center; gap:12px; padding:10px; background:#fff; border-radius:12px; box-shadow: 0 4px 14px rgba(0,0,0,0.05); margin-bottom:12px; }
.list-tile i{ font-size:24px; color:var(--brand); }
.calendar { display:grid; grid-template-columns: repeat(7, 1fr); gap:6px; }
.calendar .day{ padding:10px; border-radius:10px; text-align:center; background:#fff; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
.calendar .day.fasted{ background:#d1fae5; }
.small{ font-size:12px; color:#666; }