@font-face { font-family: "XiaoxinTitle"; src: url("/assets/xiaoxin/fonts/video-editing/SmileySans-Oblique.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "XiaoxinBrush"; src: url("/assets/xiaoxin/fonts/video-editing/MaShanZheng-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "XiaoxinCaption"; src: url("/assets/xiaoxin/fonts/video-editing/NotoSansSC-Variable.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "XiaoxinEditorial"; src: url("/assets/xiaoxin/fonts/video-editing/ZCOOLXiaoWei-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "XiaoxinSerif"; src: url("/assets/xiaoxin/fonts/video-editing/NotoSerifSC-Variable.ttf") format("truetype"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "XiaoxinLatin"; src: url("/assets/xiaoxin/fonts/video-editing/Lora-Variable.ttf") format("truetype"); font-display: swap; }

.video-editing-app {
  --edit-bg: #050b14;
  --edit-panel: rgba(10, 18, 31, .92);
  --edit-panel-2: rgba(13, 27, 42, .88);
  --edit-line: rgba(148, 163, 184, .17);
  --edit-text: #e7eef7;
  --edit-muted: #8fa2b7;
  --edit-cyan: #5eead4;
  --edit-blue: #2563eb;
  position: relative;
  min-height: calc(100vh - 128px);
  color: var(--edit-text);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: .005em;
}

/* 导入页：上传视频 + 从历史库导入 两张等宽动作卡片 */
.editing-import-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 210px;
  padding: 30px 24px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .13);
  border-radius: 18px;
  background:
    radial-gradient(circle at 22% 0%, rgba(14, 165, 233, .22), transparent 36%),
    radial-gradient(circle at 78% 100%, rgba(37, 99, 235, .16), transparent 44%),
    linear-gradient(135deg, rgba(8, 17, 29, .98), rgba(7, 10, 18, .98));
  box-shadow: 0 22px 64px rgba(0, 0, 0, .24);
}
.editing-import-actions { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 14px; width: 100%; max-width: 560px; }
.editing-import-shell .editing-upload-primary,
.editing-import-shell .editing-history-open {
  flex: 1 1 230px; min-width: 200px; max-width: 260px;
  display: grid; justify-items: center; align-content: center; gap: 4px;
  width: auto; min-height: 108px; margin: 0; padding: 16px 18px;
  border-radius: 12px; text-align: center; cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.editing-action-ico { display: grid; width: 40px; height: 40px; margin-bottom: 3px; place-items: center; border-radius: 12px; font-size: 19px; line-height: 1; }
.editing-import-shell .editing-upload-primary {
  border: 1px solid rgba(94, 234, 212, .5);
  background: linear-gradient(135deg, rgba(20, 184, 166, .3), rgba(37, 99, 235, .26));
  box-shadow: 0 12px 30px rgba(6, 182, 212, .16);
}
.editing-import-shell .editing-upload-primary .editing-action-ico { color: #eafffb; background: rgba(94, 234, 212, .22); }
.editing-import-shell .editing-upload-primary b { color: #fff; font-size: 15px; }
.editing-import-shell .editing-upload-primary small { margin: 0; color: #9cc9c5; font-size: 10.5px; }
.editing-import-shell .editing-upload-primary:hover { border-color: #5eead4; transform: translateY(-2px); box-shadow: 0 16px 36px rgba(6, 182, 212, .26); }
.editing-import-shell .editing-history-open {
  border: 1px solid rgba(94, 234, 212, .32);
  background: linear-gradient(135deg, rgba(15, 118, 110, .16), rgba(15, 23, 42, .9));
  box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}
.editing-import-shell .editing-history-open .editing-action-ico { color: #bff5ec; background: rgba(94, 234, 212, .12); }
.editing-import-shell .editing-history-open b { color: #eafffb; font-size: 15px; }
.editing-import-shell .editing-history-open small { margin: 0; color: #6f9d9a; font-size: 10.5px; }
.editing-import-shell .editing-history-open:hover { border-color: rgba(94, 234, 212, .7); transform: translateY(-2px); background: linear-gradient(135deg, rgba(15, 118, 110, .3), rgba(15, 23, 42, .96)); }
.editing-import-note { margin: 0; max-width: 560px; color: #71869b; font-size: 11px; line-height: 1.6; text-align: center; }

.editing-start-templates { margin-top:22px; background:rgba(8,15,28,.7); }
.editing-start-templates > header { align-items:center; }
.editing-start-templates .edit-template-grid { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.editing-start-templates .edit-template-card { min-height:136px; transition:border-color .18s ease,background .18s ease,transform .18s ease; }
.editing-start-templates .edit-template-card:hover { transform:translateY(-2px); }

.editing-recent { padding:22px 0 0; border:0; background:transparent; }
.editing-recent > header { align-items:center; margin-bottom:13px; }
.editing-recent > header > div { display:grid; gap:3px; }
.editing-recent > header span { font-size:18px; }
.editing-recent-more { border:0; color:#65778b; background:transparent; font-size:10px; }
.editing-project-grid { display:grid!important; grid-template-columns:repeat(6,minmax(0,1fr)); gap:16px!important; }
.editing-project-card { min-width:0; }
.editing-project-media { position:relative; display:block; width:100%; aspect-ratio:1.45/1; overflow:hidden; padding:0; border:1px solid rgba(148,163,184,.12); border-radius:9px; background:#111827; cursor:pointer; }
.editing-project-media video,.editing-project-media img { width:100%; height:100%; object-fit:cover; transition:filter .18s ease,transform .3s ease; }
.editing-project-cover-empty { display:grid; width:100%; height:100%; align-content:center; justify-items:center; gap:4px; color:#8295aa; background:#0b1626; }
.editing-project-cover-empty strong { color:#a9bbcd; font-size:11px; }.editing-project-cover-empty small { font-size:8px; }
.editing-project-media:hover video,.editing-project-media:hover img { filter:brightness(.58); transform:scale(1.025); }
.editing-project-media:disabled { cursor:not-allowed; opacity:.62; }.editing-project-media:disabled video,.editing-project-media:disabled img { filter:grayscale(.45) brightness(.62); }
.editing-project-play { position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:opacity .18s ease; }
.editing-project-media:hover .editing-project-play,.editing-project-media:focus-visible .editing-project-play { opacity:1; }
.editing-project-play b { display:grid; min-width:54px; min-height:34px; place-items:center; border:1px solid rgba(255,255,255,.38); border-radius:999px; color:#fff; background:rgba(3,8,17,.72); box-shadow:0 8px 24px rgba(0,0,0,.32); font-size:11px; backdrop-filter:blur(8px); }
.editing-project-media > em,.editing-project-media > i { position:absolute; z-index:2; bottom:7px; padding:3px 6px; border-radius:4px; color:#fff; background:rgba(3,8,17,.72); font-size:8px; font-style:normal; backdrop-filter:blur(5px); }
.editing-project-media > em { top:7px; right:7px; bottom:auto; }.editing-project-media > i { left:7px; }
.editing-project-media > em.status-success { color:#d1fae5; }.editing-project-media > em.status-rendering { color:#cffafe; }.editing-project-media > em.status-failed { color:#fecaca; }
.editing-project-card footer { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:start; padding:9px 1px 0; }
.editing-project-card footer button { min-width:0; padding:0; border:0; color:inherit; background:transparent; cursor:pointer; text-align:left; }
.editing-project-card footer button:disabled { cursor:not-allowed; opacity:.62; }
.editing-project-card footer strong,.editing-project-card footer small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.editing-project-card footer strong { color:#e7eef7; font-size:11px; }.editing-project-card footer small { margin-top:4px; color:#687c91; font-size:9px; }
.editing-project-card footer > span { color:#75879b; font-size:12px; letter-spacing:.08em; }
.editing-media-modal[hidden] { display:none; }
.editing-media-modal { position:fixed; z-index:1200; inset:0; display:grid; place-items:center; padding:28px; background:rgba(1,5,12,.82); backdrop-filter:blur(10px); }
.editing-media-modal > div { width:min(480px,92vw); max-height:92vh; overflow:hidden; border:1px solid rgba(94,234,212,.28); border-radius:12px; background:#07111f; box-shadow:0 34px 90px rgba(0,0,0,.6); }
.editing-media-modal header { display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:0 14px; border-bottom:1px solid rgba(148,163,184,.13); }
.editing-media-modal header strong { color:#e7eef7; font-size:13px; }.editing-media-modal header button { min-height:30px; padding:0 11px; border:1px solid rgba(148,163,184,.2); border-radius:6px; color:#aab9c9; background:rgba(30,41,59,.7); cursor:pointer; }
.editing-media-modal video { display:block; width:100%; max-height:calc(92vh - 50px); background:#000; }

.editing-history-modal[hidden] { display:none; }
.editing-history-modal { position:fixed; z-index:1250; inset:0; display:grid; place-items:center; padding:28px; background:rgba(1,5,12,.84); backdrop-filter:blur(12px); }
.editing-history-modal > div { display:grid; grid-template-rows:auto minmax(0,1fr); width:min(980px,94vw); max-height:min(760px,90vh); overflow:hidden; border:1px solid rgba(94,234,212,.25); border-radius:14px; background:linear-gradient(145deg,#081422,#050c16); box-shadow:0 36px 100px rgba(0,0,0,.64); }
.editing-history-modal > div > header { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:82px; padding:15px 20px; border-bottom:1px solid rgba(148,163,184,.13); background:rgba(8,18,31,.92); }
.editing-history-modal header > div { display:grid; gap:3px; }.editing-history-modal header span { color:#5eead4; font-size:9px; font-weight:900; letter-spacing:.17em; }.editing-history-modal header strong { color:#f4f8fc; font-size:18px; }.editing-history-modal header small { color:#71869a; font-size:10px; }
.editing-history-modal header > button { min-height:34px; padding:0 13px; border:1px solid rgba(148,163,184,.2); border-radius:7px; color:#b9c8d7; background:rgba(30,41,59,.68); cursor:pointer; }
.editing-history-body { min-height:280px; overflow:auto; padding:18px; }
.editing-history-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.editing-history-item { display:grid; grid-template-columns:108px minmax(0,1fr); min-width:0; overflow:hidden; border:1px solid rgba(148,163,184,.14); border-radius:10px; background:rgba(12,24,40,.74); transition:border-color .18s,transform .18s; }.editing-history-item:hover { border-color:rgba(94,234,212,.42); transform:translateY(-1px); }
.editing-history-thumb { position:relative; min-height:124px; overflow:hidden; background:radial-gradient(circle at 38% 28%,rgba(45,212,191,.23),transparent 35%),linear-gradient(145deg,#0b2032,#07101c); }.editing-history-thumb img,.editing-history-thumb video { position:absolute; z-index:1; inset:0; width:100%; height:100%; object-fit:cover; }.editing-history-thumb video { opacity:0; transition:opacity .24s ease; }.editing-history-thumb.has-video-frame video { opacity:1; }.editing-history-thumb > span { display:grid; height:100%; place-content:center; gap:4px; padding:12px; color:#a5f3e8; text-align:center; }.editing-history-thumb > span b { font-size:11px; }.editing-history-thumb > span i { color:#618a8c; font-size:8px; font-style:normal; }.editing-history-thumb em { position:absolute; z-index:2; top:7px; left:7px; padding:3px 6px; border-radius:999px; color:#d9fffa; background:rgba(3,13,23,.78); font-size:8px; font-style:normal; backdrop-filter:blur(6px); }
.editing-history-info { display:grid; min-width:0; align-content:center; gap:7px; padding:12px; }.editing-history-info strong { display:-webkit-box; overflow:hidden; color:#e8f1f9; font-size:12px; line-height:1.55; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.editing-history-info small { overflow:hidden; color:#6f8295; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }.editing-history-info button { min-height:31px; border:1px solid rgba(94,234,212,.35); border-radius:6px; color:#ccfbf1; background:rgba(13,148,136,.14); cursor:pointer; font-size:10px; font-weight:800; }.editing-history-info button:hover { border-color:#5eead4; background:rgba(13,148,136,.24); }.editing-history-info button:disabled { cursor:wait; opacity:.65; }
.editing-history-loading,.editing-history-empty { display:grid; min-height:280px; place-content:center; justify-items:center; gap:9px; color:#71879b; text-align:center; }.editing-history-loading i { width:28px; height:28px; border:2px solid rgba(94,234,212,.18); border-top-color:#5eead4; border-radius:50%; animation:editing-history-spin .8s linear infinite; }.editing-history-loading strong,.editing-history-empty strong { color:#dbe7f2; }.editing-history-empty span { max-width:440px; font-size:10px; line-height:1.7; }.editing-history-empty.is-error strong { color:#fca5a5; }
@keyframes editing-history-spin { to { transform:rotate(360deg); } }

@media (max-width:1500px) { .editing-project-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }
@media (max-width:1180px) { .editing-project-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:1100px) { .editing-history-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

.editing-welcome {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
  min-height: 420px;
  overflow: hidden;
  border: 1px solid rgba(94, 234, 212, .22);
  border-radius: 10px;
  background: linear-gradient(118deg, rgba(7, 17, 29, .98), rgba(7, 24, 35, .94) 56%, rgba(12, 14, 28, .98));
  box-shadow: 0 24px 66px rgba(0, 0, 0, .25);
}

.editing-welcome::before {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(94, 234, 212, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(94, 234, 212, .035) 1px, transparent 1px);
  background-size: 36px 36px;
  content: "";
  mask-image: linear-gradient(90deg, #000, transparent 82%);
  pointer-events: none;
}

.editing-welcome-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  padding: 44px;
}

.editing-welcome-copy > span,
.editing-start-templates header span,
.editing-editor-head > div:first-child > span,
.editing-result > div > span {
  color: var(--edit-cyan);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
}

.editing-welcome-copy h1 {
  max-width: 620px;
  margin: 14px 0 16px;
  color: #fff;
  font-size: clamp(32px, 3.2vw, 54px);
  line-height: 1.12;
}

.editing-welcome-copy p {
  max-width: 650px;
  margin: 0;
  color: #a9b8c8;
  font-size: 15px;
  line-height: 1.9;
}

.editing-upload-primary {
  display: grid;
  width: min(420px, 100%);
  margin-top: 26px;
  padding: 15px 19px;
  border: 1px solid rgba(94, 234, 212, .44);
  border-radius: 9px;
  background: linear-gradient(110deg, rgba(20, 184, 166, .2), rgba(37, 99, 235, .2));
  cursor: pointer;
  box-shadow: inset 0 1px rgba(255, 255, 255, .07), 0 12px 34px rgba(6, 182, 212, .1);
}

.editing-upload-primary:hover { border-color: #5eead4; }
.editing-upload-primary input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.editing-upload-primary b { color: #fff; font-size: 16px; }
.editing-upload-primary small { margin-top: 5px; color: #9cc9c5; }
.editing-trust-row { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 18px; color: #7894a8; font-size: 11px; }

.editing-welcome-stage { position: relative; min-height: 420px; overflow: hidden; border-left: 1px solid rgba(148, 163, 184, .12); background: #050b13; }
.editing-welcome-stage > img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; object-position: 50% 38%; opacity: .78; }
.editing-welcome-stage::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 11, 19, .36), transparent 42%), linear-gradient(180deg, rgba(5, 11, 19, .15), rgba(5, 11, 19, .78)); content: ""; pointer-events: none; }
.editing-welcome-caption { position: absolute; z-index: 2; right: 28px; bottom: 28px; left: 28px; padding: 17px; border: 1px solid rgba(94, 234, 212, .34); border-radius: 8px; background: rgba(5, 14, 24, .72); backdrop-filter: blur(8px); }
.editing-welcome-caption small,.editing-welcome-caption strong,.editing-welcome-caption span { display: block; }.editing-welcome-caption small { color: #5eead4; font-size: 10px; }.editing-welcome-caption strong { margin-top: 7px; color: #fff; font-size: 26px; line-height: 1.2; text-shadow: 0 2px #000; }.editing-welcome-caption strong b { color: #fde047; }.editing-welcome-caption span { margin-top: 7px; color: #a9b8c8; font-size: 11px; }

.editing-start-templates,
.editing-recent {
  margin-top: 16px;
  padding: 22px;
  border: 1px solid var(--edit-line);
  border-radius: 9px;
  background: rgba(8, 15, 28, .62);
}
.editing-start-templates > header,
.editing-recent > header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.editing-start-templates h2 { margin: 7px 0 0; color: #fff; font-size: 22px; }
.editing-start-templates header p { max-width: 450px; margin: 0; color: var(--edit-muted); font-size: 12px; text-align: right; }

.edit-template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 176px)); gap: 20px 16px; align-items:start; }
.edit-template-card { display: block; min-width: 0; padding: 0; color: inherit; border: 0; background: transparent; cursor: pointer; text-align: center; }
.edit-template-card:hover .edit-template-preview { border-color: rgba(94, 234, 212, .62); transform:translateY(-2px); }
.edit-template-card.active .edit-template-preview { border-color: #60a5fa; box-shadow: 0 0 0 2px #2563eb,0 14px 34px rgba(0,0,0,.34); }
.edit-template-preview { position: relative; display: block; width:100%; aspect-ratio:9/16; overflow: hidden; border: 1px solid rgba(148, 163, 184, .2); border-radius: 8px; background: #020617; transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease; }
.edit-template-preview img,.edit-template-preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.edit-template-preview video { z-index: 1; opacity: 0; transition: opacity .18s ease; }
.edit-template-card.is-previewing .edit-template-preview video { opacity: 1; }
.edit-template-copy { display:block; min-width:0; padding-top:10px; }
.edit-template-copy strong { display:block; overflow:hidden; color:#dce7f3; font-size:13px; font-weight:750; text-overflow:ellipsis; white-space:nowrap; }

.editing-recent > header span { color: #e7eef7; font-size: 16px; font-weight: 800; }
.editing-recent > header small { color: var(--edit-muted); }
.editing-recent > div { display: grid; gap: 8px; }
.editing-project-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 13px; color: inherit; border: 1px solid rgba(148, 163, 184, .13); border-radius: 7px; background: rgba(15, 23, 42, .5); cursor: pointer; text-align: left; }
.editing-project-row:hover { border-color: rgba(94, 234, 212, .35); }
.editing-project-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 7px; color: #5eead4; background: rgba(20, 184, 166, .12); font-size: 10px; }
.editing-project-row strong,.editing-project-row small { display: block; }
.editing-project-row small { margin-top: 3px; color: #7f93a7; }
.editing-project-row em { padding: 5px 8px; border-radius: 999px; color: #94a3b8; background: rgba(148, 163, 184, .1); font-size: 10px; font-style: normal; }
.editing-project-row em.status-success { color: #6ee7b7; background: rgba(16, 185, 129, .12); }
.editing-project-row em.status-rendering { color: #67e8f9; background: rgba(6, 182, 212, .12); }
.editing-project-row em.status-failed { color: #fca5a5; background: rgba(239, 68, 68, .12); }

.editing-editor-head { position: sticky; z-index: 20; top: -16px; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 92px; margin: -16px -16px 14px; padding: 13px 20px; border-bottom: 1px solid rgba(94, 234, 212, .14); background: linear-gradient(90deg, rgba(5, 11, 20, .98), rgba(8, 20, 34, .97)); box-shadow: 0 10px 34px rgba(0,0,0,.26); backdrop-filter: blur(16px); }
.editing-editor-head > div:first-child strong,.editing-editor-head > div:first-child small { display: block; }
.editing-editor-head > div:first-child strong { max-width: 620px; margin-top: 3px; overflow: hidden; color: #fff; font-size: 19px; font-weight: 850; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.editing-editor-head > div:first-child small { margin-top: 3px; color: #7890a4; }
.editing-editor-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 12px; }
.editing-process-box { display:flex; align-items:center; gap:16px; padding:9px 10px 9px 14px; border:1px solid rgba(96,165,250,.23); border-radius:10px; background:linear-gradient(110deg,rgba(15,34,55,.88),rgba(9,20,35,.96)); box-shadow:inset 0 1px rgba(255,255,255,.025),0 12px 30px rgba(0,0,0,.18); }
.editing-process-options { display:flex; align-items:center; gap:12px; min-height:42px; padding-right:15px; border-right:1px solid rgba(148,163,184,.17); }
.editing-process-options > span { color:#7f94a8; font-size:10px; font-weight:800; white-space:nowrap; }
.editing-process-options label { display:flex; align-items:center; gap:7px; color:#d9e6f2; cursor:pointer; font-size:12px; }
.editing-process-options label:hover { color:#fff; }
.editing-process-options input { position:relative; width:18px; height:18px; margin:0; appearance:none; -webkit-appearance:none; border:1px solid rgba(148,163,184,.48); border-radius:5px; background:#071321; box-shadow:inset 0 1px 3px rgba(0,0,0,.42); cursor:pointer; transition:border-color .16s,background .16s,box-shadow .16s; }
.editing-process-options input:hover { border-color:rgba(94,234,212,.72); }
.editing-process-options input:checked { border-color:#38bdf8; background:linear-gradient(145deg,#2f7af1,#3158d8); box-shadow:0 0 0 3px rgba(59,130,246,.14),inset 0 1px rgba(255,255,255,.2); }
.editing-process-options input:checked::after { position:absolute; top:2px; left:5px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; content:""; transform:rotate(45deg); }
.editing-process-options input:focus-visible { outline:2px solid rgba(94,234,212,.8); outline-offset:2px; }
.editing-process-options input:disabled { cursor:wait; opacity:.58; }
.editing-process-options b { font-weight:800; white-space:nowrap; }
.editing-process-submit { display:grid; min-width:132px; gap:4px; }
.editing-process-submit .editing-export { min-height:46px; padding:0 25px; border-radius:8px; font-size:14px; letter-spacing:.02em; }
.editing-process-submit > small { color:#7f94a8; font-size:9px; text-align:center; white-space:nowrap; }
.editing-process-submit > small.is-exhausted { color:#fca5a5; }
.editing-process-submit .editing-export.is-upgrade { border-color:#facc15; color:#fff8cc; background:linear-gradient(115deg,#b45309,#7e22ce); box-shadow:0 10px 28px rgba(126,34,206,.28),inset 0 1px rgba(255,255,255,.16); }
.editing-quiet,.editing-export,.editing-download,.editing-task-overlay button,.editing-result a { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; padding: 0 16px; border: 1px solid rgba(148, 163, 184, .24); border-radius: 7px; color: #dbe7f3; background: rgba(30, 41, 59, .75); cursor: pointer; font-weight: 800; text-decoration: none; white-space: nowrap; }
.editing-export { border-color: #3b82f6; color: #fff; background: linear-gradient(115deg, #3677f4, #2455dc 72%); box-shadow: 0 10px 28px rgba(37, 99, 235, .3), inset 0 1px rgba(255,255,255,.16); transition:transform .18s,box-shadow .18s,filter .18s; }
.editing-export:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.08); box-shadow:0 14px 34px rgba(37,99,235,.38),inset 0 1px rgba(255,255,255,.2); }
.editing-download { border-color: rgba(45, 212, 191, .46); color: #dffcf7; background: rgba(13, 148, 136, .16); }
.editing-download:hover { border-color: #5eead4; background: rgba(13, 148, 136, .26); }
.editing-export:disabled { cursor: wait; opacity: .62; }
.editing-quota-mask { position:fixed; z-index:1500; inset:0; display:grid; place-items:center; padding:24px; background:rgba(1,5,12,.82); backdrop-filter:blur(12px); }
.editing-quota-dialog { position:relative; width:min(430px,92vw); padding:30px; overflow:hidden; border:1px solid rgba(250,204,21,.34); border-radius:8px; text-align:center; background:radial-gradient(circle at 50% 0%,rgba(126,34,206,.25),transparent 42%),linear-gradient(145deg,#0c1727,#07101c); box-shadow:0 34px 90px rgba(0,0,0,.62); }
.editing-quota-dialog::before { position:absolute; top:0; right:0; left:0; height:3px; background:linear-gradient(90deg,#facc15,#5eead4,#60a5fa); content:""; }
.editing-quota-close { position:absolute; top:12px; right:12px; width:34px; height:34px; border:1px solid rgba(148,163,184,.2); border-radius:50%; color:#aebed0; background:rgba(30,41,59,.68); cursor:pointer; }
.editing-quota-icon { display:grid; width:62px; height:62px; place-items:center; margin:0 auto 13px; border:1px solid rgba(250,204,21,.48); border-radius:50%; color:#fff2a8; background:linear-gradient(145deg,rgba(180,83,9,.72),rgba(126,34,206,.72)); box-shadow:0 14px 34px rgba(126,34,206,.24); font-size:15px; font-weight:950; }
.editing-quota-dialog > small { color:#5eead4; font-size:9px; font-weight:900; letter-spacing:.16em; }
.editing-quota-dialog h2 { margin:8px 0 9px; color:#fff; font-size:23px; letter-spacing:0; }
.editing-quota-dialog p { margin:0; color:#98abc0; font-size:12px; line-height:1.8; }
.editing-quota-dialog > div { display:grid; grid-template-columns:1fr 1.35fr; gap:10px; margin-top:22px; }
.editing-quota-dialog > div button { min-height:44px; border-radius:7px; cursor:pointer; font-weight:850; }
.editing-quota-later { border:1px solid rgba(148,163,184,.23); color:#becbd9; background:rgba(30,41,59,.7); }
.editing-quota-upgrade { border:1px solid #facc15; color:#241500; background:linear-gradient(100deg,#fde047,#f59e0b); box-shadow:0 12px 28px rgba(245,158,11,.2); }
.editing-task-error { display:flex; justify-content:space-between; gap:18px; align-items:center; margin:0 0 12px; padding:13px 16px; border:1px solid rgba(248,113,113,.34); border-radius:8px; color:#fecaca; background:rgba(127,29,29,.18); }
.editing-task-error span,.editing-task-error strong,.editing-task-error small { display:block; }.editing-task-error span { color:#fca5a5; font-size:10px; font-weight:900; letter-spacing:.08em; }.editing-task-error strong { margin-top:4px; color:#fee2e2; font-size:13px; }.editing-task-error small { margin-top:3px; color:#d99a9a; font-size:9px; }
.editing-task-error button { min-height:36px; flex:0 0 auto; padding:0 14px; border:1px solid rgba(248,113,113,.45); border-radius:7px; color:#fff; background:rgba(220,38,38,.72); cursor:pointer; font-weight:800; }

.editing-workspace { display: grid; grid-template-columns: minmax(410px, .88fr) minmax(560px, 1.12fr); gap: 14px; min-height: 680px; }
.editing-stage-panel,.editing-control-panel,.editing-timeline,.editing-result { border: 1px solid var(--edit-line); border-radius: 9px; background: var(--edit-panel); }
.editing-stage-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; padding: 14px; background: radial-gradient(circle at 50% 42%, rgba(20,184,166,.08), transparent 44%), linear-gradient(155deg,rgba(11,22,37,.98),rgba(6,13,24,.96)); }
.editing-stage-toolbar { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "meta switch" "hint hint"; gap: 8px 14px; align-items: center; padding: 0 2px 11px; color: #91a4b8; font-size: 11px; }
.editing-stage-toolbar > span { grid-area: meta; white-space: nowrap; }
.editing-stage-toolbar b { margin-left: 5px; color: #5eead4; }
.editing-stage-toolbar > small { grid-area: hint; min-width: 0; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.editing-stage-view-switch { grid-area: switch; justify-self: end; display: inline-flex; min-width: 0; padding: 3px; border: 1px solid rgba(148, 163, 184, .18); border-radius: 7px; background: rgba(3, 8, 17, .72); }
.editing-stage-view-switch button { min-height: 30px; padding: 0 11px; border: 0; border-radius: 5px; color: #71869b; background: transparent; cursor: pointer; font-size: 10px; font-weight: 800; line-height: 1; white-space: nowrap; }
.editing-stage-view-switch button.active { color: #dffcf7; background: rgba(20, 184, 166, .2); box-shadow: inset 0 0 0 1px rgba(94, 234, 212, .24); }
.editing-stage-view-switch .editing-refresh-preview { margin-left: 4px; color: #6ee7d8; box-shadow: inset 1px 0 rgba(148,163,184,.16); }
.editing-stage-view-switch .editing-refresh-preview.is-dirty { color: #07111f; background: linear-gradient(110deg,#5eead4,#60a5fa); }
.editing-stage-view-switch .editing-refresh-preview:disabled { cursor: wait; opacity: .56; }
.editing-phone-stage { position: relative; container-type: inline-size; align-self: center; width: min(374px, 82%); aspect-ratio: 9 / 16; max-height: 610px; margin: 0 auto; overflow: hidden; border: 1px solid rgba(148, 163, 184, .32); border-radius: 9px; background: #000; box-shadow: 0 28px 70px rgba(0, 0, 0, .5), 0 0 0 6px rgba(3,8,17,.52); }
.editing-stage-guide { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:12px; padding:9px 11px; border:1px solid rgba(94,234,212,.12); border-radius:7px; color:#7890a5; background:rgba(3,8,17,.48); font-size:10px; }
.editing-stage-guide > span { display:flex; align-items:center; flex:0 0 auto; color:#a9bdce; }.editing-stage-guide > span i { width:7px; height:7px; margin-right:7px; border-radius:50%; background:#2dd4bf; box-shadow:0 0 10px rgba(45,212,191,.72); }.editing-stage-guide b { margin-left:4px; color:#e8fffb; }.editing-stage-guide small { overflow:hidden; text-align:right; text-overflow:ellipsis; white-space:nowrap; }
.editing-phone-stage video { width: 100%; height: 100%; object-fit: contain; background: #000; transform: scale(var(--preview-punch-scale, 1)); transform-origin: center 42%; will-change: transform; }
.editing-scene-canvas { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.editing-phone-stage.is-unified-canvas .editing-title-layer > strong,
.editing-phone-stage.is-unified-canvas .editing-title-layer > span,
.editing-phone-stage.is-unified-canvas .editing-subtitle-layer > strong,
.editing-phone-stage.is-unified-canvas .editing-subtitle-layer > small,
.editing-phone-stage.is-unified-canvas .editing-scene-block > strong,
.editing-phone-stage.is-unified-canvas .editing-scene-block > small,
.editing-phone-stage.is-unified-canvas .editing-scene-keyword > strong { opacity: 0; }
.editing-phone-stage > .libassjs-canvas-parent { position: absolute !important; z-index: 4; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.editing-phone-stage > .libassjs-canvas-parent > .libassjs-canvas { pointer-events: none !important; }
.editing-phone-stage.is-libass-ready .editing-title-layer > strong,
.editing-phone-stage.is-libass-ready .editing-title-layer > span,
.editing-phone-stage.is-libass-ready .editing-subtitle-layer > strong,
.editing-phone-stage.is-libass-ready .editing-subtitle-layer > small,
.editing-phone-stage.is-libass-ready .editing-scene-block > strong,
.editing-phone-stage.is-libass-ready .editing-scene-block > small,
.editing-phone-stage.is-libass-ready .editing-scene-keyword > strong { opacity: 0; }
.editing-phone-stage.is-authoritative-preview .editing-title-layer > strong,
.editing-phone-stage.is-authoritative-preview .editing-title-layer > span,
.editing-phone-stage.is-authoritative-preview .editing-subtitle-layer > strong,
.editing-phone-stage.is-authoritative-preview .editing-subtitle-layer > small,
.editing-phone-stage.is-authoritative-preview .editing-scene-block > strong,
.editing-phone-stage.is-authoritative-preview .editing-scene-block > small,
.editing-phone-stage.is-authoritative-preview .editing-scene-keyword > strong { opacity: 0; }
.editing-no-video { display: grid; height: 100%; place-items: center; color: #64748b; }
.editing-title-layer,.editing-subtitle-layer { position: absolute; z-index: 5; transform: translate(-50%, -50%) scale(var(--layer-scale, 1)); transform-origin: center; border: 1px solid transparent; cursor: move; text-align: center; touch-action: none; user-select: none; }
.editing-title-layer { width: 88%; padding: 7px 10px; color: var(--title-color); line-height: 1.02; }
.editing-title-layer > strong { display: block; color: var(--title-color); font-family: var(--title-font), "FZShuTi", "方正舒体", serif; font-size: var(--title-size, 9.26cqw); font-weight: 500; letter-spacing: -.055em; text-shadow: .28cqw .37cqw .09cqw rgba(24,20,15,.66), 0 .74cqw 1.38cqw rgba(0,0,0,.3); -webkit-text-stroke: .04cqw rgba(255,255,255,.12); }
.editing-title-layer > span { display: none; margin-top: -.46cqw; color: var(--title-accent); font-family: var(--title-secondary-font), "SimHei", sans-serif; font-size: var(--title-secondary-size, 6.3cqw); font-weight: 800; letter-spacing: .015em; text-shadow: .09cqw .19cqw 0 #3d3310, 0 .56cqw .93cqw rgba(0,0,0,.48); -webkit-text-stroke: .06cqw #fff1a1; }
.editing-subtitle-layer { width: 78%; padding: 9px 14px 8px; color: #fff; font-family: "XiaoxinCaption", sans-serif; font-size: clamp(19px, 2vw, 28px); font-weight: 900; line-height: 1.16; text-shadow: -1px -1px #000, 1px 1px #000, 0 3px 8px rgba(0,0,0,.72); }
.editing-subtitle-layer > strong { display: block; }
.editing-subtitle-layer > small { display: block; margin-top: 3px; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: .54em; font-weight: 700; letter-spacing: .01em; }
.editing-subtitle-layer.is-storyboard-ready { display: none; }
.editing-subtitle-layer b { display: inline-block; color: #fde047; font-size: 1.16em; text-shadow: -1px -1px #000, 1px 1px #000, 0 0 10px rgba(245, 158, 11, .58); transform: translateY(-1px); animation: editing-word-pulse 220ms cubic-bezier(.2,1.4,.35,1) both; }
.editing-visual-scenes { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.editing-scene-block { position: absolute; color: var(--scene-color, #fff); font-family: var(--scene-font), "XiaoxinCaption", sans-serif; font-weight: 900; line-height: 1.08; text-shadow: -.09cqw -.09cqw var(--scene-stroke, #080808), .09cqw .09cqw var(--scene-stroke, #080808), 0 .37cqw .83cqw rgba(0,0,0,.78); -webkit-text-stroke: var(--scene-stroke-width, .28cqw) var(--scene-stroke, #000); cursor: move; pointer-events: auto; touch-action: none; user-select: none; }
.editing-scene-block > strong { display: block; font-size: var(--scene-size, 30px); }
.editing-scene-block > strong b { display: inline-block; color: var(--scene-accent, #fde047); font-size: 1.12em; text-shadow: -.09cqw -.09cqw #181300, .19cqw .19cqw #181300, 0 0 .93cqw rgba(253,224,71,.4); }
.editing-scene-block > small { display: block; margin-top: .28cqw; color: #fff; font-family: var(--translation-font), Georgia, "Times New Roman", serif; font-size: var(--translation-size, 2.6cqw); font-weight: 700; line-height: 1.05; letter-spacing: .01em; }
.editing-scene-block.is-selected { outline: 2px solid #2f80ff; outline-offset: 5px; background: rgba(7,13,24,.12); }
.editing-scene-block.animation-rise { animation: editing-scene-rise 280ms cubic-bezier(.16,1,.3,1) both; }
.editing-scene-block.animation-slide_left { animation: editing-scene-left 270ms cubic-bezier(.16,1,.3,1) both; }
.editing-scene-block.animation-slide_right { animation: editing-scene-right 270ms cubic-bezier(.16,1,.3,1) both; }
.editing-scene-block.animation-snap { animation: editing-scene-snap 250ms cubic-bezier(.18,1.55,.32,1) both; }
.editing-scene-block.animation-soft_pop { animation: editing-caption-pop-in 280ms cubic-bezier(.18,1.55,.32,1) both; }
.editing-scene-keyword { position: absolute; z-index: 7; width: max-content; max-width: 94%; min-width: 20%; padding: .7cqw 1.1cqw; transform: translate(-50%,-50%); color: rgba(247,243,232,var(--keyword-opacity,.88)); font-family: var(--keyword-font,"XiaoxinBrush"),"XiaoxinBrush",sans-serif; font-size: var(--keyword-size,31.3cqw); font-weight: 500; line-height: .90; letter-spacing:-.02em; text-align: center; text-shadow: .5cqw .72cqw .28cqw rgba(0,0,0,.68),0 1.5cqw 2.6cqw rgba(0,0,0,.46); white-space: nowrap; cursor: move; pointer-events: auto; touch-action: none; user-select: none; }
.editing-scene-keyword.keyword-hero_ghost { animation: editing-keyword-ghost 620ms cubic-bezier(.16,1,.3,1) both; }
.editing-scene-keyword.keyword-brush_impact { animation: editing-scene-impact 300ms cubic-bezier(.18,1.55,.32,1) both; }
.editing-scene-keyword.keyword-clean_pop { animation: editing-caption-pop-in 360ms cubic-bezier(.16,1,.3,1) both; }
.editing-scene-keyword.is-selected { outline: 2px solid #2f80ff; outline-offset: 5px; background: rgba(7,13,24,.12); }
@keyframes editing-scene-rise { from { opacity:0; margin-top:24px; filter:blur(2px) } to { opacity:1; margin-top:0; filter:blur(0) } }
@keyframes editing-scene-left { from { opacity:0; margin-left:-30px } to { opacity:1; margin-left:0 } }
@keyframes editing-scene-right { from { opacity:0; margin-left:30px } to { opacity:1; margin-left:0 } }
@keyframes editing-scene-snap { 0% { opacity:0; scale:.45 } 68% { opacity:1; scale:1.12 } 100% { scale:1 } }
@keyframes editing-scene-impact { 0% { opacity:0; scale:.35; filter:blur(3px) } 68% { opacity:1; scale:1.12; filter:blur(0) } 100% { scale:1 } }
@keyframes editing-keyword-ghost { 0% { opacity:0; scale:.76; filter:blur(9px) } 54% { opacity:.72; filter:blur(2.5px) } 100% { opacity:1; scale:1; filter:blur(0) } }
.editing-title-layer.animation-soft_pop { animation: editing-title-soft-pop 360ms cubic-bezier(.16,1,.3,1) 120ms both; }
.editing-title-layer.animation-bounce { animation: editing-title-brush-in 420ms cubic-bezier(.18,1.55,.32,1) both; }
.editing-subtitle-layer.is-cue-entering { animation: editing-caption-pop-in 280ms cubic-bezier(.18,1.55,.32,1) both; }
.editing-subtitle-layer.is-cue-leaving { animation: editing-caption-pop-out 210ms ease-in both; }

@keyframes editing-title-brush-in {
  0% { opacity: 0; transform: translate(-50%, -45%) scale(calc(var(--layer-scale, 1) * .64)) rotate(-2deg); filter: blur(2px); }
  62% { opacity: 1; transform: translate(-50%, -50%) scale(calc(var(--layer-scale, 1) * 1.12)) rotate(.5deg); filter: blur(0); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(var(--layer-scale, 1)) rotate(0); }
}
@keyframes editing-caption-pop-in {
  0% { opacity: 0; transform: translate(-50%, -46%) scale(calc(var(--layer-scale, 1) * .68)); filter: blur(1.5px); }
  64% { opacity: 1; transform: translate(-50%, -50%) scale(calc(var(--layer-scale, 1) * 1.14)); filter: blur(0); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(var(--layer-scale, 1)); }
}
@keyframes editing-caption-pop-out {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(var(--layer-scale, 1)); }
  100% { opacity: 0; transform: translate(-50%, -54%) scale(calc(var(--layer-scale, 1) * .82)); filter: blur(1px); }
}
@keyframes editing-word-pulse {
  0% { transform: translateY(-1px) scale(.72); filter: blur(1px); }
  68% { transform: translateY(-2px) scale(1.16); filter: blur(0); }
  100% { transform: translateY(-1px) scale(1); }
}
.editing-title-layer.is-selected,.editing-subtitle-layer.is-selected { border-color: #2f80ff; background: rgba(7, 13, 24, .12); box-shadow: inset 0 0 0 1px rgba(47, 128, 255, .14); }
.editing-title-layer.is-selected::before,.editing-subtitle-layer.is-selected::before { position: absolute; top: -5px; left: -5px; width: 8px; height: 8px; border: 2px solid #2f80ff; border-radius: 50%; background: #fff; content: ""; }
.editing-layer-resize { position: absolute; right: -6px; bottom: -6px; width: 13px; height: 13px; min-height: 0; padding: 0; border: 2px solid #2f80ff; border-radius: 50%; background: #fff; cursor: nwse-resize; opacity: 0; }
.is-selected > .editing-layer-resize { opacity: 1; }
.editing-safe-line { position: absolute; z-index: 3; right: 5%; left: 5%; height: 1px; border-top: 1px dashed rgba(94, 234, 212, .22); pointer-events: none; }
.editing-safe-line.top { top: 8%; }.editing-safe-line.bottom { bottom: 8%; }

.editing-control-panel { min-width: 0; overflow: hidden; background:linear-gradient(160deg,rgba(10,20,34,.98),rgba(6,13,24,.96)); }
.editing-control-panel > nav { display: grid; grid-template-columns: repeat(3, 1fr); padding: 0 18px; border-bottom: 1px solid var(--edit-line); }
.editing-control-panel > nav button { position: relative; min-height: 60px; border: 0; color: #75889d; background: transparent; cursor: pointer; font-size: 14px; font-weight: 850; letter-spacing:.02em; }
.editing-control-panel > nav button.active { color: #fff; }
.editing-control-panel > nav button.active::after { position: absolute; right: 22%; bottom: 0; left: 22%; height: 2px; background: linear-gradient(90deg, #2dd4bf, #60a5fa); content: ""; }
.editing-control-body { max-height: 612px; padding: 18px; overflow: auto; scrollbar-color:#2b4a61 transparent; scrollbar-width:thin; }
.edit-template-grid.compact { grid-template-columns: repeat(4,minmax(0,1fr)); gap:18px 14px; }
.editing-switches,.editing-sound-panel { display: grid; gap: 11px; }
.editing-panel-intro { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 14px; align-items:end; padding:2px 2px 12px; border-bottom:1px solid rgba(148,163,184,.11); }.editing-panel-intro > span { grid-column:1; color:#5eead4; font-size:9px; font-weight:900; letter-spacing:.16em; }.editing-panel-intro > strong { grid-column:1; color:#f8fafc; font-size:18px; letter-spacing:-.02em; }.editing-panel-intro > small { grid-column:2; grid-row:1 / span 2; align-self:center; max-width:260px; color:#71869b; font-size:10px; text-align:right; line-height:1.55; }
.editing-switches label,.editing-sound-panel > label:not(.editing-volume) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid rgba(148, 163, 184, .13); border-radius: 8px; background: rgba(15, 23, 42, .52); cursor: pointer; transition:border-color .18s,background .18s; }
.editing-sound-card:hover { border-color:rgba(94,234,212,.32)!important; background:rgba(16,36,49,.62)!important; }.editing-sound-card.is-featured { border-color:rgba(45,212,191,.3)!important; background:linear-gradient(110deg,rgba(13,70,72,.28),rgba(15,23,42,.66))!important; }.editing-sound-card > i { color:#6ee7d5; font-size:9px; font-style:normal; }.editing-sound-card.is-preparing > i { color:#65798e; }
.editing-switches input,.editing-sound-panel input[type="checkbox"] { width: 19px; height: 19px; accent-color: #14b8a6; }
.editing-switches b,.editing-switches small,.editing-sound-panel b,.editing-sound-panel small { display: block; }
.editing-switches small,.editing-sound-panel small { margin-top: 4px; color: #7b8ea3; font-size: 10px; }
.editing-sound-panel .is-preparing { cursor: default; opacity: .72; }
.editing-sound-panel .is-preparing input { cursor: not-allowed; }
.editing-sound-panel .is-preparing em { display: inline-flex; margin-left: 7px; padding: 2px 6px; border-radius: 999px; color: #93c5fd; background: rgba(37, 99, 235, .16); font-size: 9px; font-style: normal; }
.editing-sfx-pack { padding:15px; border:1px solid rgba(96,165,250,.21); border-radius:8px; background:linear-gradient(135deg,rgba(30,58,138,.14),rgba(8,18,31,.74)); }.editing-sfx-pack > header { display:flex; justify-content:space-between; gap:18px; align-items:start; }.editing-sfx-pack header span,.editing-sfx-pack header strong { display:block; }.editing-sfx-pack header span { color:#7991a7; font-size:9px; }.editing-sfx-pack header strong { margin-top:4px; color:#e8f4ff; font-size:14px; }.editing-sfx-pack header > em { padding:4px 7px; border-radius:999px; color:#93c5fd; background:rgba(37,99,235,.14); font-size:8px; font-style:normal; white-space:nowrap; }.editing-sfx-pack > div { display:flex; flex-wrap:wrap; gap:8px; margin-top:13px; }.editing-sfx-pack > div button { min-height:34px; padding:0 11px; border:1px solid rgba(148,163,184,.2); border-radius:6px; color:#c8d8e7; background:#122033; cursor:pointer; font-size:10px; font-weight:800; }.editing-sfx-pack > div button:hover { color:#fff; border-color:rgba(94,234,212,.48); }.editing-sfx-volume { display:grid; gap:8px; margin-top:14px; }.editing-sfx-volume span { display:flex; justify-content:space-between; color:#8ea3b7; font-size:10px; }.editing-sfx-volume b { color:#5eead4; }.editing-sfx-volume input { width:100%; accent-color:#14b8a6; }.editing-sfx-pack > p { margin:11px 0 0; color:#6f8499; font-size:9px; line-height:1.6; }
.editing-sfx-pack > .editing-audio-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }.editing-sfx-pack .editing-audio-choice { display:flex; min-height:56px; align-items:center; justify-content:space-between; gap:8px; padding:9px 10px; text-align:left; }.editing-audio-choice span,.editing-audio-choice b,.editing-audio-choice small { display:block; }.editing-audio-choice small { margin-top:2px; color:#71869b; font-weight:500; }.editing-audio-choice em { color:#7dd3fc; font-size:8px; font-style:normal; }.editing-audio-choice.active { color:#ecfeff!important; border-color:rgba(45,212,191,.62)!important; background:linear-gradient(135deg,rgba(13,148,136,.2),rgba(15,23,42,.9))!important; box-shadow:0 0 0 2px rgba(20,184,166,.07) inset; }
.editing-music-pack { padding:15px; border:1px solid rgba(45,212,191,.18); border-radius:8px; background:linear-gradient(145deg,rgba(6,78,59,.13),rgba(8,18,31,.74)); }.editing-music-pack > header { display:flex; align-items:center; justify-content:space-between; gap:12px; }.editing-music-pack > header span { color:#d9fff7; font-size:13px; font-weight:900; }.editing-music-pack > header small { margin:0; color:#6f879b; font-size:9px; }.editing-music-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:12px; }.editing-music-choice { display:flex; min-width:0; min-height:52px; align-items:center; justify-content:space-between; gap:9px; padding:8px 9px; border:1px solid rgba(148,163,184,.16); border-radius:7px; color:#c7d7e6; background:#0e1a2a; cursor:pointer; text-align:left; }.editing-music-choice:hover,.editing-music-choice.active { border-color:rgba(94,234,212,.48); }.editing-music-choice.active { background:rgba(13,148,136,.14); box-shadow:0 0 0 2px rgba(20,184,166,.06) inset; }.editing-music-choice span,.editing-music-choice b,.editing-music-choice small { display:block; min-width:0; }.editing-music-choice b { overflow:hidden; color:#edf9ff; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.editing-music-choice small { margin-top:3px; color:#6f8499; font-size:8px; }.editing-music-choice > i { display:grid; width:26px; height:26px; flex:0 0 26px; place-items:center; border-radius:50%; color:#6ee7d5; background:rgba(20,184,166,.12); font-size:9px; font-style:normal; }.editing-music-pack > p { margin:11px 0 0; color:#6f8499; font-size:9px; line-height:1.6; }
.editing-text-panel { display: grid; gap: 14px; }
.editing-title-inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.editing-text-panel label { display: grid; gap: 7px; color: #dbe7f3; font-size: 12px; font-weight: 800; }
.editing-text-panel label span { display: flex; justify-content: space-between; }.editing-text-panel label small { color: #71869b; font-weight: 400; }
.editing-text-panel input,.editing-text-panel textarea { width: 100%; padding: 11px 12px; color: #edf6ff; border: 1px solid rgba(148, 163, 184, .2); border-radius: 7px; outline: 0; background: rgba(3, 8, 17, .72); font: 500 13px/1.65 Inter,"PingFang SC","Microsoft YaHei",sans-serif; resize: vertical; }
.editing-text-panel input:focus,.editing-text-panel textarea:focus { border-color: rgba(94, 234, 212, .6); box-shadow: 0 0 0 3px rgba(20, 184, 166, .08); }
.editing-text-panel p { margin: 0; padding: 10px 12px; color: #7890a5; border-left: 2px solid #14b8a6; background: rgba(20, 184, 166, .06); font-size: 11px; line-height: 1.7; }
.editing-cue-list { display: grid; gap: 7px; max-height: 410px; padding-right: 4px; overflow: auto; }
.editing-cue-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) 48px; gap: 8px; align-items: center; padding: 9px; border: 1px solid rgba(148, 163, 184, .13); border-radius: 7px; background: rgba(4, 10, 20, .58); transition:border-color .16s,transform .16s; }.editing-cue-row:hover { border-color:rgba(148,163,184,.28); transform:translateX(1px); }
.editing-cue-fields { display: grid; gap: 5px; min-width: 0; }.editing-cue-fields > input { min-width: 0; padding: 8px 9px; }.editing-cue-row > button { min-height: 34px; border: 1px solid rgba(148, 163, 184, .18); border-radius: 6px; color: #a7b6c7; background: #172235; cursor: pointer; }.editing-cue-row > button:hover { color: #fff; border-color: rgba(94, 234, 212, .44); }.editing-cue-row .editing-cue-time { padding: 0 4px; color: #6f879c; border-color: transparent; background: transparent; font-size: 9px; font-variant-numeric: tabular-nums; }.editing-cue-row .editing-cue-time:hover { color: #5eead4; background: rgba(20, 184, 166, .08); }.editing-cue-row.is-current { border-color: rgba(94, 234, 212, .48); background: rgba(20, 184, 166, .08); }.editing-cue-row.is-current .editing-cue-time { color: #5eead4; }.editing-cue-row.is-deleted { opacity: .58; }.editing-cue-row.is-deleted input { text-decoration: line-through; }.editing-cue-row.is-deleted > button:last-child { color: #6ee7b7; }
.editing-transcript-empty { padding: 30px 20px; border: 1px dashed rgba(94, 234, 212, .28); border-radius: 8px; background: rgba(20, 184, 166, .04); text-align: center; }.editing-transcript-empty strong { color: #dffcf7; }.editing-transcript-empty p { margin: 7px auto 0; padding: 0; max-width: 420px; border: 0; background: none; }
.editing-volume { display: grid; gap: 9px; margin-top: 8px; padding: 13px; border-top: 1px solid var(--edit-line); color: #9fb0c3; }
.editing-volume span { display: flex; justify-content: space-between; }.editing-volume b { color: #5eead4; }.editing-volume input { width: 100%; accent-color: #14b8a6; }

.editing-timeline { margin-top: 14px; padding: 13px; overflow: hidden; }
.editing-timeline > header { display: flex; align-items: center; justify-content: space-between; color: #8195aa; font-size: 11px; }
.editing-timeline > header div { display: flex; align-items: center; gap: 9px; }.editing-timeline > header button { display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 6px; color: #fff; background: #18263a; cursor: pointer; }.editing-timeline > header strong { color: #cbd5e1; font-size: 11px; }
.editing-timeline-zoom { display: flex; align-items: center; gap: 6px; }.editing-timeline > header .editing-timeline-zoom button { width: 26px; height: 26px; color: #b9c8d6; }.editing-timeline-zoom input { width: 124px; accent-color: #14b8a6; }.editing-timeline-zoom span { min-width: 34px; color: #5eead4; font-variant-numeric: tabular-nums; }
.editing-timeline-scroll { margin-top: 8px; padding-bottom: 7px; overflow-x: auto; overflow-y: hidden; scrollbar-color: #36516b #0a1421; scrollbar-width: thin; }
.editing-timeline-content { position: relative; min-width: 100%; padding-top: 24px; cursor: ew-resize; touch-action: none; user-select: none; }
.editing-ruler { position: absolute; top: 0; right: 0; left: 0; height: 20px; color: #60758a; font-size: 9px; pointer-events: none; }.editing-ruler::after { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: rgba(148,163,184,.12); content: ""; }.editing-ruler i { position: absolute; bottom: 4px; font-style: normal; transform: translateX(-50%); }.editing-ruler i:first-child { transform: none; }.editing-ruler i:last-child { transform: translateX(-100%); }
.editing-video-track { position: relative; display: grid; grid-template-columns: repeat(10, 1fr); height: 48px; overflow: hidden; border: 1px solid rgba(45, 212, 191, .3); border-radius: 6px; background: #0d1725; }.editing-video-track > i { border-right: 1px solid rgba(5,11,20,.5); background: linear-gradient(145deg,#22364c,#0f766e 52%,#0f172a); opacity: .76; }.editing-video-track > b { position: absolute; z-index: 2; bottom: 5px; left: 9px; max-width: 75%; overflow: hidden; color: #d8eef0; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.editing-caption-track { position: relative; height: 44px; margin-top: 7px; overflow: hidden; border: 1px solid rgba(245,158,11,.2); border-radius: 6px; background: rgba(75,50,8,.22); }.editing-caption-track > em { position: absolute; z-index: 2; top: 4px; left: 6px; padding: 2px 5px; border-radius: 4px; color: #fef3c7; background: rgba(15,23,42,.72); font-size: 8px; font-style: normal; pointer-events: none; }
.editing-playhead { position: absolute; z-index: 8; top: 16px; bottom: -4px; left: 0; width: 2px; background: #f8fafc; box-shadow: 0 0 0 1px rgba(0,0,0,.35),0 0 10px rgba(255,255,255,.4); pointer-events: none; transform: translateX(-1px); }.editing-playhead em { position: absolute; top: -1px; left: 50%; width: 13px; height: 13px; border: 2px solid #fff; border-radius: 4px 4px 7px 7px; background: #14b8a6; transform: translateX(-50%); }
.editing-caption-segment { position: absolute; z-index: 3; top: 7px; bottom: 7px; min-width: 5px; padding: 0 7px; overflow: hidden; border: 1px solid rgba(253,224,71,.56); border-radius: 4px; color: #1c1602; background: linear-gradient(180deg,#fde68a,#facc15); cursor: pointer; box-shadow: 0 1px 0 rgba(255,255,255,.32) inset; text-align: left; white-space: nowrap; }.editing-caption-segment span { display: block; overflow: hidden; font-size: 10px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }.editing-caption-segment:hover { z-index: 5; border-color: #fff3a3; background: #fde047; transform: translateY(-1px); }
.editing-timeline-hint { display: block; margin-top: 9px; color: #60758a; font-size: 9px; text-align: right; }

.editing-task-overlay { position: fixed; z-index: 1100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(2, 6, 14, .76); backdrop-filter: blur(9px); }
.editing-task-overlay > div { width: min(470px, 100%); padding: 26px; border: 1px solid rgba(94, 234, 212, .3); border-radius: 10px; background: linear-gradient(145deg, #101b2e, #07111f); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.editing-task-overlay span,.editing-task-overlay strong { display:block; }.editing-task-overlay span { color:#dffcf7; font-size:18px; font-weight:850; letter-spacing:.02em; }.editing-task-overlay strong { margin-top:10px; color:#67e8f9; font-size:28px; font-variant-numeric:tabular-nums; }.editing-task-overlay i { display:block; height:8px; margin-top:20px; overflow:hidden; border-radius:999px; background:rgba(148,163,184,.14); }.editing-task-overlay i b { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#14b8a6,#60a5fa,#f59e0b); transition:width .25s; }.editing-task-overlay button { margin-top:18px; }

.editing-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; margin-top: 14px; padding: 18px; border-color: rgba(52, 211, 153, .28); background: linear-gradient(115deg, rgba(6, 78, 59, .2), rgba(8, 15, 28, .8)); }.editing-result > div strong { display: block; margin-top: 5px; color: #fff; font-size: 18px; }.editing-result > div p { margin: 7px 0 0; color: #8fa9a4; }.editing-result a { display: inline-grid; place-items: center; text-decoration: none; }

@media (max-width: 1180px) {
  .editing-welcome { grid-template-columns: minmax(0, 1fr) 390px; }
  .editing-workspace { grid-template-columns: minmax(330px, .85fr) minmax(440px, 1.15fr); }
  .edit-template-grid { grid-template-columns: repeat(auto-fill,minmax(140px,168px)); }
  .edit-template-grid.compact { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .editing-welcome { grid-template-columns: 1fr; }.editing-welcome-stage { min-height: 390px; border-top: 1px solid var(--edit-line); border-left: 0; }
  .editing-editor-head { align-items:flex-start; }.editing-editor-actions { align-items:flex-end; }.editing-process-box { align-items:stretch; }.editing-process-options { border-right:0; border-bottom:1px solid rgba(148,163,184,.17); padding:0 0 8px; }.editing-process-box { display:grid; }
  .editing-workspace { grid-template-columns: 1fr; }.editing-stage-panel { min-height: 620px; }.editing-control-body { max-height: none; }
  .editing-result { grid-template-columns: 1fr; }.editing-result video { width: 100%; max-height: 360px; }.editing-result a { min-height: 42px; }
}

@media (max-width: 640px) {
  .video-editing-app { min-height: auto; }
  .editing-welcome-copy { padding: 28px 20px; }.editing-welcome-copy h1 { font-size: 34px; }.editing-trust-row { display: grid; gap: 7px; }
  .editing-welcome-stage,.editing-welcome-stage > img { min-height: 350px; }.editing-welcome-caption { right: 15px; bottom: 15px; left: 15px; }.editing-welcome-caption strong { font-size: 23px; }
  .editing-start-templates,.editing-recent { padding: 15px; }.editing-start-templates > header { display: block; }.editing-start-templates header p { margin-top: 8px; text-align: left; }
  .edit-template-grid,.edit-template-grid.compact { grid-template-columns: repeat(2,minmax(0,1fr)); gap:16px 10px; }
  .editing-editor-head { position: relative; top: auto; display: grid; margin: -16px -16px 12px; }.editing-editor-head > div:last-child { width: 100%; }.editing-editor-actions { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:stretch; }.editing-process-box { width:100%; }.editing-process-submit .editing-export { width:100%; }.editing-editor-head > div:last-child button { flex: 1; }
  .editing-workspace { gap: 10px; }.editing-stage-panel { min-height: 560px; padding: 9px; }.editing-phone-stage { width: min(320px, 94%); }.editing-title-layer { font-size: clamp(25px, 8vw, 42px); }
  .editing-control-panel > nav { padding: 0 6px; }.editing-control-panel > nav button { min-height: 50px; font-size: 13px; }.editing-control-body { padding: 11px; }
  .editing-timeline-zoom input { width: 86px; }.editing-timeline-content { min-width: 620px; }
  .editing-project-row { grid-template-columns: 34px minmax(0, 1fr); }.editing-project-row em { grid-column: 2; justify-self: start; }
  .editing-task-overlay > div { padding: 21px; }.editing-task-overlay strong { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .editing-task-overlay i b { transition: none; }
}
@keyframes editing-title-soft-pop {
  0% { opacity: 0; transform: translate(-50%, -46%) scale(calc(var(--layer-scale, 1) * .88)); filter: blur(1.2px); }
  68% { opacity: 1; transform: translate(-50%, -50%) scale(calc(var(--layer-scale, 1) * 1.03)); filter: blur(0); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(var(--layer-scale, 1)); }
}