:root {
  --bg: #080c22;
  --bg2: #161057;
  --stage: rgba(64, 80, 142, .78);
  --stage-dark: rgba(34, 44, 91, .82);
  --panel: rgba(255, 255, 255, .92);
  --panel-soft: rgba(245, 249, 255, .88);
  --text: #111827;
  --muted: #6b7280;
  --muted-light: rgba(226, 232, 240, .68);
  --line: rgba(226, 232, 240, .22);
  --border: #d8e2ef;
  --primary: #74f6b0;
  --primary-2: #d6ff65;
  --primary-text: #132033;
  --blue: #2563eb;
  --danger: #ef4444;
  --success: #22c55e;
  --shadow: 0 28px 80px rgba(0, 0, 0, .26);
  --shadow-soft: 0 18px 48px rgba(15, 23, 42, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: #f8fafc;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(circle at 8% 6%, rgba(82, 44, 191, .58), transparent 30%),
    radial-gradient(circle at 86% 4%, rgba(49, 88, 198, .54), transparent 27%),
    radial-gradient(circle at 50% 100%, rgba(2, 132, 199, .24), transparent 28%),
    linear-gradient(180deg, #050619 0%, var(--bg) 48%, #02040c 100%);
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .52; }

.app {
  width: min(1280px, calc(100% - 32px));
  margin: 28px auto 52px;
  display: grid;
  gap: 18px;
}

.panel {
  border-radius: 26px;
  box-shadow: var(--shadow);
}

.hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 10px 6px;
}
.hero-copy { max-width: 850px; }
.eyebrow {
  margin: 0 0 8px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
}
h1 { margin: 0; font-size: clamp(32px, 4vw, 52px); line-height: 1.1; letter-spacing: -.04em; }
h2 { margin: 0; font-size: 21px; }
h3 { margin: 0; font-size: 17px; }
.subtitle { margin: 12px 0 0; color: var(--muted-light); line-height: 1.7; font-size: 16px; }
.status-card {
  min-width: 142px;
  height: 46px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  font-weight: 850;
  white-space: nowrap;
}
.dot { width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; box-shadow: 0 0 0 5px rgba(148, 163, 184, .14); }
.dot.connected { background: var(--success); box-shadow: 0 0 0 5px rgba(34, 197, 94, .16); }
.dot.working { background: #f59e0b; box-shadow: 0 0 0 5px rgba(245, 158, 11, .18); }
.dot.error { background: var(--danger); box-shadow: 0 0 0 5px rgba(239, 68, 68, .18); }

.main-stage {
  padding: clamp(18px, 3vw, 34px);
  background: linear-gradient(180deg, rgba(76, 94, 159, .82), rgba(49, 61, 120, .86));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.12);
}

.mode-tabs {
  width: min(520px, 100%);
  margin: 0 auto 28px;
  padding: 0;
  border-radius: 999px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
}
.mode-tab {
  border: 0;
  height: 58px;
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,.74);
  font-weight: 950;
  font-size: 19px;
  letter-spacing: .02em;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.mode-tab.active {
  color: var(--primary-text);
  background: linear-gradient(100deg, var(--primary-2), var(--primary));
  box-shadow: 0 10px 28px rgba(116, 246, 176, .22);
}
.mode-tab:not(.active):hover { background: rgba(255,255,255,.08); color: #fff; }

.mode-pane { display: none; }
.mode-pane.active { display: block; }

.drop-zone {
  min-height: clamp(350px, 48vh, 540px);
  border: 1.5px dashed rgba(231, 238, 255, .72);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 34px;
  text-align: center;
  background: rgba(36, 48, 101, .36);
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.drop-zone.dragover {
  border-color: var(--primary);
  background: rgba(116, 246, 176, .1);
  transform: translateY(-2px);
}
.upload-icon {
  width: 74px;
  height: 74px;
  border-radius: 18px;
  border: 2px solid rgba(196, 255, 137, .9);
  display: grid;
  place-items: center;
  font-size: 34px;
  background: rgba(10, 20, 54, .2);
  box-shadow: 9px 9px 0 rgba(0,0,0,.18);
  transform: rotate(-13deg);
}
.drop-title {
  margin: 12px 0 0;
  color: #fff;
  font-size: clamp(20px, 2.5vw, 26px);
  line-height: 1.45;
  font-weight: 950;
}
.drop-subtitle {
  margin: 0;
  max-width: 760px;
  color: rgba(241,245,249,.82);
  line-height: 1.7;
  font-weight: 700;
}
.format-line {
  margin: 0;
  color: rgba(226, 232, 240, .63);
  font-weight: 700;
}
.upload-btn { min-width: 210px; font-size: 22px; }

.record-stage {
  min-height: clamp(350px, 48vh, 540px);
  border: 1.5px dashed rgba(231, 238, 255, .72);
  border-radius: 18px;
  background: rgba(36, 48, 101, .36);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 18px;
  text-align: center;
  padding: 34px;
}
.record-stage h2 { font-size: clamp(24px, 3vw, 34px); }
.record-stage p { max-width: 720px; margin: 0; color: rgba(241,245,249,.82); line-height: 1.7; font-weight: 700; }
.record-visual {
  height: 92px;
  width: 92px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: linear-gradient(135deg, var(--primary-2), var(--primary));
  box-shadow: 0 16px 38px rgba(116,246,176,.18);
}
.record-visual span {
  width: 6px;
  height: 24px;
  border-radius: 99px;
  background: rgba(19,32,51,.92);
}
.record-visual span:nth-child(2) { height: 42px; }
.record-visual span:nth-child(3) { height: 56px; }
.record-visual span:nth-child(4) { height: 38px; }
.record-visual span:nth-child(5) { height: 28px; }

button,
.file-like {
  border: 0;
  border-radius: 16px;
  min-height: 46px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 950;
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
button:hover:not(:disabled), .file-like:hover { transform: translateY(-1px); }
.primary {
  color: var(--primary-text);
  background: linear-gradient(100deg, var(--primary-2), var(--primary));
  box-shadow: 0 10px 24px rgba(116, 246, 176, .2);
}
.secondary,
.file-like {
  color: #1f2937;
  background: #eef4ff;
  border: 1px solid #dce7f7;
}
.danger { color: #fff; background: linear-gradient(135deg, #ef4444, #dc2626); }
.link-button {
  min-height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--blue);
  box-shadow: none;
}

.inline-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.centered-actions { justify-content: center; }
.main-actions { margin-top: 18px; }
.record-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.timer-chip {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.1);
  border-radius: 999px;
  color: #fff;
  font-weight: 900;
}
.audio-info {
  margin-top: 16px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  color: rgba(248,250,252,.9);
  padding: 14px 16px;
  line-height: 1.65;
  font-weight: 700;
}
audio { width: 100%; margin-top: 12px; }
.segment-list { margin-top: 12px; display: grid; gap: 8px; }
.segment-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 11px 12px;
  background: rgba(255,255,255,.08);
  color: rgba(248,250,252,.9);
}
.segment-item .state {
  white-space: nowrap;
  color: var(--primary);
  font-weight: 950;
}
.record-extra-actions { margin-top: 14px; }

.progress-area { margin: 12px 22px 10px; }
.progress-area[hidden] { display: none !important; }
.progress-wrap {
  width: 100%;
  height: 10px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--primary-2), var(--primary));
  transition: width .22s ease;
}
#progressText { margin: 9px 0 0; color: #475569; font-weight: 800; }

.collapsible {
  padding: 0;
  overflow: hidden;
  background: var(--panel);
  color: var(--text);
  border: 1px solid rgba(216,226,239,.86);
  box-shadow: var(--shadow-soft);
}
.collapsible > summary {
  list-style: none;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,255,.86));
}
.collapsible > summary::-webkit-details-marker { display: none; }
.collapsible > summary > span:first-child { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.collapsible[open] > summary { border-bottom: 1px solid var(--border); }
.collapsible > :not(summary) { margin-left: 22px; margin-right: 22px; }
.collapsible > :last-child { margin-bottom: 22px; }
.chevron { font-weight: 950; color: var(--blue); transition: transform .18s ease; }
.collapsible[open] .chevron { transform: rotate(180deg); }
.step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #e9f6ff;
  color: #075985;
  font-size: 12px;
  font-weight: 950;
}
.collapsible summary em { color: var(--muted); font-style: normal; font-size: 13px; font-weight: 700; }

.result-panel textarea {
  width: calc(100% - 44px);
  min-height: 300px;
  margin: 10px 22px 22px;
  resize: vertical;
}
.result-actions {
  margin: 12px 22px 10px;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
}

.config-log-panel { opacity: .94; }
.config-note {
  margin-top: 18px;
  padding: 13px 14px;
  border: 1px solid #fed7aa;
  border-radius: 16px;
  background: #fff7ed;
  color: #7c2d12;
  line-height: 1.65;
}
.config-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 18px;
  align-items: start;
}
.settings-block {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel-soft);
  padding: 16px;
}
.block-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.parameter-actions { margin-top: 10px; }

label { display: block; margin: 14px 0; color: var(--text); font-weight: 850; }
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #334155;
  line-height: 1.35;
}
.checkbox input { width: auto; margin: 0; }
input, select, textarea {
  width: 100%;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 11px 12px;
  background: #fff;
  color: var(--text);
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: #93c5fd;
  box-shadow: 0 0 0 4px rgba(147, 197, 253, .25);
}
textarea {
  min-height: 250px;
  line-height: 1.75;
  font-size: 16px;
}
.log-block { margin-top: 18px; }
#logBox {
  min-height: 180px;
  max-height: 300px;
  overflow: auto;
  border-radius: 16px;
  background: #0f172a;
  color: #d1fae5;
  padding: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
}
.muted { color: var(--muted); }

@media (max-width: 900px) {
  .app { width: min(100% - 20px, 1280px); margin-top: 16px; }
  .hero { flex-direction: column; align-items: stretch; }
  .status-card { justify-content: flex-start; width: fit-content; padding: 0 16px; }
  .config-grid, .mini-grid { grid-template-columns: 1fr; }
  .drop-zone, .record-stage { min-height: 420px; padding: 24px 16px; }
  .mode-tabs { margin-bottom: 18px; }
  .mode-tab { height: 54px; font-size: 17px; }
  .upload-btn { width: 100%; min-width: 0; }
}

@media (max-width: 560px) {
  h1 { font-size: 32px; }
  .main-stage { padding: 14px; border-radius: 20px; }
  .mode-tabs { width: 100%; }
  .record-box button, .main-actions button, .record-extra-actions button { width: 100%; }
  .segment-item { align-items: flex-start; flex-direction: column; }
  .collapsible > summary { align-items: flex-start; }
  .collapsible summary em { display: block; width: 100%; }
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.install-btn {
  height: 46px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 0 18px;
  color: var(--primary-text);
  background: linear-gradient(135deg, var(--primary-2), var(--primary));
  box-shadow: 0 12px 28px rgba(116, 246, 176, .18);
  font-weight: 900;
}

.install-btn[hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  .hero-actions { justify-content: flex-start; }
}

.input-collapsible {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(16, 25, 67, .16);
}
.input-collapsible > summary {
  list-style: none;
  min-height: 58px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  user-select: none;
  color: #fff;
  background: rgba(255,255,255,.08);
}
.input-collapsible > summary::-webkit-details-marker { display: none; }
.input-collapsible > summary > span:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.input-collapsible summary em {
  color: rgba(226,232,240,.68);
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
}
.input-collapsible[open] > summary {
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.input-collapsible .chevron { color: var(--primary); }
.input-collapsible[open] .chevron { transform: rotate(180deg); }
.input-content { padding: 24px 18px 18px; }
.input-content .mode-tabs { margin-top: 0; }

.result-panel textarea[readonly] {
  background: #f8fafc;
  color: #0f172a;
  cursor: copy;
}
.result-panel textarea:not([readonly]) {
  background: #fff;
  cursor: text;
}
.result-actions { gap: 8px; }
.history-panel {
  margin: 0 22px 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--panel-soft);
  overflow: hidden;
}
.history-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.compact-btn {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 13px;
}
.history-list { padding: 12px; display: grid; gap: 10px; }
.history-empty { color: var(--muted); font-weight: 750; }
.history-item {
  border: 1px solid #dbe7f6;
  border-radius: 14px;
  padding: 12px;
  background: #fff;
}
.history-item strong { display: block; margin-bottom: 4px; }
.history-item p {
  margin: 8px 0 0;
  color: #475569;
  line-height: 1.6;
  max-height: 72px;
  overflow: hidden;
}
.history-actions { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.history-actions button { min-height: 34px; padding: 0 12px; border-radius: 12px; font-size: 13px; }

@media (max-width: 560px) {
  .input-content { padding: 18px 12px 12px; }
  .history-head { align-items: flex-start; flex-direction: column; }
}

/* v4：语音输入改为单层折叠卡片，避免外层再套内层模块 */
.main-stage.input-collapsible {
  padding: 0;
  overflow: hidden;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(76, 94, 159, .82), rgba(49, 61, 120, .86));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.12);
}
.main-stage.input-collapsible > summary {
  min-height: 62px;
  padding: 16px 22px;
  background: rgba(255,255,255,.08);
  border-bottom: 0;
}
.main-stage.input-collapsible[open] > summary {
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.main-stage.input-collapsible .input-content {
  padding: clamp(18px, 3vw, 34px);
}
.main-stage.input-collapsible .mode-tabs {
  margin-bottom: 24px;
}
.main-stage.input-collapsible .drop-zone,
.main-stage.input-collapsible .record-stage {
  min-height: clamp(320px, 45vh, 500px);
}

/* 修正通用按钮规则，避免旧样式中的重复选择器影响渲染 */
.secondary,
.file-like {
  color: #1f2937;
  background: #eef4ff;
  border: 1px solid #dce7f7;
}

/* 识别结果可在识别中折叠；展开时按钮区域保持更舒展 */
.result-panel > summary {
  position: relative;
  z-index: 3;
}
.result-actions {
  margin-top: 18px;
  margin-bottom: 12px;
}
.result-panel textarea {
  margin-top: 8px;
}

@media (max-width: 560px) {
  .main-stage.input-collapsible .input-content { padding: 16px 12px 14px; }
  .main-stage.input-collapsible .drop-zone,
  .main-stage.input-collapsible .record-stage { min-height: 380px; }
}

/* v5：去掉顶部标题与右上角状态，状态移动到底部日志模块 */
.compact-hero {
  justify-content: flex-end;
  padding: 0 6px;
  min-height: 0;
}
.compact-hero .hero-actions {
  min-height: 0;
}
.log-title-row {
  align-items: center;
}
.log-tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.log-status-card {
  min-width: 112px;
  height: 38px;
  padding: 0 13px;
  background: #fff;
  border-color: #dbe7f6;
  color: #0f172a;
  box-shadow: none;
  backdrop-filter: none;
}
.log-tools .secondary {
  min-height: 38px;
  border-radius: 999px;
}
@media (max-width: 560px) {
  .compact-hero { padding: 0; }
  .log-title-row { align-items: flex-start; flex-direction: column; }
  .log-tools { justify-content: flex-start; width: 100%; }
}

/* v6：状态移入日志，页面顶部保持轻量 */
.compact-hero {
  justify-content: flex-end;
  padding: 0;
  min-height: 0;
}
.log-title-row {
  align-items: center;
  flex-wrap: wrap;
}
.log-tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.log-status-card {
  min-width: 116px;
  height: 38px;
  background: #fff;
  border-color: #dbe7f6;
  color: #1f2937;
  box-shadow: none;
  backdrop-filter: none;
  font-size: 13px;
}
.log-status-card .dot {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, .14);
}
.parameter-actions .checkbox {
  margin-top: 4px;
  margin-bottom: 4px;
}
@media (max-width: 560px) {
  .log-tools { justify-content: flex-start; width: 100%; }
  .log-status-card { justify-content: center; }
}

/* v7：分段标记切换移到识别结果内，手机显示系统分享入口 */
.result-option {
  margin-right: auto;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  background: #f8fafc;
  border: 1px solid #dbe7f6;
  white-space: nowrap;
}
.result-option input {
  width: auto;
  margin: 0;
}
#shareTxtBtn[hidden] {
  display: none !important;
}
@media (max-width: 560px) {
  .result-actions {
    justify-content: flex-start;
  }
  .result-option {
    width: 100%;
    margin-right: 0;
    justify-content: flex-start;
  }
}

/* v9: 更现代的折叠控制和更简洁的实时录音入口 */
.chevron {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent !important;
  font-size: 0;
  background: rgba(15, 23, 42, .06);
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 6px 16px rgba(15,23,42,.05);
  transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
}
.chevron::before {
  content: '+';
  color: #0f172a;
  font-size: 22px;
  font-weight: 650;
  line-height: 1;
  transform: translateY(-1px) scale(1);
  transition: transform .22s ease, opacity .22s ease;
}
details[open] > summary .chevron {
  transform: scale(.92);
  background: rgba(116, 246, 176, .18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 18px rgba(22,163,74,.12);
}
details[open] > summary .chevron::before {
  content: '−';
  color: #065f46;
  transform: translateY(-2px) scale(1.08);
}

.record-start-only {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 210px;
  padding: 28px 16px;
}
.record-start-only[hidden],
.record-runtime[hidden] { display: none !important; }
.record-runtime {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 16px;
}
.record-main-btn {
  min-width: min(320px, 88vw);
  min-height: 62px;
  border-radius: 999px;
  font-size: 19px;
  letter-spacing: .02em;
}
.record-control-btn { border-radius: 999px; }
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 18px;
}
.record-extra-actions .secondary {
  border-radius: 999px;
}
@media (max-width: 680px) {
  .record-start-only { min-height: 170px; padding: 22px 12px; }
  .record-main-btn { width: 100%; min-width: 0; }
}


/* v10: 更统一的折叠图标、录音入口与文件入口风格 */
.audio-info[hidden] { display: none !important; }

/* 使用 iOS 风格的轻量下拉箭头，避免加号/减号突兀 */
.chevron {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 999px !important;
  color: transparent !important;
  font-size: 0 !important;
  background: rgba(255,255,255,.72) !important;
  border: 1px solid rgba(148,163,184,.28) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 22px rgba(15,23,42,.08) !important;
  position: relative !important;
  transform: none !important;
}
.chevron::before {
  content: '' !important;
  width: 9px !important;
  height: 9px !important;
  border-right: 2.2px solid #334155 !important;
  border-bottom: 2.2px solid #334155 !important;
  transform: translateY(-2px) rotate(45deg) !important;
  transition: transform .22s ease, border-color .22s ease !important;
}
.chevron::after { content: none !important; }
details[open] > summary .chevron {
  transform: none !important;
  background: rgba(255,255,255,.86) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 8px 20px rgba(15,23,42,.08) !important;
}
details[open] > summary .chevron::before {
  content: '' !important;
  border-color: #0f766e !important;
  transform: translateY(2px) rotate(-135deg) !important;
}
.input-collapsible .chevron {
  background: rgba(255,255,255,.13) !important;
  border-color: rgba(255,255,255,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 22px rgba(0,0,0,.12) !important;
}
.input-collapsible .chevron::before { border-color: rgba(255,255,255,.9) !important; }
.input-collapsible[open] > summary .chevron { background: rgba(255,255,255,.18) !important; }
.input-collapsible[open] > summary .chevron::before { border-color: var(--primary) !important; }

.record-stage {
  min-height: clamp(350px, 48vh, 540px);
  justify-content: center;
  gap: 20px;
}
.record-stage .record-icon {
  margin-bottom: 4px;
  transform: rotate(-13deg);
}
.record-icon svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: #ecfccb;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.24));
}
.record-start-only {
  width: auto;
  min-height: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.record-start-only[hidden],
.record-runtime[hidden] { display: none !important; }
.record-runtime {
  width: min(760px, 100%);
  display: grid;
  justify-items: center;
  gap: 16px;
  margin-top: 4px;
}
.record-main-btn {
  min-width: 210px;
  min-height: 54px;
  border-radius: 16px;
  font-size: 22px;
}
.record-control-btn {
  border-radius: 16px;
  min-width: 96px;
}
.record-control-btn .btn-icon {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  background: rgba(15,23,42,.06);
  color: inherit;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
}
.record-control-btn.danger .btn-icon {
  background: rgba(255,255,255,.16);
  color: #fff;
}
.record-extra-actions .secondary {
  border-radius: 14px;
}
@media (max-width: 680px) {
  .record-main-btn { width: min(260px, 92%); min-width: 0; }
  .record-box { width: 100%; }
  .timer-chip { width: 100%; }
}

/* v11: 统一录音/上传卡片布局，隐藏未选择文件前的转写按钮，优化折叠箭头 */
#fileActions[hidden],
#recordRuntime[hidden],
#recordStartOnly[hidden] {
  display: none !important;
}

.main-stage.input-collapsible > summary,
.collapsible > summary {
  align-items: center;
}

.chevron {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, .10) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 24px rgba(0,0,0,.12) !important;
  backdrop-filter: blur(10px);
  transition: background .22s ease, border-color .22s ease, transform .22s ease !important;
}
.chevron::before {
  content: '' !important;
  width: 12px !important;
  height: 12px !important;
  border-right: 3px solid rgba(255,255,255,.86) !important;
  border-bottom: 3px solid rgba(255,255,255,.86) !important;
  transform: translateY(-3px) rotate(45deg) !important;
  transition: transform .22s ease, border-color .22s ease !important;
}
details[open] > summary .chevron {
  background: rgba(255,255,255,.16) !important;
  border-color: rgba(255,255,255,.26) !important;
}
details[open] > summary .chevron::before {
  border-color: var(--primary) !important;
  transform: translateY(3px) rotate(-135deg) !important;
}
.result-panel .chevron,
.config-log-panel .chevron {
  background: rgba(15,23,42,.05) !important;
  border-color: rgba(15,23,42,.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 10px 22px rgba(15,23,42,.07) !important;
}
.result-panel .chevron::before,
.config-log-panel .chevron::before {
  border-color: #475569 !important;
}
.result-panel[open] > summary .chevron::before,
.config-log-panel[open] > summary .chevron::before {
  border-color: #0f766e !important;
}

.record-stage,
.drop-zone {
  gap: 18px;
}
.record-start-only,
.record-runtime {
  width: 100%;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
}
.record-runtime {
  min-height: auto;
}
.record-icon svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: #ecfccb;
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.24));
}
.upload-icon,
.record-icon {
  flex: 0 0 auto;
}
.upload-btn,
.record-main-btn {
  width: min(360px, 92%) !important;
  min-width: min(360px, 92%) !important;
  max-width: 100%;
  min-height: 64px;
  border-radius: 18px;
  white-space: nowrap;
  font-size: clamp(22px, 4vw, 28px);
  line-height: 1;
}
.record-main-btn {
  margin-top: 2px;
}
.record-box {
  width: min(760px, 100%);
}
.record-control-btn {
  min-width: 112px;
  min-height: 48px;
  border-radius: 16px;
  white-space: nowrap;
}
.record-extra-actions {
  width: min(820px, 100%);
  margin-top: 2px;
}
.record-extra-actions .secondary {
  border-radius: 14px;
  white-space: nowrap;
}
.timer-chip {
  width: auto;
  min-width: min(360px, 100%);
}
.segment-list,
#segmentInfo {
  width: min(820px, 100%);
}

@media (max-width: 680px) {
  .drop-zone,
  .record-stage {
    min-height: 420px;
    padding: 28px 18px;
  }
  .upload-btn,
  .record-main-btn {
    width: min(360px, 92%) !important;
    min-width: min(360px, 92%) !important;
    font-size: clamp(24px, 7vw, 30px);
  }
  .record-box button,
  .main-actions button,
  .record-extra-actions button {
    width: auto;
  }
  .record-control-btn {
    flex: 1 1 30%;
    min-width: 0;
  }
  .timer-chip {
    width: 100%;
  }
}


/* v12: 统一上传录音/实时录音模块尺寸与折叠图标 */
#fileModeTab { white-space: nowrap; }

/* 两种输入方式使用完全相同的虚线框尺寸 */
.main-stage.input-collapsible .drop-zone,
.main-stage.input-collapsible .record-stage,
.drop-zone,
.record-stage {
  width: 100% !important;
  min-height: clamp(420px, 52vh, 560px) !important;
  border: 1.5px dashed rgba(231, 238, 255, .72) !important;
  border-radius: 18px !important;
  padding: clamp(28px, 4vw, 42px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 18px !important;
  text-align: center !important;
  background: rgba(36, 48, 101, .36) !important;
}

/* 未选择文件前，文件识别按钮始终不可见 */
#fileActions[hidden] { display: none !important; }

/* 实时录音入口与上传录音入口保持一致的视觉宽度 */
.record-start-only,
.record-runtime {
  width: 100% !important;
  min-height: auto !important;
}
.upload-btn,
.record-main-btn,
#segRecordBtn {
  width: min(360px, 92%) !important;
  min-width: min(360px, 92%) !important;
  max-width: 100% !important;
  min-height: 64px !important;
  border-radius: 18px !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  font-size: clamp(24px, 4vw, 30px) !important;
  line-height: 1 !important;
}

/* 更轻、更统一的折叠/展开图标 */
.chevron {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 20px rgba(0,0,0,.10) !important;
  backdrop-filter: blur(10px) !important;
  color: transparent !important;
  font-size: 0 !important;
  position: relative !important;
  transform: none !important;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
.chevron::before {
  content: '' !important;
  width: 10px !important;
  height: 10px !important;
  border-right: 2.5px solid rgba(255,255,255,.9) !important;
  border-bottom: 2.5px solid rgba(255,255,255,.9) !important;
  transform: translateY(-2px) rotate(45deg) !important;
  transition: transform .22s ease, border-color .22s ease !important;
}
details[open] > summary .chevron {
  background: rgba(116,246,176,.16) !important;
  border-color: rgba(116,246,176,.30) !important;
}
details[open] > summary .chevron::before {
  border-color: var(--primary) !important;
  transform: translateY(2px) rotate(-135deg) !important;
}
.result-panel .chevron,
.config-log-panel .chevron {
  background: rgba(15,23,42,.05) !important;
  border-color: rgba(15,23,42,.09) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 8px 18px rgba(15,23,42,.06) !important;
}
.result-panel .chevron::before,
.config-log-panel .chevron::before {
  border-color: #64748b !important;
}
.result-panel[open] > summary .chevron,
.config-log-panel[open] > summary .chevron {
  background: rgba(116,246,176,.18) !important;
  border-color: rgba(13,148,136,.20) !important;
}
.result-panel[open] > summary .chevron::before,
.config-log-panel[open] > summary .chevron::before {
  border-color: #0f766e !important;
}

@media (max-width: 680px) {
  .main-stage.input-collapsible .drop-zone,
  .main-stage.input-collapsible .record-stage,
  .drop-zone,
  .record-stage {
    min-height: 420px !important;
    padding: 28px 18px !important;
  }
  .upload-btn,
  .record-main-btn,
  #segRecordBtn {
    width: min(360px, 92%) !important;
    min-width: min(360px, 92%) !important;
    font-size: clamp(24px, 7vw, 30px) !important;
  }
}


/* v13: 密钥确认返回来源模块，录音结束后只保留干净的再次录音入口 */
.compact-primary {
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
}
#recordRuntime[hidden],
#recordStartOnly[hidden],
#recordTools[hidden],
#segmentInfo[hidden],
#segmentListWrap[hidden],
#segmentList[hidden] {
  display: none !important;
}
.record-stage {
  position: relative;
}
.record-runtime {
  width: min(820px, 100%) !important;
  min-height: auto !important;
}
.record-extra-actions {
  justify-content: center;
  gap: 12px;
}
#recordTools {
  margin-top: 4px;
}
#segmentInfo {
  margin-top: 2px;
}
.record-start-only .drop-title {
  margin-top: 8px;
}
.record-box.advanced-record-box {
  justify-content: center;
}
@media (max-width: 680px) {
  .record-extra-actions {
    width: 100% !important;
  }
  .record-extra-actions button {
    flex: 1 1 46%;
    min-width: 0;
  }
}


/* v15: 密钥按钮顺序、录音提示字体、底部版权 */
.credential-actions {
  align-items: center;
}
.credential-actions .remember-config-check {
  margin-right: auto;
}
.record-stage .drop-title,
#recordStartTitle {
  margin: 12px 0 0 !important;
  color: #fff !important;
  font-size: clamp(20px, 2.5vw, 26px) !important;
  line-height: 1.45 !important;
  font-weight: 950 !important;
  max-width: 760px !important;
}
.site-footer {
  text-align: center;
  color: rgba(226, 232, 240, .58);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 8px 0 0;
  margin: 0 auto;
}
@media (max-width: 560px) {
  .credential-actions {
    justify-content: flex-start;
  }
  .credential-actions .remember-config-check {
    width: 100%;
    margin-right: 0;
  }
  .credential-actions .file-like,
  .credential-actions button {
    flex: 1 1 30%;
    min-width: 0;
  }
  .site-footer {
    font-size: 13px;
    padding-bottom: 4px;
  }
}


/* v17：识别结果支持自动滚动开关 */
.result-options-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-right: auto;
}
.result-options-group .result-option {
  margin-right: 0;
}
@media (max-width: 560px) {
  .result-options-group {
    width: 100%;
  }
  .result-options-group .result-option {
    width: auto;
    margin-right: 0;
    flex: 0 0 auto;
  }
}


/* v18: 录音片段列表折叠，避免长录音分段过多时占满页面 */
.segment-list-wrap {
  width: min(820px, 100%);
  margin-top: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
  overflow: hidden;
}
.segment-list-wrap[hidden] {
  display: none !important;
}
.segment-list-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  padding: 12px 16px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 800;
  user-select: none;
}
.segment-list-summary::-webkit-details-marker {
  display: none;
}
.segment-list-summary::after {
  content: '';
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(203, 252, 118, 0.95);
  border-bottom: 2px solid rgba(203, 252, 118, 0.95);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
  flex: 0 0 auto;
}
.segment-list-wrap[open] .segment-list-summary::after {
  transform: rotate(225deg);
}
.segment-list-hint {
  margin-left: auto;
  color: rgba(214, 222, 255, 0.68);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.segment-list-wrap .segment-list {
  width: 100% !important;
  max-height: min(360px, 48vh);
  overflow: auto;
  padding: 0 12px 12px;
}
@media (max-width: 680px) {
  .segment-list-summary {
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 12px 14px;
  }
  .segment-list-hint {
    font-size: 12px;
  }
}


/* v19: 折叠不常用分段操作，删除独立分段状态行 */
#shareTxtBtn { display: none !important; }
#segmentInfo { display: none !important; }
.record-extra-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.record-extra-actions > #downloadMergedWavBtn {
  min-width: min(360px, 92%);
}
.advanced-segment-tools {
  width: min(520px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.055);
  overflow: hidden;
}
.advanced-segment-tools[hidden] { display: none !important; }
.advanced-segment-tools summary {
  min-height: 42px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  color: rgba(226, 232, 240, 0.86);
  font-weight: 900;
  user-select: none;
}
.advanced-segment-tools summary::-webkit-details-marker { display: none; }
.advanced-segment-tools summary::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(203, 252, 118, 0.9);
  border-bottom: 2px solid rgba(203, 252, 118, 0.9);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.18s ease;
}
.advanced-segment-tools[open] summary::after {
  transform: translateY(2px) rotate(225deg);
}
.advanced-segment-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding: 0 12px 12px;
}
.advanced-segment-actions button {
  min-width: 150px;
}
@media (max-width: 680px) {
  .record-extra-actions > #downloadMergedWavBtn,
  .advanced-segment-tools {
    width: min(360px, 92%) !important;
  }
  .advanced-segment-actions {
    flex-direction: column;
  }
  .advanced-segment-actions button {
    width: 100%;
  }
}


/* v23: 稳定实时录音状态条，避免计时文字变化导致跳行闪烁 */
.timer-chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(680px, 100%);
  min-width: min(520px, 100%);
  min-height: 44px;
  padding-inline: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
@media (max-width: 680px) {
  .timer-chip {
    width: 100%;
    min-width: 0;
    font-size: clamp(13px, 3vw, 16px);
    padding-inline: 12px;
  }
}