* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  background: #f0f2f5;
  color: #333;
}

.page {
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 16px 60px;
}

.page-header h1 {
  font-size: 22px;
  color: #1a1a2e;
}
.page-header .sub {
  margin-top: 6px;
  font-size: 13px;
  color: #888;
}

/* 输入区 */
.input-panel {
  margin-top: 18px;
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
#txtInput {
  width: 100%;
  min-height: 84px;
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.6;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  resize: vertical;
  outline: none;
  transition: border-color .2s;
}
#txtInput:focus { border-color: #4f6ef7; }
.input-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.btn {
  border: 1px solid #d9d9d9;
  background: #fff;
  color: #333;
  font-size: 14px;
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
}
.btn:hover { border-color: #4f6ef7; color: #4f6ef7; }
.btn.primary { background: #4f6ef7; border-color: #4f6ef7; color: #fff; }
.btn.primary:hover { background: #3d5ce5; color: #fff; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.mic-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; }
.mic-btn .mic-icon { font-size: 16px; }
.mic-btn.recording {
  background: #ff4d4f;
  border-color: #ff4d4f;
  color: #fff;
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,77,79,.4); }
  50% { box-shadow: 0 0 0 8px rgba(255,77,79,0); }
}
.rec-time { font-size: 13px; color: #ff4d4f; font-variant-numeric: tabular-nums; }
.rec-hint { font-size: 13px; color: #999; flex: 1; }

/* 列表 */
.list-panel {
  margin-top: 26px;
}
.list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
}
.list-head h2 { font-size: 17px; color: #1a1a2e; }
.list-tabs { display: flex; gap: 8px; }
.list-tabs .tab {
  border: 1px solid #d9d9d9;
  background: #fff;
  font-size: 13px;
  padding: 5px 14px;
  border-radius: 16px;
  cursor: pointer;
  color: #666;
}
.list-tabs .tab.active { background: #4f6ef7; border-color: #4f6ef7; color: #fff; }

.rec-list { display: flex; flex-direction: column; gap: 10px; }
.empty { text-align: center; color: #aaa; font-size: 14px; padding: 40px 0; }

.rec-item {
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.rec-item .rec-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #999;
}
.rec-item .badge {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  line-height: 1.6;
}
.badge-voice { background: #eef3ff; color: #4f6ef7; }
.badge-text { background: #f3f0ff; color: #7a5af8; }
.badge-ok { background: #e8f9ec; color: #22a653; }
.badge-fail { background: #ffecec; color: #ff4d4f; }
.rec-item .rec-time-text { margin-left: auto; }
.rec-item .rec-body { margin-top: 8px; }
.rec-item .rec-text {
  font-size: 14px;
  line-height: 1.7;
  color: #333;
  white-space: pre-wrap;
  word-break: break-word;
}
.rec-item .rec-text.failed { color: #999; }
.rec-item .rec-audio { margin-top: 8px; width: 100%; height: 34px; }
.rec-item .rec-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.rec-item .rec-foot .rec-model { font-size: 11px; color: #bbb; }
.rec-item .del-btn {
  border: none;
  background: none;
  color: #c0c0c0;
  font-size: 13px;
  cursor: pointer;
  margin-left: auto;
}
.rec-item .del-btn:hover { color: #ff4d4f; }

/* 分页 */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 18px;
}
.pager #pageInfo { font-size: 13px; color: #888; }