/* 共享解析面板样式（内联，非弹窗；暖色童趣，复用全局 :root 变量）
   由 src/common/explain.js 渲染到容器 .explain-panel：解析在左，按钮在右。 */

.explain-panel {
  width: 100%;
  background: #f0e9d6;
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  align-items: flex-end;
  gap: 20px;
}
.explain-panel.hidden { display: none; }

.explain-body { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.explain-status { font-size: 18px; font-weight: 700; }
.explain-status[data-status="correct"] { color: #43a047; }
.explain-status[data-status="wrong"] { color: #e57373; }
.explain-status[data-status="revealed"] { color: var(--primary); }

.explain-rows { display: flex; flex-direction: column; gap: 10px; }
.explain-row { display: flex; align-items: baseline; }
.explain-label { font-size: 12px; color: #9a8d76; flex: 0 0 auto; min-width: 36px; white-space: nowrap; }
.explain-value { font-size: 15px; color: var(--text); line-height: 1.5; word-break: break-word; }
.explain-value.mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-weight: 600; }

/* 可点击朗读的值：单词/例句等，鼠标提示可点 */
.explain-value.speakable {
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  transition: color .12s;
}
.explain-value.speakable:hover { color: var(--primary); }
.explain-value.speakable:active { opacity: 0.7; }
.speak-icon { font-size: 14px; line-height: 1; user-select: none; }

.explain-action { flex: 0 0 auto; display: flex; }
.explain-action .btn { padding: 14px 24px; font-size: 16px; white-space: nowrap; }