/* ============================================================
 * 在线屏幕录制 - 企业交付版样式
 * 设计基调：深色科技风、克制动效、主次分明的双栏布局
 * 所有资源本地内置，无外部字体 / 图片依赖
 * ============================================================ */

/* ---------- 设计变量 ---------- */
:root {
  --primary-color: #00a8ff;
  --primary-deep: #0066ff;
  --secondary-color: #00ff9d;
  --accent-color: #ff00aa;
  --danger-color: #ff4d4f;
  --warn-color: #ffb020;
  --dark-bg: #0f1621;
  --panel-bg: rgba(18, 26, 38, 0.82);
  --card-bg: rgba(22, 31, 45, 0.92);
  --text-primary: #e6ebff;
  --text-secondary: #9aa6c2;
  --text-muted: #6b7693;
  --border-color: rgba(0, 168, 255, 0.22);
  --border-strong: rgba(0, 168, 255, 0.45);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --font-main: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --shadow-card: 0 10px 34px rgba(0, 0, 0, 0.35);
}

/* ---------- 基础重置 ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--font-main);
}

html {
  scroll-behavior: smooth;
}

body {
  background: radial-gradient(1200px 600px at 50% -10%, rgba(0, 168, 255, 0.10), transparent 60%),
              linear-gradient(135deg, #0f1621 0%, #16202f 100%);
  background-attachment: fixed;
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ---------- 顶部品牌栏 ---------- */
.app-header {
  display: flex;
  align-items: center;
  padding: 1.1rem 2rem;
  background: linear-gradient(to right, rgba(0, 168, 255, 0.10), rgba(0, 255, 157, 0.06));
  border-bottom: 1px solid var(--border-color);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.app-logo {
  height: 42px;
  filter: drop-shadow(0 0 8px rgba(0, 168, 255, 0.6));
}

.app-title {
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  font-weight: 700;
  letter-spacing: 0.5px;
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.25;
}

.app-subtitle {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

/* 语言切换 */
.header-tools {
  margin-left: auto;
}
.lang-select {
  width: auto;
  min-width: 120px;
  padding: 0.45rem 2rem 0.45rem 0.8rem;
  font-size: 0.85rem;
  background-color: rgba(10, 16, 26, 0.85);
}

/* ---------- 主布局：左主(操作) 右次(信息) ---------- */
.main {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 1.6rem;
  max-width: 1320px;
  margin: 1.8rem auto;
  padding: 0 1.6rem;
  align-items: start;
}

/* ---------- 录制操作卡片 ---------- */
.recorder-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.6rem 1.8rem;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(10px);
}

.recorder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--border-color);
}

.recorder-title {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 600;
  color: var(--text-primary);
}

/* 录制状态徽章 */
.rec-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: rgba(0, 255, 157, 0.12);
  color: var(--secondary-color);
  border: 1px solid rgba(0, 255, 157, 0.35);
}
.rec-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.rec-badge.recording {
  background: rgba(255, 77, 79, 0.14);
  color: var(--danger-color);
  border-color: rgba(255, 77, 79, 0.4);
}
.rec-badge.recording::before {
  animation: blink 1s steps(2, start) infinite;
}
.rec-badge.paused {
  background: rgba(255, 176, 32, 0.14);
  color: var(--warn-color);
  border-color: rgba(255, 176, 32, 0.4);
}
.rec-badge.done {
  background: rgba(0, 168, 255, 0.14);
  color: var(--primary-color);
  border-color: rgba(0, 168, 255, 0.4);
}

/* ---------- 选项区 ---------- */
.options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.field-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-weight: 500;
}

.field-inline {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  align-self: end;
}
.field-inline .field-label {
  font-size: 0.85rem;
}

/* “更多设置”：整行折叠条（左标题 + 右箭头），带分隔线，作为基础/高级的分界 */
.options > .btn.btn-ghost {
  grid-column: 1 / -1;
  width: 100%;
  justify-content: space-between;
  padding: 0.75rem 0.25rem 0.3rem;
  margin-top: 0.15rem;
  background: transparent;
  border: none;
  border-top: 1px dashed var(--border-color);
  border-radius: 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
}
/* 通用次级按钮（如转换区的「选择本地视频」）：细边框、低强调 */
.btn.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  font-weight: 500;
}
.btn.btn-ghost:hover:not(:disabled) {
  color: var(--primary-color);
  border-color: var(--primary-color);
  transform: none;
}
.btn.btn-ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.options > .btn.btn-ghost:hover:not(:disabled) {
  color: var(--primary-color);
  border-top-color: var(--border-strong);
  transform: none;
}
/* “更多设置”折叠条尾部的展开指示箭头 */
.options > .btn.btn-ghost::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: 0.35rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex: none;
}
.options > .btn.btn-ghost[aria-expanded="true"]::after {
  transform: rotate(-135deg);
}

/* 高级参数（默认折叠，不占位；点击“更多设置”后展开） */
.more-options {
  display: none;
}
.more-options.open {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 0.4rem;
  padding-top: 1.1rem;
  border-top: 1px dashed var(--border-color);
}
/* 高级参数中的“修复拖动进度”勾选项独占整行 */
.more-options .field-inline {
  grid-column: 1 / -1;
  align-self: center;
}

/* ---------- 控件基础样式 ---------- */
select, button {
  background: rgba(10, 16, 26, 0.85);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, background 0.2s ease;
  outline: none;
}

select {
  width: 100%;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2300a8ff'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1rem;
  padding-right: 2rem;
}

select:focus, button:focus, .text-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.25);
}

/* 文本输入框（水印文案等），视觉与下拉框保持一致 */
.text-input {
  width: 100%;
  background: rgba(10, 16, 26, 0.85);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

button {
  cursor: pointer;
  font-weight: 500;
  letter-spacing: 0.3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

button:hover:not(:disabled) {
  border-color: var(--primary-color);
  transform: translateY(-1px);
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-deep) 100%);
  border: none;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0, 168, 255, 0.4);
}
.btn-primary:hover:not(:disabled) {
  box-shadow: 0 6px 22px rgba(0, 168, 255, 0.6);
  transform: translateY(-2px);
}

/* 停止录制（录制中的主按钮状态）：置于 .btn-primary 之后以覆盖其配色 */
.btn-stop {
  background: linear-gradient(135deg, var(--danger-color) 0%, #b5341f 100%);
  border: none;
  color: #fff;
  box-shadow: 0 4px 16px rgba(255, 77, 79, 0.45);
}
.btn-stop:hover:not(:disabled) {
  box-shadow: 0 6px 22px rgba(255, 77, 79, 0.65);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}
.btn-ghost:hover:not(:disabled) {
  color: var(--text-primary);
  border-color: var(--primary-color);
}

.svg-icon {
  width: 18px;
  height: 18px;
}

/* ---------- 预览区 ---------- */
.preview-wrap {
  position: relative;
  margin-top: 1.4rem;
  min-height: 260px;
}

.preview-body {
  position: relative;
  width: 100%;
  min-height: 240px;
}

/* 实时预览框：原生 <video> 直接填充，黑底 + 16:9 上限，
   高度按视口钳制，保证常见笔记本（1366×768）首屏也能看到主要画面 */
.preview-live-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 46vh;
  min-height: 200px;
  background: #05080d;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: default;
}
.preview-live-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* 实时预览左上角状态标签（含录制脉冲点） */
.preview-live-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 24px);
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2px;
  pointer-events: none;
}
.preview-live-tag .live-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #ff4d4f;
  opacity: 0.45;
}
.preview-live-tag.is-live .live-dot {
  opacity: 1;
  box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.7);
  animation: livePulse 1.6s ease-out infinite;
}
.preview-live-tag.is-warn {
  background: rgba(255, 170, 0, 0.82);
  color: #1a1200;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.65); }
  70%  { box-shadow: 0 0 0 9px rgba(255, 77, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 77, 79, 0); }
}

.preview-img-full {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #05080d;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

/* 接管 getHTMLMediaElement 生成播放器的尺寸，贴合深色卡片主题并自适应宽度 */
.preview-body .media-container {
  width: 100% !important;
  display: block !important;
  background: #05080d;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.preview-body .media-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 46vh;
  background: #000;
  border: 1px solid var(--border-color);
}
/* 播放器自带的浮层标题：加半透明胶囊底，避免白色文字直接压在画面上 */
.preview-body .media-box > h2 {
  font-size: 12px !important;
  line-height: 1.4 !important;
  padding: 4px 10px !important;
  margin: 10px !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.55) !important;
  color: #fff !important;
  text-shadow: none !important;
  font-weight: 500 !important;
  z-index: 2 !important;
}
.preview-body .media-box video,
.preview-body .media-box audio {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

/* 回放播放器全屏（点击最大化按钮）：
   播放库的 screenStateChange 会用内联样式设置宽高，但被上方 .media-container 的
   width:100% !important 压制，导致全屏后容器仍局限于预览卡片内——“点了最大化没反应”。
   这里用 :fullscreen 伪类以 !important 强制铺满视口。
   注意：每条伪类必须单独成规则——选择器列表中混入浏览器不认识的伪类
   （如 Chrome 中的 :-moz-full-screen）会导致整条规则被解析器丢弃。 */
.preview-body .media-container:fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #000 !important;
  border: none !important;
  border-radius: 0 !important;
}
.preview-body .media-container:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #000 !important;
  border: none !important;
  border-radius: 0 !important;
}
.preview-body .media-container:fullscreen .media-box {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border: none !important;
}
.preview-body .media-container:-webkit-full-screen .media-box {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  margin: 0 !important;
  border: none !important;
}
.preview-body .media-container:fullscreen .media-box video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
.preview-body .media-container:-webkit-full-screen .media-box video {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* 预览区标题 */
.preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.preview-head .field-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* 录制中叠在预览画面上的水印浮层。
   说明：真正的水印在录制时已通过 Canvas 烘焙进画面，这里仅为「所见即所得」的视觉提示，
   不拦截鼠标事件（pointer-events:none），不影响播放器控件操作。 */
/* 预览水印浮层：容器铺满预览区，内部主 / 标题各自绝对定位。
   主标题固定右下角最底部；一句话标题按位置 class 或内联坐标摆放。
   仅在录制中的实时预览上显示；回放时成片已自带水印，故不显示。 */
.preview-wm {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.94);
  font-weight: 700;
  line-height: 1.25;
}
.preview-wm[hidden] {
  display: none;
}
.preview-wm-main,
.preview-wm-sub {
  position: absolute;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  white-space: nowrap;
}
/* 主标题：固定右下角、贴最底部（与 Canvas 烘焙位置一致） */
.preview-wm-main {
  right: 16px;
  bottom: 16px;
  text-align: right;
}
.preview-wm-sub {
  font-weight: 400;
  opacity: 0.78;
}
/* 副标题位置：主标题上方（右对齐，避开主标题）——下拉中显示为「左下角」 */
.preview-wm-sub.pos-above {
  right: 16px;
  bottom: calc(16px + 1.45em);
  text-align: right;
}
/* 顶部位置需避开左上角的「实时预览」状态标签 */
.preview-wm-sub.pos-tr { right: 16px; top: 48px;  text-align: right; }
.preview-wm-sub.pos-tl { left: 16px;  top: 48px;  text-align: left; }

/* 标题字体颜色选择器：与下拉 / 文本输入视觉一致 */
.wm-color-input {
  width: 100%;
  height: 44px;
  padding: 4px;
  background: rgba(10, 16, 26, 0.85);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.wm-color-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.25);
}
.wm-color-input::-webkit-color-swatch-wrapper { padding: 0; }
.wm-color-input::-webkit-color-swatch { border: none; border-radius: 4px; }
.wm-color-input::-moz-color-swatch { border: none; }

/* 标题字号拖动滑块：连续 0.5×~2.5×，深色轨道 + 圆形滑块 */
.wm-range {
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.wm-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--border-strong);
}
.wm-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--primary-color);
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease;
}
.wm-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.wm-range::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--border-strong);
}
.wm-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--primary-color);
  border: 2px solid rgba(255, 255, 255, 0.92);
}
.wm-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(0, 168, 255, 0.25); }

/* 滑块旁的当前倍率显示（如 1.3×），随拖动实时更新 */
.wm-size-val {
  margin-left: 0.5em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary-color);
  font-variant-numeric: tabular-nums;
}

/* 网格内按条件隐藏的字段（如自定义坐标 X / Y 与说明）：.field 的 display:flex
   会覆盖 UA 样式表的 [hidden]{display:none}，必须显式压制，否则隐藏项仍占位 */
.field[hidden] { display: none; }
.field-hint[hidden] { display: none; }

/* 高级参数说明文字 */
.field-hint {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 0.2rem;
  padding: 0.5rem 0.7rem;
  background: rgba(0, 168, 255, 0.06);
  border-left: 2px solid var(--border-strong);
  border-radius: 4px;
}

/* 占位提示（默认显示，录制 / 预览时由脚本隐藏） */
.preview-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--text-muted);
  background: repeating-linear-gradient(
    45deg, rgba(0, 168, 255, 0.03) 0 12px, transparent 12px 24px);
  text-align: center;
  padding: 1rem;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
}
.preview-placeholder svg {
  color: var(--text-muted);
  opacity: 0.7;
}
.preview-placeholder p {
  font-size: 1rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.preview-placeholder span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ---------- 操作按钮区 ---------- */
.actions {
  margin-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* 主操作（开始 / 暂停）：通栏；有暂停时与开始两等分 */
.actions-primary {
  display: flex;
  gap: 0.8rem;
}
.actions-primary .btn {
  flex: 1 1 0;
  width: 100%;
  max-width: none;
  padding: 0.85rem 1rem;
  font-size: 1rem;
}

/* 次操作（保存 / 在新窗口打开）：两等分，与主按钮左右对齐 */
.actions-secondary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}
.actions-secondary .btn {
  width: 100%;
  max-width: none;
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
}

/* ---------- 信息侧栏 ---------- */
.info-column {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  position: sticky;
  top: 1rem;
}

.info-panel {
  position: relative;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(10px);
}

.info-title {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  margin-bottom: 1.2rem;
  color: var(--secondary-color);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.info-title svg {
  filter: drop-shadow(0 0 5px var(--secondary-color));
}

/* 步骤列表 */
.steps-list {
  list-style: none;
  counter-reset: step-counter;
}
.steps-list li {
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: 1.1rem;
  counter-increment: step-counter;
}
.steps-list li:last-child {
  margin-bottom: 0;
}
.steps-list li::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 2px;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px var(--dark-bg), 0 0 0 4px rgba(0, 168, 255, 0.4);
}
.steps-list h3 {
  font-size: 0.95rem;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}
.steps-list p {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* 亮点网格 */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0.9rem;
}
.feature-card {
  background: rgba(10, 16, 26, 0.6);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--primary-color);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover {
  transform: translateY(-3px);
  border-left-color: var(--accent-color);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.feature-card h3 {
  font-size: 0.95rem;
  color: var(--primary-color);
  margin-bottom: 0.35rem;
}
.feature-card p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ---------- 页脚 ---------- */
.app-footer {
  text-align: center;
  padding: 1.4rem;
  margin-top: 2rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-color);
}
.footer-sep {
  margin: 0 0.6rem;
  opacity: 0.5;
}

/* ---------- 应用内提示（toast） ---------- */
.app-toast {
  position: fixed;
  left: 50%;
  top: 24px;
  transform: translateX(-50%) translateY(-20px);
  max-width: 90vw;
  padding: 12px 20px;
  border-radius: 8px;
  background: rgba(20, 24, 33, 0.95);
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 10000;
  text-align: center;
}
.app-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.app-toast.error {
  background: rgba(190, 40, 40, 0.96);
}

/* ---------- 环境提示横幅 ---------- */
.env-banner {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 20px;
  background: linear-gradient(135deg, #b5341f 0%, #d35400 100%);
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  z-index: 9998;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.env-banner[hidden] {
  display: none;
}

/* ---------- 授权门禁：顶部横幅 ---------- */
/* z-index 高于环境横幅（9998）：两者同时出现时授权提示优先 */
.license-banner {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #7a4b06 0%, #a3670a 100%);
  color: #fff;
  font-size: 13.5px;
  line-height: 1.5;
  text-align: center;
  z-index: 9999;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.license-banner[hidden] {
  display: none;
}
.license-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffd166;
  flex: none;
  box-shadow: 0 0 0 4px rgba(255, 209, 102, 0.25);
}
.license-banner-text {
  min-width: 0;
}

/* ---------- 授权门禁：小按钮（横幅内） ---------- */
.btn-mini {
  padding: 5px 12px;
  font-size: 12.5px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  flex: none;
  transition: background 0.2s ease;
}
.btn-mini:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* ---------- 授权门禁：模态框 ---------- */
.license-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 10, 18, 0.72);
  backdrop-filter: blur(3px);
  z-index: 10001;
}
.license-modal[hidden] {
  display: none;
}
.license-modal-card {
  width: min(440px, 100%);
  box-sizing: border-box;
  padding: 26px 24px 22px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-card);
  animation: license-pop 0.22s ease;
}
@keyframes license-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.license-modal-title {
  margin: 0 0 10px;
  font-size: 1.05rem;
  color: var(--text-primary);
}
.license-modal-desc {
  margin: 0 0 16px;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.license-input {
  width: 100%;
  box-sizing: border-box;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.4px;
}
.license-error {
  margin: 10px 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--danger-color);
}
.license-error[hidden] {
  display: none;
}
.license-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.license-modal-actions .btn {
  flex: 1;
  justify-content: center;
}

/* ---------- 授权门禁：被拦截按钮的视觉提示 ---------- */
.btn.is-gated {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.btn.is-gated:hover {
  transform: none;
}

/* ---------- 转换区（浏览器本地转码，不消耗服务器算力） ---------- */
.convert-zone {
  margin-top: 1.2rem;
  padding: 1rem 1.1rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: rgba(0, 168, 255, 0.04);
}
.convert-zone[hidden] {
  display: none;
}
/* 折叠入口：默认只显示这一行，点击后才展开转换面板 */
.convert-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: rgba(10, 16, 26, 0.6);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.convert-toggle:hover {
  border-color: var(--primary-color);
  color: var(--text-primary);
  background: rgba(0, 168, 255, 0.08);
}
.convert-caret {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex: none;
}
.convert-toggle[aria-expanded="true"] .convert-caret {
  transform: rotate(-135deg);
}
.convert-panel {
  display: none;
  margin-top: 0.85rem;
}
.convert-panel.open {
  display: block;
}
.convert-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.convert-row .field-label {
  font-size: 0.88rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.convert-select {
  flex: 1 1 200px;
  min-width: 160px;
}
.btn-convert {
  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
  border: none;
  color: #06121a;
  font-weight: 600;
  padding: 0.7rem 1.5rem;
}
.btn-convert:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.convert-progress {
  margin-top: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
/* display:flex 会覆盖 [hidden] 的 UA 默认样式，需显式声明，否则未转换时就显示进度条 */
.convert-progress[hidden] {
  display: none;
}
.convert-bar {
  flex: 1;
  height: 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.convert-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
  transition: width 0.2s ease;
}
/* 无法预估百分比时（拿不到时长）：不确定态往复动画，明确告诉用户「正在处理」而非卡住 */
.convert-bar-fill.indeterminate {
  width: 40%;
  animation: convert-indeterminate 1.2s ease-in-out infinite;
  transition: none;
}
@keyframes convert-indeterminate {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.convert-status {
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: normal;
}

/* 转码引擎状态行：安静低调，不抢眼；默认隐藏，仅在准备/就绪/失败时出现 */
.convert-engine {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.55rem 0 0;
  font-size: 0.76rem;
  color: var(--text-muted);
}
.convert-engine[hidden] { display: none; }
.convert-engine-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--text-muted); flex: none;
  transition: background 0.2s ease;
}
.convert-engine.is-preparing .convert-engine-dot {
  background: var(--secondary-color);
  animation: engine-pulse 1s ease-in-out infinite;
}
.convert-engine.is-ready .convert-engine-dot { background: #3ecf8e; }
.convert-engine.is-failed .convert-engine-dot { background: #ff6b6b; }
@keyframes engine-pulse { 0%,100% { opacity: 0.35; } 50% { opacity: 1; } }
.convert-engine-text { white-space: nowrap; }
.convert-engine-bar {
  flex: 1; height: 4px; border-radius: 4px;
  background: rgba(255, 255, 255, 0.08); overflow: hidden; min-width: 40px;
}
.convert-engine-fill {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
  transition: width 0.2s ease;
}
.convert-engine.is-ready .convert-engine-fill { width: 100% !important; }
.convert-engine-retry {
  margin-left: auto; padding: 0.1rem 0.6rem; font-size: 0.74rem;
  border-radius: 6px; border: 1px solid rgba(255,255,255,0.18);
  background: transparent; color: var(--text-secondary); cursor: pointer;
}
.convert-engine-retry[hidden] { display: none; }
.convert-engine-retry:hover { background: rgba(255,255,255,0.06); }
}
/* 当前文件一行：显示待转换的源（录制结果 / 本地文件）+ 选择本地视频入口 */
.convert-source {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
  padding: 0.6rem 0.75rem;
  background: rgba(10, 16, 26, 0.45);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}
.convert-source .field-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 500;
  flex: none;
}
.convert-source-name {
  flex: 1 1 180px;
  min-width: 0;
  font-size: 0.8rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-pick-file {
  flex: none;
  padding: 0.45rem 0.9rem;
  font-size: 0.8rem;
}
.btn-pick-file:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.convert-tip {
  margin: 0.75rem 0 0;
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ---------- 状态徽章右侧的实时信息（时长 / 预估大小） ---------- */
.rec-head-right {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.rec-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rec-meta[hidden] {
  display: none;
}

/* ---------- 品牌水印区 ---------- */
/* ---------- 更多设置内的子区块（品牌水印） ---------- */
.sub-block {
  grid-column: 1 / -1;
  margin-top: 0.4rem;
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: rgba(255, 0, 170, 0.04);
}
.sub-block-head {
  display: flex;
  align-items: center;
}
.sub-block-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 0.8rem;
  transition: opacity 0.2s ease;
}
/* 标题配置区：占满整行，内部三列网格（一句话标题 / 标题位置 / 字体颜色 / 字号大小，
   选择「自定义坐标」时追加 X / Y）。水印开关关闭时仅此区域置灰
   （品牌主文案为 JS 常量，不在页面展示，无需置灰）。 */
.wm-config {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  grid-column: 1 / -1;
  transition: opacity 0.2s ease;
}
.wm-config.off {
  opacity: 0.4;
  pointer-events: none;
}
/* 配置区内占满整行的字段（一句话标题） */
.wm-full {
  grid-column: 1 / -1;
}
.sub-block-tip {
  margin: 0.7rem 0 0;
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ---------- 动画 ---------- */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* ---------- 响应式 / 自适应 ---------- */

/* 大屏 → 笔记本：双栏保持，仅收紧间距与内边距 */
@media (max-width: 1180px) {
  .main {
    max-width: 1160px;
    gap: 1.3rem;
  }
}

/* 中屏（笔记本 / 小平板）：双栏继续，但更紧凑 */
@media (max-width: 1024px) {
  .recorder-card {
    padding: 1.35rem 1.4rem 1.5rem;
  }
  .info-panel {
    padding: 1.3rem;
  }
}

/* 平板竖屏 / 小笔记本：切换为单列，内容居中收窄，信息栏两面板并排以利用横向空间 */
@media (max-width: 920px) {
  .main {
    grid-template-columns: 1fr;
    max-width: 760px;
    margin: 1.4rem auto;
  }
  .info-column {
    position: static;
    top: auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
  }
  .info-panel {
    flex: 1 1 320px;
  }
}

/* 平板 / 大手机：高级参数改单列，亮点两列，间距再调 */
@media (max-width: 720px) {
  .more-options.open {
    grid-template-columns: 1fr;
  }
  .sub-block-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* 配置区占满整行后改单列，颜色 / 字号 / 位置各自一行，触控更舒服 */
  .wm-config {
    grid-template-columns: 1fr;
  }
  /* 单列网格下 1 / -1 即唯一一列，不会产生隐式列，无需额外重置 */
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app-header {
    padding: 0.95rem 1.2rem;
  }
  .recorder-head {
    padding-bottom: 0.85rem;
    margin-bottom: 1rem;
  }
}

/* 手机：全部纵向堆叠，放大触控目标，转换区纵向排列 */
@media (max-width: 560px) {
  .app-header {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.85rem 1rem;
  }
  .header-tools {
    margin-left: auto;
  }
  .app-subtitle {
    font-size: 0.74rem;
  }
  .main {
    padding: 0 0.9rem;
    margin: 1rem auto;
  }
  .recorder-card {
    padding: 1.1rem 1rem 1.3rem;
    border-radius: var(--radius-md);
  }
  .options {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .more-options.open {
    gap: 0.85rem;
  }
  .sub-block-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
  .actions {
    gap: 0.75rem;
  }
  .actions-primary {
    flex-direction: column;
  }
  .actions-secondary {
    grid-template-columns: 1fr;
  }
  /* 放大触控目标 */
  select, button {
    padding: 0.8rem 0.9rem;
    font-size: 0.95rem;
  }
  /* 转换区纵向堆叠，控件占满宽度 */
  .convert-row {
    flex-direction: column;
    align-items: stretch;
  }
  .convert-row .field-label {
    align-self: flex-start;
  }
  /* 进度条与状态文字竖向排列：状态文案（含预计剩余时间）较长，独占一行完整可读 */
  .convert-progress {
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
  }
  .convert-bar {
    width: 100%;
  }
  .convert-select {
    width: 100%;
    flex: 1 1 auto;
  }
  .btn-convert {
    width: 100%;
  }
  /* 当前文件一行在窄屏纵向堆叠，选择按钮占满整行 */
  .convert-source {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .convert-source-name {
    flex: 1 1 auto;
    white-space: normal;
    word-break: break-all;
  }
  .btn-pick-file {
    width: 100%;
  }
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .info-panel {
    flex: 1 1 100%;
    padding: 1.1rem;
  }
}

/* 极小屏（老款手机 / 折叠屏外屏）：进一步压缩，隐藏副标题 */
@media (max-width: 380px) {
  .recorder-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .app-subtitle {
    display: none;
  }
  .lang-select {
    min-width: 96px;
  }
}