:root {
  --bg: oklch(21% 0.012 235);
  --surface: oklch(25% 0.012 235);
  --surface-2: oklch(28% 0.012 235);
  --fg: oklch(93% 0.01 235);
  --muted: oklch(66% 0.015 235);
  --border: oklch(33% 0.012 235);
  --accent: oklch(58% 0.16 165);
  --accent-soft: color-mix(in oklch, var(--accent) 14%, transparent);
  --fg-soft: color-mix(in oklch, var(--fg) 6%, transparent);
  --warn: oklch(72% 0.14 72);
  --ok: oklch(64% 0.15 155);
  --danger: oklch(62% 0.18 25);
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 18px 48px color-mix(in oklch, var(--fg) 12%, transparent);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}
button, select, input { font: inherit; }
body { color-scheme: dark; }

/* 顶部返回栏 */
.mt-topbar {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  font-size: 14px;
  font-weight: 600;
}
.mt-topbar a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.mt-topbar a:hover { color: var(--accent); border-color: var(--accent); }

/* 主体布局 */
.mt-app {
  height: calc(100vh - 44px);
  display: flex;
  flex-direction: column;
  padding: 14px;
  gap: 12px;
  overflow: hidden;
}

/* 控制区 */
.mt-controls {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mt-status {
  display: flex;
  align-items: center;
  gap: 10px;
}
.mt-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--muted);
  flex: 0 0 auto;
  transition: background .2s;
}
.mt-dot.is-recording {
  background: var(--danger);
  box-shadow: 0 0 0 0 color-mix(in oklch, var(--danger) 70%, transparent);
  animation: mt-pulse 1.4s infinite;
}
.mt-dot.is-paused { background: var(--warn); }
@keyframes mt-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--danger) 60%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.mt-timer {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.mt-status-text { color: var(--muted); font-size: 13px; }
.mt-status-text.is-recording { color: var(--danger); }
.mt-status-text.is-paused { color: var(--warn); }

.mt-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.mt-options {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
}
.mt-check, .mt-lang { display: inline-flex; align-items: center; gap: 8px; }
.mt-lang select {
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
}
/* 麦克风选择与音量条 */
.mt-microw {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}
.mt-microw .mt-lang select { max-width: 220px; }
.mt-meter {
  flex: 1 1 160px;
  min-width: 120px;
  height: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.mt-meter-fill {
  height: 100%;
  width: 0%;
  background: var(--ok);
  border-radius: 999px;
  transition: width .08s linear, background .2s;
}
.mt-meter-fill.is-low { background: var(--warn); }
.mt-meter-fill.is-hot { background: var(--accent); }
.mt-hint {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  background: var(--fg-soft);
  border-radius: 6px;
  padding: 8px 10px;
}
.mt-notice {
  font-size: 13px;
  color: var(--warn);
  min-height: 0;
}
.mt-notice:empty { display: none; }
.mt-opennew { margin-top: 2px; }
.mt-opennew .btn { width: 100%; }

/* 按钮 */
.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--fg);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 14px;
  min-height: 42px;
  transition: border-color .15s, background .15s, opacity .15s;
}
.btn:hover:not(:disabled) { border-color: var(--accent); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.06); }
.btn-stop {
  background: color-mix(in oklch, var(--danger) 16%, var(--surface-2));
  border-color: color-mix(in oklch, var(--danger) 50%, var(--border));
  color: var(--fg);
}

/* 转写区 */
.mt-transcript-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.mt-transcript-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  color: var(--muted);
}
.mt-count { font-variant-numeric: tabular-nums; }
.mt-transcript {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  -webkit-overflow-scrolling: touch;
}
.mt-empty { color: var(--muted); font-size: 13px; }

.mt-seg {
  margin: 0 0 12px;
  padding-left: 12px;
  border-left: 3px solid var(--accent-soft);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.mt-seg:hover { background: var(--fg-soft); }
.mt-seg.is-active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
.mt-seg.is-active .mt-seg-text { color: var(--fg); }
.mt-seg-time {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12px;
  color: var(--accent);
  margin-right: 8px;
  font-variant-numeric: tabular-nums;
}
.mt-seg-text { color: var(--fg); }
.mt-seg-speaker {
  color: var(--accent);
  font-weight: 600;
  margin-right: 2px;
}
.mt-interim {
  margin: 0 0 12px;
  padding-left: 12px;
  border-left: 3px solid var(--border);
  color: var(--muted);
  font-style: normal;
}

/* 操作区 */
.mt-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* 在线播放器 */
.mt-player-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mt-player { width: 100%; }
.mt-player-hint { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* 移动端适配 */
@media (max-width: 768px) {
  .mt-app { padding: 10px; gap: 10px; }
  .mt-controls { padding: 12px; }
  .mt-buttons { gap: 8px; }
  .mt-buttons .btn { flex: 1 1 auto; min-height: 46px; }
  .mt-actions .btn { flex: 1 1 calc(50% - 5px); min-height: 46px; }
  .mt-timer { font-size: 20px; }
  .mt-options { gap: 12px; }
}

/* 小号按钮（摘要操作） */
.btn-sm {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 6px;
}

/* 会议摘要面板 */
.mt-summary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mt-summary-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
}
.mt-summary-actions { display: flex; gap: 8px; }
.mt-summary-body { display: flex; flex-direction: column; gap: 8px; }
.mt-sum-h {
  margin: 6px 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: .5px;
}
.mt-sum-info { display: flex; flex-direction: column; gap: 2px; }
.mt-sum-kv { display: flex; gap: 10px; font-size: 13px; }
.mt-sum-k { color: var(--muted); flex: 0 0 64px; }
.mt-sum-v { color: var(--fg); }
.mt-sum-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.mt-sum-list.mt-sum-actions { list-style: none; padding-left: 0; }
.mt-sum-item {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  border-left: 3px solid transparent;
  transition: background .15s, border-color .15s;
}
.mt-sum-item:hover { background: var(--accent-soft); border-left-color: var(--accent); }
.mt-sum-action { list-style: none; background: var(--fg-soft); }
.mt-sum-time {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 12px;
  color: var(--accent);
  margin-right: 8px;
  font-variant-numeric: tabular-nums;
}
.mt-sum-empty { font-size: 13px; color: var(--muted); }
.mt-sum-spirit {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--fg);
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 10px 12px;
}

/* ============ 标签页（实时录音 / 录音转文字） ============ */
.mt-tabs {
  display: flex;
  gap: 6px;
  padding: 10px 16px 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.mt-tab {
  appearance: none;
  border: 1px solid var(--border);
  border-bottom: none;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  padding: 9px 18px;
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: pointer;
  transition: color .15s, background .15s;
}
.mt-tab:hover { color: var(--fg); }
.mt-tab.is-active {
  color: var(--fg);
  background: var(--surface);
  box-shadow: inset 0 2px 0 var(--accent);
}
/* 确保标签切换的 hidden 生效（.mt-app 自身带 display） */
.mt-app[hidden] { display: none !important; }

/* ============ 录音转文字：文件拖拽区 ============ */
.mt-drop {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--fg-soft);
  padding: 26px 18px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  outline: none;
}
.mt-drop:hover,
.mt-drop:focus-visible { border-color: var(--accent); }
.mt-drop.is-over {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.mt-drop-icon { font-size: 30px; line-height: 1; margin-bottom: 10px; }
.mt-drop-title { font-size: 15px; color: var(--fg); margin-bottom: 6px; }
.mt-drop-sub { font-size: 12.5px; color: var(--muted); }

/* ============ 文件信息 ============ */
.mt-fileinfo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--fg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.mt-fileinfo-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mt-fname {
  font-size: 14px;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mt-fmeta { font-size: 12px; color: var(--muted); }

/* ============ 进度条 ============ */
.mt-progress { display: flex; flex-direction: column; gap: 6px; }
.mt-progress-bar {
  height: 8px;
  background: var(--fg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}
.mt-progress-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 999px;
  transition: width .25s ease;
}
.mt-progress-text { font-size: 12.5px; color: var(--muted); }

/* ============ 可编辑结果框 ============ */
.mt-editor {
  width: 100%;
  min-height: 300px;
  resize: vertical;
  box-sizing: border-box;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  font-family: inherit;
  font-size: 14.5px;
  line-height: 1.85;
}
.mt-editor:focus { outline: none; border-color: var(--accent); }
.mt-editor::placeholder { color: var(--muted); }

@media (max-width: 560px) {
  .mt-tabs { padding: 8px 10px 0; }
  .mt-tab { padding: 8px 12px; font-size: 13px; }
  .mt-fileinfo { flex-direction: column; align-items: stretch; }
}