*{box-sizing:border-box}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0;background:#fafafa;color:#222}
.banner{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;padding:10px 14px;border-radius:10px;margin:12px}
.wp-wrap{margin:12px}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
button{border:1px solid #ddd;background:#f7f7f7;padding:10px 14px;border-radius:12px;cursor:pointer}
button:disabled{opacity:.6;cursor:not-allowed}
button:hover{background:#efefef}
.arabic{font-size:1.8rem;line-height:2.6rem;margin:8px 0;font-family:'Amiri','Scheherazade New',serif}
.np{margin-top:10px;padding:8px 10px;border-radius:8px;background:#fff7e6;border:1px solid #ffe4b4;color:#7a4c00}
.diag{margin-top:8px; padding:8px; background:#f6f8fa; border:1px solid #e2e8f0; border-radius:8px; font-family:ui-monospace, Menlo, monospace; font-size:.9rem; white-space:pre-wrap}
.report{margin-top:10px; padding:10px; background:#eef2ff; border:1px solid #c7d2fe; border-radius:10px}
#attempts{margin:12px}
/* Responsive table wrapper */
.cz-table-wrapper{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cz-attempts{width:100%;border-collapse:collapse;background:#fff;border:1px solid #e5e7eb;border-radius:10px;overflow:hidden;display:table}
.cz-attempts th,.cz-attempts td{border-bottom:1px solid #f1f5f9;padding:8px 10px;vertical-align:top;text-align:left;word-wrap:break-word;white-space:normal}
.cz-attempts thead th{background:#f8fafc}
.cz-attempts audio{max-width:220px;width:100%}
@media (max-width: 768px){
  .cz-attempts th,.cz-attempts td{font-size:14px;padding:6px}
  .controls{gap:6px}
}
@media (max-width: 420px){
  .cz-attempts th,.cz-attempts td{font-size:13px;padding:5px}
}