/* 岳极留声扩展样式：在 a4api「旗舰店柜台」设计系统上的产品化组件。
   状态徽章沿用软色药丸语言；状态绿仍只点亮「已完成」。 */

/* ---------- 任务类型徽章与工作台选择 ---------- */
.target-meeting { background: #ebf9f8; color: #118f83; }

.target-subtitle { background: #e9f0fb; color: #2f6fb4; }

.wb-select-form { flex: 1; max-width: 420px; }

.wb-select-form select { display: none; }

/* ---------- 表单控件选中色统一品牌绿（layui 开关默认绿，原生控件用 accent-color 兜底） ---------- */
input[type="checkbox"], input[type="radio"] { accent-color: #16baaa; }

.layui-form-checkbox.layui-form-onswitch,
.layui-form-checkbox[lay-skin=switch] layui-form-onswitch,
.layui-form-checkbox.layui-checkbox-checked i,
.layui-form-checkbox.layui-form-checked i {
  background-color: #16baaa !important;
  border-color: #16baaa !important;
}

.layui-form-radio > i:hover, .layui-form-radioed > i { color: #16baaa !important; }

/* ---------- 任务状态徽章 ---------- */
.status-pill {
  position: absolute;
  top: 14px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 100px;
}

.status-pill::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.st-completed { background: #ebf9f8; color: #118f83; }
.st-completed::before { background: #16baaa; }

.st-processing { background: #e9f0fb; color: #2f6fb4; }
.st-processing::before { background: #2f6fb4; animation: pulse 1.2s ease-in-out infinite; }

.st-pending { background: #ececec; color: #5b5e63; }
.st-pending::before { background: #8a8e94; }

.st-failed { background: #fdf0ed; color: #c03a2f; }
.st-failed::before { background: #c03a2f; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .3; }
}

/* 已完成卡片：绿描边微光（同 a4api card-active 语言） */
.config-card.card-done {
  border-color: rgba(22, 186, 170, .45);
}

/* 任务卡标题：给右上角徽章留位，长名折行 */
.task-name {
  padding-right: 76px;
  word-break: break-all;
  white-space: normal;
}

/* 失败原因 */
.task-error {
  margin-top: 8px;
  font-size: 12px;
  color: #c03a2f;
  word-break: break-all;
}

/* ---------- 上传弹窗 ---------- */
.upload-form { padding: 22px 26px 18px; }

.dropzone {
  border: 1.5px dashed #cfd8d8;
  border-radius: 10px;
  padding: 26px 16px;
  text-align: center;
  color: #8a8e94;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
  user-select: none;
}

.dropzone:hover, .dropzone.dz-over {
  border-color: #16baaa;
  background: #ebf9f8;
  color: #118f83;
}

.dropzone .dz-file {
  display: block;
  margin-top: 6px;
  color: #1c1e21;
  font-weight: 600;
  word-break: break-all;
}

.upload-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
}

.upload-row .upload-label {
  font-size: 13px;
  color: #5b5e63;
  white-space: nowrap;
}

.upload-row input[type="number"] {
  width: 90px;
}

.upload-progress {
  margin-top: 14px;
  font-size: 12px;
  color: #8a8e94;
  min-height: 16px;
}

/* ---------- 字幕工作台 ---------- */
.wb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.wb-select {
  height: 36px;
  border: 1px solid #dce2e2;
  border-radius: 8px;
  background: #ffffff;
  color: #1c1e21;
  font-size: 13px;
  padding: 0 12px;
  min-width: 300px;
  outline: none;
}

.wb-select:focus { border-color: #16baaa; }

.wb-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 900px) {
  .wb-layout { grid-template-columns: 1fr; }
}

.wb-card {
  background: #ffffff;
  border: 1px solid #e2e8e8;
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 1px 2px rgba(23, 26, 31, .03);
  margin-bottom: 18px;
}

.wb-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #3d4044;
  margin-bottom: 12px;
}

.speaker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.speaker-row .spk-tag {
  flex: none;
  font-size: 12px;
  color: #8a8e94;
  width: 58px;
}

.speaker-row .layui-input { height: 32px; }

.wb-actions-note {
  font-size: 12px;
  color: #a7aaae;
  margin-top: 8px;
}

.transcript-view {
  max-height: 560px;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.9;
  color: #3d4044;
  padding-right: 8px;
}

.tl { margin-bottom: 2px; }
.tl.tl-new { margin-top: 14px; }
.tl-time { color: #a7aaae; font-size: 12px; margin-right: 8px; }
.tl-name { font-weight: 600; color: #118f83; margin-right: 8px; }

/* ---------- 设置 ---------- */
.kv-list { font-size: 13px; color: #3d4044; line-height: 2.1; }
.kv-list .k { color: #8a8e94; display: inline-block; width: 120px; }
.settings-note { font-size: 12px; color: #a7aaae; margin-top: 6px; }

/* ---------- 今日额度 ---------- */
.quota-sep {
  width: 1px;
  height: 14px;
  background: #e2e8e8;
  flex: none;
}

.quota-text {
  flex: none;
  font-size: 13px;
  color: #8a8e94;
  white-space: nowrap;
}

.quota-text .quota-num {
  font-weight: 600;
  color: #16baaa;
}

.quota-text.quota-low .quota-num { color: #c03a2f; }

.quota-login {
  color: #16baaa;
  font-weight: 600;
  text-decoration: none;
}

.quota-login:hover { color: #0e9e90; text-decoration: underline; }

.quota-line {
  font-size: 13px;
  color: #3d4044;
  font-weight: 600;
}

/* ---------- 弹窗圆角统一 ---------- */
.layui-layer {
  border-radius: 12px !important;
  overflow: hidden;
}

.layui-layer-title {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8e8 !important;
  color: #1c1e21 !important;
}