:root {
  color-scheme: dark;
  --bg: #141317;
  --card: #201e26;
  --text: #f2efe9;
  --muted: #b6b0a5;
  --border: #2e2a36;
  --orange: #ff7a45;
  font-family: "Space Grotesk", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background: #120f15;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input { font: inherit; }

.demo-page { width: min(1380px, 100%); margin: 0 auto; padding: 12px; }
.demo-stage {
  position: relative;
  height: min(820px, calc(100svh - 130px));
  min-height: 555px;
  overflow: hidden;
  border: 1px solid #3a323b;
  border-radius: 8px;
  background: radial-gradient(circle at top, #2a1f1c, var(--bg) 58%, #120f15);
}
.window-bar { display: flex; align-items: center; justify-content: center; height: 30px; padding: 0 14px; background: #33333d; color: #c4c1c8; font-size: 11px; font-weight: 700; }
.window-dots { position: absolute; left: 13px; display: flex; gap: 6px; }
.window-dots i { width: 8px; height: 8px; border-radius: 50%; background: #ff6c66; }
.window-dots i:nth-child(2) { background: #ffbf48; }
.window-dots i:nth-child(3) { background: #41c869; }
.window-edition { position: absolute; right: 14px; font-size: 10px; color: #9896a2; }

.editor-page { display: flex; flex-direction: column; gap: 8px; height: calc(100% - 30px); min-height: 0; padding: 11px 20px 12px; }
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; min-height: 51px; }
.panel-header h1 { margin: 0 0 5px; font-size: 28px; line-height: 1.1; }
.panel-header p { margin: 0; color: var(--muted); font-size: 13px; }
.editor-status { max-width: 40%; padding-top: 5px; color: #a9b5c7; font-size: 12px; text-align: right; }
.project-bar { display: flex; align-items: center; gap: 10px; min-height: 39px; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px; background: #211d22; font-size: 12px; }
.project-menu { padding: 6px 10px; border: 1px solid #4b4e5c; border-radius: 5px; background: #292a32; font-size: 13px; font-weight: 700; }
.project-menu b { margin-left: 5px; font-size: 10px; }
.project-kind, .project-dirty { color: var(--muted); }
.project-bar strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }

.media-setup { flex: 0 0 auto; border: 1px solid #34303b; border-radius: 10px; background: #221f28; }
.setup-title { display: flex; align-items: center; gap: 11px; height: 41px; padding: 0 13px; border-bottom: 1px solid transparent; font-size: 14px; }
.setup-title strong { font-weight: 800; white-space: nowrap; }
.setup-arrow { color: #f1eef1; font-size: 12px; }
.setup-summary { overflow: hidden; color: #a9afbc; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.setup-command { margin-left: auto; color: #5eead4; font-size: 12px; white-space: nowrap; }
.setup-body { display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1fr); gap: 12px; max-height: 145px; padding: 10px 13px 13px; overflow: hidden; border-top: 1px solid #35323e; transition: max-height .22s ease, padding .22s ease, opacity .18s ease; }
.media-collapsed .setup-body { max-height: 0; padding-top: 0; padding-bottom: 0; border-top-color: transparent; opacity: 0; }
.setup-options, .audio-preview { min-width: 0; padding: 10px 12px; border: 1px solid #343641; border-radius: 7px; background: #1d1d25; }
.media-field { display: flex; align-items: center; gap: 12px; margin-bottom: 7px; color: var(--muted); font-size: 12px; }
.media-field small { display: block; font-size: 10px; }
.media-name { overflow: hidden; margin-bottom: 9px; color: #9fa8ba; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.setup-detail-row { display: inline-flex; align-items: center; gap: 9px; margin-right: 15px; color: var(--muted); font-size: 11px; }
.fake-input { min-width: 47px; padding: 4px 9px; border: 1px solid #3b3a46; border-radius: 5px; color: #dddce4; background: #17161d; }
.audio-preview { display: flex; flex-direction: column; gap: 14px; }
.audio-preview-title { font-size: 12px; font-weight: 750; }
.audio-preview-empty { margin-top: 9px; color: #777886; font-size: 12px; }
.audio-preview-file, .audio-transport { display: none; }
.has-file .audio-preview-empty { display: none; }
.has-file .audio-preview-file { display: block; color: #d7d5dc; font-size: 12px; }
.has-file .audio-transport { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 9px; border-radius: 999px; color: #17171d; background: #f2f2f4; font-size: 11px; }
.play-icon { font-size: 12px; }
.audio-track { flex: 1; height: 4px; border-radius: 2px; background: #a6a6aa; }
.audio-track i { display: block; width: 12%; height: 100%; background: #303137; }

.app-button { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 6px 11px; border: 1px solid #4a4957; border-radius: 6px; color: #f2eff2; background: #29272e; font-size: 12px; font-weight: 700; white-space: nowrap; }
.app-button.primary { border-color: var(--orange); color: #1e1412; background: var(--orange); }
.app-button.muted-button { color: #b7b5bd; opacity: .62; }
.gap-row { display: flex; align-items: center; justify-content: space-between; min-height: 39px; padding: 0 13px; border: 1px solid #34303b; border-radius: 9px; background: #201e26; }
.gap-row strong { font-size: 17px; }

.manual-panel { position: relative; display: flex; flex: 1; flex-direction: column; gap: 7px; min-height: 0; padding: 10px 14px; overflow: hidden; border: 1px solid #34303b; border-radius: 10px; background: #201e26; }
.manual-header { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 39px; }
.manual-title { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.manual-title h2 { margin: 0; font-size: 20px; }
.manual-title span { color: var(--muted); font-size: 12px; }
.before-actions, .after-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }
.after-actions { display: none; }
.has-transcript .before-actions { display: none; }
.has-transcript .after-actions { display: flex; }
.is-reviewing #check-target, .has-marks #check-target { border-color: #ff9b7a; }
.progress-line { height: 3px; overflow: hidden; border-radius: 3px; background: #32303b; opacity: 0; }
.progress-line span { display: block; width: 0; height: 100%; background: var(--orange); }
.is-processing .progress-line, .is-reviewing .progress-line, .is-exporting .progress-line { opacity: 1; }
.review-summary { display: none; min-height: 29px; padding: 6px 10px; border: 1px solid rgba(255, 122, 69, .25); border-radius: 6px; color: #c9bdba; background: rgba(255, 122, 69, .06); font-size: 11px; }
.has-marks .review-summary { display: block; }
.is-deleted .review-summary { display: none; }
.wave-status { display: none; color: #9da0af; font-size: 11px; }
.has-transcript .wave-status { display: block; }
.segments-empty { padding: 19px 2px; color: #8d8b99; font-size: 13px; }
.has-transcript .segments-empty { display: none; }
.segment-list { display: none; flex: 1; flex-direction: column; gap: 9px; min-height: 0; opacity: 0; transform: translateY(7px); transition: opacity .25s, transform .25s; }
.has-transcript .segment-list { display: flex; opacity: 1; transform: none; }
.segment-card { position: relative; flex: 0 1 auto; min-height: 88px; padding: 5px 10px; border: 1px solid transparent; border-radius: 11px; background: #1a1822; }
.segment-card.active { border-color: rgba(56, 189, 248, .8); box-shadow: 0 0 0 2px rgba(56, 189, 248, .15); }
.has-marks #segment-two { border-color: rgba(255, 122, 69, .35); }
.segment-meta { display: flex; align-items: center; gap: 8px 11px; min-height: 22px; color: var(--muted); font-size: 11px; }
.segment-index { color: var(--text); font-weight: 800; }
.segment-time { color: #c9d2e2; white-space: nowrap; }
.segment-time b { margin: 0 3px; padding: 2px 5px; border: 1px solid #363440; border-radius: 50%; color: #e6e3ea; font-size: 11px; }
.selection-time { display: none; margin-left: 8px; color: #ffcf7a; font-size: 10px; }
.has-selection .selection-time { display: inline; }
.segment-commands { display: flex; gap: 6px; color: #d6d2d9; white-space: nowrap; }
.segment-commands span { padding: 3px 6px; border: 1px solid #48444d; border-radius: 5px; }
.repeat-chip { display: none; padding: 3px 8px; border: 1px solid rgba(255, 122, 69, .3); border-radius: 999px; color: #ffd5c6; background: rgba(255, 122, 69, .12); white-space: nowrap; }
.has-marks .repeat-chip { display: inline-block; margin-left: auto; }
.is-deleted .repeat-chip { display: none; }
.segment-wave { position: relative; height: 30px; margin: 4px 0; padding: 4px 6px; overflow: hidden; border: 1px solid #1f2733; border-radius: 8px; background: #0d0f14; }
.segment-wave::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; border-top: 1px solid rgba(110, 131, 148, .24); }
.wave-bars { position: absolute; inset: 5px 7px; display: flex; align-items: center; gap: 1px; }
.wave-bars i { flex: 1; max-height: 26px; height: var(--height); background: #66758b; opacity: .48; }
.wave-hover, .text-wave-line { position: absolute; z-index: 6; top: 0; bottom: 0; width: 1px; opacity: 0; }
.wave-hover { background: #dce6ff; }
.text-wave-line { background: #5eead4; }
.show-wave-hover .wave-hover, .show-text-hover .text-wave-line { opacity: 1; }
.wave-selection, .wave-cut { position: absolute; top: 4px; bottom: 4px; opacity: 0; }
.wave-selection { z-index: 7; border: 1px solid rgba(138, 164, 255, .6); border-radius: 5px; background: rgba(138, 164, 255, .2); }
.has-selection .wave-selection { opacity: 1; }
.wave-selection i, .wave-cut i { position: absolute; top: -2px; bottom: -2px; width: 7px; }
.wave-selection i { background: rgba(138, 164, 255, .8); }
.wave-selection i:first-child, .wave-cut .cut-left { left: -3px; }
.wave-selection i:last-child, .wave-cut .cut-right { right: -3px; }
.wave-cut { z-index: 8; border: 1px solid rgba(255, 126, 112, .75); border-radius: 4px; background: rgba(239, 96, 96, .23); }
.wave-cut i { border: 1px solid #ffe3de; border-radius: 3px; background: #ff7e70; }
.has-manual-cut .cut-manual, .is-deleted .cut-repeat { opacity: 1; }
.segment-text { min-height: 29px; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 9px; color: #f0eef1; background: rgba(10, 12, 18, .5); font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.manual-text-token { display: inline-block; border-radius: 5px; }
.manual-text-token.hover-wave { color: #faffff; background: rgba(94, 234, 212, .22); box-shadow: 0 0 0 1px rgba(94, 234, 212, .42); }
.manual-text-token.selected { background: rgba(110, 182, 255, .38); box-shadow: 0 0 0 1px rgba(110, 182, 255, .45); }
.manual-text-token.suggested-delete { color: #ffd5c6; background: rgba(255, 122, 69, .16); box-shadow: inset 0 -2px rgba(255, 122, 69, .78); }
.manual-text-token.removed { display: none; }
.review-menu { position: absolute; z-index: 11; display: none; min-width: 200px; padding: 3px; border: 1px solid #5b4b53; border-radius: 6px; color: #e9e4e9; background: #29252f; box-shadow: 0 12px 24px rgba(0,0,0,.5); font-size: 12px; white-space: nowrap; }
.show-menu .review-menu { display: block; }
.review-menu span { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-radius: 4px; }
.review-menu span:first-child { color: #f4a8a8; background: #3b2b32; }
.review-menu kbd { color: #a7a4af; font-size: 10px; font-weight: 500; }
.export-toast { position: absolute; z-index: 7; right: 16px; bottom: 14px; display: none; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid #3b9d66; border-radius: 6px; color: #d9f5df; background: #1b3428; box-shadow: 0 8px 26px #0008; font-size: 12px; }
.export-toast b { font-size: 18px; }
.export-toast small { color: #a6d3b1; }
.is-done .export-toast { display: flex; }

.demo-cursor { position: absolute; z-index: 15; top: 0; left: 0; width: 18px; height: 23px; pointer-events: none; filter: drop-shadow(0 2px 2px #000a); }
.demo-cursor::before { content: ""; position: absolute; inset: 0; background: white; clip-path: polygon(0 0, 0 100%, 5px 17px, 15px 22px); }
.demo-cursor::after { content: ""; position: absolute; inset: 2px 3px 4px 2px; background: #16121a; clip-path: polygon(0 0, 0 100%, 4px 15px, 13px 21px); }
.click-ring { position: absolute; top: -10px; left: -10px; width: 23px; height: 23px; border: 2px solid #ffab7f; border-radius: 50%; opacity: 0; transform: scale(.3); }
.demo-cursor.clicking .click-ring { opacity: .85; transform: scale(1.3); }

.player-dock { margin-top: 9px; overflow: hidden; border: 1px solid #36323e; border-radius: 8px; background: #1b1920; }
.player-controls { display: flex; align-items: center; gap: 12px; height: 41px; padding: 0 12px; }
.icon-button { width: 28px; height: 28px; border: 0; border-radius: 4px; color: #f4f0f4; background: transparent; font-size: 17px; cursor: pointer; }
.icon-button:hover, .icon-button:focus-visible { background: #34303b; outline: none; }
#seek { flex: 1; min-width: 0; height: 5px; accent-color: var(--orange); cursor: pointer; }
#playback-time { min-width: 95px; color: #aaa6b3; font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; }
.step-buttons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid #36323e; }
.step-buttons button { min-width: 0; min-height: 35px; padding: 6px 3px; border: 0; border-right: 1px solid #36323e; color: #aaa6b3; background: transparent; font-size: 11px; font-weight: 650; white-space: nowrap; cursor: pointer; }
.step-buttons button:last-child { border-right: 0; }
.step-buttons button span { margin-right: 5px; color: #777280; font-size: 10px; }
.step-buttons button.active { color: #ffe4d4; background: #3a2b29; box-shadow: inset 0 3px var(--orange); }
.step-buttons button.active span { color: #ffad80; }
.step-buttons button:hover, .step-buttons button:focus-visible { color: white; background: #34303b; outline: none; }
.action-caption { min-height: 26px; padding: 6px 12px; border-top: 1px solid #36323e; color: #d1cbd1; font-size: 11px; }
.demo-disclaimer { margin: 7px 0 0; color: #8c8793; font-size: 11px; }

@media (max-width: 850px) {
  .editor-page { padding: 12px; gap: 8px; }
  .segment-commands, .extra-action, .project-kind { display: none; }
  .manual-header { flex-wrap: wrap; }
  .manual-title { flex: 1 0 auto; }
  .after-actions { margin-left: auto; }
  .setup-body { grid-template-columns: 1fr; max-height: 126px; }
  .audio-preview { display: none; }
}

@media (max-width: 540px) {
  .demo-page { padding: 7px; }
  .demo-stage { min-height: 595px; height: calc(100svh - 180px); }
  .window-bar { height: 26px; }
  .editor-page { height: calc(100% - 26px); padding: 9px; gap: 7px; }
  .panel-header { min-height: 50px; }
  .panel-header h1 { font-size: 22px; }
  .panel-header p { font-size: 10px; }
  .editor-status { display: none; }
  .project-bar { min-height: 34px; }
  .setup-title { height: 37px; padding: 0 9px; }
  .setup-command, .gap-row .app-button { display: none; }
  .setup-body { max-height: 130px; padding: 7px 9px; }
  .setup-options { padding: 8px; }
  .gap-row { min-height: 37px; }
  .gap-row strong { font-size: 15px; }
  .manual-panel { padding: 8px; gap: 5px; }
  .manual-title h2 { font-size: 17px; }
  .manual-header { min-height: 36px; }
  .app-button { min-height: 29px; padding: 4px 8px; font-size: 11px; }
  .segment-card { min-height: 108px; padding: 6px; }
  .segment-meta { gap: 5px; }
  .segment-wave { height: 34px; margin: 5px 0; }
  .wave-bars { gap: 0; }
  .wave-bars i { opacity: .72; }
  .segment-text { font-size: 12px; padding: 5px 7px; }
  .review-summary { font-size: 10px; }
  .review-menu { min-width: 174px; gap: 8px; font-size: 11px; }
  .review-menu kbd { font-size: 9px; }
  .export-toast small { display: none; }
  .step-buttons button { font-size: 10px; }
  .step-buttons button span { display: none; }
  .step-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step-buttons button:nth-child(-n+3) { border-bottom: 1px solid #36323e; }
}