.h5-.h5-page{background:linear-gradient(180deg,#FFF8F1,#FFFDF8 55%,#F8F3EF);color:#3B2A25}
..h5-.h5-page{min-height:100vh;padding:14px 12px calc(20px + env(safe-area-inset-bottom));box-sizing:border-box}
.hero,.card,.empty{background:rgba(255,255,255,.92);border:0.5px solid #F0DDD2;border-radius:17px;box-shadow:0 8px 17px rgba(140,84,58,.08)}
.hero{padding:17px 15px;margin-bottom:11px}
.title{display:block;font-size:21px;font-weight:950}
.sub{display:block;margin-top:5px;font-size:12.5px;line-height:1.6;color:#8A746B}
.empty{padding:39px 15px;text-align:center}
.empty-title{display:block;font-size:16px;font-weight:950}
.empty-sub{display:block;margin-top:6px;font-size:12.5px;color:#8A746B}
.list{display:flex;flex-direction:column;gap:9px}
.card{padding:13px}
.meta{display:flex;align-items:flex-start;justify-content:space-between;gap:9px}
.name{display:block;font-size:15px;font-weight:950}
.time{display:block;margin-top:4px;font-size:11.5px;color:#8A746B}
.badge{flex-shrink:0;padding:4px 9px;border-radius:499.5px;background:#FFF5DF;color:#B87825;font-size:11px;font-weight:900}
.badge.played{background:#EAF8EF;color:#24A26B}
.message{display:block;margin-top:10px;font-size:13.5px;line-height:1.6}
.play{height:41px;line-height:41px;margin:11px 0 0;border-radius:499.5px;background:linear-gradient(135deg,#E39176,#D9826B);color:#fff;font-size:14px;font-weight:950}
.play::after{border:0}