:root {
  --bg: #0b1020;
  --card: #151b30;
  --card2: #1c2340;
  --fg: #e8ecf7;
  --muted: #8b93ab;
  --accent: #5b8cff;
  --accent2: #7c5bff;
  --rec: #ff4d5e;
  --ok: #37d399;
  --border: #262d47;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", sans-serif;
  background: radial-gradient(1200px 600px at 50% -10%, #1a2350 0, var(--bg) 60%), var(--bg);
  color: var(--fg);
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  min-height: 100vh;
}
.topbar { text-align: center; padding: 22px 16px 6px; }
.topbar h1 { margin: 0; font-size: 20px; letter-spacing: .5px; }
.sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
main { max-width: 640px; margin: 0 auto; padding: 12px 14px 60px; }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  margin-top: 14px;
}
.recorder { text-align: center; }
.timer { font-variant-numeric: tabular-nums; font-size: 34px; font-weight: 600; margin: 6px 0 14px; }
.rec-btn {
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 16px;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  transition: transform .08s ease, filter .2s;
}
.rec-btn:active { transform: scale(.98); }
.rec-btn.recording { background: var(--rec); animation: pulse 1.4s infinite; }
@keyframes pulse { 0%,100%{filter:brightness(1)} 50%{filter:brightness(1.25)} }
.rec-btn:disabled { opacity: .55; }
.hint { margin-top: 12px; }
.upload { color: var(--accent); font-size: 14px; text-decoration: underline; cursor: pointer; }
.status { margin-top: 12px; color: var(--muted); font-size: 14px; min-height: 20px; }
.status.err { color: var(--rec); }

.step-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.step-head h2 { font-size: 16px; margin: 0; flex: 1; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.copy { background: var(--card2); border: 1px solid var(--border); color: var(--fg); border-radius: 8px; padding: 5px 12px; font-size: 13px; }
.copy:active { background: var(--accent); }
.body { font-size: 15px; line-height: 1.7; color: var(--fg); word-break: break-word; white-space: pre-wrap; }
.body.md { white-space: normal; }
.loading { color: var(--muted); }
.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--muted); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* 分享/导出 按钮条 */
.actions { display: flex; gap: 10px; margin-top: 14px; }
.act {
  flex: 1; border: none; border-radius: 12px; padding: 13px; font-size: 15px; font-weight: 600;
  color: #fff; background: var(--card2); border: 1px solid var(--border);
}
#btnShare { background: linear-gradient(135deg, var(--accent), var(--accent2)); border: none; }
.act:active { transform: scale(.98); }
.act:disabled { opacity: .4; filter: grayscale(.5); }
.actions-hint { text-align: center; color: var(--muted); font-size: 13px; margin: 8px 0 0; }

/* 历史记录 */
.grow { flex: 1; }
.hist { list-style: none; margin: 0; padding: 0; }
.hist-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 4px; border-bottom: 1px solid var(--border); cursor: pointer;
}
.hist-item:last-child { border-bottom: none; }
.hist-main { flex: 1; min-width: 0; }
.hist-title { font-size: 15px; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-date { font-size: 12px; color: var(--muted); margin-top: 2px; }
.hist-del { background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 8px; padding: 5px 10px; font-size: 13px; }
.hist-del:active { background: var(--rec); color: #fff; border-color: var(--rec); }

/* 打印区：平时隐藏，仅打印时显示 */
#print-area { display: none; }
@media print {
  body > *:not(#print-area) { display: none !important; }
  #print-area { display: block !important; color: #000; padding: 0; }
  #print-area .p-title { font-size: 22px; margin: 0 0 4px; }
  #print-area .p-date { color: #666; font-size: 12px; margin-bottom: 16px; }
  #print-area h2 { font-size: 16px; margin: 18px 0 6px; color: #000; border-bottom: 1px solid #ccc; padding-bottom: 3px; }
  #print-area .md h2 { border: none; color: #333; font-size: 14px; }
  #print-area .md h3 { font-size: 13px; }
  #print-area .md table { width: 100%; border-collapse: collapse; font-size: 12px; }
  #print-area .md th, #print-area .md td { border: 1px solid #999; padding: 5px 7px; }
  #print-area .md strong { color: #000; }
  #print-area .p-transcript { font-size: 12px; line-height: 1.6; color: #333; }
}

/* markdown */
.md h2 { font-size: 15px; margin: 16px 0 6px; color: var(--accent); }
.md h2:first-child { margin-top: 0; }
.md h3 { font-size: 14px; margin: 12px 0 4px; }
.md ul { margin: 6px 0; padding-left: 20px; }
.md li { margin: 3px 0; }
.md p { margin: 6px 0; }
.md strong { color: #fff; }
.md table { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 13px; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--border); padding: 6px 8px; text-align: left; }
.md th { background: var(--card2); }