#mon-speaking-wrap{border:1px solid #e5e7eb;padding:16px;border-radius:12px;background:#fff}
#mon-speaking-wrap .head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
#mon-spk-btn{appearance:none;border:0;border-radius:9999px;padding:10px 14px;background:#ef4444;color:#fff;font-weight:600;cursor:pointer}
#mon-spk-btn.on{background:#374151}
#mon-spk-status{color:#6b7280}
#mon-spk-audio{display:none;width:100%;margin:10px 0}

.mon-expected{background:#f9fafb;border:1px dashed #e5e7eb;padding:12px;border-radius:8px;margin:8px 0}
.mon-expected .label{font-weight:700}
.mon-expected pre{white-space:pre-wrap;margin:8px 0 0}

#mon-spk-result{display:none;margin-top:16px}
.score-rows{display:grid;gap:8px}
.score-rows .row{display:flex;align-items:center;gap:10px}
.score-rows .name{width:130px}
.score-rows .bar{flex:1;height:10px;background:#f3f4f6;border-radius:9999px;position:relative;overflow:hidden}
.score-rows .bar::after{
  content:"";position:absolute;left:0;top:0;height:100%;width:var(--val,0%);background:linear-gradient(90deg,#22c55e,#ef4444);
}
.score-rows .val{width:60px;text-align:right}

.overall{font-size:24px;font-weight:700;margin:12px 0}

.tips-wrap{margin-top:12px}
.tips-wrap ul{margin:6px 0 0 18px}
.right-box{background:#fafafa;border:1px solid #eee;padding:12px;border-radius:8px}

#mon-speaking-wrap{padding:12px;border:1px solid #eee;border-radius:8px}
.mon-question-item{margin-bottom:20px}
.q-text{margin-bottom:6px;font-weight:600}
.q-actions{margin-bottom:8px}
.mon-record-btn,.mon-hint-btn{margin-right:6px;padding:6px 12px;border:0;border-radius:6px;cursor:pointer}
.mon-record-btn{background:#ef4444;color:#fff}
.mon-hint-btn{background:#3b82f6;color:#fff}
.mon-status{color:#666;margin:4px 0}
.mon-result{background:#f9fafb;padding:6px;border-radius:6px;margin-top:6px}
.mon-hint-box{background:#fff3cd;border:1px solid #ffeeba;padding:10px;border-radius:6px;margin-top:8px}

.mon-tts-btn {
  background:none;
  border:0;
  cursor:pointer;
  font-size:18px;
  margin-left:6px;
}
.mon-tts-btn:hover { color:#f87171; }


/* Gauge (donut) */
.mon-top{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.mon-gauge{--p:0;width:160px;height:160px;border-radius:50%;
  background:conic-gradient(#16a34a calc(var(--p)*1%), #e5e7eb 0);
  position:relative;flex:0 0 auto}
.mon-gauge::before{content:"";position:absolute;inset:12px;background:#fff;border-radius:50%}
.mon-gauge span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:#111}
.mon-gauge small{position:absolute;left:0;right:0;bottom:12px;text-align:center;color:#6b7280;font-weight:600}
.mon-top .mon-side{min-width:250px;flex:1}
.mon-top .pair{margin:6px 0}

/* Bars */
.mon-bars{margin-top:12px;display:grid;gap:8px}
.bar-row{display:grid;grid-template-columns:140px 1fr 60px;gap:10px;align-items:center}
.bar-row .name{font-weight:600;color:#374151}
.bar-row .bar{height:12px;background:#eef2f7;border-radius:999px;overflow:hidden}
.bar-row .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#22c55e,#ef4444);}

/* Tips */
.mon-tips-wrap{margin-top:10px}
.mon-tips{margin:6px 0 0 18px}
.mon-tips li{margin:4px 0}

/* Vocabulary table */
.mon-vocab{margin-top:14px}
.mon-vocab h4{margin:0 0 6px 0}
.mon-vocab table{width:100%;border-collapse:collapse;background:#fff;border-radius:8px;overflow:hidden}
.mon-vocab th,.mon-vocab td{border:1px solid #e5e7eb;padding:8px}
.mon-vocab th{background:#f3f4f6;text-align:left}