:root {
  --primary: #6c4df6;
  --primary-dark: #5637df;
  --primary-soft: #f1edff;
  --ink: #111a31;
  --muted: #75809a;
  --line: #e4e8f1;
  --soft: #f6f7fb;
  --navy: #07132e;
  --navy-soft: #101d3b;
  --purple-glow: rgba(108, 77, 246, .2);
  --shadow: 0 18px 48px rgba(31, 39, 75, .08);
}

* { box-sizing: border-box; }
html { background: var(--soft); }
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 72% 4%, rgba(108, 77, 246, .055), transparent 25rem),
    var(--soft);
}

button, input, textarea { font-family: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(108, 77, 246, .22);
  outline-offset: 2px;
}

.topbar {
  height: 72px;
  padding: 0 28px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(17, 26, 49, .04);
}
.brand { font-size: 21px; width: max-content; }
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(145deg, #8268ff, #5637df);
  box-shadow: 0 9px 20px rgba(108, 77, 246, .32);
}
.badge { padding: 6px 10px; color: var(--primary); background: #f0edff; }
.topnav { height: 100%; display: flex; align-items: stretch; gap: 42px; }
.topnav a {
  position: relative;
  display: flex;
  align-items: center;
  color: #45506a;
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
}
.topnav a:hover, .topnav a.active { color: var(--primary); }
.topnav a.active::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, #7052f7, #8d6dff);
}
.user-area { justify-self: end; }
.user-trigger { padding: 8px 10px; border-radius: 12px; }
.user-trigger:hover { background: #f4f2ff; }
.user-avatar {
  background: linear-gradient(145deg, #7d61fa, #593cdf);
  box-shadow: 0 6px 14px rgba(108, 77, 246, .22);
}
.user-dropdown { border-radius: 14px; border-color: #e3def9; box-shadow: 0 20px 50px rgba(36, 28, 78, .16); }

.page-shell {
  max-width: 1680px;
  margin: 0 auto;
  padding: 34px 28px 44px;
}
.hero {
  margin: 0 0 24px;
  padding: 0 4px;
  display: flex;
  justify-content: flex-start;
  align-items: end;
}
.hero .eyebrow { color: var(--primary); letter-spacing: 1.4px; margin-bottom: 8px; }
.hero h1 { max-width: none; font-size: clamp(28px, 2.4vw, 39px); letter-spacing: -.8px; margin-bottom: 8px; }
.hero > div > p:last-child { max-width: none; font-size: 14px; color: #7d89a4; }
.stepper { display: none; }
.workspace {
  display: grid;
  grid-template-columns: 210px minmax(440px, 1.05fr) minmax(390px, .95fr);
  min-height: 700px;
  overflow: hidden;
  border: 1px solid #e1e5ef;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow);
}
.flow-aside {
  min-width: 0;
  padding: 22px 14px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, #fafbff, #f7f8fc);
}
.aside-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  padding: 13px;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #7354f5, #6342eb);
  box-shadow: 0 12px 24px rgba(104, 70, 236, .22);
}
.aside-create-icon {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: rgba(255,255,255,.2);
  font-size: 18px;
}
.aside-title div { display: flex; flex-direction: column; gap: 2px; }
.aside-title b { font-size: 13px; }
.aside-title small { font-size: 9px; color: rgba(255,255,255,.72); }
.aside-label { margin: 0 10px 10px; color: #9ca5b8; }
.aside-step {
  grid-template-columns: 34px 1fr;
  margin: 2px 0;
  padding: 12px 9px;
  border-radius: 11px;
}
.aside-step span { border-radius: 9px; }
.aside-step b { font-size: 12px; }
.aside-step small { font-size: 9px; }
.aside-step.active {
  border: 1px solid #ece8ff;
  box-shadow: 0 8px 24px rgba(55, 45, 112, .08);
}
.aside-step.active::before { left: -1px; background: linear-gradient(#8368ff, #6544ed); }
.tip-card { border-radius: 12px; }

.panels {
  min-width: 0;
  padding: 30px 34px;
  overflow: auto;
  background: #fff;
}
.panel-head {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eceef4;
}
.panel-head > div { align-items: center; }
.panel-head h2 { font-size: 20px; letter-spacing: -.25px; }
.panel-head p { margin-top: 5px; font-size: 11px; }
.panel-head em {
  color: var(--primary);
  background: var(--primary-soft);
  border: 0;
  border-radius: 999px;
  padding: 7px 11px;
}
.section-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  font-size: 17px;
  color: var(--primary);
  background: linear-gradient(145deg, #efeaff, #f7f4ff);
}
.field-label { font-size: 12px; }
.url-row { gap: 10px; }
.url-input, .editor-card, .settings-card, .clone-card, .dropzone, .requirements, .summary-grid > div {
  border-color: #e1e5ef;
}
.url-input {
  min-height: 50px;
  border-radius: 11px;
  background: #fbfcff;
}
.url-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108,77,246,.09); }
.primary, .deepseek-button, .generate-final {
  border: 0;
  background: linear-gradient(135deg, #7353f4, #6544ed);
  box-shadow: 0 8px 18px rgba(104, 70, 236, .2);
}
.primary:hover:not(:disabled), .deepseek-button:hover:not(:disabled), .generate-final:hover:not(:disabled) {
  background: linear-gradient(135deg, #6848ec, #5837dc);
  transform: translateY(-1px);
}
.url-row > .primary { min-width: 104px; border-radius: 11px; }
.platform-chip { border-radius: 10px; background: #fafbfe; }
.source-upload-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 8px;
  color: #9aa3b6;
  font-size: 8px;
}
.source-upload-divider::before,
.source-upload-divider::after { content: ""; height: 1px; flex: 1; background: #eceef4; }
.source-upload-dropzone {
  min-width: 0;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border: 1px dashed #d8d2f5;
  border-radius: 11px;
  color: #6d7690;
  background: #fbfaff;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.source-upload-dropzone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.source-upload-dropzone:hover,
.source-upload-dropzone.dragover {
  border-color: var(--primary);
  background: #f5f1ff;
  box-shadow: 0 0 0 3px rgba(108,77,246,.08);
}
.source-upload-dropzone.uploading { cursor: wait; opacity: .75; }
.source-upload-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--primary);
  background: #eee9ff;
  font-size: 16px;
  font-weight: 700;
}
.source-upload-copy { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.source-upload-copy b { color: var(--ink); font-size: 10px; }
.source-upload-copy small { overflow: hidden; color: #8a93a7; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.source-upload-action {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 8px;
  color: var(--primary);
  background: #eee9ff;
  font-size: 9px;
  font-weight: 700;
}
.source-upload-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  color: #7c86a0;
  font-size: 8px;
}
.source-upload-status.error { color: #c74d61; }
.source-upload-status progress { flex: 1; height: 4px; accent-color: var(--primary); }
.editor-card, .settings-card, .clone-card, .dropzone, .requirements { border-radius: 14px; }
.copy-layout { grid-template-columns: minmax(0, 1fr); }
.settings-card { order: 2; }
.editor-card textarea { min-height: 250px; }
.voice-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.voice-card { min-width: 0; border-radius: 13px; }
.my-voices-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.action-footer { border-radius: 12px; }
.summary-grid { grid-template-columns: 1fr; gap: 8px; }
.generate-final { min-height: 58px; border-radius: 13px; }

.shooting-guide {
  flex: 1.3;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 26px;
  border: 1px solid #e2e6f0;
  border-radius: 14px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 38%, rgba(108,77,246,.14), transparent 7rem),
    linear-gradient(160deg, #f6f4ff, #eef2fb);
}
.shooting-guide > div { display: flex; flex-direction: column; gap: 5px; }
.shooting-guide b { font-size: 12px; }
.shooting-guide small { color: var(--muted); font-size: 9px; }
.shooting-figure {
  position: relative;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(108,77,246,.25);
  border-radius: 50%;
  background: rgba(255,255,255,.68);
  box-shadow: 0 0 0 12px rgba(108,77,246,.045);
}
.shooting-figure::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(145deg, #907aff, #6849ec);
}
.shooting-figure::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: 12px;
  width: 40px;
  height: 25px;
  border-radius: 22px 22px 10px 10px;
  background: linear-gradient(145deg, #8065f6, #5b3cdc);
}

.preview-rail {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 28px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 78% 18%, rgba(90,70,235,.2), transparent 17rem),
    radial-gradient(circle at 20% 86%, rgba(55,89,190,.16), transparent 20rem),
    linear-gradient(155deg, #0a1734, #071127 72%);
}
.preview-rail::before, .preview-rail::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.preview-rail::before {
  width: 260px;
  height: 130px;
  right: -32px;
  top: 14px;
  opacity: .28;
  background:
    linear-gradient(135deg, transparent 48%, #694ff0 49% 50%, transparent 51%) 0 0/52px 34px;
}
.preview-rail::after {
  inset: 0;
  opacity: .025;
  background-image: linear-gradient(rgba(255,255,255,.4) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.4) 1px, transparent 1px);
  background-size: 26px 26px;
}
.preview-rail > * { position: relative; z-index: 1; }
.preview-rail-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  margin-bottom: 28px;
}
.preview-rail-head > div { display: flex; align-items: center; gap: 12px; }
.preview-spark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: #dcd5ff;
  background: rgba(111,82,244,.22);
  border: 1px solid rgba(153,132,255,.25);
}
.preview-rail-head h2 { margin: 0; font-size: 18px; }
.preview-rail-head p { margin: 4px 0 0; color: #8592b2; font-size: 10px; }
.preview-pane { display: none; flex: 1; min-height: 0; }
.preview-pane.active { display: flex; flex-direction: column; animation: previewIn .25s ease; }
@keyframes previewIn { from { opacity: .25; transform: translateY(5px); } }
.preview-kicker {
  margin-bottom: 12px;
  color: #8979e8;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
}
.preview-slot {
  flex: 1;
  min-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-empty {
  max-width: 280px;
  padding: 34px 28px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: rgba(255,255,255,.035);
}
.preview-empty > span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 18px;
  border: 1px solid rgba(143,119,255,.25);
  border-radius: 16px;
  color: #a794ff;
  background: rgba(108,77,246,.12);
  font-size: 23px;
}
.preview-empty h3 { margin: 0 0 8px; font-size: 15px; }
.preview-empty p { margin: 0; color: #7e8cac; font-size: 10px; line-height: 1.7; }
.preview-slot:has(> .result-card:not(.hidden)) > .preview-empty,
.preview-slot:has(> .audio-result:not(.hidden)) > .preview-empty,
.preview-slot:has(> .uploaded-video:not(.hidden)) > .preview-empty,
.preview-slot:has(> .photo-preview:not(.hidden)) > .preview-empty,
.preview-slot:has(> .final-result:not(.hidden)) > .preview-empty { display: none; }

.preview-rail .result-card,
.preview-rail .uploaded-video,
.preview-rail .photo-preview,
.preview-rail .final-result {
  width: 100%;
  grid-template-columns: 1fr;
  align-self: stretch;
  border-color: rgba(255,255,255,.12);
  color: #fff;
  background: rgba(255,255,255,.045);
}
.preview-rail .result-card h3,
.preview-rail .uploaded-video h3,
.preview-rail .photo-preview h3,
.preview-rail .final-result h3 { color: #fff; }
.preview-rail .result-card p,
.preview-rail .uploaded-video p,
.preview-rail .photo-preview p,
.preview-rail .final-result p,
.preview-rail .meta-row { color: #8f9cbc; }
.preview-rail .media-preview,
.preview-rail .final-video {
  min-height: 280px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  background: #050b1b;
}
.preview-rail video { max-height: 340px; background: #050b1b; }
.preview-rail .secondary {
  color: #dcd6ff;
  border-color: rgba(170,154,255,.4);
  background: rgba(108,77,246,.08);
}
.preview-rail .danger-button { background: rgba(220,69,91,.12); border-color: rgba(235,100,120,.24); }
.preview-rail .audio-result {
  width: 100%;
  align-self: center;
  flex-direction: column;
  align-items: stretch;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px;
  color: #fff;
  background: rgba(255,255,255,.045);
}
.preview-rail .audio-result audio { width: 100%; }
.script-preview-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 440px;
  padding: 22px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: rgba(255,255,255,.045);
}
.script-preview-toolbar { display: flex; justify-content: flex-start; align-items: center; padding-bottom: 15px; border-bottom: 1px solid rgba(255,255,255,.08); }
.script-preview-toolbar span { font-size: 12px; font-weight: 700; }
.script-preview-card > p { flex: 1; margin: 20px 0; color: #a9b4ce; font-size: 12px; line-height: 1.9; white-space: pre-wrap; overflow: auto; }
.script-preview-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.script-preview-stats > span { display: flex; flex-direction: column; gap: 7px; padding: 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; background: rgba(255,255,255,.03); }
.script-preview-stats small { color: #7987a8; font-size: 9px; }
.script-preview-stats b { color: #fff; font-size: 17px; }
.preview-trust {
  margin-top: 18px;
  padding-top: 14px;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.07);
  color: #7684a4;
  font-size: 9px;
}
.preview-trust span { color: #9c8cf6; margin-right: 6px; }

.comparison-dialog, .membership-dialog, .history-dialog, .upgrade-toast-box {
  border: 1px solid rgba(108,77,246,.12);
  box-shadow: 0 30px 80px rgba(14, 17, 40, .3);
}
.membership-dialog, .history-dialog {
  background: radial-gradient(circle at 75% 0, rgba(108,77,246,.08), transparent 20rem), #fff;
}
.plan-vip { border-color: #cfc2ff; background: linear-gradient(180deg,#f3efff,#fff 70%); }
.membership-backdrop, .history-backdrop, .comparison-backdrop { background: rgba(6, 11, 27, .7); }

@media (max-width: 1199px) {
  .topbar { grid-template-columns: 1fr auto; }
  .topnav { display: none; }
  .workspace { grid-template-columns: 180px minmax(0,1fr); }
  .preview-rail { grid-column: 2; min-height: 570px; }
  .flow-aside { grid-row: 1 / span 2; }
  .panels { min-height: 620px; }
}

@media (max-width: 767px) {
  .topbar { height: 64px; padding: 0 15px; }
  .brand { font-size: 16px; gap: 8px; }
  .brand-mark { width: 34px; height: 34px; }
  .badge, .user-name { display: none; }
  .page-shell { padding: 22px 12px 36px; }
  .hero { align-items: flex-start; margin-bottom: 18px; }
  .hero h1 { font-size: 27px; line-height: 1.25; }
  .hero > div > p:last-child { font-size: 12px; line-height: 1.7; }
  .workspace { display: flex; flex-direction: column; border-radius: 16px; overflow: visible; }
  .flow-aside {
    position: sticky;
    top: 64px;
    z-index: 12;
    display: block;
    padding: 10px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
  }
  .aside-title, .aside-label, .tip-card { display: none; }
  .aside-step {
    display: inline-flex;
    width: auto;
    align-items: center;
    gap: 7px;
    margin-right: 4px;
    padding: 9px 10px;
  }
  .aside-step span { width: 25px; height: 25px; }
  .aside-step b { font-size: 10px; }
  .aside-step small, .aside-step.active::before { display: none; }
  .panels { min-height: 0; padding: 22px 16px; overflow: visible; }
  .panel-head { align-items: flex-start; }
  .panel-head h2 { font-size: 17px; }
  .panel-head em { display: none; }
  .url-row { flex-direction: column; }
  .url-row > .primary { width: 100%; min-height: 46px; }
  .voice-grid, .my-voices-grid { grid-template-columns: 1fr 1fr; }
  .upload-row { flex-direction: column; }
  .shooting-guide { width: 100%; min-height: 190px; }
  .preview-rail { min-height: 520px; padding: 22px 16px; border-radius: 0 0 15px 15px; }
  .preview-rail-head { align-items: flex-start; }
  .preview-slot, .script-preview-card { min-height: 370px; }
  .preview-rail .media-preview, .preview-rail .final-video { min-height: 220px; }
  .membership-dialog { padding: 28px 16px 20px; }
}

/* Equal-height workbench panes with independent vertical scrolling. */
@media (min-width: 1200px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    height: clamp(560px, calc(100vh - 170px), 820px);
    min-height: 0;
    align-items: stretch;
  }
  .workspace > .panels,
  .workspace > .preview-rail {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(108,77,246,.55) rgba(108,77,246,.08);
  }
  .workspace > .panels::-webkit-scrollbar,
  .workspace > .preview-rail::-webkit-scrollbar { width: 8px; }
  .workspace > .panels::-webkit-scrollbar-track,
  .workspace > .preview-rail::-webkit-scrollbar-track { background: rgba(108,77,246,.06); border-radius: 999px; }
  .workspace > .panels::-webkit-scrollbar-thumb,
  .workspace > .preview-rail::-webkit-scrollbar-thumb { background: rgba(108,77,246,.48); border: 2px solid transparent; background-clip: padding-box; border-radius: 999px; }
}

/* Keep the generated audio result in the left voice-production panel. */
.panels .audio-result {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(190px, 1.4fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.panels .audio-result > div:first-child { min-width: 0; }
.panels .audio-result audio { width: 100%; min-width: 0; height: 32px; }
.panels .audio-result .secondary { white-space: nowrap; }

@media (max-width: 1199px) {
  .workspace > .panels,
  .workspace > .preview-rail { overflow-y: auto; }
}

@media (max-width: 767px) {
  .workspace { height: auto; min-height: 0; }
  .workspace > .panels,
  .workspace > .preview-rail { height: auto; overflow: visible; }
  .panels .audio-result { grid-template-columns: 1fr; }
  .panels .audio-result audio { width: 100%; }
  .panels .audio-result .secondary { width: 100%; }
}

/* Unified copy editor toolbar */
.panel[data-panel="2"] .editor-toolbar {
  min-width: 0;
  gap: 10px;
  padding: 9px 12px;
}
.panel[data-panel="2"] .editor-title,
.panel[data-panel="2"] .editor-toolbar-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel[data-panel="2"] .editor-title { flex: 1 1 auto; }
.panel[data-panel="2"] .editor-title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel[data-panel="2"] .editor-title em {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  color: #7f879b;
  background: #eef0f6;
  font-size: 8px;
  font-style: normal;
  font-weight: 600;
}
.panel[data-panel="2"] .editor-title em.rewrite { color: var(--primary); background: var(--primary-soft); }
.panel[data-panel="2"] .editor-toolbar-actions { flex: 0 0 auto; }
.panel[data-panel="2"] .editor-toolbar-actions button {
  min-height: 26px;
  padding: 0 7px;
  border: 0;
  border-radius: 7px;
  color: var(--primary);
  background: transparent;
  font-size: 9px;
  white-space: nowrap;
}
.panel[data-panel="2"] .editor-toolbar-actions button:hover { background: var(--primary-soft); }
.panel[data-panel="2"] .editor-toolbar-actions #restore-original { color: #7b8498; }

@media (max-width: 767px) {
  .panel[data-panel="2"] .editor-toolbar { align-items: flex-start; flex-wrap: wrap; }
  .panel[data-panel="2"] .editor-title { flex-basis: calc(100% - 1px); }
  .panel[data-panel="2"] .editor-toolbar-actions { width: 100%; justify-content: flex-end; }
}

@media (max-width: 420px) {
  .brand > span:nth-child(2) { max-width: 142px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .voice-grid, .my-voices-grid { grid-template-columns: 1fr; }
  .script-preview-stats { grid-template-columns: 1fr; }
}

/* 我的声音与内置音色统一为同规格卡片 */
.panel[data-panel="3"] .my-voices-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.panel[data-panel="3"] .my-voice-card {
  position: relative;
  min-height: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 10px 7px 8px;
  border-radius: 11px;
  text-align: center;
}
.panel[data-panel="3"] .my-voice-card .mv-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  font-size: 14px;
}
.panel[data-panel="3"] .my-voice-card .mv-name {
  width: 100%;
  max-width: 100%;
  margin-top: 5px;
  overflow: hidden;
  font-size: 10px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel[data-panel="3"] .my-voice-card .mv-play {
  position: absolute;
  top: 7px;
  left: 7px;
  width: 20px;
  height: 20px;
  font-size: 8px;
}
.panel[data-panel="3"] .my-voice-card .mv-del {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 18px;
  height: 18px;
  display: none;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  font-size: 11px;
}
.panel[data-panel="3"] .my-voice-card:hover .mv-del { display: grid; }
.panel[data-panel="3"] .my-voice-add,
.panel[data-panel="3"] .my-voice-empty {
  min-height: 86px;
  border-radius: 11px;
}
.panel[data-panel="3"] .my-voice-add { font-size: 22px; }

@media (max-width: 1199px) {
  .panel[data-panel="3"] .my-voices-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Final workbench sizing override: equal desktop panes and independent scroll. */
@media (min-width: 1200px) {
  .workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: clamp(560px, calc(100vh - 170px), 820px); min-height: 0; align-items: stretch; }
  .workspace > .panels, .workspace > .preview-rail { height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(108,77,246,.55) rgba(108,77,246,.08); }
}

/* Generated audio stays in the left voice-production panel. */
.panels .audio-result { display: grid; grid-template-columns: minmax(150px,1fr) minmax(190px,1.4fr) auto; align-items: center; gap: 12px; min-width: 0; }
.panels .audio-result > div:first-child { min-width: 0; }
.panels .audio-result audio { width: 100%; min-width: 0; height: 32px; }
.panels .audio-result .secondary { white-space: nowrap; }
@media (max-width: 767px) {
  .workspace { height: auto; min-height: 0; }
  .workspace > .panels, .workspace > .preview-rail { height: auto; overflow: visible; }
  .panels .audio-result { grid-template-columns: 1fr; }
  .panels .audio-result audio, .panels .audio-result .secondary { width: 100%; }
}

/* Final density and result-card overrides. */
.generation-tip-card { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 18px; padding: 13px 15px; border: 1px solid #e5e0fb; border-radius: 13px; color: #666b86; background: linear-gradient(135deg,#fbfaff,#f6f3ff); }
.generation-tip-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; color: #fff; background: linear-gradient(145deg,#8268ff,#5a3de1); box-shadow: 0 7px 15px rgba(108,77,246,.2); }
.generation-tip-card b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 11px; }
.generation-tip-card p { margin: 0; font-size: 9px; line-height: 1.65; }
.preview-rail { overflow: hidden !important; }
.fusion-preview { min-height: 0; overflow: visible; }
.preview-trust { flex: 0 0 auto; margin-top: 12px; padding-top: 10px; }
.fusion-path { flex: 0 0 auto; }
.preview-next-action { width: 100%; min-height: 30px; margin-top: 9px; padding: 0 10px; border: 1px solid rgba(143,119,255,.4); border-radius: 9px; color: #e6e0ff; background: rgba(108,77,246,.16); font-size: 8px; font-weight: 700; cursor: pointer; }
.left-next-action { display: block; width: min(100%, 280px); margin: 12px 0 0 auto; min-height: 38px; color: #fff; background: linear-gradient(100deg,#7449ef,#397fe9); font-size: 10px; }
.left-next-action.hidden { display: none; }
.preview-next-action:hover:not(:disabled) { border-color: rgba(180,160,255,.8); background: rgba(108,77,246,.3); }
.preview-next-action:disabled { opacity: .45; cursor: not-allowed; }
.preview-fusion-action { background: linear-gradient(100deg,#7449ef,#397fe9); }
.fusion-sound-card .preview-slot, .fusion-avatar-card .preview-slot { display: flex; flex-direction: column; justify-content: flex-start; }
.preview-rail { overflow: hidden !important; }
.fusion-result-card { display: none !important; }
.fusion-path { cursor: pointer; }
.fusion-path > div { cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.fusion-path:hover > div, .fusion-path:focus-visible > div { transform: scale(1.04); }
.fusion-path:focus-visible { outline: 3px solid rgba(157,132,255,.45); outline-offset: 5px; border-radius: 50%; }
.fusion-path > div small { color: #c9beff; font-size: 7px; font-weight: 600; }
.panel[data-panel="2"] .editor-card { padding: 12px 14px; }
.panel[data-panel="2"] .editor-card textarea { height: 196px !important; min-height: 196px !important; max-height: 260px; }
.panel[data-panel="2"] .editor-foot { padding-top: 8px; }
.panel[data-panel="2"] .settings-card { padding: 14px; }
.panel[data-panel="3"] .audio-result { order: 4; margin: 14px 0 0; padding: 11px 13px; grid-template-columns: minmax(145px,.9fr) minmax(180px,1.4fr) auto; }
.panel[data-panel="3"] .action-footer { order: 5; margin-top: 12px; }
.panel[data-panel="3"] .audio-result audio { min-height: 30px; }
.fusion-result-card { min-height: 0; display: flex; flex-direction: column; }
.fusion-result-card .preview-slot { min-height: 0 !important; flex: 1 1 auto; display: flex; flex-direction: column; }
.fusion-result-card .preview-empty { min-height: 168px !important; flex: 1 1 auto; }
.fusion-result-card .final-result { width: 100%; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.fusion-result-card .final-video { width: 100%; height: auto; min-height: 0 !important; aspect-ratio: 16 / 9; max-height: 360px; }
.fusion-result-card .final-video video { width: 100%; height: 100%; object-fit: contain; }
.fusion-result-card .final-info { width: 100%; padding: 4px 0 0; }
.fusion-result-card .final-info h3 { margin: 7px 0 4px; font-size: 13px; }
.fusion-result-card .final-info p { margin: 0 0 8px; font-size: 9px; }
.fusion-result-card .button-row { flex-wrap: wrap; gap: 7px; }
.fusion-result-card .button-row > * { min-height: 30px; padding: 0 10px; font-size: 9px; }
@media (max-width: 767px) {
  .panel[data-panel="2"] .editor-card textarea { height: 180px !important; min-height: 180px !important; }
  .panel[data-panel="3"] .audio-result { grid-template-columns: 1fr; gap: 9px; }
  .panel[data-panel="3"] .audio-result audio, .panel[data-panel="3"] .audio-result .secondary { width: 100%; }
  .fusion-result-card .final-video { aspect-ratio: 16 / 10; max-height: 280px; }
}

/* Workbench density and result visibility polish. */
.panel[data-panel="2"] .editor-card { padding: 12px 14px; }
.panel[data-panel="2"] .editor-card textarea {
  height: 196px;
  min-height: 196px;
  max-height: 260px;
}
.panel[data-panel="2"] .editor-foot { padding-top: 8px; }
.panel[data-panel="2"] .settings-card { padding: 14px; }

.panel[data-panel="3"] .audio-result {
  order: 4;
  margin: 14px 0 0;
  padding: 11px 13px;
  grid-template-columns: minmax(145px, .9fr) minmax(180px, 1.4fr) auto;
}
.panel[data-panel="3"] .action-footer { order: 5; margin-top: 12px; }
.panel[data-panel="3"] .audio-result audio { min-height: 30px; }

.fusion-result-card {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.fusion-result-card .preview-slot {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.fusion-result-card .preview-empty { min-height: 168px; flex: 1 1 auto; }
.fusion-result-card .final-result { width: 100%; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.fusion-result-card .final-video {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  max-height: 360px;
}
.fusion-result-card .final-video video { width: 100%; height: 100%; object-fit: contain; }
.fusion-result-card .final-info { width: 100%; padding: 4px 0 0; }
.fusion-result-card .final-info h3 { margin: 7px 0 4px; font-size: 13px; }
.fusion-result-card .final-info p { margin: 0 0 8px; font-size: 9px; }
.fusion-result-card .button-row { flex-wrap: wrap; gap: 7px; }
.fusion-result-card .button-row > * { min-height: 30px; padding: 0 10px; font-size: 9px; }

@media (max-width: 767px) {
  .panel[data-panel="2"] .editor-card textarea { height: 180px; min-height: 180px; }
  .panel[data-panel="3"] .audio-result { grid-template-columns: 1fr; gap: 9px; }
  .panel[data-panel="3"] .audio-result audio,
  .panel[data-panel="3"] .audio-result .secondary { width: 100%; }
  .fusion-result-card .final-video { aspect-ratio: 16 / 10; max-height: 280px; }
}

/* Final workbench sizing override: equal desktop panes and independent scroll. */
@media (min-width: 1200px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    height: clamp(560px, calc(100vh - 170px), 820px);
    min-height: 0;
    align-items: stretch;
  }
  .workspace > .panels,
  .workspace > .preview-rail {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(108,77,246,.55) rgba(108,77,246,.08);
  }
}

/* Generated audio stays in the left voice-production panel. */
.panels .audio-result {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(190px, 1.4fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.panels .audio-result > div:first-child { min-width: 0; }
.panels .audio-result audio { width: 100%; min-width: 0; height: 32px; }
.panels .audio-result .secondary { white-space: nowrap; }

@media (max-width: 767px) {
  .workspace { height: auto; min-height: 0; }
  .workspace > .panels,
  .workspace > .preview-rail { height: auto; overflow: visible; }
  .panels .audio-result { grid-template-columns: 1fr; }
  .panels .audio-result audio { width: 100%; }
  .panels .audio-result .secondary { width: 100%; }
}

/* Login */
.login-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: 28px;
  background:
    radial-gradient(circle at 18% 20%, rgba(115,82,245,.22), transparent 28rem),
    linear-gradient(145deg, #07142f 0 48%, #f7f7fc 48.1% 100%);
}
.login-shell {
  width: min(1180px, 100%);
  min-height: min(720px, calc(100vh - 90px));
  margin: auto;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(9, 15, 40, .26);
}
.login-showcase {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 38px 44px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 75% 22%, rgba(112,80,244,.28), transparent 18rem),
    radial-gradient(circle at 20% 84%, rgba(54,93,199,.16), transparent 20rem),
    linear-gradient(155deg, #0b1937, #071127 75%);
}
.login-showcase::before {
  content: "";
  position: absolute;
  width: 380px;
  height: 190px;
  right: -52px;
  top: 26px;
  opacity: .3;
  background: linear-gradient(135deg, transparent 48%, #7052f7 49% 50%, transparent 51%) 0 0/62px 42px;
}
.login-showcase-brand { position: relative; display: flex; align-items: center; gap: 10px; z-index: 1; }
.login-showcase-brand > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  font-size: 18px;
  font-weight: 850;
  background: linear-gradient(145deg, #8469ff, #5839df);
  box-shadow: 0 9px 22px rgba(108,77,246,.32);
}
.login-showcase-brand b { font-size: 17px; }
.login-showcase-brand em {
  padding: 5px 8px;
  border-radius: 999px;
  color: #b7a9ff;
  background: rgba(108,77,246,.16);
  font-size: 9px;
  font-style: normal;
}
.login-showcase-copy { position: relative; z-index: 1; margin: auto 0 56px; }
.login-showcase-kicker { color: #927dff; font-size: 10px; font-weight: 800; letter-spacing: 1.8px; }
.login-showcase-copy h1 { margin: 18px 0; font-size: clamp(38px, 4.2vw, 56px); line-height: 1.16; letter-spacing: -1.5px; }
.login-showcase-copy p { max-width: 430px; margin: 0; color: #99a5c1; font-size: 13px; line-height: 1.8; }
.login-flow-preview {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}
.login-flow-preview span { display: flex; align-items: center; gap: 7px; color: #7f8ca9; font-size: 9px; white-space: nowrap; }
.login-flow-preview span i {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 9px;
  color: #8f9ab4;
  background: rgba(255,255,255,.06);
  font-size: 8px;
  font-style: normal;
}
.login-flow-preview span.active { color: #dcd6ff; }
.login-flow-preview span.active i { color: #fff; background: #6b4cf1; box-shadow: 0 7px 14px rgba(108,77,246,.25); }
.login-flow-preview b { flex: 1; min-width: 15px; height: 1px; background: rgba(255,255,255,.1); }
.login-trust { position: relative; z-index: 1; margin: 18px 0 0; color: #687693; font-size: 9px; text-align: center; }
.login-card-wrap { display: grid; place-items: center; padding: 54px; background: radial-gradient(circle at 80% 10%, #f0ebff, transparent 16rem), #fff; }
.login-page .login-box {
  width: min(390px, 100%);
  max-width: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  text-align: left;
}
.login-page .login-brand { margin-bottom: 28px; text-align: left; }
.login-page .login-brand .brand-mark { display: none; }
.login-page .login-brand h1 { font-size: 28px; letter-spacing: -.5px; }
.login-page .login-brand p { margin-top: 8px; font-size: 12px; line-height: 1.6; }
.login-page .login-form label { margin-top: 18px; font-size: 12px; }
.login-page .login-form input[type="text"],
.login-page .login-form input[type="password"] {
  min-height: 48px;
  border: 1px solid #dfe3ed;
  border-radius: 11px;
  background: #fbfcff;
}
.login-page .login-form input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108,77,246,.09); }
.login-page .remember-row { margin-top: 13px; }
.login-page .remember-row label { margin: 0; color: #727d93; font-size: 11px; font-weight: 500; }
.login-page .login-btn {
  min-height: 50px;
  margin-top: 22px;
  border-radius: 11px;
  background: linear-gradient(135deg, #7353f4, #6544ed);
  box-shadow: 0 10px 22px rgba(104,70,236,.22);
}
.login-page .login-btn:hover { background: linear-gradient(135deg, #6747eb, #5838dc); }
.login-page .login-error { border-radius: 10px; }
.login-footer { margin-top: 18px; color: rgba(255,255,255,.48); font-size: 10px; text-align: center; }

@media (max-width: 840px) {
  .login-page { padding: 16px; background: #f6f7fb; }
  .login-shell { min-height: auto; grid-template-columns: 1fr; max-width: 500px; }
  .login-showcase { min-height: 250px; padding: 26px; }
  .login-showcase-copy { margin: 48px 0 22px; }
  .login-showcase-copy h1 { margin: 12px 0; font-size: 34px; }
  .login-showcase-copy p { font-size: 11px; }
  .login-flow-preview, .login-trust { display: none; }
  .login-card-wrap { padding: 38px 28px; }
  .login-footer { color: #a0a8b8; }
}

@media (max-width: 480px) {
  .login-page { padding: 0; display: block; }
  .login-shell { min-height: 100vh; border: 0; border-radius: 0; box-shadow: none; }
  .login-showcase { min-height: 210px; border-radius: 0; }
  .login-showcase-copy { margin: 36px 0 0; }
  .login-showcase-copy h1 { font-size: 30px; }
  .login-showcase-copy p { display: none; }
  .login-card-wrap { padding: 34px 22px 44px; }
  .login-page .login-brand h1 { font-size: 24px; }
  .login-footer { display: none; }
}

/* App shell and persistent sidebar */
body:not(.login-page) { min-height: 100vh; background: #f7f8fc; }
.app-layout {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
}
.app-sidebar {
  position: sticky;
  top: 0;
  z-index: 60;
  width: 232px;
  flex: 0 0 232px;
  height: 100vh;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 20px 14px 14px;
  border-right: 1px solid #e5e8f1;
  background: rgba(255,255,255,.97);
  box-shadow: 8px 0 30px rgba(31,39,75,.035);
  transition: transform .24s cubic-bezier(.4, 0, .2, 1);
}
.sidebar-animations-ready .app-sidebar {
  transition:
    width .24s cubic-bezier(.4, 0, .2, 1),
    flex-basis .24s cubic-bezier(.4, 0, .2, 1),
    transform .24s cubic-bezier(.4, 0, .2, 1);
}
.sidebar-brand { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 7px; }
.sidebar-brand .brand-mark { flex: 0 0 auto; }
.sidebar-brand > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sidebar-brand b { overflow: hidden; color: var(--ink); font-size: 16px; white-space: nowrap; }
.sidebar-brand small { color: var(--primary); font-size: 9px; font-weight: 700; }
.sidebar-new {
  width: 100%;
  min-height: 48px;
  margin: 25px 0 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg,#7454f5,#6342eb);
  box-shadow: 0 10px 22px rgba(104,70,236,.22);
  cursor: pointer;
}
.sidebar-new span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(255,255,255,.18); font-size: 17px; }
.sidebar-new svg,
.sidebar-nav-item svg,
.sidebar-collapse svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar-new b { font-size: 12px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 5px; }
.sidebar-nav-item {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 0;
  border-radius: 11px;
  color: #69758f;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.sidebar-nav-item > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #7f8aa3; background: #f2f4f8; font-size: 14px; }
.sidebar-nav-item b { min-width: 0; flex: 1 1 auto; font-size: 12px; }
.sidebar-nav-item em { min-width: 34px; padding: 4px 6px; border-radius: 999px; color: #8a94a9; background: #f2f4f8; font-size: 8px; font-style: normal; text-align: center; }
.sidebar-nav-item:hover { color: var(--ink); background: #f7f6ff; }
.sidebar-nav-item.active { color: var(--primary); background: #f1edff; }
.sidebar-nav-item.active > span { color: #fff; background: linear-gradient(145deg,#8063fa,#6040e5); box-shadow: 0 6px 14px rgba(108,77,246,.22); }
.sidebar-nav-item.active em { color: var(--primary); background: #fff; }
.sidebar-account { position: relative; margin-top: auto; padding-top: 14px; border-top: 1px solid #eceef4; }
.app-sidebar .user-area { position: relative; display: block; margin-top: 8px; }
.app-sidebar .user-trigger { width: 100%; display: flex; padding: 8px; cursor: pointer; }
.app-sidebar .user-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.app-sidebar .user-dropdown { left: 8px; right: auto; top: auto; bottom: calc(100% + 7px); width: 220px; }
.sidebar-collapse {
  width: 100%;
  min-height: 38px;
  margin-top: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 9px;
  color: #8b95aa;
  background: transparent;
  cursor: pointer;
}
.sidebar-collapse:hover { color: var(--primary); background: #f5f3ff; }
.sidebar-collapse span { display: grid; place-items: center; font-size: 20px; transition: transform .2s ease; }
.sidebar-collapse b { font-size: 10px; }
.sidebar-copy {
  max-width: 170px;
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  transition:
    max-width .2s cubic-bezier(.4, 0, .2, 1),
    opacity .14s ease,
    transform .2s cubic-bezier(.4, 0, .2, 1),
    visibility 0s linear;
}
.sidebar-collapsed .sidebar-copy {
  width: 0;
  min-width: 0;
  max-width: 0 !important;
  flex: 0 0 0 !important;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transform: translateX(-7px);
  visibility: hidden;
  transition:
    max-width .18s cubic-bezier(.4, 0, .2, 1),
    opacity .1s ease,
    transform .18s cubic-bezier(.4, 0, .2, 1),
    visibility 0s linear .18s;
}
.sidebar-collapsed .sidebar-new b,
.sidebar-collapsed .sidebar-nav-item b,
.sidebar-collapsed .sidebar-nav-item em,
.sidebar-collapsed .sidebar-collapse b {
  height: 0;
  padding: 0;
  border: 0;
}
.sidebar-collapsed .sidebar-brand, .sidebar-collapsed .sidebar-nav-item { justify-content: center; }
.sidebar-collapsed .sidebar-brand {
  width: 48px;
  min-height: 48px;
  padding: 0;
  gap: 0;
}
.sidebar-collapsed .sidebar-brand > div { height: 0; overflow: hidden; }
.sidebar-collapsed .sidebar-brand .brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  font-size: 17px;
  box-shadow: 0 8px 18px rgba(108,77,246,.2);
}
.sidebar-collapsed .sidebar-new {
  width: 44px;
  min-height: 44px;
  margin: 22px 2px 20px;
  padding: 0;
  gap: 0;
  border-radius: 13px;
  box-shadow: 0 8px 18px rgba(104,70,236,.18);
}
.sidebar-collapsed .sidebar-new span {
  width: 26px;
  height: 26px;
  border-radius: 8px;
}
.sidebar-collapsed .sidebar-new svg { width: 17px; height: 17px; }
.sidebar-collapsed .sidebar-nav {
  width: 48px;
  align-items: center;
  gap: 8px;
}
.sidebar-collapsed .sidebar-nav-item {
  width: 44px;
  min-height: 44px;
  display: flex;
  padding: 0;
  gap: 0;
  border-radius: 13px;
}
.sidebar-collapsed .sidebar-nav-item > span {
  width: 28px;
  height: 28px;
  border-radius: 9px;
}
.sidebar-collapsed .sidebar-nav-item svg { width: 17px; height: 17px; }
.sidebar-collapsed .sidebar-nav-item:not(.active) > span {
  color: #7f8aa3;
  background: #f4f5f9;
}
.sidebar-collapsed .sidebar-nav-item.active {
  background: #f0ecff;
}
.sidebar-collapsed .user-trigger { justify-content: center; }
.sidebar-collapsed .sidebar-collapse span { transform: rotate(180deg); }
.app-main { min-width: 0; flex: 1 1 auto; }
.mobile-sidebar-toggle { display: none; }
.step.locked,
.aside-step.locked { opacity: .46; cursor: not-allowed; }
.step.locked:hover,
.aside-step.locked:hover { transform: none; }
.sidebar-backdrop { display: none; }
.app-view { display: none; }
.app-view.active { display: block; }
.page-shell { max-width: 1660px; padding: 34px 30px 48px; }
.workspace { grid-template-columns: minmax(430px,1.05fr) minmax(400px,.95fr); }
.flow-aside { display: none; }
.stepper {
  display: flex;
  margin-bottom: 18px;
  padding: 12px 18px;
  border-radius: 15px;
}
.step { min-width: 0; }
.step span strong { font-size: 10px; }
.step span small { font-size: 8px; }
.panels { padding: 28px 32px; }

.context-selects { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-bottom: 20px; }
.copy-context-card {
  margin-bottom: 18px;
  padding: 15px;
  border: 1px solid #e7e3f8;
  border-radius: 14px;
  background: linear-gradient(135deg, #fbfaff, #f7f5ff);
}
.copy-context-head { margin-bottom: 13px; }
.copy-context-head > div { display: flex; align-items: center; gap: 10px; }
.copy-context-head > div > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--primary);
  background: #eee9ff;
  font-size: 13px;
}
.copy-context-head h3 { margin: 0; color: var(--ink); font-size: 12px; }
.copy-context-card .context-selects { margin-bottom: 0; }
.context-selects label { min-width: 0; display: flex; flex-direction: column; gap: 6px; color: #75809a; font-size: 9px; }
.context-selects select, .asset-field input, .asset-field select {
  width: 100%;
  min-height: 42px;
  padding: 0 34px 0 12px;
  border: 1px solid #e0e4ee;
  border-radius: 10px;
  color: var(--ink);
  background: #fbfcff;
  font-size: 11px;
  outline: none;
}
.context-selects select:focus, .asset-field input:focus, .asset-field select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(108,77,246,.08); }

.preview-completion { margin: -8px 0 22px; padding: 15px; border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: rgba(255,255,255,.035); }
.preview-completion > div:first-child { display: flex; justify-content: space-between; align-items: center; color: #8c99b7; font-size: 9px; }
.preview-completion > div:first-child b { color: #fff; font-size: 13px; }
.preview-completion progress { width: 100%; height: 5px; margin: 10px 0 13px; overflow: hidden; border: 0; border-radius: 10px; background: rgba(255,255,255,.08); }
.preview-completion progress::-webkit-progress-bar { background: rgba(255,255,255,.08); }
.preview-completion progress::-webkit-progress-value { border-radius: 10px; background: linear-gradient(90deg,#6f4ff3,#9b80ff); }
.preview-completion progress::-moz-progress-bar { border-radius: 10px; background: linear-gradient(90deg,#6f4ff3,#9b80ff); }
.preview-milestones { display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; }
.preview-milestones span { display: flex; flex-direction: column; align-items: center; gap: 5px; color: #63708e; font-size: 7px; }
.preview-milestones i { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; color: #7683a1; background: rgba(255,255,255,.035); font-size: 7px; font-style: normal; }
.preview-milestones span.complete { color: #b4a7fa; }
.preview-milestones span.complete i { border-color: rgba(129,98,250,.5); color: #fff; background: #6849ec; }
.preview-context-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
.preview-context-tags span { padding: 5px 7px; border: 1px solid rgba(143,119,255,.18); border-radius: 999px; color: #9f91e9; background: rgba(108,77,246,.08); font-size: 8px; }
.preview-selection-card { width: 100%; display: flex; align-items: center; gap: 14px; padding: 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(255,255,255,.04); }
.preview-selection-card > span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #ad9dff; background: rgba(108,77,246,.14); font-size: 20px; }
.preview-selection-card small, .preview-selection-card p { color: #7c89a7; font-size: 9px; }
.preview-selection-card h3 { margin: 4px 0; font-size: 15px; }
.preview-slot:has(> .preview-selection-card:not(.hidden)) > .preview-empty,
.preview-slot:has(> .selected-digital-human:not(.hidden)) > .preview-empty { display: none; }

.copy-continue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding: 14px 15px;
  border: 1px solid #e4e0f5;
  border-radius: 13px;
  background: #faf9ff;
}
.copy-continue > span { color: #7f899f; font-size: 9px; }
.copy-continue .primary { min-width: 150px; min-height: 40px; }

.fusion-preview { display: flex; flex: 1; min-height: 0; flex-direction: column; }
.fusion-assets {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  align-items: center;
  gap: 12px;
  padding: 14px 2px 0;
}
.fusion-card,
.fusion-result-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(133,105,255,.48);
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(145deg, rgba(27,43,92,.92), rgba(11,24,58,.96));
  box-shadow: 0 18px 35px rgba(0,4,20,.2), inset 0 1px rgba(255,255,255,.035);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.fusion-card { min-height: 230px; padding: 16px; }
.fusion-copy-card { transform: rotate(-3deg); }
.fusion-sound-card { transform: translateY(-10px); }
.fusion-avatar-card { transform: rotate(3deg); }
.fusion-card:hover,
.fusion-card:focus-visible,
.fusion-result-card:hover,
.fusion-result-card:focus-visible {
  z-index: 2;
  border-color: #9e83ff;
  box-shadow: 0 20px 42px rgba(26,11,88,.34), 0 0 0 3px rgba(126,92,255,.1);
  outline: none;
}
.fusion-copy-card:hover, .fusion-copy-card:focus-visible { transform: rotate(-1deg) translateY(-3px); }
.fusion-sound-card:hover, .fusion-sound-card:focus-visible { transform: translateY(-13px); }
.fusion-avatar-card:hover, .fusion-avatar-card:focus-visible { transform: rotate(1deg) translateY(-3px); }
.fusion-card.locked, .fusion-result-card.locked { border-color: rgba(120,132,172,.22); opacity: .66; }
.fusion-card.ready, .fusion-result-card.ready { border-color: rgba(129,98,250,.75); }
.fusion-card.current, .fusion-result-card.current { box-shadow: 0 18px 38px rgba(62,32,170,.35), 0 0 0 2px rgba(132,99,255,.18); }
.fusion-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 13px; }
.fusion-card-head > span { font-size: 14px; font-weight: 800; }
.fusion-card-head em {
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: #a9b5d2;
  background: rgba(255,255,255,.04);
  font-size: 7px;
  font-style: normal;
  white-space: nowrap;
}
.fusion-card.ready .fusion-card-head em,
.fusion-result-card.ready .fusion-card-head em { color: #c9beff; background: rgba(115,80,245,.16); }
.fusion-copy-card > p {
  min-height: 82px;
  max-height: 100px;
  margin: 14px 0;
  overflow: hidden;
  color: #aeb9d3;
  font-size: 10px;
  line-height: 1.75;
}
.fusion-copy-card .preview-context-tags { margin-top: 0; }
.fusion-copy-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.fusion-copy-stats > span { display: flex; flex-direction: column; gap: 4px; padding: 9px; border-radius: 10px; background: rgba(255,255,255,.035); }
.fusion-copy-stats small { color: #7382a4; font-size: 7px; }
.fusion-copy-stats b { font-size: 12px; }
.fusion-wave {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-bottom: 8px;
  border: 1px solid rgba(140,117,255,.2);
  border-radius: 12px;
  background: rgba(84,63,173,.12);
}
.fusion-wave i { width: 2px; border-radius: 3px; background: linear-gradient(#a552ff,#35bfff); }
.fusion-wave i:nth-child(1), .fusion-wave i:nth-child(9) { height: 13px; }
.fusion-wave i:nth-child(2), .fusion-wave i:nth-child(8) { height: 24px; }
.fusion-wave i:nth-child(3), .fusion-wave i:nth-child(7) { height: 34px; }
.fusion-wave i:nth-child(4), .fusion-wave i:nth-child(6) { height: 20px; }
.fusion-wave i:nth-child(5) { height: 44px; }
.fusion-card .preview-slot { min-height: 108px; justify-content: flex-start; }
.fusion-sound-card .preview-slot {
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 8px;
}
.fusion-card .preview-empty { min-height: 100px; padding: 10px; border: 0; background: rgba(255,255,255,.025); }
.fusion-card .preview-empty > span { width: 34px; height: 34px; margin-bottom: 8px; font-size: 14px; }
.fusion-card .preview-empty h3 { margin-bottom: 4px; font-size: 11px; }
.fusion-card .preview-empty p { font-size: 8px; line-height: 1.5; }
.fusion-card .preview-selection-card { padding: 10px; gap: 9px; border-radius: 11px; }
.fusion-sound-card .preview-selection-card {
  align-items: flex-start;
  padding: 8px 9px;
  gap: 8px;
  border-radius: 10px;
}
.fusion-card .preview-selection-card > span { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; }
.fusion-sound-card .preview-selection-card > span {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 12px;
}
.fusion-sound-card .preview-selection-card > div {
  min-width: 0;
  flex: 1 1 auto;
}
.fusion-sound-card .preview-selection-card small {
  display: block;
  margin-bottom: 3px;
  color: #7f8dad;
  font-size: 6px;
  line-height: 1.2;
}
.fusion-card .preview-selection-card h3 { font-size: 11px; }
.fusion-sound-card .preview-selection-card h3 {
  margin: 0;
  font-size: 8px;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fusion-sound-card .preview-selection-card {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 7px;
}
.fusion-sound-card .preview-audio-play {
  width: 34px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(143,119,255,.36);
  border-radius: 9px;
  color: #dcd6ff;
  background: rgba(108,77,246,.16);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.fusion-sound-card .preview-audio-play:hover,
.fusion-sound-card .preview-audio-play.playing {
  color: #fff;
  border-color: rgba(166,145,255,.72);
  background: #6849ec;
}
.fusion-sound-card .preview-audio-play:disabled { opacity: .4; cursor: not-allowed; }
.fusion-sound-card .preview-audio-play span { font-size: 11px; line-height: 1; }
.fusion-card .preview-selection-card p { margin: 2px 0 0; font-size: 7px; }
.fusion-sound-card .preview-selection-card p {
  margin-top: 4px;
  font-size: 6px;
  line-height: 1.4;
}
.fusion-card .audio-result { padding: 10px; border-radius: 11px; }
.fusion-sound-card .audio-result {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.035);
}
.fusion-card .audio-result > div:first-child { display: none; }
.fusion-card .audio-result audio { min-height: 30px; }
.fusion-sound-card .audio-result audio {
  display: none;
}
.fusion-sound-card .audio-result .secondary {
  width: 100%;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 7px;
}
.fusion-avatar-card .selected-digital-human { display: block; padding: 0; border: 0; background: transparent; }
.fusion-avatar-card .selected-digital-human-media { height: 145px; border-radius: 12px; }
.fusion-avatar-card .selected-digital-human > div:last-child { display: none; }
.fusion-path {
  position: relative;
  height: 145px;
  flex: 0 0 145px;
  display: grid;
  place-items: center;
}
.fusion-path > i {
  position: absolute;
  top: 0;
  width: 1px;
  height: 72px;
  transform-origin: top;
  background: linear-gradient(#7556f6,rgba(117,86,246,.25));
  box-shadow: 0 0 9px #7355f4;
}
.fusion-path > i:nth-child(1) { left: 18%; transform: rotate(-55deg); }
.fusion-path > i:nth-child(2) { left: 50%; }
.fusion-path > i:nth-child(3) { right: 18%; transform: rotate(55deg); }
.fusion-path > div {
  position: relative;
  z-index: 1;
  width: 92px;
  height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid #957cff;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #4d3ba2, #151f50 68%);
  box-shadow: 0 0 0 6px rgba(113,81,246,.08), 0 0 24px rgba(111,76,255,.7);
}
.fusion-path > div span { font-size: 22px; }
.fusion-path > div b { font-size: 11px; }
.fusion-path > em { position: absolute; left: 50%; bottom: -1px; width: 1px; height: 28px; background: #7556f6; box-shadow: 0 0 9px #7556f6; }
.fusion-result-card { width: min(100%, 430px); min-height: 245px; margin: 0 auto; padding: 16px; }
.fusion-result-card .preview-slot { min-height: 150px; }
.fusion-result-card .preview-empty { min-height: 150px; padding: 20px; }
.fusion-result-card .final-result { padding: 0; border: 0; background: transparent; }
.fusion-result-card .final-video { min-height: 180px; border-radius: 12px; }
.fusion-result-card .final-info { padding: 10px 0 0; }
.fusion-result-action {
  min-height: 42px;
  margin-top: 12px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(100deg,#7747ff,#32aef5);
  font-size: 13px;
  font-weight: 800;
  pointer-events: none;
}
@media (max-width: 1199px) {
  .fusion-assets { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fusion-copy-card, .fusion-sound-card, .fusion-avatar-card { transform: none; }
  .fusion-avatar-card { grid-column: 1 / -1; min-height: 210px; }
  .fusion-avatar-card .selected-digital-human-media { height: 180px; }
  .fusion-path > i:nth-child(1) { left: 28%; transform: rotate(-42deg); }
  .fusion-path > i:nth-child(3) { right: 28%; transform: rotate(42deg); }
}
@media (max-width: 767px) {
  .copy-continue { align-items: stretch; flex-direction: column; }
  .copy-continue .primary { width: 100%; }
  .fusion-assets { grid-template-columns: 1fr; }
  .fusion-avatar-card { grid-column: auto; }
  .fusion-card { min-height: 205px; }
  .fusion-path { height: 112px; flex-basis: 112px; }
  .fusion-path > i { display: none; }
  .fusion-path > div { width: 78px; height: 78px; }
  .fusion-path > em { height: 20px; }
  .fusion-result-card { width: 100%; }
}

.workflow-library-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.workflow-library-head h3 { margin: 0; font-size: 13px; }
.workflow-library-head p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.workflow-avatar-grid, .digital-human-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.workflow-avatar-card, .digital-human-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e0e4ee;
  border-radius: 13px;
  background: #fff;
}
.workflow-avatar-card { padding: 0; text-align: left; cursor: pointer; }
.workflow-avatar-card.selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(108,77,246,.1); }
.asset-media { position: relative; height: 150px; overflow: hidden; background: #111a31; }
.asset-media video, .asset-media img { width: 100%; height: 100%; object-fit: cover; }
.asset-media span { position: absolute; left: 9px; top: 9px; padding: 4px 7px; border-radius: 999px; color: #fff; background: rgba(7,13,31,.72); font-size: 8px; }
.asset-card-copy { padding: 11px; }
.asset-card-copy b { display: block; overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.asset-card-copy small { display: block; margin-top: 4px; color: var(--muted); font-size: 8px; }
.selected-digital-human { width: 100%; display: grid; grid-template-columns: minmax(180px,1fr) 1fr; gap: 16px; align-items: center; padding: 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; color: #fff; background: rgba(255,255,255,.04); }
.selected-digital-human-media { min-height: 250px; overflow: hidden; border-radius: 12px; background: #050b1b; }
.selected-digital-human-media video, .selected-digital-human-media img { width: 100%; height: 100%; min-height: 250px; max-height: 340px; object-fit: contain; }
.selected-digital-human h3 { color: #fff; }
.selected-digital-human p { color: #8f9cbc; font-size: 9px; }
.library-empty { min-height: 240px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; text-align: center; border: 1px dashed #dfe3ed; border-radius: 15px; background: #fbfcff; }
.library-empty > span { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 13px; border-radius: 14px; color: var(--primary); background: var(--primary-soft); font-size: 21px; }
.library-empty h3 { margin: 0; font-size: 13px; }
.library-empty p { max-width: 310px; margin: 7px 0 15px; color: var(--muted); font-size: 9px; line-height: 1.7; }

/* Asset and works views */
.asset-page { max-width: 1420px; margin: 0 auto; padding: 42px 34px 60px; }
.asset-page-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 26px; }
.asset-page-head > div:first-child { display: flex; align-items: center; gap: 14px; }
.asset-page-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #fff; background: linear-gradient(145deg,#8063fa,#6040e5); box-shadow: 0 10px 22px rgba(108,77,246,.22); font-size: 20px; }
.asset-page-head p { margin: 0 0 4px; color: var(--primary); font-size: 9px; font-weight: 800; letter-spacing: 1.4px; }
.asset-page-head h1 { margin: 0; font-size: 27px; }
.asset-page-head div > span:last-child { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.slot-summary { min-width: 110px; padding: 12px 15px; border: 1px solid #e4e0f8; border-radius: 12px; background: #f8f6ff; text-align: right; }
.slot-summary small { display: block; color: #8f85bb; font-size: 8px; }
.slot-summary b { display: block; margin-top: 4px; color: var(--primary); font-size: 18px; }
.asset-page-grid { display: grid; grid-template-columns: minmax(290px,.72fr) minmax(430px,1.28fr); gap: 18px; align-items: start; }
.asset-upload-card, .asset-library-card, .works-page-card { border: 1px solid #e2e6ef; border-radius: 18px; background: #fff; box-shadow: 0 14px 36px rgba(31,39,75,.055); }
.asset-upload-card { padding: 22px; }
.asset-library-card { min-height: 520px; padding: 22px; }
.asset-upload-title { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
.asset-upload-title > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--primary); background: var(--primary-soft); font-size: 19px; }
.asset-upload-title h2, .asset-library-head h2 { margin: 0; font-size: 15px; }
.asset-upload-title p, .asset-library-head p { margin: 4px 0 0; color: var(--muted); font-size: 9px; }
.asset-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 13px; color: #606b82; font-size: 10px; font-weight: 650; }
.asset-dropzone { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 18px; border: 1.5px dashed #ccd2df; border-radius: 14px; text-align: center; background: #fafbfe; cursor: pointer; }
.asset-dropzone input { display: none; }
.asset-dropzone > span { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 13px; color: var(--primary); background: var(--primary-soft); font-size: 20px; }
.asset-dropzone h3 { margin: 12px 0 5px; font-size: 12px; }
.asset-dropzone p, .asset-dropzone small { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.7; }
.asset-upload-submit { width: 100%; min-height: 46px; margin-top: 14px; }
.asset-help { margin: 13px 0 0; color: #8a94aa; font-size: 8px; line-height: 1.6; }
.asset-library-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.asset-library-head > span { padding: 6px 9px; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: 8px; }
.digital-human-card .asset-card-actions { display: flex; gap: 7px; padding: 0 11px 11px; }
.asset-card-actions button { flex: 1; min-height: 30px; border: 1px solid #e3e6ed; border-radius: 8px; color: #667188; background: #fff; font-size: 8px; cursor: pointer; }
.asset-card-actions button.danger { color: #c94e63; border-color: #f2d7dc; background: #fff8f9; }
.voice-library-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.voice-library-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 145px; padding: 18px 12px 12px; border: 1px solid #e1e5ee; border-radius: 13px; background: #fff; text-align: center; }
.voice-library-card .voice-avatar { width: 46px; height: 46px; }
.voice-library-card b { max-width: 100%; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.voice-library-card small { color: var(--muted); font-size: 8px; }
.voice-library-actions { display: flex; gap: 6px; margin-top: auto; }
.voice-library-actions button { min-height: 28px; padding: 0 9px; border: 1px solid #e2e5ec; border-radius: 8px; color: #68738a; background: #fff; font-size: 8px; cursor: pointer; }
.voice-library-actions button:last-child { color: #ca4d62; }
.works-page-card { min-height: 520px; padding: 22px; }
.works-page-card .history-item { border-radius: 12px; }

@media (max-width: 1199px) {
  .workspace { grid-template-columns: minmax(0,1fr); }
  .preview-rail { grid-column: auto; min-height: 570px; }
  .asset-page-grid { grid-template-columns: minmax(260px,.85fr) minmax(360px,1.15fr); }
}
@media (max-width: 900px) {
  .app-layout, .app-layout.sidebar-collapsed { display: block; }
  .app-sidebar { position: fixed; left: 0; top: 0; width: 232px; transform: translateX(-105%); box-shadow: 18px 0 50px rgba(17,22,48,.2); }
  .app-layout.mobile-sidebar-open .app-sidebar { transform: translateX(0); }
  .app-layout.mobile-sidebar-open .sidebar-backdrop { position: fixed; inset: 0; z-index: 50; display: block; background: rgba(7,12,29,.48); }
  .mobile-sidebar-toggle { position: fixed; left: 14px; top: 14px; z-index: 45; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #e1e4ed; border-radius: 11px; color: var(--primary); background: rgba(255,255,255,.94); box-shadow: 0 8px 20px rgba(31,39,75,.12); cursor: pointer; }
  .page-shell, .asset-page { padding-top: 72px; }
  .asset-page-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .page-shell, .asset-page { padding: 72px 12px 36px; }
  .hero { margin-bottom: 15px; }
  .stepper { position: static; display: flex; overflow-x: auto; padding: 9px; }
  .step { min-width: 50px; }
  .step span { display: none; }
  .workspace { display: flex; }
  .panels { padding: 22px 16px; }
  .context-selects { grid-template-columns: 1fr; }
  .workflow-avatar-grid, .digital-human-grid { grid-template-columns: 1fr; }
  .selected-digital-human { grid-template-columns: 1fr; }
  .asset-page-head { align-items: flex-start; }
  .asset-page-head h1 { font-size: 22px; }
  .asset-page-head > div:first-child { align-items: flex-start; }
  .slot-summary { min-width: 82px; }
  .voice-library-grid { grid-template-columns: 1fr 1fr; }
}

/* Account panel and asset library polish */
.sidebar-account {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  padding-top: 12px;
}
.app-sidebar .user-area {
  width: 100%;
  margin: 0;
  padding: 7px;
  border: 1px solid #e6e8f0;
  border-radius: 14px;
  background: linear-gradient(155deg, #fff 0%, #faf9ff 100%);
  box-shadow: 0 8px 24px rgba(37, 31, 73, .055);
}
.app-sidebar .user-trigger {
  min-height: 58px;
  justify-content: flex-start;
  gap: 9px;
  padding: 8px 9px;
  outline: none;
}
.app-sidebar .user-trigger:focus-visible { box-shadow: 0 0 0 3px rgba(108,77,246,.14); }
.app-sidebar .user-avatar { width: 34px; height: 34px; font-size: 12px; }
.app-sidebar .user-identity {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  text-align: left;
}
.app-sidebar .user-heading-row {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.app-sidebar .user-name {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-membership-badge {
  flex: 0 0 auto;
  padding: 3px 5px;
  border: 1px solid #dfd6ff;
  border-radius: 999px;
  color: #6548dc;
  background: #f1edff;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}
.app-sidebar .user-identity small {
  width: 100%;
  overflow: hidden;
  color: #929bae;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-sidebar .user-arrow { margin-left: auto; color: #9aa2b4; }
.app-sidebar .user-dropdown {
  left: 0;
  bottom: calc(100% + 10px);
  width: 218px;
  padding: 8px;
  border-color: #e3e5ee;
}
.app-sidebar .user-dropdown-header { align-items: center; text-align: left; }
.user-dropdown-action,
.app-sidebar .user-dropdown a {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.user-dropdown-action:hover { background: #f5f3ff; }
.user-dropdown-action > span,
.app-sidebar .user-dropdown a > span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 11px;
}
.user-dropdown-action div,
.app-sidebar .user-dropdown a div { display: flex; flex-direction: column; gap: 1px; }
.user-dropdown-action b,
.app-sidebar .user-dropdown a b { color: var(--ink); font-size: 10px; }
.user-dropdown-action small,
.app-sidebar .user-dropdown a small { color: var(--muted); font-size: 8px; }
.app-sidebar #btn-logout > span { color: #cc5367; background: #fff0f3; }
.app-sidebar #btn-logout b { color: #c74d62; }
.sidebar-collapse {
  justify-content: flex-start;
  min-height: 36px;
  margin: 0;
  padding: 0 10px;
  text-align: left;
}
.sidebar-collapse span { width: 24px; text-align: center; }
.sidebar-collapsed .sidebar-account { align-items: center; }
.app-layout.sidebar-collapsed .app-sidebar,
html[data-sidebar-collapsed="1"] .app-sidebar {
  width: 76px;
  flex-basis: 76px;
}
.sidebar-collapsed .app-sidebar .user-area {
  width: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.sidebar-collapsed .app-sidebar,
html[data-sidebar-collapsed="1"] .app-sidebar {
  overflow: visible;
}
.sidebar-collapsed .app-sidebar .user-dropdown,
html[data-sidebar-collapsed="1"] .app-sidebar .user-dropdown {
  left: calc(100% + 10px);
  right: auto;
  bottom: 0;
  z-index: 120;
}
.sidebar-collapsed .sidebar-account {
  width: 48px;
  padding-top: 12px;
}
.sidebar-collapsed .app-sidebar .user-avatar {
  width: 34px;
  height: 34px;
  box-shadow: 0 6px 16px rgba(108,77,246,.18);
}
.app-sidebar .user-area,
.sidebar-collapse {
  transition:
    width .2s cubic-bezier(.4, 0, .2, 1),
    padding .2s cubic-bezier(.4, 0, .2, 1),
    border-color .14s ease,
    background-color .14s ease,
    box-shadow .14s ease;
}
.sidebar-collapsed .app-sidebar .user-trigger {
  width: 48px;
  min-height: 48px;
  justify-content: center;
  padding: 7px;
  gap: 0;
}
.sidebar-collapsed .sidebar-collapse {
  width: 44px;
  min-height: 40px;
  margin: 6px 2px 0;
  justify-content: center;
  padding: 0;
  gap: 0;
  border: 1px solid #ebe7ff;
  border-radius: 12px;
  background: #faf9ff;
}
.sidebar-collapsed .sidebar-collapse:hover {
  border-color: #dcd3ff;
  background: #f1edff;
}
.sidebar-collapsed .sidebar-collapse span {
  width: auto;
  color: #7e88a0;
}
.sidebar-collapsed .sidebar-collapse svg { width: 18px; height: 18px; }

.asset-page { max-width: 1500px; padding-top: 38px; }
.asset-page-head { align-items: stretch; margin-bottom: 22px; }
.asset-page-head > div:first-child { align-self: center; }
.asset-capability-panel {
  width: 310px;
  padding: 14px 16px;
  border: 1px solid #e4e0f8;
  border-radius: 16px;
  background: linear-gradient(135deg, #fbfaff, #f4f0ff);
  box-shadow: 0 10px 28px rgba(69, 48, 150, .07);
}
.asset-capability-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.asset-capability-top > span { display: flex; align-items: baseline; gap: 8px; }
.asset-capability-top small { color: #847aaf; font-size: 9px; }
.asset-capability-top b { color: var(--primary); font-size: 18px; }
.asset-capability-top em {
  padding: 5px 8px;
  border-radius: 999px;
  color: #6449d8;
  background: #eae3ff;
  font-size: 8px;
  font-style: normal;
  font-weight: 750;
}
.asset-capability-panel progress {
  width: 100%;
  height: 6px;
  margin: 10px 0 6px;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: #e8e3f8;
}
.asset-capability-panel progress::-webkit-progress-bar { background: #e8e3f8; }
.asset-capability-panel progress::-webkit-progress-value { border-radius: 10px; background: linear-gradient(90deg,#7050f2,#9a7dff); }
.asset-capability-panel progress::-moz-progress-bar { border-radius: 10px; background: linear-gradient(90deg,#7050f2,#9a7dff); }
.asset-capability-panel > p { margin: 0; color: #837a9f; font-size: 8px; }
.asset-page-grid { min-width: 0; grid-template-columns: minmax(0, .68fr) minmax(0, 1.32fr); gap: 20px; }
.asset-upload-card,
.asset-library-card {
  min-width: 0;
  overflow: hidden;
  border-color: #e4e6ee;
  box-shadow: 0 18px 42px rgba(31,39,75,.065);
}
.asset-upload-card { position: relative; padding: 24px; }
.asset-upload-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg,#6f4ff2,#a38aff);
}
.asset-library-card { min-height: 580px; padding: 24px; }
.asset-upload-title { align-items: flex-start; margin-bottom: 22px; }
.asset-upload-title > span { width: 40px; height: 40px; }
.asset-upload-title small,
.asset-library-head > div > small {
  display: block;
  margin-bottom: 4px;
  color: var(--primary);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 1.2px;
}
.asset-upload-title h2,
.asset-library-head h2 { font-size: 16px; }
.asset-form-section { margin-bottom: 18px; }
.asset-section-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  color: #555f75;
  font-size: 9px;
  font-weight: 750;
}
.asset-section-label i {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 6px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: 8px;
  font-style: normal;
}
.asset-field span { text-align: left; }
.asset-dropzone {
  position: relative;
  min-height: 190px;
  border-color: #cfc9ed;
  background: linear-gradient(145deg,#fcfbff,#f7f5ff);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.asset-dropzone:hover { border-color: var(--primary); background: #f6f2ff; transform: translateY(-1px); }
.asset-dropzone:focus-within { box-shadow: 0 0 0 3px rgba(108,77,246,.1); }
.asset-dropzone.slot-full {
  cursor: not-allowed;
  border-color: #e1e3e9;
  background: #f6f7f9;
  filter: grayscale(.45);
}
.asset-dropzone.slot-full::after {
  content: "席位已满，请先删除已有资产";
  position: absolute;
  inset: auto 14px 12px;
  padding: 6px;
  border-radius: 8px;
  color: #8a7280;
  background: rgba(255,255,255,.92);
  font-size: 8px;
}
.asset-upload-submit:disabled { cursor: not-allowed; box-shadow: none; opacity: .62; }
.asset-quality-tip {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  padding: 11px 12px;
  border-radius: 11px;
  color: #69738a;
  background: #f7f8fb;
}
.asset-quality-tip > span { color: var(--primary); font-weight: 800; }
.asset-quality-tip p { margin: 0; font-size: 8px; line-height: 1.65; }
.asset-quality-tip b { display: block; margin-bottom: 2px; color: #4f5870; }
.asset-library-head { padding-bottom: 16px; border-bottom: 1px solid #edf0f5; }
.asset-library-head > span { font-weight: 750; }
.digital-human-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.digital-human-card {
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(31,39,75,.055);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.digital-human-card:hover { transform: translateY(-2px); border-color: #cdc5f4; box-shadow: 0 14px 30px rgba(50,39,107,.1); }
.digital-human-card .asset-media { height: 205px; }
.digital-human-card .asset-card-copy { padding: 13px 13px 10px; text-align: left; }
.digital-human-card .asset-card-copy > span {
  display: block;
  margin-bottom: 5px;
  color: var(--primary);
  font-size: 7px;
  font-weight: 750;
  letter-spacing: .5px;
}
.digital-human-card .asset-card-copy b { font-size: 12px; }
.digital-human-card .asset-card-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.digital-human-card .asset-card-copy time { display: block; margin-top: 7px; color: #a0a7b6; font-size: 7px; }
.digital-human-card .asset-card-actions { padding: 0 13px 13px; }
.asset-card-actions button { min-height: 34px; font-size: 9px; }
.asset-card-actions .primary-action { color: #fff; border-color: transparent; background: linear-gradient(135deg,#7555f4,#6040e5); }
.asset-card-actions .primary-action span { margin-left: 4px; }
.asset-card-actions button.danger { flex: 0 0 56px; }

.voice-library-grid { grid-template-columns: 1fr; gap: 10px; }
.voice-library-card {
  width: 100%;
  min-width: 0;
  min-height: 92px;
  flex-direction: row;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border-radius: 14px;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.voice-library-card:hover { transform: translateY(-1px); border-color: #d5cef5; background: #fdfcff; }
.voice-library-card.playing { border-color: #917bf1; background: #f7f4ff; box-shadow: 0 0 0 2px rgba(108,77,246,.08); }
.voice-library-card .voice-avatar { flex: 0 0 auto; width: 52px; height: 52px; box-shadow: 0 8px 18px rgba(108,77,246,.2); }
.voice-library-copy { min-width: 0; display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.voice-library-copy > span { margin-bottom: 3px; color: var(--primary); font-size: 7px; font-weight: 750; }
.voice-library-copy b { width: 100%; font-size: 11px; }
.voice-library-copy small { margin-top: 4px; }
.voice-library-actions { flex: 0 0 auto; align-items: center; margin: 0; }
.voice-library-actions button { min-height: 34px; }
.voice-library-actions .voice-play-button { display: flex; align-items: center; gap: 6px; color: #6549da; border-color: #ded7fb; background: #f6f2ff; }
.voice-library-actions .voice-play-button i { font-size: 8px; font-style: normal; }
.voice-library-actions .voice-play-button.playing { color: #fff; border-color: transparent; background: var(--primary); }
.voice-library-actions .voice-delete-button { color: #c64d61; border-color: transparent; background: transparent; }
.voice-quality-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 12px; }
.voice-quality-grid > span { display: flex; flex-direction: column; align-items: flex-start; padding: 9px; border: 1px solid #eceef3; border-radius: 10px; background: #fbfcfe; }
.voice-quality-grid i { color: #54a788; font-size: 8px; font-style: normal; }
.voice-quality-grid b { margin-top: 4px; color: #566077; font-size: 8px; }
.voice-quality-grid small { margin-top: 2px; color: #9aa2b2; font-size: 7px; }

@media (max-width: 1199px) {
  .asset-page-grid { grid-template-columns: 1fr; }
  .asset-upload-card { max-width: none; }
  .digital-human-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .copy-context-card .context-selects { grid-template-columns: 1fr; }
  .app-layout.sidebar-collapsed .app-sidebar,
  html[data-sidebar-collapsed="1"] .app-sidebar {
    width: 232px;
    flex-basis: 232px;
  }
  .sidebar-collapsed .app-sidebar,
  html[data-sidebar-collapsed="1"] .app-sidebar {
    overflow: hidden;
  }
  .sidebar-collapsed .app-sidebar .user-dropdown,
  html[data-sidebar-collapsed="1"] .app-sidebar .user-dropdown {
    left: 0;
    right: auto;
    bottom: calc(100% + 10px);
  }
  .sidebar-collapsed .sidebar-copy {
    width: auto;
    max-width: 170px !important;
    flex: initial !important;
    opacity: 1;
    overflow: visible;
    pointer-events: auto;
    transform: none;
    visibility: visible;
    transition: none;
  }
  .sidebar-collapsed .sidebar-new b,
  .sidebar-collapsed .sidebar-nav-item b,
  .sidebar-collapsed .sidebar-collapse b {
    height: auto;
  }
  .sidebar-collapsed .sidebar-nav-item em {
    height: auto;
    padding: 4px 6px;
  }
  .sidebar-collapsed .sidebar-brand { width: auto; min-height: 44px; justify-content: flex-start; gap: 10px; padding: 0 7px; }
  .sidebar-collapsed .sidebar-brand > div { height: auto; overflow: visible; }
  .sidebar-collapsed .sidebar-brand .brand-mark { width: 38px; height: 38px; border-radius: 12px; }
  .sidebar-collapsed .sidebar-new { width: 100%; min-height: 48px; margin: 25px 0 22px; gap: 10px; border-radius: 12px; }
  .sidebar-collapsed .sidebar-nav { width: 100%; align-items: stretch; gap: 5px; }
  .sidebar-collapsed .sidebar-nav-item { width: 100%; min-height: 46px; display: flex; justify-content: initial; gap: 8px; padding: 7px 10px; border-radius: 11px; }
  .sidebar-collapsed .sidebar-nav-item b { flex: 1 1 auto !important; }
  .sidebar-collapsed .sidebar-nav-item > span { width: 30px; height: 30px; }
  .sidebar-collapsed .sidebar-account { width: auto; align-items: stretch; }
  .sidebar-collapsed .app-sidebar .user-area {
    width: 100%;
    padding: 7px;
    border: 1px solid #e6e8f0;
    background: linear-gradient(155deg, #fff 0%, #faf9ff 100%);
    box-shadow: 0 8px 24px rgba(37, 31, 73, .055);
  }
  .sidebar-collapsed .app-sidebar .user-trigger { width: 100%; min-height: 58px; justify-content: flex-start; gap: 10px; padding: 8px 9px; }
  .sidebar-collapsed .sidebar-collapse { width: 100%; margin: 0; justify-content: flex-start; gap: 7px; padding: 0 10px; border-color: transparent; background: transparent; }
  .sidebar-collapsed .sidebar-collapse span { transform: none; }
  .asset-page-head { align-items: stretch; }
  .asset-capability-panel { width: min(310px, 42vw); }
}
@media (max-width: 767px) {
  .asset-page-head { flex-direction: column; }
  .asset-capability-panel { width: 100%; }
  .digital-human-grid { grid-template-columns: 1fr; }
  .digital-human-card .asset-media { height: 230px; }
  .voice-library-grid { grid-template-columns: 1fr; }
  .voice-library-card { align-items: flex-start; flex-wrap: wrap; }
  .voice-library-copy { width: calc(100% - 70px); }
  .voice-library-actions { width: 100%; justify-content: flex-end; padding-left: 65px; }
  .voice-quality-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .app-sidebar,
  .sidebar-animations-ready .app-sidebar,
  .sidebar-copy,
  .sidebar-collapsed .sidebar-copy,
  .app-sidebar .user-area,
  .sidebar-collapse,
  .sidebar-collapse span {
    transition: none !important;
  }
}

/* 创作台第三步：紧凑音色卡片与个人声音信息卡 */
.panel[data-panel="3"] .voice-head {
  gap: 8px;
  margin: 0 0 9px;
}
.panel[data-panel="3"] .voice-head h3 { font-size: 11px; }
.panel[data-panel="3"] .voice-head span { font-size: 8px; }
.panel[data-panel="3"] .voice-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.panel[data-panel="3"] .voice-card {
  min-height: 86px;
  padding: 10px 7px 8px;
  border-radius: 11px;
}
.panel[data-panel="3"] .voice-card:hover { transform: translateY(-1px); }
.panel[data-panel="3"] .voice-avatar {
  width: 34px;
  height: 34px;
  font-size: 13px;
}
.panel[data-panel="3"] .voice-card b {
  max-width: 100%;
  margin: 5px 0 2px;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel[data-panel="3"] .voice-card small {
  max-width: 100%;
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.panel[data-panel="3"] .voice-card .play {
  top: 7px;
  left: 7px;
  width: 20px;
  height: 20px;
  font-size: 8px;
}
.panel[data-panel="3"] .voice-card.selected:after {
  top: 7px;
  right: 7px;
  width: 15px;
  height: 15px;
  font-size: 8px;
}
.panel[data-panel="3"] .my-voices-section { margin: 14px 0 0; }
.panel[data-panel="3"] .my-voices-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}
.panel[data-panel="3"] .my-voice-card {
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px 22px;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border-radius: 10px;
  text-align: left;
}
.panel[data-panel="3"] .my-voice-card:hover { transform: translateY(-1px); }
.panel[data-panel="3"] .my-voice-card .mv-icon {
  grid-column: 1;
  grid-row: 1;
  width: 30px;
  height: 30px;
  font-size: 14px;
}
.panel[data-panel="3"] .my-voice-card .mv-name {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: none;
  font-size: 10px;
}
.panel[data-panel="3"] .my-voice-card .mv-play {
  position: static;
  grid-column: 3;
  grid-row: 1;
  width: 28px;
  height: 28px;
  font-size: 8px;
}
.panel[data-panel="3"] .my-voice-card .mv-del {
  position: static;
  grid-column: 4;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  color: #a5adbb;
  background: #f5f6f8;
  font-size: 12px;
}
.panel[data-panel="3"] .my-voice-card .mv-del:hover { color: #c64d61; background: #ffedf0; }
.panel[data-panel="3"] .my-voice-add,
.panel[data-panel="3"] .my-voice-empty {
  min-height: 52px;
  border-radius: 10px;
}
.panel[data-panel="3"] .my-voice-add { font-size: 19px; }
.panel[data-panel="3"] .divider {
  margin: 15px 0 9px;
  font-size: 10px;
}
.panel[data-panel="3"] .clone-card {
  min-height: 52px;
  padding: 8px 10px;
  border-radius: 10px;
}
.panel[data-panel="3"] .clone-card > div { gap: 8px; }
.panel[data-panel="3"] .clone-icon { width: 29px; height: 29px; }
.panel[data-panel="3"] .clone-card h3 { margin-bottom: 2px; font-size: 10px; }
.panel[data-panel="3"] .clone-card p { font-size: 8px; }
.panel[data-panel="3"] .upload-small { padding: 6px 8px; font-size: 8px; }
.panel[data-panel="3"] .action-footer { gap: 10px; margin-top: 13px; }
.panel[data-panel="3"] .action-footer span { font-size: 8px; }
.panel[data-panel="3"] .action-footer .primary { min-height: 36px; padding: 0 13px; font-size: 10px; }

@media (max-width: 1199px) {
  .panel[data-panel="3"] .voice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .panel[data-panel="3"] .my-voice-card { grid-template-columns: 28px minmax(0, 1fr) 28px 20px; gap: 6px; }
  .panel[data-panel="3"] .my-voice-card .mv-icon { width: 28px; height: 28px; }
  .panel[data-panel="3"] .my-voice-card .mv-play { width: 26px; height: 26px; }
  .panel[data-panel="3"] .clone-card { align-items: flex-start; flex-direction: column; }
  .panel[data-panel="3"] .clone-card > div { width: 100%; }
  .panel[data-panel="3"] .upload-small { align-self: flex-end; }
}

/* 智能文案步骤：紧凑创作方向与编辑器主区布局 */
.panel[data-panel="2"] .copy-context-card {
  display: grid;
  grid-template-columns: 112px repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.panel[data-panel="2"] .copy-context-head { min-width: 0; margin: 0; }
.panel[data-panel="2"] .copy-context-head > div { gap: 8px; }
.panel[data-panel="2"] .copy-context-head > div > span {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 11px;
}
.panel[data-panel="2"] .copy-context-head h3 { font-size: 11px; }
.panel[data-panel="2"] .context-selects {
  display: contents;
  margin: 0;
}
.panel[data-panel="2"] .context-selects label {
  min-width: 0;
  gap: 4px;
  font-size: 8px;
  overflow: hidden;
}
.panel[data-panel="2"] .context-selects select {
  width: 100%;
  min-height: 36px;
  min-width: 0;
  padding: 0 24px 0 10px;
  border-radius: 9px;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}
.panel[data-panel="2"] .copy-tabs {
  margin-top: 0;
  margin-bottom: 10px;
}
.panel[data-panel="2"] .copy-tabs button { padding: 9px 13px; font-size: 10px; }
.panel[data-panel="2"] .copy-layout {
  grid-template-columns: minmax(0, 1.75fr) minmax(190px, .7fr);
  gap: 12px;
  align-items: stretch;
}
.panel[data-panel="2"] .editor-card,
.panel[data-panel="2"] .settings-card { min-width: 0; }
.panel[data-panel="2"] .editor-card textarea {
  min-height: 0;
  height: 260px;
  padding: 15px;
  line-height: 1.8;
  font-size: 11px;
}
.panel[data-panel="2"] .settings-card {
  display: flex;
  flex-direction: column;
  padding: 14px;
}
.panel[data-panel="2"] .settings-card h3 { margin-bottom: 8px; font-size: 11px; }
.panel[data-panel="2"] .settings-card p { margin: 0 0 12px; font-size: 8px; line-height: 1.55; }
.panel[data-panel="2"] .rewrite-spark { width: 28px; height: 28px; font-size: 13px; }
.panel[data-panel="2"] .deepseek-button {
  min-height: 36px;
  margin-top: auto;
  padding: 9px 10px;
  border-radius: 9px;
  font-size: 10px;
}
.panel[data-panel="2"] .mini-progress { min-height: 28px; margin-top: 8px; font-size: 8px; }
.panel[data-panel="2"] .rewrite-result {
  gap: 10px;
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: 10px;
}
.panel[data-panel="2"] .rewrite-result span { font-size: 10px; }
.panel[data-panel="2"] .rewrite-result small { margin-top: 2px; font-size: 8px; }
.panel[data-panel="2"] .rewrite-result .primary { min-height: 32px; padding: 0 11px; font-size: 9px; }
.panel[data-panel="2"] .copy-continue {
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 11px;
}
.panel[data-panel="2"] .copy-continue > span { font-size: 8px; }
.panel[data-panel="2"] .copy-continue .primary { min-width: 136px; min-height: 34px; font-size: 10px; }

@media (max-width: 1199px) {
  .panel[data-panel="2"] .copy-context-card {
    display: block;
    padding: 11px;
  }
  .panel[data-panel="2"] .copy-context-head { margin-bottom: 9px; }
  .panel[data-panel="2"] .context-selects {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .panel[data-panel="2"] .copy-layout { grid-template-columns: 1fr; }
  .panel[data-panel="2"] .settings-card { order: 2; min-height: 140px; }
}

@media (min-width: 768px) and (max-width: 899px) {
  .panel[data-panel="2"] .context-selects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .source-upload-dropzone { align-items: flex-start; }
  .source-upload-action { margin-left: auto; }
  .source-upload-copy small { white-space: normal; line-height: 1.35; }
  .panel[data-panel="2"] .copy-context-card {
    display: block;
    padding: 11px;
  }
  .panel[data-panel="2"] .copy-context-head { margin-bottom: 9px; }
  .panel[data-panel="2"] .context-selects {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .panel[data-panel="2"] .context-selects select { min-height: 38px; }
  .panel[data-panel="2"] .editor-card textarea { height: 230px; }
  .panel[data-panel="2"] .rewrite-result,
  .panel[data-panel="2"] .copy-continue {
    align-items: stretch;
    flex-direction: column;
  }
  .panel[data-panel="2"] .rewrite-result .primary,
  .panel[data-panel="2"] .copy-continue .primary { width: 100%; }
}

/* Final voice-card consistency override (kept after legacy asset rules). */
.panel[data-panel="3"] .my-voices-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.panel[data-panel="3"] .my-voice-card {
  position: relative;
  min-height: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  padding: 10px 7px 8px;
  border-radius: 11px;
  text-align: center;
}
.panel[data-panel="3"] .my-voice-card .mv-icon { width: 34px; height: 34px; flex: 0 0 auto; font-size: 14px; }
.panel[data-panel="3"] .my-voice-card .mv-name { width: 100%; max-width: 100%; margin-top: 5px; overflow: hidden; font-size: 10px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.panel[data-panel="3"] .my-voice-card .mv-play { position: absolute; top: 7px; left: 7px; width: 20px; height: 20px; font-size: 8px; }
.panel[data-panel="3"] .my-voice-card .mv-del { position: absolute; top: 7px; right: 7px; width: 18px; height: 18px; display: none; place-items: center; padding: 0; border-radius: 50%; font-size: 11px; }
.panel[data-panel="3"] .my-voice-card:hover .mv-del { display: grid; }
.panel[data-panel="3"] .my-voice-add,
.panel[data-panel="3"] .my-voice-empty { min-height: 86px; border-radius: 11px; }
.panel[data-panel="3"] .my-voice-add { font-size: 22px; }
@media (max-width: 1199px) {
  .panel[data-panel="3"] .my-voices-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Final workbench sizing override: equal desktop panes and independent scroll. */
@media (min-width: 1200px) {
  .workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: clamp(560px, calc(100vh - 170px), 820px); min-height: 0; align-items: stretch; }
  .workspace > .panels, .workspace > .preview-rail { height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(108,77,246,.55) rgba(108,77,246,.08); }
}
.panels .audio-result { display: grid; grid-template-columns: minmax(150px,1fr) minmax(190px,1.4fr) auto; align-items: center; gap: 12px; min-width: 0; }
.panels .audio-result > div:first-child { min-width: 0; }
.panels .audio-result audio { width: 100%; min-width: 0; height: 32px; }
.panels .audio-result .secondary { white-space: nowrap; }
@media (max-width: 767px) {
  .workspace { height: auto; min-height: 0; }
  .workspace > .panels, .workspace > .preview-rail { height: auto; overflow: visible; }
  .panels .audio-result { grid-template-columns: 1fr; }
  .panels .audio-result audio, .panels .audio-result .secondary { width: 100%; }
}