/* ===== Kuis Lisan ===== */
.lf{font-family:"Amiri","Traditional Arabic","Scheherazade New",serif;font-size:clamp(2.4rem,10vw,3.8rem);line-height:1.6;text-align:center;margin:6px 0 14px;padding:10px 8px;border-radius:18px;background:var(--bg);border:1px solid var(--line);overflow-wrap:anywhere}
.lfin{font-family:"Amiri","Traditional Arabic",serif;font-size:1.4rem}
.oqa{padding:8px 0;border-bottom:1px solid var(--line)}.oqa p{margin:0}.oqa .a{font-weight:700}
.ost{padding:10px 14px;margin:8px 0;border-radius:14px;border:1px solid var(--line);border-left:5px solid var(--line);background:var(--bg)}
.ost p{margin:2px 0}.ost.ok{border-left-color:#1f9d55}.ost.no{border-left-color:#d64545}
.olr{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}.olr:last-child{border:0}
.olr .lf{font-size:1.8rem;margin:0;padding:4px 14px;flex:none}
.ostep .meta{margin-bottom:6px}
/* Kuis Lisan: tombol level per jilid */
.olv{display:flex;flex-wrap:wrap;gap:8px}.olv .btn{flex:1 1 auto;white-space:nowrap}.olv .btn small{font-weight:500;opacity:.8}
/* Beranda: tab Kuis Tulis | Kuis Lisan */
.htabs{max-width:440px}.htabs button{flex:1 1 0;padding:10px 12px;font-size:.95rem}
.hnote{margin:0 0 12px}.ostat{margin:0 0 12px}
.lvl:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
/* Rapikan: sidebar pada layar pendek, nama rank di layar sempit, Efek, Pencapaian, Harian */
.side{overflow-y:auto;scrollbar-width:thin}
@media(min-width:821px) and (max-height:800px){.side{padding:14px 12px;gap:4px}.brand{padding-bottom:6px}.brand img{max-width:150px}.nav{padding:8px 14px}.side .credit{padding-top:4px}}
@media(max-width:420px){.stp b{font-size:.66rem;letter-spacing:-.02em;overflow-wrap:normal}}
.si .acts .btn{white-space:nowrap}
@media(max-width:560px){.shopg{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.si{padding:12px}.si .stage{height:72px;font-size:2.1rem}.si h3{font-size:1rem}.si p{font-size:.8rem}.si .acts{flex-direction:column;gap:6px}.si .acts .btn{padding:8px 4px}}
.agrp>summary h2{flex:1}
.pzg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 10px;margin-top:6px}.pzc{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
@keyframes fadein{from{opacity:0}to{opacity:1}}
#hpane.sw .grid>.card{animation:fadein .2s}
.htabs{max-width:560px}.sorof .lvls{grid-template-columns:repeat(3,1fr)}
@media(max-width:560px){.sorof .lvls{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.htabs button{padding:10px 6px;font-size:.84rem}}