/* SMARTPAI comfort patch: consistent navigation, spacing, focus states, and mobile ergonomics. */
:root{
  --mpi-radius:16px;
  --mpi-radius-sm:12px;
  --mpi-focus:0 0 0 3px rgba(32,113,104,.18);
  --mpi-elev:0 10px 30px rgba(22,44,55,.08);
}
html{scroll-behavior:smooth;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,select,textarea{font:inherit}
button,.btn,.nav,[role="button"]{-webkit-tap-highlight-color:transparent}
button:focus-visible,.btn:focus-visible,.nav:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none!important;box-shadow:var(--mpi-focus)!important
}
button,.btn,.nav{touch-action:manipulation}
.btn{min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:7px}
.btn.sm{min-height:36px}
input,select,textarea{border-radius:12px!important}
input,select{min-height:42px}
textarea{line-height:1.55;resize:vertical}
.card,.verse,.game,.practicebox,.note{overflow-wrap:anywhere}
.card,.verse{border-radius:var(--mpi-radius)!important}
.card{transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
.card:hover{box-shadow:var(--mpi-elev)}
.top{height:72px!important;padding-inline:18px!important;box-shadow:0 1px 0 rgba(22,44,55,.02)}
.side{top:72px!important;padding:14px 12px 24px!important;scrollbar-width:thin;overscroll-behavior:contain}
.side .grp{margin:16px 10px 7px!important;line-height:1.25}
.side .nav{min-height:44px!important;padding:10px 12px!important;border-radius:12px!important;margin:2px 0!important;line-height:1.3;transition:background .15s ease,color .15s ease,transform .15s ease}
.side .nav:hover{transform:translateX(2px)}
.side .nav.active{font-weight:850!important}
main{padding-top:28px!important}
.title{letter-spacing:-.018em}
.sub{line-height:1.7!important}
.arabic,.ar,.memText,.mem-text{font-feature-settings:"liga" 1,"calt" 1}
table{border-collapse:separate;border-spacing:0}
th,td{vertical-align:top}
@media (max-width:860px){
  .top{height:68px!important;padding-inline:12px!important}
  .side{top:68px!important;width:min(86vw,300px)!important;padding-bottom:32px!important}
  main{padding:18px 13px 72px!important}
  .btn{min-height:44px}
  .btn.sm{min-height:38px}
  .card{border-radius:14px!important}
}
@media (max-width:620px){
  body{font-size:15.5px}
  .title{line-height:1.18}
  .sub{line-height:1.62!important}
  input,select{min-height:46px}
  textarea{min-height:110px}
  .arabic{line-height:2.05!important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media print{.mpi-quran-player{display:none!important}}
/* Quran verse audio affordance */
.mpi-quran-audio-ready{position:relative;cursor:pointer;transition:background .16s ease,box-shadow .16s ease,transform .16s ease;border-radius:14px!important}
.mpi-quran-audio-ready:hover{background:rgba(32,113,104,.055)!important;box-shadow:inset 0 0 0 1px rgba(32,113,104,.13)}
.mpi-quran-audio-ready:focus-visible{box-shadow:var(--mpi-focus),inset 0 0 0 1px rgba(32,113,104,.18)!important}
.mpi-quran-audio-ready.mpi-quran-playing{background:rgba(32,113,104,.09)!important;box-shadow:inset 0 0 0 2px rgba(32,113,104,.24)}
.mpi-quran-audio-ready::before{content:"▶  Dengarkan";direction:ltr;unicode-bidi:isolate;position:absolute;top:8px;left:10px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:11px;line-height:1;font-weight:800;letter-spacing:.01em;color:#245f59;background:rgba(255,255,255,.9);border:1px solid rgba(32,113,104,.16);border-radius:999px;padding:6px 8px;opacity:.72;pointer-events:none}
.mpi-quran-playing::before{content:"❚❚  Diputar";opacity:1}
.mpi-quran-player{position:fixed;right:18px;bottom:18px;z-index:5000;width:min(430px,calc(100vw - 28px));display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center;padding:13px 14px;background:rgba(20,42,48,.96);color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 18px 45px rgba(0,0,0,.24);backdrop-filter:blur(14px);transform:translateY(130%);opacity:0;pointer-events:none;transition:transform .2s ease,opacity .2s ease}
.mpi-quran-player.show{transform:none;opacity:1;pointer-events:auto}
.mpi-quran-player__meta{min-width:0}.mpi-quran-player__meta strong,.mpi-quran-player__meta span{display:block}.mpi-quran-player__meta strong{font-size:.94rem}.mpi-quran-player__meta span{font-size:.76rem;opacity:.76;margin-top:2px}
.mpi-quran-player__actions{display:flex;gap:6px}.mpi-quran-player__actions button{min-width:40px;min-height:36px;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:rgba(255,255,255,.09);color:#fff;font-weight:800;padding:7px 9px;cursor:pointer}.mpi-quran-player__actions button:hover{background:rgba(255,255,255,.16)}
.mpi-quran-player__status{grid-column:1/-1;font-size:.75rem;opacity:.78;white-space:normal}
@media(max-width:620px){.mpi-quran-audio-ready::before{top:6px;left:6px;font-size:10px;padding:5px 7px}.mpi-quran-player{left:10px;right:10px;bottom:10px;width:auto;border-radius:14px}}