:root {
  --bg: #f4f2ee;
  --bg-soft: #faf9f6;
  --ink: #161719;
  --muted: #777b83;
  --line: rgba(35, 42, 54, 0.1);
  --line-strong: rgba(35, 42, 54, 0.16);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-solid: #ffffff;
  --panel: rgba(248, 247, 244, 0.86);
  --gold: #bf9a62;
  --gold-soft: #f5ead7;
  --blue: #4778ff;
  --blue-soft: #edf3ff;
  --green: #31b57b;
  --amber: #e2a64d;
  --shadow: 0 24px 70px rgba(40, 45, 56, 0.12);
  --soft-shadow: 0 16px 38px rgba(39, 45, 57, 0.1);
  --radius-lg: 26px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --font-ui: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-display: "Microsoft YaHei UI", "PingFang SC", var(--font-ui);
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-family: var(--font-ui);
}

* {
  box-sizing: border-box;
  letter-spacing: 0 !important;
}

body {
  min-width: 1180px;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -20%, rgba(255, 255, 255, 0.95) 0, transparent 42%),
    linear-gradient(145deg, #faf9f6 0%, #f1efea 44%, #ece9e2 100%);
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
  color: inherit;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    opacity 0.18s ease;
}

details:not([open]) > :not(summary) {
  display: none !important;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 0;
  box-shadow:
    0 0 0 4px rgba(71, 120, 255, 0.12),
    0 0 0 1px rgba(71, 120, 255, 0.42);
}

.app-shell {
  display: grid;
  grid-template-columns: 72px 1fr;
  min-height: 100vh;
}

.brand-rail {
  position: sticky;
  top: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  height: 100vh;
  padding: 18px 10px;
  background: rgba(255, 255, 255, 0.64);
  border-right: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 12px 0 34px rgba(58, 61, 70, 0.07);
  backdrop-filter: blur(24px);
}

.brand-mark,
.rail-button,
.rail-add,
.icon-button,
.upload-icon {
  display: grid;
  place-items: center;
}

.brand-mark {
  position: relative;
  overflow: hidden;
  width: 38px;
  height: 38px;
  color: #050506;
  background: #fff;
  border: 1px solid rgba(10, 13, 18, 0.12);
  border-radius: 14px;
  box-shadow: var(--soft-shadow);
}

.banana-cat-mark {
  background: transparent;
}

.brand-symbol {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-mark:hover,
.brand-mark.active {
  color: #fff;
  background: #111317;
  transform: translateY(-1px);
}

.spark {
  font-size: 20px;
  color: #0d0e12;
}

.rail-nav {
  display: grid;
  gap: 5px;
  width: 100%;
  overflow: auto;
  padding-right: 2px;
}

.rail-nav::-webkit-scrollbar {
  width: 0;
}

.rail-button {
  position: relative;
  overflow: hidden;
  width: 52px;
  min-height: 46px;
  gap: 4px;
  background: transparent;
  border-radius: 16px;
  color: #555a63;
  transition: 0.2s ease;
}

.rail-button span {
  font-size: 15px;
}

.rail-button small {
  font-size: 9px;
  letter-spacing: 0;
}

.rail-button.active,
.rail-button:hover {
  background: #111317;
  color: #fff;
  box-shadow: 0 16px 30px rgba(16, 18, 24, 0.18);
}

.rail-button.active::after {
  content: "";
  width: 4px;
  height: 4px;
  margin-top: -2px;
  background: currentColor;
  border-radius: 50%;
}

.rail-button:nth-child(3).active,
.rail-button:nth-child(3):hover {
  color: var(--gold-soft);
}

.rail-add {
  width: 36px;
  height: 36px;
  margin-top: auto;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
}

.atelier {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  padding: 18px 24px 28px;
}

.atelier::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(60, 66, 78, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60, 66, 78, 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at 50% 35%, #000 0, transparent 70%);
}

.topbar {
  position: sticky;
  top: 14px;
  z-index: 46;
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: center;
  gap: 20px;
  margin-bottom: 22px;
  padding: 0 2px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.logo-lockup {
  display: grid;
  gap: 1px;
}

.logo-lockup strong {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 950;
  line-height: 0.95;
  letter-spacing: 0;
}

.logo-lockup span {
  display: inline-block;
  margin-left: 2px;
  color: transparent;
  background: linear-gradient(135deg, #151820 0%, #51617e 42%, #bf9a62 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-style: italic;
}

.logo-lockup small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.banana-wordmark strong::after {
  content: "";
  display: block;
  width: 82px;
  height: 5px;
  margin-top: 5px;
  background: linear-gradient(90deg, #f2c857, #151820 74%, transparent);
  border-radius: 999px;
}

.top-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-height: 56px;
}

.recharge-stack {
  display: grid;
  gap: 7px;
  justify-items: end;
  align-items: center;
}

.icon-button {
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--line);
  border-radius: 50%;
}

.auth-button {
  flex: 0 0 auto;
  white-space: nowrap;
  min-height: 34px;
  padding: 0 13px;
  color: #313842;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.auth-button:hover,
.auth-button.active {
  color: #fff;
  background: #151820;
  border-color: #151820;
}

.recharge-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 13px;
  color: #fff;
  background:
    linear-gradient(135deg, #1d2230, #495f9d),
    #151820;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 15px;
  box-shadow: 0 12px 24px rgba(50, 74, 136, 0.18);
  font-size: 12px;
  font-weight: 800;
}

.project-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px 0 10px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 700;
  color: #646a73;
}

.account-dot {
  width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 8px;
  background:
    radial-gradient(circle at 66% 34%, #fff2c9 0 16%, transparent 17%),
    linear-gradient(135deg, #141820, #8aa78f 48%, #e1bd83);
  box-shadow: 0 6px 14px rgba(31, 36, 48, 0.16);
}

.switcher-arrow {
  color: #9aa0a9;
  font-size: 11px;
}

.avatar {
  width: 34px;
  height: 34px;
  border: 2px solid #fff;
  border-radius: 50%;
  background:
    radial-gradient(circle at 64% 32%, #ffe4bd 0 16%, transparent 17%),
    linear-gradient(135deg, #9fcfbf, #e5c39b);
  box-shadow: 0 8px 22px rgba(39, 47, 59, 0.16);
}

.icon-button:hover,
.icon-button.active,
.recharge-button:hover,
.recharge-button.active,
.avatar:hover,
.project-switcher:hover,
.project-switcher.active {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(39, 47, 59, 0.12);
}

.page {
  position: relative;
  z-index: 1;
  display: none;
}

.page.active {
  display: block;
  animation: pageIn 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.page-video.active {
  padding-bottom: 230px;
}

.glass-card {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(248, 247, 244, 0.68)),
    rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    var(--soft-shadow),
    inset 0 0 0 1px rgba(28, 32, 39, 0.05);
  backdrop-filter: blur(24px);
}

.glass-card:hover {
  border-color: rgba(255, 255, 255, 0.98);
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6e747d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.brand-kicker {
  text-transform: none;
}

.section-kicker::before {
  content: "✦";
  color: var(--gold);
  font-size: 12px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  margin-top: 10px;
  font-size: 38px;
  letter-spacing: 0;
}

h2 {
  margin-top: 7px;
  font-size: 22px;
  letter-spacing: 0;
}

h3 {
  font-size: 16px;
  letter-spacing: 0;
}

p {
  color: #626975;
  line-height: 1.65;
}

.home-grid {
  display: grid;
  grid-template-columns: 230px minmax(620px, 1fr) 292px;
  gap: 20px;
  min-height: calc(100vh - 88px);
}

.home-hero {
  display: grid;
  gap: 18px;
  min-height: calc(100vh - 88px);
}

.hero-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(390px, 0.8fr) minmax(560px, 1.2fr);
  gap: 34px;
  align-items: center;
  overflow: hidden;
  min-height: 430px;
  padding: 42px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(244, 242, 236, 0.72)),
    radial-gradient(circle at 72% 38%, rgba(71, 120, 255, 0.13), transparent 36%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 36px;
  box-shadow: var(--shadow);
}

.hero-stage::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    linear-gradient(90deg, transparent, rgba(71, 120, 255, 0.08), transparent),
    linear-gradient(0deg, transparent, rgba(191, 154, 98, 0.08), transparent);
  animation: ambientSweep 8s linear infinite;
}

.hero-copy,
.motion-showcase,
.home-command-grid,
.home-bottom-grid {
  position: relative;
  z-index: 1;
}

.hero-copy h1 {
  max-width: 620px;
  margin-top: 12px;
  font-size: 54px;
  line-height: 1.02;
}

.hero-copy p {
  max-width: 560px;
  margin-top: 18px;
  font-size: 15px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.hero-actions button {
  width: auto;
  min-width: 136px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
}

.hero-actions button:not(.primary-button) {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  color: #323842;
}

.hero-proof-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.hero-proof-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 11px;
  color: #5d6571;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 999px;
  font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(28, 32, 39, 0.03);
}

.hero-proof-strip b {
  color: #1d2230;
  font-weight: 900;
}

.motion-showcase {
  min-height: 354px;
}

.video-frame,
.director-preview {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 30px;
  box-shadow: var(--shadow);
}

.video-frame {
  width: min(100%, 620px);
  height: 354px;
  margin-left: auto;
  transform: rotate(-1deg);
}

.video-frame img,
.director-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scanline {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.58), transparent 70%);
  animation: loadingSweep 2.8s ease-in-out infinite;
}

.play-badge,
.caption-card {
  position: absolute;
  z-index: 2;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  font-size: 12px;
  backdrop-filter: blur(14px);
}

.play-badge {
  top: 14px;
  left: 14px;
}

.caption-card {
  right: 16px;
  bottom: 16px;
}

.floating-shot {
  position: absolute;
  overflow: hidden;
  width: 124px;
  height: 154px;
  background: #fff;
  border: 5px solid rgba(255, 255, 255, 0.8);
  border-radius: 22px;
  box-shadow: var(--soft-shadow);
  animation: floatCard 4.8s ease-in-out infinite;
}

.floating-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shot-a {
  top: 8px;
  right: 28px;
}

.shot-b {
  bottom: 8px;
  left: 40px;
  animation-delay: -1.4s;
}

.ai-ring {
  position: absolute;
  right: 48%;
  bottom: 34px;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  color: var(--blue);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(71, 120, 255, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 0 12px rgba(71, 120, 255, 0.07), var(--soft-shadow);
  animation: corePulseNoTranslate 2.8s ease-in-out infinite;
}

.hero-live-panel {
  position: absolute;
  right: 34px;
  bottom: 34px;
  z-index: 3;
  display: grid;
  gap: 6px;
  width: 210px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 18px;
  box-shadow: 0 18px 42px rgba(31, 36, 48, 0.12);
  backdrop-filter: blur(18px);
  animation: floatCard 5.2s ease-in-out -0.8s infinite;
}

.hero-live-panel span {
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
}

.hero-live-panel strong {
  font-size: 13px;
}

.hero-live-panel i {
  display: block;
  overflow: hidden;
  height: 7px;
  background: rgba(31, 36, 48, 0.08);
  border-radius: 999px;
}

.hero-live-panel b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--green));
  border-radius: inherit;
  animation: progressGlow 1.8s ease-in-out infinite;
}

.hero-mini-toolbar {
  position: absolute;
  left: 54px;
  top: 34px;
  z-index: 3;
  display: flex;
  gap: 7px;
  padding: 7px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  box-shadow: 0 16px 34px rgba(31, 36, 48, 0.09);
  backdrop-filter: blur(18px);
}

.hero-mini-toolbar button {
  min-height: 28px;
  padding: 0 10px;
  color: #404753;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(35, 42, 54, 0.08);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.home-command-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.launch-card {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  min-height: 88px;
  padding: 14px;
  border-radius: 20px;
  cursor: pointer;
  box-shadow:
    0 14px 32px rgba(39, 45, 57, 0.07),
    inset 0 0 0 1px rgba(28, 32, 39, 0.035);
}

.launch-card span {
  display: grid;
  place-items: center;
  grid-row: 1 / span 2;
  width: 32px;
  height: 32px;
  color: var(--blue);
  background: var(--blue-soft);
  border-radius: 11px;
}

.launch-card strong {
  min-width: 0;
  font-size: 15px;
  line-height: 1.2;
}

.launch-card small {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.launch-card:hover {
  transform: translateY(-4px);
  border-color: rgba(71, 120, 255, 0.2);
  box-shadow: 0 22px 48px rgba(39, 45, 57, 0.13);
}

.home-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 18px;
}

.home-filmstrip-v2 {
  min-height: 206px;
  padding: 14px;
}

.asset-ratio-row {
  display: grid;
  grid-template-columns: 1.45fr 1fr 0.78fr 0.68fr 1.7fr 1fr;
  gap: 10px;
  align-items: start;
}

.asset-ratio-card {
  position: relative;
  overflow: hidden;
  align-self: start;
  min-width: 0;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(28, 32, 39, 0.04);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.asset-ratio-card:hover {
  transform: translateY(-2px);
  border-color: rgba(71, 120, 255, 0.24);
  box-shadow: 0 16px 30px rgba(42, 47, 58, 0.12);
}

.asset-ratio-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asset-ratio-card span {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 5px 8px;
  color: #fff;
  background: rgba(16, 18, 24, 0.56);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  opacity: 0;
  transform: translateY(5px);
  transition: 0.18s ease;
  backdrop-filter: blur(10px);
}

.asset-ratio-card:hover span {
  opacity: 1;
  transform: translateY(0);
}

.ratio-wide {
  aspect-ratio: 16 / 9;
}

.ratio-square {
  aspect-ratio: 1 / 1;
}

.ratio-portrait {
  aspect-ratio: 3 / 4;
}

.ratio-story {
  aspect-ratio: 9 / 16;
}

.ratio-banner {
  aspect-ratio: 21 / 9;
}

.queue-list.compact {
  grid-template-columns: 1fr;
}

.task-panel,
.queue-panel {
  border-radius: var(--radius-lg);
  padding: 22px;
}

.task-panel {
  align-self: start;
  margin-top: 56px;
}

.task-panel p {
  margin-top: 12px;
  font-size: 13px;
}

.status-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 22px 0;
}

.status-row div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.status-row span,
.today-card,
.queue-item small,
.queue-item span,
.field-label,
.field-stack label,
.platform-list small {
  color: var(--muted);
  font-size: 12px;
}

.status-row strong {
  font-size: 13px;
}

.today-card {
  padding: 16px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.mini-title {
  margin-bottom: 12px;
  color: #1c1f25;
  font-weight: 700;
}

.task-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 9px 0;
}

.task-line b {
  margin-left: auto;
  color: #22262d;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.amber {
  background: var(--amber);
}

.blue {
  background: var(--blue);
}

.green {
  background: var(--green);
}

.gray {
  background: #a5abb5;
}

.flow-canvas {
  position: relative;
  min-height: 680px;
  border-radius: 34px;
}

.flow-canvas::before,
.flow-canvas::after {
  content: "";
  position: absolute;
  inset: 54px 20px 120px;
  border: 1px solid rgba(126, 132, 143, 0.13);
  border-radius: 48%;
  transform: perspective(700px) rotateX(62deg);
}

.flow-canvas::after {
  inset: 100px 120px 200px;
  border-style: dashed;
}

.flow-orbit {
  position: absolute;
  inset: 118px 118px 172px;
  background:
    linear-gradient(90deg, transparent 49.8%, rgba(71, 120, 255, 0.28) 50%, transparent 50.2%),
    linear-gradient(0deg, transparent 49.8%, rgba(191, 154, 98, 0.28) 50%, transparent 50.2%);
  opacity: 0.86;
}

.flow-core {
  position: absolute;
  top: 304px;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  color: var(--blue);
  background:
    radial-gradient(circle, #fff 0 46%, rgba(237, 243, 255, 0.92) 47%),
    #fff;
  border: 1px solid rgba(71, 120, 255, 0.24);
  border-radius: 50%;
  box-shadow:
    0 0 0 10px rgba(71, 120, 255, 0.08),
    0 0 32px rgba(71, 120, 255, 0.34),
    0 22px 42px rgba(58, 88, 150, 0.2);
  transform: translateX(-50%);
  font-size: 24px;
  animation: corePulse 2.8s ease-in-out infinite;
}

.flow-node {
  position: absolute;
  z-index: 3;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  width: 260px;
  min-height: 72px;
  padding: 12px;
  text-align: left;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.98);
  border-radius: 18px;
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(18px);
  transition: 0.2s ease;
}

.flow-node:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.flow-node:active,
.rail-button:active,
.primary-button:active,
.filter-bar button:active,
.chip-grid button:active,
.segmented button:active,
.tool-dock button:active,
.upload-mini button:active,
.ecom-task-drawer button:active {
  transform: scale(0.97);
}

.node-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: var(--blue);
  background: var(--blue-soft);
  border-radius: 12px;
}

.flow-node strong {
  display: block;
  font-size: 13px;
}

.flow-node small {
  display: block;
  margin-top: 4px;
  color: #7a8089;
  font-size: 11px;
  white-space: nowrap;
}

.flow-node em {
  position: absolute;
  right: 14px;
  bottom: 12px;
  color: #9ba1aa;
  font-size: 11px;
  font-style: normal;
}

.flow-node::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 20%, rgba(255, 255, 255, 0.75), transparent 80%);
  opacity: 0;
  transform: translateX(-22%);
}

.flow-node:hover::after {
  opacity: 1;
  animation: sheen 0.9s ease;
}

.node-top {
  top: 58px;
  left: calc(50% - 130px);
}

.node-left {
  top: 158px;
  left: 70px;
}

.node-right {
  top: 162px;
  right: 66px;
}

.node-bottom-left {
  top: 340px;
  left: 112px;
}

.node-bottom-right {
  top: 342px;
  right: 92px;
}

.asset-filmstrip {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 20px;
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(18px);
}

.home-filmstrip {
  position: absolute;
  right: 0;
  bottom: 18px;
  left: 0;
  padding: 12px;
}

.filmstrip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 12px;
  color: #6b717b;
}

.filmstrip-head button,
.panel-head button,
.toolbar-actions button,
.inline-control-strip button,
.filter-bar button,
.selected-strip button,
.prompt-chips button,
.video-media-tools button,
.video-action-row button {
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #5f6570;
  font-size: 12px;
}

.toolbar-actions button {
  cursor: pointer;
  transition:
    transform 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.workspace-toolbar .toolbar-actions [data-upload] {
  display: inline-grid;
  gap: 2px;
  min-height: 38px;
  text-align: left;
  line-height: 1.1;
}

.workspace-toolbar .toolbar-actions [data-upload] span,
.workspace-toolbar .toolbar-actions [data-upload] small {
  display: block;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-toolbar .toolbar-actions [data-upload] small {
  color: var(--muted);
  font-size: 10px;
}

.workspace-toolbar .toolbar-actions [data-upload].uploaded {
  color: #111317;
  background:
    linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82)),
    var(--upload-preview, #fff);
  background-size: cover;
  background-position: center;
  border-color: rgba(71, 120, 255, 0.4);
}

.toolbar-actions button:hover {
  color: #111317;
  background: #fff;
  border-color: rgba(71, 120, 255, 0.28);
  box-shadow: 0 8px 18px rgba(31, 36, 48, 0.1);
}

.queue-panel {
  align-self: start;
}

.panel-head,
.workspace-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.queue-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.queue-item {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.history-strip img,
.queue-item,
.video-status article,
.platform-list label {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.history-strip img:hover,
.queue-item:hover,
.video-status article:hover,
.platform-list label:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(42, 47, 58, 0.12);
  border-color: rgba(71, 120, 255, 0.24);
}

.queue-item img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 13px;
}

.queue-item strong {
  display: block;
  font-size: 12px;
}

.queue-item b {
  color: var(--blue);
  font-size: 12px;
}

.queue-item.muted {
  opacity: 0.78;
}

.queue-item.done strong {
  color: var(--green);
}

.progress {
  display: block;
  overflow: hidden;
  width: 100%;
  height: 5px;
  margin-top: 7px;
  background: #e9edf4;
  border-radius: 99px;
}

.progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), #7ea2ff);
  border-radius: inherit;
  animation: progressGlow 1.7s ease-in-out infinite;
}

.workspace-layout,
.production-layout,
.retouch-layout,
.video-layout {
  min-height: calc(100vh - 92px);
}

.studio-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 18px;
}

.suite-group > span,
.suite-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.composer-panel,
.product-panel,
.export-panel,
.precision-panel {
  padding: 22px;
  border-radius: var(--radius-lg);
}

.composer-panel {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  scroll-padding-bottom: 44px;
  padding-bottom: 44px;
}

.composer-panel::-webkit-scrollbar {
  width: 6px;
}

.composer-panel::-webkit-scrollbar-thumb {
  background: rgba(31, 36, 48, 0.16);
  border-radius: 999px;
}

.creative-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.creative-panel-head h2 {
  margin: 4px 0 0;
}

.creative-panel-head > span {
  flex: 0 0 auto;
  padding: 6px 9px;
  color: #5a431f;
  background: rgba(245, 234, 215, 0.84);
  border: 1px solid rgba(191, 154, 98, 0.24);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.creative-modes {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.creative-modes button {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 3px 10px;
  align-items: center;
  min-height: 66px;
  padding: 12px;
  text-align: left;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.creative-modes span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--blue);
  background: var(--blue-soft);
  border-radius: 12px;
}

.creative-modes small {
  color: var(--muted);
  font-size: 11px;
}

.creative-modes button.selected,
.creative-modes button:hover {
  background: #fff;
  border-color: rgba(71, 120, 255, 0.32);
  box-shadow: 0 12px 28px rgba(71, 120, 255, 0.12);
}

.creative-suite {
  flex: 1 1 260px;
  display: grid;
  gap: 10px;
  min-height: 190px;
  max-height: 342px;
  margin-top: 18px;
  overflow: auto;
  padding-right: 4px;
}

.creative-suite::-webkit-scrollbar {
  width: 6px;
}

.creative-suite::-webkit-scrollbar-thumb {
  background: rgba(90, 96, 108, 0.18);
  border-radius: 999px;
}

.suite-group {
  padding: 10px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.suite-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.suite-heading em {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 22px;
  color: #111317;
  background: rgba(17, 19, 23, 0.06);
  border: 1px solid rgba(17, 19, 23, 0.08);
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.suite-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.suite-grid button {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 34px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #4f5662;
  font-size: 12px;
}

.suite-grid button.selected,
.suite-grid button:hover {
  color: #fff;
  background: #111317;
  border-color: rgba(17, 19, 23, 0.82);
  box-shadow: 0 12px 24px rgba(16, 18, 24, 0.16);
}

.creative-upload {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 14px;
}

.creative-upload[hidden] {
  display: none;
}

[hidden] {
  display: none !important;
}

.creative-mode-hint {
  display: grid;
  flex: 0 0 auto;
  gap: 4px;
  margin-top: 12px;
  padding: 10px 12px;
  color: #222832;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(35, 42, 54, 0.08);
  border-radius: 15px;
  pointer-events: none;
}

.creative-mode-extra {
  display: grid;
  gap: 5px;
  padding: 10px 12px;
  color: #222832;
  background: rgba(17, 19, 23, 0.04);
  border: 1px solid rgba(17, 19, 23, 0.08);
  border-radius: 14px;
}

.creative-mode-extra[hidden] {
  display: none;
}

.creative-mode-extra strong {
  font-size: 12px;
  font-weight: 900;
}

.creative-mode-extra span {
  color: #68707c;
  font-size: 11px;
  font-weight: 730;
  line-height: 1.5;
}

.creative-mode-hint strong {
  font-size: 12px;
  font-weight: 900;
}

.creative-mode-hint span,
.creative-mode-hint em {
  color: #68707c;
  font-size: 11px;
  font-style: normal;
  font-weight: 730;
  line-height: 1.45;
}

.creative-param-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.56);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.creative-param-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.creative-param-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.creative-param-grid select {
  height: 34px;
  border-radius: 11px;
  font-size: 12px;
}

.creative-param-grid select:focus {
  border-color: rgba(17, 19, 23, 0.34);
  box-shadow: 0 0 0 4px rgba(17, 19, 23, 0.06);
}

.composer-panel .field-label,
.composer-panel textarea,
.composer-panel .smart-presets,
.composer-panel .primary-button {
  flex: 0 0 auto;
}

.composer-panel textarea {
  min-height: 128px;
}

.smart-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.smart-presets button {
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #59616d;
  font-size: 12px;
}

.smart-presets button.selected,
.smart-presets button:hover,
.composer-panel .option-strip button.selected,
.composer-panel .option-strip button:hover,
.page-creative .inline-control-strip button.selected,
.page-creative .inline-control-strip button:hover {
  color: #fff;
  background: #111317;
  border-color: rgba(17, 19, 23, 0.82);
  box-shadow: 0 12px 24px rgba(16, 18, 24, 0.16);
}

.field-label {
  display: block;
  margin: 20px 0 8px;
  font-weight: 700;
}

.segmented,
.chip-grid,
.pill-row {
  display: grid;
  gap: 8px;
}

.segmented {
  grid-template-columns: repeat(2, 1fr);
  padding: 4px;
  background: rgba(236, 238, 243, 0.72);
  border-radius: 14px;
}

.segmented button,
.chip-grid button,
.pill-row button {
  position: relative;
  overflow: hidden;
  min-height: 38px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: #4d535d;
  font-size: 12px;
}

.segmented .selected,
.chip-grid .selected,
.pill-row .selected,
.toolbar-actions .selected-action {
  color: #111317;
  background: #fff;
  border-color: rgba(71, 120, 255, 0.35);
  box-shadow: 0 8px 22px rgba(71, 120, 255, 0.14);
}

.primary-inline {
  position: relative;
  overflow: hidden;
  color: #fff !important;
  background: linear-gradient(135deg, #1d2230, #4b5f9d) !important;
  border-color: transparent !important;
  box-shadow: 0 12px 26px rgba(50, 74, 136, 0.18);
}

.primary-inline.loading {
  color: rgba(255, 255, 255, 0.72) !important;
  pointer-events: none;
}

.primary-inline.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  animation: loadingSweep 1s infinite;
}

.primary-inline.done {
  background: linear-gradient(135deg, #149a67, #31b57b) !important;
}

textarea {
  width: 100%;
  min-height: 190px;
  padding: 16px;
  resize: vertical;
  color: #20242b;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: 18px;
  outline: none;
  line-height: 1.7;
}

.primary-button {
  width: 100%;
  min-height: 46px;
  margin-top: 18px;
  color: #fff;
  background:
    linear-gradient(135deg, #1d2230, #4b5f9d),
    #151820;
  border-radius: 16px;
  box-shadow: 0 18px 34px rgba(50, 74, 136, 0.22);
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  background: rgba(71, 120, 255, 0.24);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  animation: ripple 0.55s ease-out forwards;
}

.primary-button .ripple,
.rail-button .ripple,
.tool-dock .ripple {
  background: rgba(255, 255, 255, 0.35);
}

.primary-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 42px rgba(50, 74, 136, 0.28);
}

.primary-button.loading {
  color: rgba(255, 255, 255, 0.72);
  pointer-events: none;
}

.primary-button.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  animation: loadingSweep 1s infinite;
}

.primary-button.done {
  background: linear-gradient(135deg, #149a67, #31b57b);
}

.ai-wait-layer {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 44;
  width: min(430px, calc(100vw - 56px));
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
  transform: translateY(18px) scale(0.96);
}

.ai-wait-layer.open,
.ai-wait-layer.done {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.ai-wait-layer.idle {
  opacity: 0;
  pointer-events: none;
  transform: translateY(18px) scale(0.96);
}

.ai-wait-layer.done .ai-core-loader {
  background: linear-gradient(135deg, #149a67, #31b57b);
  animation: none;
}

.ai-wait-card {
  position: relative;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 12px;
  padding: 14px;
  border-radius: 22px;
  box-shadow: 0 28px 72px rgba(31, 36, 48, 0.2);
}

.ai-wait-minimize {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  min-height: 26px;
  padding: 0 9px;
  color: #59616d;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
}

.ai-wait-mini {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 14px 0 8px;
  color: #151820;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(248, 247, 244, 0.72)),
    rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  box-shadow: 0 18px 42px rgba(31, 36, 48, 0.16);
  font-size: 12px;
  font-weight: 900;
  backdrop-filter: blur(18px);
}

.ai-wait-mini i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #fff;
  background: #151820;
  border-radius: 999px;
  font-style: normal;
}

.ai-wait-layer.minimized {
  width: auto;
  pointer-events: none;
}

.ai-wait-layer.minimized .ai-wait-card {
  display: none;
}

.ai-wait-layer.minimized .ai-wait-mini {
  display: inline-flex;
  pointer-events: auto;
}

.ai-wait-card:hover {
  transform: translateY(-2px);
}

.ai-core-loader {
  position: relative;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: #fff;
  background:
    conic-gradient(from 0deg, #4778ff, #31b57b, #bf9a62, #4778ff);
  border-radius: 18px;
  box-shadow: 0 22px 44px rgba(71, 120, 255, 0.22);
  animation: waitSpin 1.9s linear infinite;
}

.ai-core-loader::before {
  content: "";
  position: absolute;
  inset: 4px;
  background: #151820;
  border-radius: 15px;
}

.ai-core-loader i {
  position: relative;
  z-index: 1;
  font-style: normal;
  font-weight: 900;
}

.wait-copy {
  align-self: center;
  display: grid;
  gap: 3px;
}

.wait-copy .section-kicker {
  display: none;
}

.wait-copy small {
  color: #718095;
  font-size: 11px;
  font-weight: 800;
}

.wait-copy strong {
  font-size: 15px;
  letter-spacing: 0;
}

.wait-copy p {
  overflow: hidden;
  max-width: 315px;
  font-size: 12px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wait-track {
  grid-column: 1 / -1;
  overflow: hidden;
  height: 7px;
  background: rgba(29, 34, 48, 0.08);
  border-radius: 999px;
}

.wait-track i {
  display: block;
  width: 42%;
  height: 100%;
  background: linear-gradient(90deg, #31b57b, #4778ff, #bf9a62);
  border-radius: inherit;
  animation: waitTrack 1.25s ease-in-out infinite;
}

.ai-wait-layer.idle .wait-track i {
  width: 28%;
  background: linear-gradient(90deg, #cdd3df, #edf0f5);
  animation: none;
}

.ai-wait-layer.done .wait-track i {
  width: 100%;
  background: linear-gradient(90deg, #31b57b, #8fe0bd);
  animation: none;
}

.wait-steps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.wait-steps span {
  display: grid;
  place-items: center;
  min-height: 28px;
  color: #59616d;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.wait-steps span:nth-child(1) {
  animation: waitStep 1.6s ease-in-out infinite;
}

.wait-steps span:nth-child(2) {
  animation: waitStep 1.6s ease-in-out 0.2s infinite;
}

.wait-steps span:nth-child(3) {
  animation: waitStep 1.6s ease-in-out 0.4s infinite;
}

.wait-steps span:nth-child(4) {
  animation: waitStep 1.6s ease-in-out 0.6s infinite;
}

.ai-wait-layer.idle .wait-steps span,
.ai-wait-layer.done .wait-steps span {
  animation: none;
}

.ai-wait-layer.done .wait-steps span:last-child {
  color: #14885c;
  border-color: rgba(49, 181, 123, 0.22);
  background: rgba(49, 181, 123, 0.1);
}

.result-gallery,
.production-wall,
.compare-stage {
  overflow: hidden;
  padding: 20px;
  background: rgba(255, 255, 255, 0.54);
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 28px;
  box-shadow: var(--soft-shadow);
}

.production-wall {
  padding-bottom: 28px;
}

.creative-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-auto-rows: minmax(112px, 1fr);
  gap: 14px;
  height: calc(100vh - 244px);
  min-height: 540px;
  margin-top: 12px;
}

.creative-grid.result-pool {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  grid-auto-rows: auto;
  align-content: start;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 4px 10px 2px;
  scroll-padding: 12px;
}

.creative-grid.result-pool::-webkit-scrollbar {
  width: 6px;
}

.creative-grid.result-pool::-webkit-scrollbar-thumb {
  background: rgba(24, 28, 38, 0.16);
  border-radius: 999px;
}

.creative-grid.result-pool.is-compact {
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
}

.creative-grid.result-pool.is-dense {
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 8px;
}

.creative-result-drawer {
  margin-top: 12px;
}

.creative-result-drawer summary {
  min-height: 38px;
}

.creative-result-drawer summary::after {
  content: "参数";
}

.creative-result-drawer[open] summary::after {
  content: "收起";
}

.creative-result-drawer .inline-control-strip {
  margin: 0 10px 10px;
}

.inline-control-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.inline-control-strip > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 6px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 14px;
}

.inline-control-strip span {
  flex: 0 0 auto;
  width: 100%;
  color: #626975;
  font-size: 12px;
  font-weight: 800;
}

.inline-control-strip button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 6px 9px;
}

.inline-control-strip button.selected {
  color: #fff;
  background: #111317;
  border-color: rgba(17, 19, 23, 0.82);
  box-shadow: 0 12px 24px rgba(16, 18, 24, 0.16);
}

.compact-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}

.compact-field-grid.slim {
  grid-template-columns: minmax(0, 1fr) 160px;
  margin-top: 10px;
}

.compact-field-grid label,
.task-compact-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #626975;
  font-size: 12px;
  font-weight: 800;
}

.compact-field-grid input,
.task-compact-grid select,
.task-compact-grid textarea {
  width: 100%;
  min-height: 36px;
  padding: 0 11px;
  color: #252b34;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: 0;
}

.task-compact-grid textarea {
  min-height: 74px;
  padding: 9px 11px;
  resize: vertical;
  line-height: 1.45;
  font-family: var(--font-ui);
  font-size: 12px;
}

.task-compact-grid .task-wide-field {
  grid-column: 1 / -1;
}

.advanced-drawer {
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(35, 42, 54, 0.08);
  border-radius: 16px;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.advanced-drawer[open] {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(71, 120, 255, 0.16);
  box-shadow: 0 14px 34px rgba(41, 48, 60, 0.08);
}

.advanced-drawer summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  color: #2d333d;
  cursor: pointer;
  list-style: none;
}

.advanced-drawer summary::-webkit-details-marker {
  display: none;
}

.advanced-drawer summary::after {
  content: "展开";
  padding: 5px 9px;
  color: #66707d;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.advanced-drawer[open] summary::after {
  content: "收起";
  color: #fff;
  background: #151820;
  border-color: #151820;
}

.advanced-drawer summary span {
  font-size: 12px;
  font-weight: 900;
}

.advanced-drawer summary em {
  overflow: hidden;
  color: #727985;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.advanced-drawer-body {
  display: grid;
  gap: 9px;
  padding: 0 10px 10px;
}

.advanced-drawer-body.compact-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.advanced-drawer-body .compact-field-grid {
  margin-top: 0;
}

.advanced-drawer-body .compact-field-grid.slim {
  grid-column: 1 / -1;
}

.option-strip,
.inline-action-row,
.video-confirm-row,
.mini-button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.option-strip {
  margin-top: 12px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.option-strip.compact {
  margin-top: 0;
  padding: 6px;
  border-radius: 14px;
}

.option-strip span {
  flex: 0 0 auto;
  color: #626975;
  font-size: 12px;
  font-weight: 800;
}

.option-strip button,
.inline-action-row button,
.video-confirm-row button,
.mini-button-row button {
  min-height: 30px;
  padding: 0 10px;
  color: #4c5460;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.option-strip button.selected,
.option-strip button:hover,
.inline-action-row button:hover,
.video-confirm-row button:hover,
.mini-button-row button:hover,
.simple-options button.multi-selected {
  color: #fff;
  background: #151820;
  border-color: #151820;
}

.inline-action-row {
  margin-top: 10px;
}

.inline-action-row.soft {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.inline-action-row.soft button {
  color: #67707c;
  background: rgba(255, 255, 255, 0.48);
}

.inline-action-row.soft button:hover {
  color: #151820;
  background: #fff;
  border-color: rgba(71, 120, 255, 0.22);
}

.result-card {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 160px;
  aspect-ratio: var(--result-aspect, auto);
  background: #fff;
  border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(28, 32, 39, 0.06);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    outline-color 0.18s ease;
}

.creative-grid.result-pool .result-card {
  min-height: 0;
  aspect-ratio: var(--result-aspect, 1 / 1);
  border-radius: 18px;
  animation: creativeCardIn 0.32s ease both;
}

.creative-grid.result-pool.is-compact .result-card {
  border-radius: 15px;
}

.creative-grid.result-pool.is-dense .result-card {
  border-radius: 12px;
}

.result-card.placeholder {
  isolation: isolate;
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.96), transparent 30%),
    linear-gradient(145deg, rgba(247, 249, 252, 0.96), rgba(226, 231, 240, 0.72));
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(23, 28, 38, 0.05),
    0 14px 34px rgba(38, 45, 58, 0.08);
}

.result-card.placeholder::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(20, 24, 32, 0.16);
  border-radius: inherit;
}

.placeholder-core {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  gap: 7px;
  color: #272d36;
  text-align: center;
}

.placeholder-core i {
  display: block;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(20, 24, 32, 0.12);
  border-top-color: #151820;
  border-radius: 50%;
  animation: spin 0.78s linear infinite;
}

.placeholder-core strong {
  font-size: 12px;
  font-weight: 900;
}

.placeholder-core small {
  color: #727a86;
  font-size: 11px;
  font-weight: 800;
}

.result-card.failed {
  background:
    radial-gradient(circle at 28% 24%, rgba(255, 255, 255, 0.96), transparent 30%),
    linear-gradient(145deg, rgba(255, 246, 244, 0.96), rgba(241, 222, 218, 0.78));
}

.result-card.failed .placeholder-core i {
  border-color: rgba(159, 48, 37, 0.2);
  border-top-color: #9f3025;
}

.creative-result-count {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  color: #5f6570;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.result-card.generating::after,
.ecom-output-card.generating::after,
.ecom-task-thumb.generating::after,
.ecom-task-drawer.generating::after,
.comparison.generating::after,
.board-card.generating::after,
.shot-timeline article.generating::after,
.script-strip.generating::after,
.phone-screen.generating::after,
.minimal-shots article.generating::after,
.model-gallery article.generating::after,
.canvas-surface.generating::after,
.video-output-grid > section.generating::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.55), transparent 70%);
  animation: loadingSweep 1.05s ease-in-out infinite;
}

.result-card.selected-card,
.masonry-grid article.selected-card,
.ecom-output-card.selected-card,
.template-card.selected-card,
.history-strip img.selected-card {
  outline: 2px solid rgba(71, 120, 255, 0.72);
  outline-offset: 3px;
}

.result-card.selected-card::before,
.masonry-grid article.selected-card::before,
.ecom-output-card.selected-card::before,
.template-card.selected-card::before {
  content: "✓";
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #fff;
  background: var(--blue);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 10px 20px rgba(71, 120, 255, 0.28);
}

.template-card,
.history-strip img {
  position: relative;
}

.result-card.large {
  grid-row: span 3;
}

.creative-grid.result-pool .result-card.large {
  grid-row: auto;
}

.result-card img,
.masonry-grid img,
.comparison img,
.collection-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.creative-grid.result-pool .result-card img {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 241, 236, 0.84));
  object-fit: contain;
}

.result-card span {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 10px;
  color: #fff;
  background: rgba(17, 19, 23, 0.55);
  border-radius: 999px;
  font-size: 12px;
  backdrop-filter: blur(10px);
}

.creative-grid.result-pool.is-compact .result-card span,
.creative-grid.result-pool.is-dense .result-card span {
  top: 8px;
  left: 8px;
  max-width: calc(100% - 16px);
  overflow: hidden;
  padding: 4px 7px;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.creative-grid.result-pool.is-dense .result-card span,
.creative-grid.result-pool.is-dense .placeholder-core small {
  display: none;
}

@container (max-width: 760px) {
  .creative-grid.result-pool {
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  }
}

.chip-grid {
  grid-template-columns: repeat(2, 1fr);
}

.chip-grid.three {
  grid-template-columns: repeat(3, 1fr);
}

.range {
  width: 100%;
  accent-color: var(--blue);
}

.production-layout {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 18px;
}

.product-panel {
  display: grid;
  align-content: start;
  gap: 14px;
}

.product-brief-card {
  display: grid;
  gap: 10px;
}

.collection-cover {
  height: 130px;
  margin: 0;
  border-radius: 18px;
}

.product-brief-meta {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
  border-radius: 15px;
}

.product-brief-meta span {
  color: var(--muted);
  font-size: 12px;
}

.product-brief-meta strong {
  font-size: 13px;
  line-height: 1.35;
}

.field-stack {
  display: grid;
  gap: 12px;
}

.field-stack label {
  display: grid;
  gap: 7px;
  font-weight: 700;
}

select,
.field-stack input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  color: #222831;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.upload-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.product-panel .upload-mini {
  margin-top: 0;
}

.upload-mini button {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 58px;
  padding: 8px;
  color: #6d747e;
  background: rgba(255, 255, 255, 0.6);
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.25;
  isolation: isolate;
}

.upload-mini button.uploaded {
  color: #111317;
  background:
    linear-gradient(rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.74)),
    var(--upload-preview, #fff);
  background-position: center;
  background-size: cover;
  border-style: solid;
  border-color: rgba(71, 120, 255, 0.35);
  box-shadow: 0 10px 22px rgba(71, 120, 255, 0.13);
}

.upload-mini button.uploaded::before {
  content: "✓";
  position: absolute;
  top: 7px;
  left: 8px;
  z-index: 1;
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
}

.native-upload-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.upload-mini button span,
.upload-mini button small {
  position: relative;
  z-index: 1;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-mini button span {
  color: #2c333d;
  font-weight: 850;
}

.upload-mini button small {
  color: #747d89;
  font-size: 10px;
  font-weight: 700;
}

.upload-mini button.uploaded small {
  color: #48515d;
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.masonry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 154px;
  gap: 12px;
  margin-top: 16px;
}

.masonry-grid article {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 20px;
  box-shadow:
    inset 0 0 0 1px rgba(28, 32, 39, 0.05),
    0 12px 24px rgba(42, 47, 58, 0.08);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    outline-color 0.18s ease;
}

.masonry-grid article:hover,
.result-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(38, 44, 56, 0.14);
}

.masonry-grid article::after {
  content: "选择";
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 10px;
  color: #fff;
  background: rgba(16, 18, 24, 0.58);
  border-radius: 999px;
  font-size: 11px;
  opacity: 0;
  transform: translateY(6px);
  transition: 0.18s ease;
  backdrop-filter: blur(10px);
}

.masonry-grid article:hover::after {
  opacity: 1;
  transform: translateY(0);
}

.masonry-grid .tall {
  grid-row: span 2;
}

.masonry-grid .wide {
  grid-column: span 2;
}

.selected-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  margin-bottom: 4px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.selected-strip span {
  font-size: 13px;
  font-weight: 700;
}

.selected-filter {
  color: #111317 !important;
  background: #fff !important;
  border-color: rgba(71, 120, 255, 0.34) !important;
}

.ecom-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.ecom-task-drawer {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 14px;
  min-height: 112px;
  padding: 12px 14px;
  background:
    radial-gradient(circle at 96% 0%, rgba(245, 234, 215, 0.86), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(247, 250, 255, 0.72));
  border-radius: 22px;
}

.ecom-task-drawer::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #bf9a62, #4778ff);
}

.ecom-task-drawer.collapsed {
  min-height: 60px;
  padding-bottom: 12px;
  grid-template-columns: 1fr;
}

.ecom-task-drawer.collapsed .ecom-drawer-body {
  display: none;
}

.ecom-task-drawer.collapsed .ecom-drawer-head {
  margin-bottom: 0;
  padding-right: 0;
  border-right: 0;
}

.ecom-drawer-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  height: 100%;
  margin-bottom: 0;
  padding-right: 12px;
  border-right: 1px solid rgba(31, 36, 48, 0.08);
}

.ecom-drawer-head div {
  display: grid;
  gap: 5px;
}

.ecom-drawer-head span,
.ecom-drawer-fields span {
  color: #77808c;
  font-size: 11px;
  font-weight: 800;
}

.ecom-drawer-head strong {
  color: #12151b;
  font-size: 17px;
  line-height: 1.2;
}

.ecom-drawer-head button {
  min-height: 30px;
  padding: 0 10px;
  color: #606874;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 999px;
  font-size: 12px;
}

.ecom-drawer-body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(420px, 1.3fr) auto;
  gap: 8px 12px;
  align-items: end;
}

.ecom-drawer-body p {
  margin: 0;
  color: #5f6874;
  font-size: 12px;
  line-height: 1.5;
}

.ecom-drawer-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ecom-drawer-fields label {
  display: grid;
  gap: 6px;
}

.ecom-drawer-fields input,
.ecom-drawer-fields select {
  width: 100%;
  height: 36px;
  padding: 0 11px;
  color: #252b34;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 12px;
  outline: none;
}

.ecom-drawer-fields input:focus,
.ecom-drawer-fields select:focus {
  border-color: rgba(71, 120, 255, 0.34);
  box-shadow: 0 0 0 3px rgba(71, 120, 255, 0.1);
}

.ecom-drawer-tags,
.ecom-drawer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ecom-mode-quick {
  grid-column: 1 / 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ecom-drawer-tags {
  grid-column: 1 / 3;
}

.ecom-advanced-pack {
  grid-column: 1 / 3;
  padding: 0;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(31, 36, 48, 0.07);
  border-radius: 14px;
}

.ecom-advanced-pack summary {
  min-height: 32px;
  padding: 0 10px;
  cursor: pointer;
  color: #4f5662;
  font-size: 12px;
  font-weight: 800;
  list-style: none;
}

.ecom-advanced-pack summary::-webkit-details-marker {
  display: none;
}

.ecom-advanced-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 0 10px 10px;
}

.ecom-advanced-grid span {
  min-height: 28px;
  padding: 7px 8px;
  color: #5e6672;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 36, 48, 0.06);
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.35;
}

.ecom-drawer-actions {
  grid-column: 3;
  grid-row: 1 / 4;
  align-self: end;
  justify-content: flex-end;
  min-width: 154px;
}

.ecom-drawer-tags span {
  padding: 5px 8px;
  color: #4c5562;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 36, 48, 0.07);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.ecom-drawer-actions button,
.ecom-mode-quick button {
  position: relative;
  overflow: hidden;
  min-height: 32px;
  padding: 0 11px;
  color: #3f4651;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.ecom-drawer-actions button:first-child {
  color: #fff;
  background: #151820;
  border-color: #151820;
}

.ecom-mode-quick button {
  color: #fff;
  background: #111317;
  border-color: #111317;
  box-shadow: 0 10px 22px rgba(16, 18, 24, 0.12);
}

.ecom-drawer-head button:hover,
.ecom-drawer-actions button:hover,
.ecom-mode-quick button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(31, 36, 48, 0.12);
}

.ecom-drawer-actions button.loading,
.ecom-drawer-actions button.done {
  color: #fff;
  background: #151820;
  border-color: #151820;
}

.ecom-drawer-actions button.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  animation: loadingSweep 1s infinite;
}

.ecom-preview-stack {
  display: grid;
  grid-template-columns: minmax(320px, 0.52fr) minmax(0, 1.48fr);
  gap: 12px;
  min-width: 0;
  align-items: start;
}

.ecom-preview-grid {
  grid-auto-rows: 126px;
  margin-top: 0;
}

.ecom-preview-grid article {
  border-radius: 18px;
}

.mini-thumbs {
  display: flex;
  gap: 5px;
  margin-right: auto;
}

.mini-thumbs i {
  width: 24px;
  height: 32px;
  background: linear-gradient(135deg, #d8d1c6, #fff);
  border: 1px solid #fff;
  border-radius: 7px;
}

.ecom-toolbar,
.ecom-toolbar-status,
.ecom-flow-strip,
.ecom-gallery-head,
.ecom-gallery-meta,
.auth-code-field,
.auth-passkey-row {
  display: flex;
  align-items: center;
}

.ecom-toolbar-status {
  color: #606874;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.ecom-preview-grid article span {
  position: absolute;
  z-index: 1;
  color: #fff;
  background: rgba(16, 18, 24, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(14px);
}

.page-material {
  --ecom-card: rgba(255, 255, 255, 0.72);
  --ecom-hairline: rgba(31, 36, 48, 0.09);
}

.ecom-page-shell {
  display: grid;
  gap: 14px;
}

.ecom-hero-panel {
  display: grid;
  grid-template-columns: minmax(280px, 0.46fr) minmax(520px, 0.9fr) minmax(270px, 0.42fr);
  gap: 14px;
  min-height: 314px;
}

.ecom-showcase,
.ecom-generator-panel,
.ecom-output-panel,
.ecom-gallery-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(247, 247, 244, 0.62)),
    rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 26px;
  box-shadow: 0 18px 48px rgba(37, 43, 54, 0.1);
}

.ecom-showcase {
  display: grid;
  grid-template-rows: minmax(178px, 1fr) auto auto;
  gap: 12px;
  padding: 12px;
}

.ecom-showcase-art {
  position: relative;
  overflow: hidden;
  min-height: 178px;
  border-radius: 20px;
  background: #f6f4ef;
}

.ecom-showcase-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.01);
}

.ecom-showcase-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(10, 12, 16, 0.38));
}

.ecom-showcase-art span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 1;
  padding: 7px 10px;
  color: #fff;
  background: rgba(17, 19, 23, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  backdrop-filter: blur(14px);
}

.ecom-showcase-copy {
  display: grid;
  gap: 5px;
  padding: 2px 4px 0;
}

.ecom-showcase-copy h2,
.ecom-toolbar h2,
.ecom-gallery-head h2 {
  margin: 0;
  color: #14171d;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.08;
}

.ecom-showcase-copy h2 {
  font-size: 30px;
}

.ecom-showcase-copy p {
  margin: 0;
  color: #6d737c;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.55;
}

.product-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.product-stat-grid span {
  display: grid;
  gap: 2px;
  min-height: 48px;
  padding: 8px;
  color: #6a727e;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(31, 36, 48, 0.07);
  border-radius: 14px;
  font-size: 11px;
  line-height: 1.2;
}

.product-stat-grid strong {
  color: #151820;
  font-size: 17px;
}

.ecom-generator-panel {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.ecom-toolbar {
  justify-content: space-between;
  gap: 16px;
  min-height: 42px;
}

.ecom-toolbar h2 {
  margin-top: 4px;
  font-size: 25px;
}

.ecom-toolbar-status {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.62);
}

.ecom-toolbar-status strong {
  color: #151820;
}

.ecom-product-input {
  display: grid;
  grid-template-columns: minmax(360px, 1fr);
  gap: 10px;
  align-items: stretch;
}

.ecom-brief-box {
  display: grid;
  grid-template-columns: minmax(180px, 0.48fr) minmax(260px, 1fr);
  gap: 8px;
  min-width: 0;
}

.ecom-product-meta {
  display: grid;
  grid-template-columns: minmax(150px, 0.65fr) minmax(220px, 1fr) minmax(190px, 0.58fr);
  gap: 8px;
  min-width: 0;
}

.ecom-product-input label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: #68707a;
  font-size: 11px;
  font-weight: 800;
}

.ecom-product-input label span {
  line-height: 1;
}

.ecom-product-input input,
.ecom-product-input textarea,
.ecom-product-input select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  color: #1f2530;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid var(--ecom-hairline);
  border-radius: 14px;
  outline: 0;
  font-size: 12px;
  font-weight: 760;
}

.ecom-name-line input {
  font-size: 13px;
  font-weight: 900;
}

.ecom-product-input textarea {
  min-height: 42px;
  max-height: 84px;
  padding-top: 10px;
  resize: none;
  line-height: 1.45;
}

.ecom-product-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  align-self: end;
}

.ecom-product-actions button {
  min-height: 42px;
  padding: 0 10px;
  color: #4e5662;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(31, 36, 48, 0.1);
  border-radius: 14px;
  font-size: 12px;
  font-weight: 900;
}

.ecom-product-actions .primary-button {
  margin-top: 0;
  color: #fff;
  background: #111317;
  border-color: #111317;
}

.ecom-mode-drawer,
.ecom-material-drawer {
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 18px;
}

.ecom-mode-drawer summary,
.ecom-material-drawer summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  cursor: pointer;
  list-style: none;
}

.ecom-mode-drawer summary::-webkit-details-marker,
.ecom-material-drawer summary::-webkit-details-marker {
  display: none;
}

.ecom-mode-drawer summary span,
.ecom-mode-drawer summary em,
.ecom-material-drawer summary span,
.ecom-material-drawer summary em {
  color: #69717d;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

.ecom-mode-drawer summary strong,
.ecom-material-drawer summary strong {
  overflow: hidden;
  color: #151820;
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ecom-mode-drawer summary em,
.ecom-material-drawer summary em {
  padding: 6px 10px;
  color: #fff;
  background: #111317;
  border-radius: 999px;
}

.ecom-mode-drawer[open] summary,
.ecom-material-drawer[open] summary {
  border-bottom: 1px solid rgba(31, 36, 48, 0.08);
}

.ecom-upload-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
  padding: 10px;
}

.ecom-upload-grid button {
  display: grid;
  place-items: center;
  gap: 3px;
  min-height: 58px;
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(31, 36, 48, 0.12);
  border-radius: 16px;
}

.ecom-upload-grid button span {
  color: #272d36;
  font-weight: 900;
}

.ecom-upload-grid button small {
  color: #7b838f;
  font-size: 11px;
}

.page-material .ecom-side-settings {
  margin-top: 0;
  min-height: auto;
  overflow: visible;
  background: rgba(255, 255, 255, 0.54);
  border-color: rgba(31, 36, 48, 0.08);
}

.page-material .ecom-side-settings[open] {
  height: auto;
  overflow: visible;
}

.page-material .ecom-side-settings summary::after {
  display: none;
}

.page-material .ecom-side-settings summary {
  min-height: 38px;
  padding-inline: 12px;
  cursor: default;
}

.page-material .ecom-side-settings .advanced-drawer-body.compact-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.page-material .ecom-side-settings .mini-setting-drawer {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 999px;
}

.page-material .ecom-side-settings .mini-setting-drawer summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  min-height: 34px;
  padding: 0 7px 0 10px;
  cursor: pointer;
  list-style: none;
}

.page-material .ecom-side-settings .mini-setting-drawer summary::after {
  display: none;
}

.page-material .ecom-side-settings .mini-setting-drawer summary::-webkit-details-marker {
  display: none;
}

.page-material .ecom-side-settings .mini-setting-drawer summary span {
  overflow: hidden;
  color: #69717d;
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-material .ecom-side-settings .mini-setting-drawer summary strong {
  padding: 5px 8px;
  color: #fff;
  background: #111317;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.page-material .ecom-side-settings .mini-setting-drawer[open] summary {
  border-bottom: 0;
}

.page-material .ecom-side-settings .mini-setting-drawer[open] {
  overflow: visible;
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(17, 19, 23, 0.18);
}

.page-material .ecom-control-panel .ecom-side-settings .mini-setting-drawer[open] {
  grid-column: 1 / -1;
  border-radius: 16px;
}

.page-material .ecom-side-settings .mini-setting-drawer[open] .option-strip.compact {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 8;
  width: max-content;
  min-width: 188px;
  max-width: 320px;
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 16px;
  box-shadow: 0 18px 38px rgba(31, 36, 48, 0.16);
}

.page-material .ecom-side-settings .option-strip.compact {
  align-items: flex-start;
  gap: 5px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.54);
}

.page-material .ecom-side-settings .option-strip.compact span {
  width: 100%;
  flex-basis: 100%;
}

.page-material .ecom-side-settings .option-strip.compact button {
  min-height: 26px;
  padding-inline: 8px;
  font-size: 11px;
}

.ecom-mode-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  justify-content: stretch;
  margin-top: 0;
  padding: 10px;
  background: transparent;
  border: 0;
}

.ecom-mode-tabs button {
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 64px;
  padding: 10px 12px;
  text-align: left;
  color: #4d5561;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(31, 36, 48, 0.07);
  border-radius: 18px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.ecom-mode-tabs button strong {
  color: inherit;
  font-size: 13px;
}

.ecom-mode-tabs button small {
  color: #7b828b;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.ecom-mode-tabs .selected-filter,
.ecom-mode-tabs button:hover {
  color: #fff !important;
  background: #111317 !important;
  border-color: #111317 !important;
  box-shadow: 0 16px 32px rgba(17, 19, 23, 0.16);
}

.ecom-mode-tabs .selected-filter small,
.ecom-mode-tabs button:hover small {
  color: rgba(255, 255, 255, 0.72);
}

.page-material .ecom-workbench {
  gap: 12px;
  margin-top: 0;
}

.page-material .ecom-task-drawer {
  display: grid;
  grid-template-columns: minmax(172px, 0.36fr) minmax(0, 1fr);
  gap: 10px;
  min-height: 82px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 20px;
  box-shadow: none;
}

.page-material .ecom-task-drawer::before {
  inset: auto 16px 12px 16px;
  width: auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(191, 154, 98, 0.16), rgba(17, 19, 23, 0.22), rgba(31, 36, 48, 0.04));
}

.page-material .ecom-task-drawer.collapsed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
}

.page-material .ecom-task-drawer.collapsed::before,
.page-material .ecom-task-drawer.collapsed .ecom-drawer-body {
  display: none;
}

.page-material .ecom-task-drawer.collapsed .ecom-drawer-head {
  flex: 1;
  width: 100%;
  padding: 0;
  border-right: 0;
}

.page-material .ecom-task-drawer.collapsed .ecom-drawer-head p,
.page-material .ecom-task-drawer.collapsed .ecom-drawer-head span {
  display: none;
}

.page-material .ecom-task-drawer.collapsed .ecom-drawer-head strong {
  font-size: 13px;
}

.page-material .ecom-drawer-head {
  padding: 4px 12px 4px 4px;
  border-right: 1px solid rgba(31, 36, 48, 0.08);
}

.page-material .ecom-drawer-head span {
  color: #7a828e;
}

.page-material .ecom-drawer-head strong {
  color: #151820;
  font-size: 16px;
}

.page-material .ecom-drawer-head p {
  margin: 3px 0 0;
  color: #68717d;
  font-size: 12px;
  line-height: 1.45;
}

.page-material .ecom-drawer-head button,
.page-material .ecom-drawer-actions button {
  color: #4e5662;
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(31, 36, 48, 0.1);
}

.page-material .ecom-drawer-body {
  grid-template-columns: minmax(260px, 0.78fr) minmax(210px, 0.58fr) minmax(132px, auto);
  gap: 8px;
  align-items: end;
}

.page-material .ecom-drawer-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-column: 1;
}

.page-material .ecom-drawer-fields span {
  color: #68717d;
}

.page-material .ecom-drawer-fields input,
.page-material .ecom-drawer-fields select {
  height: 38px;
  color: #232a34;
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(31, 36, 48, 0.09);
}

.page-material .ecom-drawer-tags {
  grid-column: 2;
  grid-row: 1;
  align-content: end;
}

.page-material .ecom-mode-quick {
  grid-column: 1 / 3;
}

.page-material .ecom-drawer-tags span {
  color: #4c5562;
  background: rgba(237, 243, 255, 0.72);
  border-color: rgba(71, 120, 255, 0.12);
}

.page-material .ecom-advanced-pack {
  grid-column: 1 / 3;
  justify-self: start;
  max-width: 100%;
  background: transparent;
  border-color: transparent;
}

.page-material .ecom-advanced-pack summary {
  width: max-content;
  max-width: 100%;
  min-height: 28px;
  color: #4e5662;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 999px;
}

.page-material .ecom-advanced-grid span {
  color: #5e6672;
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(31, 36, 48, 0.07);
}

.page-material .ecom-advanced-pack[open] {
  width: 100%;
  background: rgba(31, 36, 48, 0.035);
  border-color: rgba(31, 36, 48, 0.08);
}

.page-material .ecom-advanced-pack[open] summary {
  width: 100%;
  border-color: transparent;
  border-radius: 14px 14px 0 0;
}

.page-material .ecom-drawer-actions {
  grid-column: 3;
  grid-row: 1 / 4;
  display: grid;
  align-content: end;
  min-width: 132px;
}

.page-material .ecom-drawer-actions button:first-child {
  color: #fff;
  background: #111317;
  border-color: #111317;
}

.ecom-output-panel {
  display: grid;
  grid-template-rows: auto minmax(180px, 0.9fr) auto auto auto;
  gap: 10px;
  padding: 12px;
}

.ecom-output-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ecom-output-head div {
  display: grid;
  gap: 3px;
}

.ecom-output-head strong {
  color: #151820;
  font-size: 18px;
  font-weight: 950;
}

.ecom-output-head button,
.ecom-output-actions button {
  min-height: 32px;
  padding: 0 11px;
  color: #4e5662;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 36, 48, 0.09);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.ecom-output-card {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  aspect-ratio: var(--ecom-ratio, 3 / 4);
  width: min(100%, calc(var(--ecom-preview-height, 520px) * var(--ecom-ratio-number, 0.75)));
  max-width: 100%;
  cursor: pointer;
  background:
    radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.92), transparent 34%),
    linear-gradient(135deg, rgba(17, 19, 23, 0.05), rgba(255, 255, 255, 0.82)),
    #f3f1ec;
  border: 1px solid rgba(31, 36, 48, 0.06);
  box-shadow: 0 14px 28px rgba(36, 42, 54, 0.1);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.ecom-output-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(36, 42, 54, 0.14);
}

.ecom-output-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ecom-demo-card img {
  object-fit: cover;
}

.ecom-output-card span {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 6px 9px;
  color: #fff;
  background: rgba(17, 19, 23, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  backdrop-filter: blur(12px);
}

.ecom-placeholder-card {
  border-style: dashed;
  box-shadow: none;
}

.ecom-demo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 45%, rgba(17, 19, 23, 0.2)),
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.42), transparent 34%);
}

.ecom-demo-card span,
.ecom-output-card span {
  z-index: 2;
}

.ecom-ratio-placeholder,
.ecom-long-empty {
  display: grid;
  place-items: center;
  gap: 5px;
  width: calc(100% - 18px);
  height: calc(100% - 18px);
  color: #7b838f;
  background:
    linear-gradient(90deg, rgba(17, 19, 23, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(17, 19, 23, 0.04) 1px, transparent 1px),
    rgba(255, 255, 255, 0.52);
  background-size: 14px 14px;
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 16px;
  text-align: center;
}

.ecom-ratio-placeholder strong,
.ecom-long-empty strong {
  color: #191c22;
  font-size: 15px;
  font-weight: 950;
}

.ecom-ratio-placeholder small,
.ecom-long-empty span {
  color: #7b838f;
  font-size: 11px;
  font-weight: 850;
}

.ecom-output-main {
  min-height: 210px;
  width: min(100%, calc(var(--ecom-preview-height, 520px) * var(--ecom-ratio-number, 0.75)));
  border-radius: 20px;
}

.ecom-task-thumbs {
  display: grid;
  align-content: start;
  gap: 8px;
  max-height: min(52vh, 420px);
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.ecom-task-thumb {
  position: relative;
  overflow: hidden;
  display: block;
  aspect-ratio: var(--ecom-ratio, 3 / 4);
  width: 100%;
  min-height: 0;
  padding: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(36, 42, 54, 0.08);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.ecom-task-thumb:hover,
.ecom-task-thumb.selected {
  transform: translateY(-1px);
  border-color: rgba(71, 120, 255, 0.42);
  box-shadow: 0 14px 30px rgba(36, 42, 54, 0.13);
}

.ecom-task-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ecom-demo-thumb img {
  object-fit: cover;
}

.ecom-task-thumb span {
  position: absolute;
  left: 7px;
  bottom: 7px;
  z-index: 2;
  padding: 4px 7px;
  color: #fff;
  background: rgba(17, 19, 23, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  backdrop-filter: blur(12px);
}

.ecom-task-history {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.54);
  border: 1px solid rgba(31, 36, 48, 0.07);
  border-radius: 18px;
}

.ecom-task-history-head {
  display: grid;
  gap: 3px;
  min-width: 82px;
}

.ecom-task-history-head span {
  color: #151820;
  font-size: 13px;
  font-weight: 950;
}

.ecom-task-history-head strong {
  color: #7b838f;
  font-size: 11px;
  font-weight: 850;
}

.ecom-task-list {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  padding: 1px 2px 3px;
}

.ecom-task-chip {
  display: grid;
  grid-template-columns: 72px minmax(78px, auto);
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 52px;
  padding: 6px 9px 6px 6px;
  color: #4f5662;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 16px;
  text-align: left;
}

.ecom-task-chip.active,
.ecom-task-chip:hover {
  color: #151820;
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(71, 120, 255, 0.3);
}

.ecom-task-chip-images {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  overflow: hidden;
  height: 42px;
  border-radius: 11px;
  background: rgba(31, 36, 48, 0.06);
}

.ecom-task-chip-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ecom-task-chip-copy {
  display: grid;
  gap: 2px;
}

.ecom-task-chip-copy strong {
  color: inherit;
  font-size: 12px;
  font-weight: 950;
}

.ecom-task-chip-copy small {
  color: #7b838f;
  font-size: 10px;
  font-weight: 850;
}

.ecom-long-preview {
  display: grid;
  grid-template-columns: 158px minmax(0, 1fr);
  gap: 10px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.54);
  border: 1px solid rgba(31, 36, 48, 0.07);
  border-radius: 18px;
}

.ecom-long-preview-head {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
}

.ecom-long-preview-head > div:first-child {
  display: grid;
  gap: 4px;
}

.ecom-long-preview-head span {
  color: #151820;
  font-size: 13px;
  font-weight: 950;
}

.ecom-long-preview-head strong {
  color: #7b838f;
  font-size: 11px;
  font-weight: 850;
}

.ecom-long-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ecom-long-actions button {
  min-height: 28px;
  padding: 0 9px;
  color: #4e5662;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 36, 48, 0.09);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.ecom-long-actions button:first-child {
  color: #fff;
  background: #111317;
  border-color: #111317;
}

.ecom-long-preview-stack {
  display: block;
  min-width: 0;
  max-height: 210px;
  overflow: auto;
  background:
    linear-gradient(90deg, rgba(17, 19, 23, 0.04), rgba(255, 255, 255, 0.34)),
    #f4f4f0;
  border: 1px solid rgba(31, 36, 48, 0.06);
  border-radius: 14px;
}

.ecom-long-frame {
  position: relative;
  width: min(120px, 22vw);
  aspect-ratio: var(--ecom-ratio, 3 / 4);
  overflow: hidden;
  background: #fff;
  border-right: 1px solid rgba(31, 36, 48, 0.08);
}

.ecom-long-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ecom-demo-frame img {
  object-fit: cover;
}

.ecom-long-frame span {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 3px 6px;
  color: #fff;
  background: rgba(17, 19, 23, 0.6);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 850;
}

.ecom-long-frame {
  cursor: pointer;
}

.ecom-long-modal-preview {
  display: block;
  width: 100%;
  max-width: 100%;
  height: min(76vh, 720px);
  overflow: auto;
  background:
    linear-gradient(90deg, rgba(17, 19, 23, 0.04), rgba(255, 255, 255, 0.34)),
    #f4f4f0;
  border-radius: 18px;
}

.ecom-detail-page {
  display: grid;
  width: min(100%, 540px);
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 14px;
}

.ecom-detail-section {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: var(--ecom-ratio, 3 / 4);
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid rgba(31, 36, 48, 0.08);
}

.ecom-detail-section:last-child {
  border-bottom: 0;
}

.ecom-detail-section img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ecom-detail-section span {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 2;
  padding: 4px 7px;
  color: #fff;
  background: rgba(17, 19, 23, 0.58);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
}

.ecom-long-modal-preview .ecom-detail-page {
  width: min(92%, 680px);
  border-radius: 18px;
}

.image-preview-modal.ecom-long-mode .preview-media {
  align-items: stretch;
}

.ecom-output-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ecom-output-actions button:first-child {
  color: #fff;
  background: #111317;
  border-color: #111317;
}

.page-material .ecom-preview-stack {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.page-material .ecom-preview-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 124px;
  gap: 9px;
}

.page-material .ecom-preview-grid .wide {
  grid-column: span 2;
}

.page-material .ecom-preview-grid .tall {
  grid-row: span 2;
}

.ecom-preview-grid article span {
  left: 10px;
  bottom: 10px;
  padding: 6px 9px;
}

.ecom-gallery-section {
  padding: 14px;
}

.ecom-gallery-head {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.ecom-gallery-head h2 {
  margin-top: 4px;
  font-size: 23px;
}

.ecom-gallery-meta {
  justify-content: flex-end;
  gap: 9px;
  color: #68717d;
  font-size: 12px;
  font-weight: 800;
}

.ecom-gallery-meta strong {
  padding: 7px 10px;
  color: #111317;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 999px;
}

.page-material .selected-strip {
  position: sticky;
  bottom: 12px;
  z-index: 3;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 18px;
  box-shadow: 0 18px 46px rgba(42, 47, 58, 0.12);
  backdrop-filter: blur(18px);
}

.page-material .selected-strip button {
  min-height: 32px;
  padding-inline: 10px;
}

.ecom-hero-panel.ecom-studio-layout {
  grid-template-columns: 390px minmax(0, 1fr);
  align-items: start;
  height: calc(100vh - 112px);
  min-height: 680px;
  overflow: hidden;
}

.ecom-control-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  max-height: none;
  overflow: auto;
  padding: 12px 14px 42px;
  scroll-padding-bottom: 42px;
}

.ecom-control-panel::-webkit-scrollbar {
  width: 6px;
}

.ecom-control-panel::-webkit-scrollbar-thumb {
  background: rgba(31, 36, 48, 0.16);
  border-radius: 999px;
}

.ecom-control-product {
  display: grid;
  gap: 6px;
  padding: 0 0 2px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.ecom-control-product .ecom-showcase-art {
  min-height: 72px;
  max-height: 72px;
  border-radius: 16px;
}

.ecom-control-product .ecom-showcase-copy h2 {
  margin-top: 3px;
  font-size: 18px;
}

.ecom-control-product .ecom-showcase-copy p {
  display: none;
}

.ecom-control-panel .product-stat-grid {
  display: none;
}

.ecom-control-panel .product-stat-grid span {
  min-height: 36px;
  padding: 7px;
  font-size: 10px;
}

.ecom-control-panel .product-stat-grid strong {
  font-size: 15px;
}

.ecom-control-panel .ecom-toolbar {
  display: grid;
  gap: 6px;
  min-height: auto;
}

.ecom-control-panel .ecom-toolbar h2 {
  margin-top: 3px;
  font-size: 17px;
}

.ecom-control-panel .ecom-toolbar-status {
  justify-content: flex-start;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 13px;
}

.ecom-control-panel .ecom-product-input,
.ecom-control-panel .ecom-brief-box,
.ecom-control-panel .ecom-product-meta,
.ecom-control-panel .ecom-drawer-fields {
  grid-template-columns: minmax(0, 1fr);
}

.ecom-control-panel .ecom-product-input {
  gap: 7px;
}

.ecom-control-panel .ecom-product-input input,
.ecom-control-panel .ecom-product-input select {
  min-height: 38px;
}

.ecom-control-panel .ecom-product-input textarea {
  min-height: 62px;
  max-height: 72px;
  padding-top: 8px;
}

.ecom-control-panel .ecom-product-actions button {
  min-height: 36px;
}

.ecom-control-panel .ecom-mode-tabs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 286px;
  overflow: auto;
}

.ecom-control-panel .ecom-mode-tabs button {
  min-height: 58px;
  padding: 9px;
  border-radius: 14px;
}

.ecom-control-panel .ecom-mode-tabs button strong {
  font-size: 12px;
}

.ecom-control-panel .ecom-upload-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.page-material .ecom-control-panel .ecom-side-settings .mini-setting-drawer[open] .option-strip.compact {
  position: static;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin-top: 4px;
  box-shadow: none;
}

.page-material .ecom-control-panel .ecom-side-settings .advanced-drawer-body.compact-grid {
  grid-template-columns: repeat(4, minmax(68px, 1fr));
  padding: 6px 8px 8px;
  gap: 6px;
}

.page-material .ecom-control-panel .ecom-side-settings .option-strip.compact {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 5px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.34);
}

.page-material .ecom-control-panel .ecom-side-settings .option-strip.compact button {
  flex: 0 0 auto;
  min-height: 24px;
}

.page-material .ecom-control-panel .ecom-side-settings .option-strip.compact span {
  display: none;
}

.page-material .ecom-control-panel .ecom-side-settings .option-strip.compact button.selected,
.page-material .ecom-control-panel .ecom-side-settings .option-strip.compact button:hover {
  color: #fff;
  background: #111317;
  border-color: #111317;
}

.page-material .ecom-control-panel .ecom-task-drawer {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-height: auto;
  padding: 10px;
  border-radius: 18px;
}

.page-material .ecom-control-panel .ecom-task-drawer.collapsed {
  min-height: 42px;
}

.ecom-control-panel .ecom-mode-drawer summary,
.ecom-control-panel .ecom-material-drawer summary,
.ecom-control-panel .ecom-side-settings summary {
  min-height: 38px;
}

.page-material .ecom-control-panel .ecom-side-settings {
  height: auto;
}

.page-material .ecom-control-panel .ecom-drawer-head {
  padding: 0;
  border-right: 0;
}

.page-material .ecom-control-panel .ecom-drawer-body {
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.page-material .ecom-control-panel .ecom-drawer-tags,
.page-material .ecom-control-panel .ecom-mode-quick,
.page-material .ecom-control-panel .ecom-advanced-pack,
.page-material .ecom-control-panel .ecom-drawer-actions {
  grid-column: auto;
  grid-row: auto;
}

.page-material .ecom-control-panel .ecom-mode-quick,
.page-material .ecom-control-panel .ecom-drawer-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  min-width: 0;
}

.page-material .ecom-control-panel .ecom-drawer-actions button,
.page-material .ecom-control-panel .ecom-mode-quick button,
.ecom-control-panel .ecom-product-actions button {
  min-height: 38px;
  border-radius: 13px;
}

.ecom-result-stage {
  display: block;
  gap: 14px;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: auto;
}

.ecom-result-stage .ecom-output-panel {
  display: flex;
  flex-direction: column;
  align-content: stretch;
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding: 16px;
}

.ecom-result-stage .ecom-output-head {
  align-items: center;
}

.ecom-result-stage .ecom-output-head strong {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
}

.ecom-result-canvas {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) 108px;
  align-items: start;
  flex: 0 0 auto;
  gap: 12px;
  min-height: 0;
  --ecom-preview-height: min(52vh, 520px);
  --ecom-ratio-number: 0.75;
}

.ecom-result-stage .ecom-output-main {
  width: min(100%, calc(var(--ecom-preview-height, 520px) * var(--ecom-ratio-number, 0.75)));
  max-height: none;
  flex: 0 0 auto;
  grid-column: 2;
  justify-self: center;
  min-height: 0;
  border-radius: 24px;
}

.ecom-result-stage .ecom-task-thumbs {
  grid-column: 3;
  justify-self: end;
}

.ecom-result-canvas.portrait-preview {
  grid-template-columns: 108px minmax(0, 1fr) 108px;
}

.ecom-result-canvas.portrait-preview .ecom-output-main {
  justify-self: center;
}

.ecom-result-canvas.landscape-preview .ecom-output-main {
  justify-self: center;
}

.ecom-result-stage .ecom-task-history,
.ecom-result-stage .ecom-output-actions {
  flex: 0 0 auto;
}

.ecom-result-stage .ecom-action-strip {
  position: static;
  flex: 0 0 auto;
  margin: 0;
  overflow-x: auto;
  flex-wrap: nowrap;
}

.ecom-result-stage .ecom-action-strip > span,
.ecom-result-stage .ecom-action-strip button,
.ecom-result-stage .ecom-action-strip .mini-thumbs {
  flex: 0 0 auto;
}

.ecom-result-stage .ecom-output-actions {
  display: none;
}

.ecom-result-stage .ecom-gallery-section {
  padding: 12px;
  border-radius: 24px;
}

.ecom-result-stage .ecom-gallery-head {
  display: none;
  margin-bottom: 8px;
}

.ecom-result-stage .ecom-gallery-head h2 {
  font-size: 20px;
}

.ecom-result-stage .ecom-preview-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(72px, auto);
  gap: 8px;
  max-height: 190px;
  overflow: auto;
}

.ecom-result-stage .ecom-preview-grid article {
  aspect-ratio: var(--ecom-ratio, 3 / 4);
}

.ecom-result-stage .ecom-preview-grid img {
  object-fit: contain;
}

.ecom-result-stage .selected-strip {
  position: static;
  justify-content: safe center;
  margin: 8px auto 0;
  margin-bottom: 0;
  padding: 7px 8px;
  overflow-x: auto;
  flex-wrap: nowrap;
  width: fit-content;
  max-width: 100%;
}

.ecom-result-stage .selected-strip span {
  flex: 0 0 auto;
}

@media (max-width: 1280px) {
  .ecom-hero-panel.ecom-studio-layout {
    grid-template-columns: 360px minmax(0, 1fr);
  }

  .ecom-result-canvas {
    grid-template-columns: 108px minmax(0, 1fr) 108px;
  }
}

@media (max-width: 920px) {
  .ecom-result-stage .ecom-output-panel {
    display: flex;
  }

  .ecom-result-canvas {
    grid-template-columns: minmax(0, 1fr);
  }

  .ecom-result-stage .ecom-output-main,
  .ecom-result-stage .ecom-task-thumbs {
    grid-column: 1;
    justify-self: stretch;
  }

  .ecom-task-thumbs {
    grid-template-columns: repeat(4, minmax(70px, 1fr));
    overflow-x: auto;
  }

  .ecom-task-history,
  .ecom-long-preview {
    grid-template-columns: minmax(0, 1fr);
  }
}

.library-side-tools {
  display: grid;
  gap: 8px;
}

.library-side-tools button,
.settings-download-grid article,
.brand-asset-strip article {
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 14px;
}

.library-side-tools button {
  min-height: 34px;
  color: #4f5662;
  font-size: 12px;
  font-weight: 850;
}

.brand-asset-strip,
.settings-download-grid {
  display: grid;
  gap: 10px;
}

.brand-asset-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 10px 0;
}

.brand-asset-strip article,
.settings-download-grid article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px 12px;
}

.brand-asset-strip span,
.settings-download-grid span {
  color: #727b87;
  font-size: 11px;
  font-weight: 850;
}

.brand-asset-strip strong,
.settings-download-grid strong {
  color: #151820;
  font-size: 15px;
}

.brand-asset-strip small,
.settings-download-grid small {
  color: #7c8490;
  font-size: 11px;
  line-height: 1.45;
}

.platform-list {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.platform-list label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.compact-export {
  align-self: start;
}

.platform-list span {
  font-size: 13px;
  font-weight: 700;
}

.platform-list small {
  grid-row: 2;
}

.platform-list input {
  grid-row: 1 / span 2;
  accent-color: var(--blue);
}

.task-compact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 14px 0;
  padding: 10px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.retouch-layout {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 18px;
}

.tool-dock {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  border-radius: 24px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.tool-dock button {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 52px;
  color: #707680;
  background: transparent;
  border-radius: 16px;
}

.tool-dock button.selected,
.tool-dock button:hover {
  color: #fff;
  background: #171a20;
}

.tool-dock span {
  font-size: 18px;
}

.tool-dock small {
  font-size: 10px;
}

.comparison {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  height: clamp(420px, calc(100vh - 250px), 680px);
  min-height: 0;
  margin-top: 16px;
  background: #f7f8fb;
  border-radius: 26px;
}

.page-retouch .comparison img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.comparison::before {
  content: "";
  position: absolute;
  inset: 0 50% 0 0;
  background: rgba(240, 242, 246, 0.5);
  backdrop-filter: saturate(0.2);
}

.comparison.retouch-ready::before {
  z-index: 1;
  inset: 0 50% 0 0;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(17, 19, 23, 0.06)),
    var(--retouch-before, none);
  background-size: 100% 100%, contain;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.comparison.retouch-ready img.retouch-after {
  position: absolute;
  inset: 0 0 0 50%;
  z-index: 2;
  width: 50%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.comparison.retouch-ready .divider-line,
.comparison.retouch-ready .tag {
  z-index: 3;
}

.divider-line {
  position: absolute;
  inset: 0 auto 0 50%;
  width: 2px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(32, 36, 44, 0.12);
}

.divider-line span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--soft-shadow);
  transform: translate(-50%, -50%);
}

.tag {
  position: absolute;
  top: 16px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  font-size: 12px;
  backdrop-filter: blur(12px);
}

.tag.before {
  left: 16px;
}

.tag.after {
  right: 16px;
}

.history-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.history-strip span {
  margin-right: auto;
  color: #626975;
  font-size: 12px;
  font-weight: 700;
}

.history-strip img,
.history-strip button {
  width: 62px;
  height: 48px;
  object-fit: cover;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.retouch-mode-strip {
  margin-top: 10px;
}

.retouch-mode-strip .option-strip,
.retouch-mode-strip .advanced-drawer-body > * {
  min-width: 0;
}

.retouch-mode-strip .retouch-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: #626975;
  font-size: 12px;
  font-weight: 800;
}

.retouch-mode-strip .retouch-field.wide {
  grid-column: 1 / -1;
}

.retouch-mode-strip .retouch-field input {
  width: 100%;
  min-height: 36px;
  padding: 0 11px;
  color: #252b34;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: 0;
}

.precision-panel label {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  color: #5f6670;
  font-size: 12px;
  font-weight: 700;
}

.precision-panel input {
  width: 100%;
  accent-color: var(--blue);
}

.model-status,
.retouch-submit-card {
  display: grid;
  gap: 6px;
  margin-top: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.model-status span,
.model-status small,
.retouch-submit-card span {
  color: var(--muted);
  font-size: 12px;
}

.repair-options {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.repair-options button {
  min-height: 38px;
  padding: 0 12px;
  text-align: left;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: #4d535d;
}

.repair-options button.selected,
.repair-options button:hover {
  background: #fff;
  border-color: rgba(71, 120, 255, 0.34);
  color: #111317;
}

.editor-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.editor-tabs button {
  min-height: 32px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #535b66;
  font-size: 12px;
}

.editor-tabs button.selected,
.editor-tabs button:hover {
  color: #fff;
  background: #171a20;
}

.image-editor-mini {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.image-editor-mini span {
  padding: 8px 10px;
  color: #525a66;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 12px;
}

.mini-textarea {
  min-height: 110px;
  font-size: 12px;
}

.pill-row {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 18px;
}

.model-option-stack,
.video-compact-controls {
  margin-top: 14px;
}

.video-compact-controls .option-strip,
.video-compact-controls .advanced-drawer-body > * {
  min-width: 0;
}

.model-option-stack {
  position: relative;
  overflow: visible;
}

.model-option-stack .advanced-drawer-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  overflow: hidden;
  padding: 8px;
}

.model-option-stack .mini-setting-drawer {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 14px;
}

.model-option-stack .mini-setting-drawer summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  min-height: 36px;
  padding: 0 8px 0 11px;
  cursor: pointer;
  list-style: none;
}

.model-option-stack .mini-setting-drawer summary::-webkit-details-marker {
  display: none;
}

.model-option-stack .mini-setting-drawer summary::after {
  display: none;
}

.model-option-stack .mini-setting-drawer summary span {
  overflow: hidden;
  color: #69717d;
  font-size: 11px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-option-stack .mini-setting-drawer summary strong {
  padding: 5px 8px;
  color: #fff;
  background: #111317;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.model-option-stack .mini-setting-drawer[open] {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(17, 19, 23, 0.18);
}

.model-option-stack .mini-setting-drawer[open] .option-strip.compact {
  position: static;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0 8px 8px;
  padding: 6px;
  overflow: visible;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 12px;
  box-shadow: none;
}

.model-option-stack .option-strip.compact {
  gap: 6px;
}

.model-option-stack .option-strip.compact span {
  display: none;
}

.model-option-stack .option-strip.compact button {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding-inline: 8px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-option-stack .option-strip.compact button.selected,
.model-option-stack .option-strip.compact button:hover {
  color: #fff;
  background: #111317;
  border-color: #111317;
}

.video-layout {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
}

.director-hero {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 30px;
  align-items: center;
  overflow: hidden;
  padding: 26px;
  border-radius: 30px;
}

.director-copy h2 {
  max-width: 660px;
  font-size: 34px;
}

.director-copy p {
  margin-top: 12px;
}

.director-preview {
  height: 190px;
  border-radius: 24px;
}

.video-studio-grid {
  display: grid;
  grid-template-columns: 220px 1fr 260px;
  gap: 16px;
}

.video-source,
.video-control,
.video-studio-grid .storyboard {
  padding: 20px;
  border-radius: 24px;
}

.video-source img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  margin: 14px 0;
  border-radius: 18px;
}

.video-status.vertical {
  grid-template-columns: 1fr;
  gap: 8px;
}

.video-status.vertical article {
  min-height: 62px;
  padding: 12px;
}

.storyboard-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.storyboard-head button {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.shot-timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.shot-timeline article {
  position: relative;
  min-height: 190px;
  padding: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(239, 244, 255, 0.62));
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}

.shot-timeline article::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -34px;
  width: 110px;
  height: 110px;
  background: radial-gradient(circle, rgba(71, 120, 255, 0.18), transparent 66%);
}

.shot-timeline span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 48px;
  color: var(--blue);
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--soft-shadow);
}

.shot-timeline strong {
  display: block;
  margin-bottom: 8px;
}

.shot-timeline small {
  color: var(--muted);
}

.script-strip {
  margin-top: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.script-strip p {
  margin-top: 8px;
  font-size: 13px;
}

.video-minimal {
  display: grid;
  gap: 14px;
  max-width: 1080px;
  margin: 0 auto;
}

.video-lab-page {
  position: relative;
  min-height: calc(100vh - 92px);
  padding-bottom: 148px;
}

.video-reference-wall {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 2px;
  overflow: hidden;
  height: clamp(136px, 12vw, 184px);
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 24px;
  box-shadow: var(--soft-shadow);
}

@supports selector(.page-video:has([data-video-result])) {
  .page-video:has([data-video-result]) .video-reference-wall {
    height: clamp(86px, 7vw, 112px);
  }
}

.video-ref-tile {
  position: relative;
  overflow: hidden;
  min-height: 0;
  background: #eef0f3;
}

.video-ref-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(0.96);
}

.video-ref-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(17, 19, 23, 0.08), rgba(17, 19, 23, 0.28));
}

.video-ref-tile span {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 1;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.22);
}

.video-plan-stage {
  display: grid;
  grid-template-columns: 0.88fr 1.12fr;
  gap: 16px;
  margin-top: 14px;
}

.video-plan-copy,
.pro-storyboard {
  padding: 18px;
  border-radius: 24px;
}

.video-plan-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
}

.video-plan-head h2 {
  max-width: 520px;
  font-size: 24px;
}

.video-plan-side {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.video-flow-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.video-flow-strip span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  color: #626975;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 12px;
  font-weight: 800;
}

.video-flow-strip span i,
.video-flow-cta i {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: #fff;
  background: linear-gradient(145deg, #151820, #303949);
  border-radius: 999px;
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
}

.video-flow-strip span.done {
  color: #111317;
  background: rgba(26, 31, 42, 0.08);
  border-color: rgba(26, 31, 42, 0.16);
}

.video-flow-strip span.active {
  color: #315fe8;
  background: rgba(71, 120, 255, 0.1);
  border-color: rgba(71, 120, 255, 0.18);
}

.video-flow-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  color: #fff;
  background: linear-gradient(135deg, #151820, #303949);
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
  box-shadow: 0 12px 28px rgba(17, 19, 23, 0.18);
}

.video-flow-cta.small {
  min-height: 32px;
  padding: 0 12px;
}

.video-flow-cta:hover,
.video-flow-cta:focus-visible {
  color: #fff;
  transform: translateY(-1px);
}

.video-spec-tags,
.console-controls,
.console-submit,
.video-slider-line {
  display: flex;
  align-items: center;
  gap: 8px;
}

.video-spec-tags span {
  padding: 7px 10px;
  color: #315fe8;
  background: var(--blue-soft);
  border: 1px solid rgba(71, 120, 255, 0.18);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.director-statement {
  margin-top: 14px;
  color: #424954;
  font-size: 14px;
  line-height: 1.82;
}

.plan-pillars {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.plan-pillars article {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.plan-pillars b {
  color: #151820;
  font-size: 13px;
}

.plan-pillars span {
  color: #69707c;
  font-size: 13px;
}

.video-plan-briefs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.video-plan-briefs article,
.video-generated-plan-list article,
.video-plan-error {
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(31, 36, 48, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.video-plan-briefs article {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 16px;
}

.video-plan-briefs b,
.video-generated-plan-list strong,
.video-plan-error strong {
  color: #151820;
}

.video-plan-briefs b {
  font-size: 12px;
}

.video-plan-briefs span {
  color: #606775;
  font-size: 12px;
  line-height: 1.55;
}

.video-generated-plan-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.video-generated-plan-list article {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
}

.video-plan-shot-index {
  display: grid;
  align-content: start;
  gap: 7px;
}

.video-plan-shot-index span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #fff;
  background: linear-gradient(145deg, #151820, #2e3647);
  border-radius: 14px;
  font-size: 13px;
  font-weight: 900;
}

.video-plan-shot-index b {
  color: #315fe8;
  font-size: 12px;
}

.video-plan-shot-body {
  min-width: 0;
}

.video-plan-shot-body strong {
  display: block;
  font-size: 14px;
}

.video-plan-shot-body p {
  margin-top: 6px;
  color: #535b68;
  font-size: 12px;
  line-height: 1.62;
}

.video-plan-shot-body small {
  display: block;
  margin-top: 8px;
  color: #315fe8;
  font-size: 12px;
  font-weight: 800;
}

.video-shot-cues {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.video-shot-cues span {
  max-width: 100%;
  padding: 6px 8px;
  color: #586170;
  background: rgba(71, 120, 255, 0.08);
  border: 1px solid rgba(71, 120, 255, 0.12);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.video-plan-copy.video-plan-failed {
  border-color: rgba(232, 83, 83, 0.24);
}

.video-plan-error {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 14px;
  border-radius: 18px;
}

.video-plan-error p {
  color: #b33232;
  font-size: 13px;
  line-height: 1.6;
}

.video-plan-error small {
  color: #69707c;
  font-size: 12px;
  line-height: 1.6;
}

.cinema-shot-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.shot-card {
  overflow: hidden;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.shot-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.shot-placeholder {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  color: #315fe8;
  background:
    radial-gradient(circle at 50% 38%, rgba(71, 120, 255, 0.14), transparent 34%),
    linear-gradient(145deg, rgba(245, 247, 252, 0.96), rgba(255, 255, 255, 0.78));
  border-bottom: 1px solid rgba(31, 36, 48, 0.08);
  font-size: 18px;
  font-weight: 900;
}

.shot-card.generated-plan-shot {
  border-style: dashed;
}

.shot-card.storyboard-status-card {
  grid-column: 1 / -1;
  min-height: 210px;
}

.shot-card.storyboard-status-card .shot-placeholder {
  aspect-ratio: auto;
  min-height: 82px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 50%, rgba(232, 83, 83, 0.28), transparent 38%),
    linear-gradient(145deg, #151820, #303949);
}

.shot-card.storyboard-failed {
  border-color: rgba(232, 83, 83, 0.24);
}

.shot-card.storyboard-failed p {
  color: #b33232;
}

.shot-card.storyboard-status-card small {
  display: block;
  padding: 0 11px 13px;
  color: #69707c;
  font-size: 12px;
  line-height: 1.55;
}

.shot-card.storyboard-video-cta {
  display: grid;
  align-content: start;
  gap: 0;
  border-style: solid;
  border-color: rgba(71, 120, 255, 0.2);
  background:
    radial-gradient(circle at 18% 0%, rgba(71, 120, 255, 0.16), transparent 32%),
    rgba(255, 255, 255, 0.78);
}

.shot-card.storyboard-video-cta .shot-placeholder {
  background:
    radial-gradient(circle at 50% 48%, rgba(71, 120, 255, 0.32), transparent 36%),
    linear-gradient(145deg, #151820, #303949);
}

.shot-card.storyboard-video-cta .video-flow-cta {
  justify-self: start;
  margin: 0 11px 14px;
}

.shot-meta {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 2px 8px;
  padding: 10px 11px 0;
}

.shot-meta span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #fff;
  background: #151820;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
}

.shot-meta b {
  font-size: 12px;
}

.shot-meta em {
  color: #7a808b;
  font-size: 11px;
  font-style: normal;
}

.shot-card strong {
  display: block;
  padding: 8px 11px 0;
  font-size: 13px;
}

.shot-card p {
  padding: 5px 11px 12px;
  color: #606775;
  font-size: 12px;
  line-height: 1.55;
}

.video-param-popover,
.video-mode-popover {
  position: fixed;
  left: 50%;
  bottom: 86px;
  z-index: 12;
  width: 480px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 18px;
  box-shadow: 0 26px 70px rgba(31, 36, 48, 0.18);
  backdrop-filter: blur(24px);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: 0.16s ease;
}

.video-param-popover.open,
.video-mode-popover.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.video-param-popover.open {
  display: grid;
  max-height: min(620px, calc(100vh - 150px));
  overflow: auto;
}

.video-param-popover label {
  display: block;
  margin: 10px 0 8px;
  color: #4c5460;
  font-size: 13px;
}

.video-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.video-popover-head strong {
  font-size: 14px;
}

.video-popover-head span {
  color: var(--muted);
  font-size: 12px;
}

.video-ratio-grid,
.video-platform-grid,
.video-style-grid,
.video-region-grid,
.video-duration-grid,
.video-model-grid,
.video-industry-grid,
.video-voice-grid,
.video-bgm-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.video-ratio-grid button,
.video-platform-grid button,
.video-style-grid button,
.video-region-grid button,
.video-duration-grid button,
.video-model-grid button,
.video-industry-grid button,
.video-voice-grid button,
.video-bgm-grid button,
.video-segmented button,
.video-mode-popover button {
  min-height: 38px;
  padding: 0 10px;
  color: #4f5662;
  background: rgba(246, 247, 250, 0.84);
  border: 1px solid rgba(35, 42, 54, 0.08);
  border-radius: 11px;
  font-size: 12px;
  font-weight: 760;
}

.video-ratio-grid button.selected,
.video-platform-grid button.selected,
.video-style-grid button.selected,
.video-region-grid button.selected,
.video-duration-grid button.selected,
.video-model-grid button.selected,
.video-industry-grid button.selected,
.video-voice-grid button.selected,
.video-bgm-grid button.selected,
.video-segmented button.selected,
.video-mode-popover button.selected,
.console-controls button.selected {
  color: #fff;
  background: #111317;
  border-color: #111317;
}

.video-segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 4px;
  background: rgba(237, 239, 244, 0.72);
  border-radius: 10px;
}

.video-param-popover .video-segmented:nth-of-type(3) {
  grid-template-columns: repeat(2, 1fr);
}

.video-model-grid,
.video-voice-grid,
.video-bgm-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.video-industry-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.video-model-grid button,
.video-voice-grid button,
.video-bgm-grid button {
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-slider-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.video-slider-line input {
  flex: 1;
  accent-color: var(--blue);
}

.video-slider-line span {
  min-width: 60px;
  padding: 7px 10px;
  text-align: center;
  color: #4f5662;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
}

.video-mode-popover {
  width: 220px;
  left: calc(50% - 300px);
  padding: 10px;
}

.video-mode-popover span {
  display: block;
  padding: 4px 2px 8px;
  color: #434a55;
  font-size: 13px;
}

.video-mode-popover button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 4px;
  text-align: left;
}

.video-generate-console {
  position: fixed;
  left: 50%;
  bottom: 16px;
  z-index: 11;
  display: grid;
  gap: 10px;
  width: min(940px, calc(100vw - 190px));
  padding: 12px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(249, 250, 253, 0.96));
  border: 1px solid rgba(31, 36, 48, 0.08);
  box-shadow: 0 24px 70px rgba(31, 36, 48, 0.17);
  backdrop-filter: blur(24px);
  transform: translateX(-50%);
}

.video-console-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 4px;
  background: rgba(245, 246, 248, 0.92);
  border: 1px solid rgba(31, 36, 48, 0.06);
  border-radius: 16px;
}

.video-console-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  height: 30px;
  padding: 0 12px;
  color: #616875;
  background: transparent;
  border: 0;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.video-console-tabs button:hover,
.video-console-tabs button.selected {
  color: #fff;
  background: #111317;
  box-shadow: 0 10px 24px rgba(17, 19, 23, 0.18);
  transform: translateY(-1px);
}

.video-console-body {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 112px;
}

.console-assets {
  display: grid;
  align-content: start;
  gap: 0;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

.console-assets::-webkit-scrollbar {
  display: none;
}

.console-assets > button {
  position: relative;
  display: grid;
  gap: 6px;
  width: 100%;
  min-width: 0;
  font: inherit;
  color: #111317;
  appearance: none;
  cursor: pointer;
}

.console-assets > button.upload-zone {
  overflow: hidden;
  width: 72px;
  min-height: 72px;
  padding: 8px 6px;
  place-items: center;
  align-content: center;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(241, 245, 255, 0.98), rgba(255, 255, 255, 0.92));
  border: 1px dashed rgba(71, 120, 255, 0.34);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  isolation: isolate;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.console-assets > button.upload-zone::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.78)),
    var(--upload-preview, none);
  background-position: center;
  background-size: cover;
  opacity: 0.28;
}

.console-assets > button.upload-zone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));
}

.console-assets > button.upload-zone:hover,
.console-assets > button.upload-zone:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(71, 120, 255, 0.56);
  box-shadow: 0 18px 40px rgba(71, 120, 255, 0.16);
}

.console-assets > button.upload-zone.uploaded {
  border-style: solid;
  border-color: rgba(71, 120, 255, 0.38);
  box-shadow: 0 18px 40px rgba(71, 120, 255, 0.14);
}

.console-assets > button.upload-zone.uploaded::before {
  opacity: 0.22;
}

.console-assets > button.upload-zone span,
.console-assets > button.upload-zone strong,
.console-assets > button.upload-zone small {
  position: relative;
  z-index: 1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.console-assets > button.upload-zone span {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: #315fe8;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(31, 36, 48, 0.08);
  font-size: 15px;
  font-weight: 900;
}

.console-assets > button.upload-zone strong {
  font-size: 10px;
  font-weight: 850;
  line-height: 1.25;
}

.console-assets > button.upload-zone small {
  color: #7b8492;
  font-size: 9px;
  line-height: 1.25;
  white-space: normal;
}

.console-asset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.console-asset-row > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 104px;
  min-height: 38px;
  padding: 0 13px;
  color: #111317;
  font: inherit;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 780;
  transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.console-asset-row > button:hover,
.console-asset-row > button:focus-visible {
  color: #fff;
  background: #111317;
  border-color: #111317;
  transform: translateY(-1px);
}

.console-asset-row > button.uploaded {
  color: #315fe8;
  background: rgba(237, 243, 255, 0.9);
  border-color: rgba(71, 120, 255, 0.24);
}

.console-asset-row > button span,
.console-asset-row > button small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.console-asset-row > button span {
  font-size: 12px;
  font-weight: 820;
}

.console-asset-row > button small {
  color: #7a8290;
  font-size: 11px;
  font-weight: 600;
}

.video-generate-console .console-controls > [data-upload] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 116px;
}

.video-generate-console .console-controls > [data-upload] span,
.video-generate-console .console-controls > [data-upload] small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-generate-console .console-controls > [data-upload] small {
  margin-left: 4px;
  color: #7a8290;
  font-size: 11px;
  font-weight: 700;
}

.video-console-prompt {
  display: flex;
  min-width: 0;
}

.video-generate-console textarea {
  width: 100%;
  min-height: 112px;
  height: 100%;
  resize: none;
  padding: 16px 17px 13px;
  color: #1f2630;
  background:
    linear-gradient(180deg, rgba(248, 249, 252, 0.98), rgba(244, 246, 250, 0.94));
  border: 1px solid rgba(31, 36, 48, 0.06);
  border-radius: 16px;
  outline: 0;
  font-size: 14px;
  line-height: 1.7;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.video-generate-console textarea::placeholder {
  color: #8a92a0;
}

.video-generate-console textarea:focus {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(71, 120, 255, 0.24);
  box-shadow: 0 0 0 4px rgba(71, 120, 255, 0.08);
}

.video-task-result {
  display: grid;
  gap: 9px;
  margin: 12px 0;
  padding: 13px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(246, 248, 252, 0.74)),
    radial-gradient(circle at 0 0, rgba(71, 120, 255, 0.12), transparent 32%);
  border: 1px solid rgba(31, 36, 48, 0.08);
}

.video-task-result.multi-video-task-result {
  grid-template-columns: minmax(220px, 0.4fr) minmax(420px, 0.6fr);
  grid-template-areas:
    "head preview"
    "live preview"
    "meta preview"
    "actions preview";
  align-items: start;
}

.video-task-result.multi-video-task-result .video-result-head {
  grid-area: head;
}

.video-task-result.multi-video-task-result .video-live-strip {
  grid-area: live;
}

.video-task-result.multi-video-task-result .video-result-meta {
  grid-area: meta;
}

.video-task-result.multi-video-task-result .video-result-grid {
  grid-area: preview;
  align-self: start;
}

.video-task-result.multi-video-task-result .video-result-actions {
  grid-area: actions;
  justify-content: flex-start;
}

.video-task-result.single-video-task-result {
  grid-template-columns: minmax(250px, 0.36fr) minmax(380px, 0.64fr);
  grid-template-areas:
    "head preview"
    "live preview"
    "actions preview"
    "meta preview";
  align-items: start;
  gap: 8px 12px;
  padding: 14px 16px;
}

.video-task-result.single-video-task-result .video-result-head {
  grid-area: head;
}

.video-task-result.single-video-task-result .video-live-strip {
  grid-area: live;
}

.video-task-result.single-video-task-result .video-result-meta {
  grid-area: meta;
  max-height: 48px;
  overflow: hidden;
}

.video-task-result.single-video-task-result .video-result-grid {
  grid-area: preview;
  align-self: start;
}

.video-task-result.single-video-task-result .video-result-actions {
  grid-area: actions;
  justify-content: flex-start;
}

.video-task-result.single-video-task-result .video-live-strip {
  min-height: 54px;
  padding: 8px 10px;
}

.video-task-result.single-video-task-result .video-live-main strong {
  white-space: normal;
  line-height: 1.35;
}

.video-task-result + .video-plan-stage {
  margin-top: 14px;
}

.page-video .video-task-result.video-result-minimized {
  display: none !important;
}

.video-result-head,
.video-result-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.video-result-head strong {
  display: block;
  margin-top: 3px;
  color: #151820;
  font-size: 18px;
}

.video-result-head em {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  padding: 0 12px;
  color: #315fe8;
  background: var(--blue-soft);
  border: 1px solid rgba(71, 120, 255, 0.22);
  border-radius: 999px;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.video-result-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.video-result-meta span {
  padding: 6px 9px;
  color: #68707d;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.video-live-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 14px;
  align-items: center;
  min-height: 50px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 16px;
}

.video-live-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.video-live-main span {
  width: fit-content;
  padding: 4px 8px;
  color: #fff;
  background: #111317;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 860;
}

.video-live-main strong {
  min-width: 0;
  overflow: hidden;
  color: #252b35;
  font-size: 13px;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-live-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 9px;
  align-items: center;
}

.video-live-progress i {
  position: relative;
  display: block;
  height: 8px;
  overflow: hidden;
  background: rgba(31, 36, 48, 0.08);
  border-radius: 999px;
}

.video-live-progress i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: calc(var(--video-progress, 0) * 1%);
  background: linear-gradient(90deg, #111317, #315fe8);
  border-radius: inherit;
  transition: width 0.28s ease;
}

.video-live-progress b {
  color: #111317;
  font-size: 12px;
  font-weight: 880;
  text-align: right;
}

.video-result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 12px;
}

.video-result-grid.single-video-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  gap: 10px;
  min-height: 212px;
  padding: 10px;
  background:
    linear-gradient(145deg, rgba(246, 248, 252, 0.82), rgba(255, 255, 255, 0.62)),
    radial-gradient(circle at 50% 0, rgba(71, 120, 255, 0.1), transparent 38%);
  border: 1px solid rgba(31, 36, 48, 0.06);
  border-radius: 20px;
}

.video-result-grid.single-video-result .video-result-card {
  width: min(100%, 680px);
  justify-self: center;
  height: clamp(188px, calc(100vh - 490px), 255px);
  min-height: 0;
  aspect-ratio: var(--video-ratio, 9 / 16);
  box-shadow: 0 24px 56px rgba(31, 36, 48, 0.18);
  background: #111317;
}

.video-result-grid.single-video-result .video-result-card.ratio-wide {
  width: min(100%, 680px);
  height: clamp(188px, calc(100vh - 510px), 235px);
  min-height: 188px;
}

.video-result-grid.single-video-result .video-result-card.ratio-square,
.video-result-grid.single-video-result .video-result-card.ratio-portrait {
  width: min(100%, 420px);
  height: clamp(188px, calc(100vh - 490px), 255px);
}

.video-result-grid.single-video-result .video-result-card video,
.video-result-grid.single-video-result .video-result-card img {
  object-fit: contain;
  background: #111317;
}

.video-result-grid.single-video-result .video-delivery-summary {
  display: none;
}

.video-result-grid.generate-video-result.single-video-result .video-result-card::before {
  content: "主内容";
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 8px;
  color: #fff;
  background: rgba(17, 19, 23, 0.72);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  backdrop-filter: blur(12px);
}

.video-result-grid.multi-video-result {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}

.video-result-grid.generate-video-result.multi-video-result {
  grid-template-columns: minmax(170px, 1fr) minmax(112px, 150px);
  grid-template-rows: repeat(3, clamp(68px, 8vh, 86px));
  grid-auto-rows: clamp(68px, 8vh, 86px);
  align-items: stretch;
  gap: 12px;
}

.video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: center;
  justify-self: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  background: #111317;
  box-shadow: 0 24px 54px rgba(31, 36, 48, 0.18);
}

.video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical,
.video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-portrait {
  width: 100%;
  height: 100%;
}

.video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-square {
  width: 100%;
  height: 100%;
}

.video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-wide {
  width: min(100%, 720px);
  height: auto;
}

.video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video video,
.video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video img {
  object-fit: contain;
  background: #111317;
}

.video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) {
  grid-column: 2;
  grid-row: auto;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  min-height: 0;
  align-self: stretch;
  opacity: 0.86;
  transform: scale(0.96);
  transform-origin: center;
  box-shadow: 0 14px 30px rgba(31, 36, 48, 0.1);
  cursor: pointer;
}

.video-result-grid.generate-video-result.multi-video-result .video-result-card.pending:not(.is-main-video) {
  background:
    radial-gradient(circle at 50% 45%, rgba(49, 95, 232, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(247, 249, 253, 0.94), rgba(255, 255, 255, 0.78));
  border-style: dashed;
}

.video-result-grid.generate-video-result.multi-video-result .video-result-card.pending:not(.is-main-video) .video-progress-orbit {
  display: none;
}

.video-result-grid.generate-video-result.multi-video-result .video-result-card.pending:not(.is-main-video) .video-card-status {
  justify-items: end;
  text-align: right;
}

.video-result-grid.generate-video-result.multi-video-result .video-result-card.pending:not(.is-main-video) .video-card-status b {
  color: #6d7480;
  font-size: 11px;
}

.video-result-grid.generate-video-result.multi-video-result .video-result-card.pending:not(.is-main-video) span {
  display: none;
}

.video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video):hover,
.video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video):focus-within {
  opacity: 1;
  transform: translateY(-2px) scale(1);
}

.video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) small {
  display: none;
}

.video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(n + 5) {
  grid-column: auto;
  min-height: 132px;
  opacity: 0.72;
  transform: scale(0.94);
}

.video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video::before {
  content: "主内容";
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 8px;
  color: #fff;
  background: rgba(17, 19, 23, 0.72);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  backdrop-filter: blur(12px);
}

.video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video)::before {
  content: "副内容";
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 7px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(17, 19, 23, 0.52);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.video-result-card {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: end;
  min-height: 132px;
  padding: 12px;
  background:
    linear-gradient(145deg, rgba(246, 248, 252, 0.92), rgba(255, 255, 255, 0.72)),
    radial-gradient(circle at 20% 0, rgba(71, 120, 255, 0.12), transparent 36%);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
}

.video-result-card.ratio-vertical {
  aspect-ratio: var(--video-ratio, 9 / 16);
}

.video-result-card.ratio-portrait {
  aspect-ratio: var(--video-ratio, 3 / 4);
}

.video-result-card.ratio-square {
  aspect-ratio: var(--video-ratio, 1 / 1);
}

.video-result-card.ratio-wide {
  aspect-ratio: var(--video-ratio, 16 / 9);
}

.video-result-card video,
.video-result-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-result-card span,
.video-result-card small,
.video-result-card strong,
.video-result-card b,
.video-result-card div {
  position: relative;
  z-index: 1;
}

.video-card-status {
  display: grid;
  gap: 5px;
  max-width: 100%;
}

.video-result-card.ready::after,
.video-result-card.image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 42%, rgba(13, 16, 24, 0.62));
}

.video-result-card span {
  width: fit-content;
  padding: 5px 8px;
  color: #fff;
  background: rgba(17, 19, 23, 0.58);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(12px);
}

.video-result-card small {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
}

.video-result-card.pending small,
.video-result-card.plan small {
  color: #7a808b;
}

.video-result-card.pending b,
.video-result-card.plan b {
  color: #315fe8;
  font-size: 13px;
}

.video-result-card.plan strong {
  margin-top: 6px;
  color: #222834;
  font-size: 13px;
}

.video-progress-orbit {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.96) 0 55%, transparent 56%),
    conic-gradient(#111317 calc(var(--video-progress, 0) * 1%), rgba(31, 36, 48, 0.08) 0);
  border-radius: 50%;
  box-shadow: 0 12px 26px rgba(31, 36, 48, 0.1);
}

.video-progress-orbit b {
  color: #111317;
  font-size: 11px;
  font-weight: 900;
}

.video-delivery-summary {
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: 10px;
  min-height: 204px;
  padding: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(246, 248, 252, 0.58)),
    radial-gradient(circle at 100% 0, rgba(71, 120, 255, 0.1), transparent 38%);
  border: 1px solid rgba(31, 36, 48, 0.07);
  border-radius: 18px;
}

.video-delivery-summary > span {
  width: fit-content;
  padding: 5px 9px;
  color: #fff;
  background: #111317;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
}

.video-delivery-summary strong {
  color: #151820;
  font-size: 22px;
  line-height: 1.05;
}

.video-delivery-summary p {
  max-width: 520px;
  color: #565f6d;
  font-size: 13px;
  line-height: 1.65;
}

.video-delivery-summary dl {
  display: grid;
  gap: 8px;
}

.video-delivery-summary dl div {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(31, 36, 48, 0.06);
  border-radius: 12px;
}

.video-delivery-summary dt {
  color: #8a92a0;
  font-size: 12px;
  font-weight: 760;
}

.video-delivery-summary dd {
  min-width: 0;
  overflow: hidden;
  color: #252b35;
  font-size: 12px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-result-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.video-result-actions button {
  min-height: 31px;
  padding: 0 12px;
  color: #111317;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 780;
  transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.video-result-actions button:hover {
  color: #fff;
  background: #111317;
  transform: translateY(-1px);
}

.video-result-actions .video-flow-cta.small {
  color: #fff;
  background: linear-gradient(135deg, #151820, #303949);
  border-color: transparent;
}

.console-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.console-controls button,
.console-submit button:not(.prompt-submit),
.video-console-more summary {
  min-height: 32px;
  padding: 0 12px;
  color: #111317;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.console-controls button:hover,
.console-submit button:not(.prompt-submit):hover,
.console-controls button:focus-visible,
.console-submit button:not(.prompt-submit):focus-visible,
.video-console-more summary:hover,
.video-console-more summary:focus-visible {
  color: #fff;
  background: #111317;
  border-color: #111317;
  transform: translateY(-1px);
}

.console-controls,
.console-submit {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.console-controls::-webkit-scrollbar,
.console-submit::-webkit-scrollbar {
  display: none;
}

.console-submit {
  justify-content: flex-end;
}

.console-submit span {
  color: #68707d;
  font-size: 12px;
  white-space: nowrap;
}

.video-console-more {
  position: relative;
  flex: 0 0 auto;
}

.video-console-more summary {
  display: inline-flex;
  align-items: center;
  list-style: none;
}

.video-console-more summary::-webkit-details-marker {
  display: none;
}

.video-console-more[open] summary {
  color: #fff;
  background: #111317;
  border-color: #111317;
}

.video-console-more > div {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(2, minmax(112px, 1fr));
  gap: 6px;
  width: 260px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(31, 36, 48, 0.1);
  border-radius: 16px;
  box-shadow: 0 20px 48px rgba(31, 36, 48, 0.18);
  backdrop-filter: blur(20px);
}

.video-console-more > div button {
  min-height: 32px;
  justify-content: center;
  padding: 0 10px;
  color: #111317;
  background: rgba(245, 246, 248, 0.82);
  border: 1px solid rgba(31, 36, 48, 0.06);
  border-radius: 11px;
  font-size: 12px;
  font-weight: 760;
}

.video-generate-console .console-controls button.selected {
  color: #fff;
  background: #111317;
  border-color: #111317;
  box-shadow: 0 10px 24px rgba(17, 19, 23, 0.16);
}

.video-generate-console .prompt-submit {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #7b61ff, #5b6dff);
  box-shadow: 0 14px 28px rgba(91, 109, 255, 0.28);
}

.video-generate-console .prompt-submit:hover,
.video-generate-console .prompt-submit:focus-visible {
  color: #fff;
  background: linear-gradient(135deg, #6d56ff, #4f62f5);
  box-shadow: 0 16px 32px rgba(91, 109, 255, 0.32);
}

.video-generate-console .prompt-submit:active {
  transform: translateY(1px);
}

.video-generate-console .console-assets > button.upload-zone *,
.video-generate-console .console-asset-row > button * {
  pointer-events: none;
}

.video-topline {
  display: grid;
  grid-template-columns: 190px 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 46px;
  padding: 6px 10px;
  border-radius: 18px;
}

.video-top-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.video-top-title span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
}

.video-top-title strong {
  font-size: 15px;
}

.video-step-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.video-step-dots span {
  min-width: 58px;
  padding: 6px 10px;
  text-align: center;
  color: #737b87;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.video-step-dots span.done {
  color: #14885c;
  background: rgba(49, 181, 123, 0.12);
  border-color: rgba(49, 181, 123, 0.18);
}

.video-step-dots span.active {
  color: #315fe8;
  background: var(--blue-soft);
  border-color: rgba(71, 120, 255, 0.25);
}

.video-meta {
  color: #5f6670;
  font-size: 12px;
  white-space: nowrap;
}

.video-copy {
  display: block;
  padding: 0 4px;
}

.video-copy .section-kicker {
  display: none;
}

.video-copy h2 {
  max-width: 720px;
  font-size: 22px;
  line-height: 1.2;
}

.video-copy p {
  max-width: 360px;
  text-align: right;
}

.video-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 6px;
  border-radius: 16px;
}

.video-steps article {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 6px;
  align-items: center;
  min-height: 36px;
  padding: 6px 9px;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.video-steps span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #6c7380;
  background: #eef0f4;
  border-radius: 50%;
  font-weight: 800;
  font-size: 12px;
}

.video-steps article.done span {
  color: #fff;
  background: var(--green);
}

.video-steps strong {
  font-size: 13px;
}

.video-steps article.active {
  border-color: rgba(71, 120, 255, 0.34);
  box-shadow: 0 12px 26px rgba(71, 120, 255, 0.1);
}

.video-steps article.active span {
  color: #fff;
  background: var(--blue);
}

.video-workbench {
  display: grid;
  grid-template-columns: 280px 280px minmax(360px, 1fr);
  gap: 14px;
  align-items: start;
}

.video-output-grid {
  display: grid;
  grid-template-columns: 280px 280px minmax(360px, 1fr);
  gap: 14px;
  align-items: stretch;
  margin-top: -88px;
}

.video-progress-card {
  grid-column: 1;
  grid-row: 1;
}

.video-script-card {
  grid-column: 3;
  grid-row: 1;
}

.video-delivery-card {
  grid-column: 2;
  grid-row: 1;
  margin-top: 88px;
}

.video-brief-card,
.phone-preview,
.story-minimal,
.video-progress-card,
.video-script-card,
.video-delivery-card {
  padding: 14px;
  border-radius: 20px;
}

.video-brief-card textarea {
  min-height: 116px;
  margin-top: 10px;
  font-size: 14px;
}

.simple-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.simple-options button {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #535b66;
  font-size: 12px;
}

.simple-options button.selected,
.simple-options button:hover,
.simple-options button.multi-selected {
  background: #fff;
  border-color: rgba(71, 120, 255, 0.34);
  color: #111317;
}

.video-media-tools,
.video-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.video-action-row button {
  background: rgba(237, 243, 255, 0.74);
  color: #315fe8;
}

.video-confirm-row {
  margin-top: 10px;
}

.phone-preview {
  display: grid;
  gap: 12px;
  justify-items: center;
}

.phone-screen {
  position: relative;
  overflow: hidden;
  width: min(100%, 200px);
  aspect-ratio: 9 / 16;
  background: #111317;
  border: 7px solid #111317;
  border-radius: 30px;
  box-shadow: 0 30px 70px rgba(25, 30, 42, 0.22);
}

.phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-control {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  color: #111317;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(14px);
}

.duration {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 6px 10px;
  color: #fff;
  background: rgba(17, 19, 23, 0.58);
  border-radius: 999px;
  font-size: 12px;
}

.preview-caption {
  display: grid;
  gap: 4px;
  text-align: center;
}

.preview-caption small {
  color: var(--muted);
}

.story-minimal {
  display: grid;
  grid-template-rows: auto 1fr;
}

.minimal-shots {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.minimal-shots article {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 4px 14px;
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.minimal-shots span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  height: 34px;
  color: var(--blue);
  background: var(--blue-soft);
  border-radius: 14px;
  font-weight: 800;
}

.minimal-shots p {
  font-size: 13px;
}

.compact-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.compact-head > div {
  display: grid;
  gap: 4px;
}

.compact-head strong {
  font-size: 16px;
}

.compact-head em {
  color: var(--blue);
  font-size: 26px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0;
}

.compact-head button {
  min-width: 56px;
  min-height: 34px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #4d5561;
  font-size: 12px;
}

.video-progress-card,
.video-script-card,
.video-delivery-card {
  position: relative;
  overflow: hidden;
  min-height: 214px;
}

.video-progress-card::before,
.video-script-card::before,
.video-delivery-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(71, 120, 255, 0.08), transparent 36%, rgba(191, 154, 98, 0.08));
  opacity: 0.8;
}

.video-progress-card > *,
.video-script-card > *,
.video-delivery-card > * {
  position: relative;
  z-index: 1;
}

.render-meter {
  overflow: hidden;
  height: 10px;
  margin-top: 18px;
  background: rgba(31, 36, 48, 0.08);
  border-radius: 999px;
}

.render-meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #31b57b, #4778ff);
  border-radius: inherit;
  box-shadow: 0 0 24px rgba(71, 120, 255, 0.35);
  animation: progressGlow 1.7s ease-in-out infinite;
}

.render-stack {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.render-stack article {
  display: grid;
  gap: 3px;
  min-height: 42px;
  padding: 9px 11px;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.render-stack b,
.delivery-list span {
  font-size: 12px;
}

.render-stack span {
  color: var(--muted);
  font-size: 12px;
}

.script-lines {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.script-lines article {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 10px;
  align-items: start;
  min-height: 44px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--line);
  border-radius: 15px;
}

.script-lines span {
  display: grid;
  place-items: center;
  min-height: 26px;
  color: #315fe8;
  background: var(--blue-soft);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.script-lines p {
  color: #343a45;
  font-size: 13px;
  line-height: 1.55;
}

.video-asset-pack {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.asset-stack-preview {
  position: relative;
  min-height: 98px;
}

.asset-stack-preview img {
  position: absolute;
  top: 0;
  width: 84px;
  height: 98px;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, 0.82);
  border-radius: 18px;
  box-shadow: 0 16px 30px rgba(31, 36, 48, 0.14);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.asset-stack-preview img:nth-child(1) {
  left: 4px;
  transform: rotate(-7deg);
}

.asset-stack-preview img:nth-child(2) {
  left: 68px;
  transform: rotate(2deg);
}

.asset-stack-preview img:nth-child(3) {
  left: 132px;
  transform: rotate(8deg);
}

.video-delivery-card:hover .asset-stack-preview img:nth-child(1) {
  transform: translateY(-4px) rotate(-9deg);
}

.video-delivery-card:hover .asset-stack-preview img:nth-child(2) {
  transform: translateY(-8px) rotate(1deg);
}

.video-delivery-card:hover .asset-stack-preview img:nth-child(3) {
  transform: translateY(-4px) rotate(10deg);
}

.delivery-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.delivery-list span {
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #4f5662;
  font-weight: 700;
}

.video-task-board {
  margin-top: 14px;
  padding: 14px;
  border-radius: 20px;
}

.video-task-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.video-task-list article {
  display: grid;
  grid-template-columns: 72px 1fr 150px auto;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.video-task-list span {
  display: grid;
  place-items: center;
  min-height: 28px;
  color: #315fe8;
  background: var(--blue-soft);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.video-task-list small {
  color: var(--muted);
  font-size: 12px;
}

.video-task-list button {
  min-height: 32px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #4d5561;
  font-size: 12px;
}

.video-brief {
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: 30px;
  align-items: center;
  padding: 26px;
  border-radius: 30px;
}

.video-brief h2 {
  font-size: 34px;
}

.video-brief p {
  margin-top: 12px;
}

.video-status {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.video-status article {
  min-height: 100px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.video-status span {
  display: block;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
}

.storyboard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.storyboard.pulse-target,
.video-output-grid.pulse-target,
.production-wall.pulse-target,
.result-gallery.pulse-target,
.comparison.pulse-target {
  animation: softPulse 1.1s ease;
}

.shot-timeline article,
.script-strip,
.launch-card,
.creative-modes button,
.repair-options button {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease;
}

.shot-timeline article:hover,
.script-strip:hover {
  transform: translateY(-3px);
  box-shadow: var(--soft-shadow);
  border-color: rgba(71, 120, 255, 0.25);
}

.script-card,
.board-card {
  position: relative;
  overflow: hidden;
  min-height: 138px;
  padding: 20px;
  border-radius: 20px;
}

.script-card p,
.board-card li {
  margin-top: 10px;
  color: #565d68;
  font-size: 13px;
  line-height: 1.7;
}

.script-card.warning {
  background:
    linear-gradient(145deg, rgba(255, 247, 239, 0.9), rgba(255, 255, 255, 0.72)),
    #fff;
  border-color: rgba(226, 166, 77, 0.22);
}

.message-time {
  margin-top: 12px;
  color: #8d939c;
  font-size: 11px;
}

.board-card ol {
  padding-left: 18px;
}

.video-prompt {
  display: grid;
  grid-template-columns: 48px 1fr 150px;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 28px;
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(20px);
}

.upload-icon {
  width: 48px;
  height: 48px;
  background: #eef1f6;
  border-radius: 16px;
  color: #606774;
}

.video-prompt input {
  height: 48px;
  padding: 0 14px;
  background: #f7f8fa;
  border: 1px solid var(--line);
  border-radius: 16px;
  outline: 0;
  color: #6b717b;
}

.video-prompt .primary-button {
  min-height: 48px;
  margin-top: 0;
}

.resource-layout,
.template-layout,
.lovart-canvas-layout,
.model-layout,
.history-layout,
.account-layout {
  display: grid;
  gap: 18px;
  min-height: calc(100vh - 92px);
}

.resource-layout {
  grid-template-columns: 250px minmax(0, 1fr);
}

.premium-library.resource-layout {
  grid-template-columns: 268px minmax(0, 1fr);
  align-items: start;
}

.history-layout,
.account-layout {
  grid-template-columns: 1fr 320px;
}

.template-layout {
  grid-template-columns: minmax(0, 1fr);
}

.premium-templates.template-layout {
  min-height: calc(100vh - 92px);
}

.model-layout {
  grid-template-columns: 280px minmax(0, 1fr);
}

.lovart-canvas-layout {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  min-height: calc(100vh - 92px);
}

.resource-sidebar,
.model-control,
.history-main,
.history-preview,
.account-overview,
.account-side {
  padding: 20px;
  border-radius: var(--radius-lg);
}

.premium-library .resource-sidebar {
  position: sticky;
  top: 118px;
  overflow: hidden;
  min-height: calc(100vh - 136px);
  padding: 18px;
}

.premium-library .resource-sidebar::after {
  position: absolute;
  right: -52px;
  bottom: -48px;
  width: 148px;
  height: 148px;
  content: "";
  background:
    radial-gradient(circle, rgba(191, 154, 98, 0.16), transparent 68%),
    radial-gradient(circle at 36% 30%, rgba(71, 120, 255, 0.1), transparent 54%);
  pointer-events: none;
}

.library-profile {
  display: grid;
  gap: 7px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(31, 36, 48, 0.08);
}

.library-profile h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.16;
}

.library-profile p,
.library-hero p,
.template-hero p,
.template-feature-card p,
.template-card p {
  margin: 0;
  color: #69717d;
  font-size: 12px;
  line-height: 1.65;
}

.model-control {
  max-height: calc(100vh - 112px);
  overflow-y: auto;
  scroll-padding-bottom: 58px;
  padding-bottom: 58px;
}

.model-control textarea {
  min-height: 150px;
}

.model-control .primary-button {
  margin-top: 14px;
}

.model-control::-webkit-scrollbar {
  width: 6px;
}

.model-control::-webkit-scrollbar-thumb {
  background: rgba(31, 36, 48, 0.16);
  border-radius: 999px;
}

.resource-main,
.template-board,
.model-stage {
  min-width: 0;
}

.search-field {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 12px;
}

.search-field.wide {
  margin: 16px 0;
}

.search-field input,
.model-control select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  color: #2d333d;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid var(--line);
  border-radius: 14px;
  outline: 0;
}

.resource-tabs {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.resource-tabs button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 12px;
  text-align: left;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: #333944;
}

.resource-tabs button.selected,
.resource-tabs button:hover,
.account-tabs button.selected {
  color: #fff;
  background: #151820;
  border-color: #151820;
}

.resource-tabs small {
  color: inherit;
  opacity: 0.7;
}

.premium-library .resource-tabs button {
  min-height: 46px;
  padding: 0 13px;
  font-weight: 850;
}

.ghost-danger {
  width: 100%;
  min-height: 42px;
  margin-top: 18px;
  color: #b25050;
  background: rgba(255, 245, 245, 0.7);
  border: 1px solid rgba(178, 80, 80, 0.16);
  border-radius: 14px;
}

.ghost-danger.subtle {
  color: #8f5d5d;
  background: rgba(255, 255, 255, 0.48);
}

.library-hero,
.template-hero {
  padding: 15px 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.56)),
    linear-gradient(135deg, rgba(191, 154, 98, 0.09), rgba(71, 120, 255, 0.07));
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 24px;
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(20px);
}

.library-hero > div:first-child,
.template-hero > div:first-child {
  display: grid;
  gap: 6px;
}

.library-hero h2,
.template-hero h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 23px;
  line-height: 1.15;
}

.library-hero .toolbar-actions,
.template-hero .filter-bar {
  max-width: 540px;
}

.filter-bar button.selected {
  color: #fff;
  background: #111317;
  border-color: #111317;
}

.asset-library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.asset-library-grid article,
.template-card,
.model-gallery article {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 20px;
  box-shadow: var(--soft-shadow);
}

.asset-library-grid article {
  display: grid;
  grid-template-rows: 180px auto auto;
  gap: 10px;
  padding: 10px;
}

.asset-library-grid.premium {
  gap: 16px;
}

.asset-library-grid.premium article {
  grid-template-rows: 168px auto auto 36px;
  padding: 11px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)),
    rgba(255, 255, 255, 0.76);
  border-color: rgba(255, 255, 255, 0.96);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.asset-library-grid.premium article.library-empty-state {
  grid-column: 1 / -1;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
  min-height: 150px;
}

.asset-library-grid img,
.template-card img,
.model-gallery img,
.history-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.asset-library-grid img {
  border-radius: 15px;
}

.asset-library-grid.premium img {
  aspect-ratio: 16 / 9;
  box-shadow: inset 0 0 0 1px rgba(31, 36, 48, 0.04);
}

.asset-empty-thumb {
  display: grid;
  place-items: center;
  min-height: 168px;
  color: #8a919c;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(244, 241, 235, 0.68)),
    repeating-linear-gradient(135deg, rgba(31, 36, 48, 0.05) 0 1px, transparent 1px 12px);
  border: 1px dashed rgba(31, 36, 48, 0.14);
  border-radius: 15px;
  font-size: 12px;
  font-weight: 850;
}

.asset-library-grid div {
  display: grid;
  gap: 4px;
}

.asset-meta {
  min-width: 0;
}

.asset-meta strong,
.template-card strong,
.template-feature-card strong {
  overflow: hidden;
  color: #101319;
  font-family: var(--font-display);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.asset-library-grid .asset-tags,
.template-rule-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.asset-library-grid .asset-tags span,
.template-rule-row small {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  color: #626a76;
  background: rgba(244, 242, 238, 0.78);
  border: 1px solid rgba(31, 36, 48, 0.06);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.asset-library-grid span,
.template-card span,
.rule-stack span,
.metric-list span,
.history-table span,
.history-table small,
.account-metrics span,
.account-metrics small,
.member-list span {
  color: var(--muted);
  font-size: 12px;
}

.asset-library-grid button,
.template-card button,
.template-feature-card button,
.asset-actions button,
.history-table button,
.member-list button {
  min-height: 34px;
  padding: 0 11px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #4d5561;
  font-size: 12px;
}

.asset-card-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.asset-card-actions button {
  width: 100%;
  min-width: 0;
  padding: 0 8px;
}

.asset-library-grid.premium button,
.template-card button,
.template-feature-card button {
  color: #111317;
  font-weight: 850;
}

.asset-library-grid.premium article:hover,
.template-card:hover,
.template-feature-card:hover {
  border-color: rgba(31, 36, 48, 0.12);
}

.asset-library-grid article:hover,
.template-card:hover,
.model-gallery article:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.metric-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.metric-list article {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.metric-list strong {
  font-size: 22px;
}

.asset-actions {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.asset-actions button {
  min-height: 40px;
  text-align: left;
  border-radius: 14px;
}

.template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.template-gallery {
  display: grid;
  grid-template-columns: minmax(390px, 0.78fr) minmax(0, 1.22fr);
  gap: 16px;
  margin-top: 16px;
}

.template-card {
  display: grid;
  gap: 10px;
  min-height: 158px;
  padding: 16px;
}

.template-grid.premium {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 0;
}

.template-grid.premium .template-card {
  align-content: space-between;
  min-height: 170px;
  padding: 17px;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.68)),
    rgba(255, 255, 255, 0.74);
}

.template-card > span {
  color: #8b744f;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.template-card p {
  min-height: 40px;
}

.template-feature-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: 292px auto;
  min-height: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.7)),
    rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 24px;
  box-shadow: var(--soft-shadow);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

.template-feature-card img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.template-feature-card > div {
  display: grid;
  gap: 12px;
  padding: 16px 18px 18px;
}

.template-feature-card span {
  color: #8b744f;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.template-feature-card strong {
  font-size: 24px;
  white-space: normal;
}

.template-feature-card button {
  min-height: 40px;
  background: #111317;
  border-color: #111317;
  color: #fff;
}

.template-card.featured {
  grid-column: 1 / -1;
  grid-template-columns: 320px 1fr;
  min-height: 230px;
  padding: 12px;
}

.template-card.featured img {
  border-radius: 17px;
}

.template-card.featured div {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 12px;
}

.template-card p {
  max-width: 460px;
  font-size: 13px;
}

.canvas-toolrail {
  position: absolute;
  left: 8px;
  top: 50%;
  z-index: 6;
  display: grid;
  gap: 2px;
  width: 46px;
  padding: 8px 6px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(31, 36, 48, 0.12);
  backdrop-filter: blur(18px);
  transform: translateY(-50%);
}

.canvas-toolrail button {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #4d5561;
  background: transparent;
  border-radius: 10px;
  font-size: 15px;
}

.canvas-toolrail button.selected,
.canvas-toolrail button:hover {
  color: var(--blue);
  background: rgba(71, 120, 255, 0.1);
}

.canvas-text-style-popover {
  position: absolute;
  left: 72px;
  top: 54%;
  z-index: 6;
  display: none;
  grid-auto-flow: column;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(31, 36, 48, 0.12);
  backdrop-filter: blur(18px);
  transform: translateY(-50%);
}

.canvas-text-style-popover.is-visible {
  display: grid;
}

.canvas-text-style-popover select,
.canvas-text-style-popover input[type="number"] {
  height: 34px;
  padding: 0 10px;
  color: #303746;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(35, 42, 54, 0.1);
  border-radius: 10px;
  font-size: 12px;
}

.canvas-text-size-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.canvas-text-size-control button,
.text-bold-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #303746;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(35, 42, 54, 0.1);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
}

.text-bold-toggle.selected {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

.canvas-text-colors {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.canvas-text-colors button,
.canvas-text-colors input[type="color"] {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(35, 42, 54, 0.12);
  border-radius: 999px;
}

.canvas-text-colors button {
  background: var(--swatch);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.88);
}

.canvas-text-colors input[type="color"] {
  overflow: hidden;
  background: transparent;
}

.canvas-board {
  position: relative;
  display: grid;
  min-height: calc(100vh - 92px);
  overflow: hidden;
  padding: 0;
}

.canvas-surface {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - 92px);
  margin-top: 0;
  background:
    linear-gradient(rgba(70, 76, 88, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 76, 88, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 54% 42%, rgba(71, 120, 255, 0.075), transparent 26%),
    linear-gradient(145deg, #faf9f6, #eeeae2);
  background-size: 42px 42px, 42px 42px, auto, auto;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 28px;
  box-shadow: inset 0 0 0 1px rgba(28, 32, 39, 0.03);
  cursor: grab;
  touch-action: none;
}

.canvas-surface.is-panning {
  cursor: grabbing;
}

.canvas-surface:has(.canvas-draft-frame) {
  cursor: crosshair;
}

.canvas-surface.is-dropping {
  box-shadow:
    inset 0 0 0 1px rgba(71, 120, 255, 0.14),
    0 0 0 1px rgba(71, 120, 255, 0.08);
}

.canvas-surface.canvas-preview-mode {
  background:
    linear-gradient(rgba(70, 76, 88, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70, 76, 88, 0.025) 1px, transparent 1px),
    linear-gradient(145deg, #fbfbf9, #f1eee7);
}

.canvas-surface.generating .infinite-plane {
  filter: saturate(1.06) brightness(1.02);
}

.canvas-surface.generating::after {
  z-index: 8;
  pointer-events: none;
}

.infinite-plane {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7200px;
  height: 4800px;
  transform: translate(-50%, -49%);
  transform-origin: center;
  transition: filter 0.2s ease;
  pointer-events: auto;
}

.canvas-selection-toolbar {
  position: absolute;
  left: 50%;
  top: 108px;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: rgba(22, 25, 32, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 20px 48px rgba(31, 36, 48, 0.18);
  backdrop-filter: blur(16px);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(6px) scale(0.98);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.canvas-selection-toolbar.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}

.canvas-selection-toolbar button {
  min-height: 34px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.92);
  background: transparent;
  border-radius: 10px;
  font-size: 12px;
  white-space: nowrap;
}

.canvas-selection-toolbar button:hover,
.canvas-selection-toolbar button.active {
  background: rgba(255, 255, 255, 0.12);
}

.canvas-selection-toolbar .icon-only {
  width: 34px;
  padding: 0;
  font-size: 18px;
}

.canvas-object {
  position: absolute;
  overflow: visible;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: 0 24px 54px rgba(31, 36, 48, 0.14);
  cursor: pointer;
  user-select: none;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}

.canvas-object img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.object-product {
  left: 510px;
  top: 194px;
  width: 204px;
  height: 306px;
}

.object-pack {
  left: 748px;
  top: 240px;
  width: 156px;
  height: 118px;
  border-radius: 18px;
  transform: rotate(3deg);
}

.object-scene {
  left: 304px;
  top: 392px;
  width: 168px;
  height: 128px;
  border-radius: 18px;
  transform: rotate(-4deg);
}

.object-copy {
  left: 760px;
  top: 410px;
  display: grid;
  align-content: center;
  gap: 6px;
  width: 236px;
  height: 102px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 18px;
  color: #1f2530;
  box-shadow: 0 18px 36px rgba(31, 36, 48, 0.11);
}

.object-copy small {
  color: #7a808b;
}

.ghost-object {
  opacity: 0.34;
}

.canvas-object.selected {
  outline: 2px solid rgba(50, 191, 210, 0.95);
  outline-offset: 0;
  box-shadow: 0 26px 60px rgba(31, 36, 48, 0.16);
}

.canvas-object:hover {
  box-shadow: 0 30px 66px rgba(31, 36, 48, 0.2);
}

.canvas-object.dragging {
  z-index: 10;
  transition: none;
  box-shadow: 0 30px 72px rgba(31, 36, 48, 0.24);
}

.canvas-object.erased {
  opacity: 0.18;
  filter: grayscale(1) contrast(0.92);
}

.canvas-object.cutout-done {
  box-shadow:
    0 24px 54px rgba(31, 36, 48, 0.14),
    inset 0 0 0 1px rgba(71, 120, 255, 0.3);
}

.canvas-object.upscaled {
  box-shadow:
    0 30px 66px rgba(31, 36, 48, 0.2),
    0 0 0 1px rgba(255, 196, 72, 0.32);
}

.canvas-object.canvas-draft-frame {
  background: rgba(255, 255, 255, 0.52);
  border-color: rgba(50, 191, 210, 0.72);
  box-shadow:
    0 18px 44px rgba(31, 36, 48, 0.08),
    inset 0 0 0 1px rgba(50, 191, 210, 0.22);
}

.canvas-object.canvas-draft-frame .handle,
.canvas-object.canvas-draft-frame .rotate-handle {
  opacity: 0;
  pointer-events: none;
}

.canvas-object.canvas-processing,
.canvas-object.canvas-submitted {
  box-shadow:
    0 26px 64px rgba(31, 36, 48, 0.18),
    0 0 0 2px rgba(50, 191, 210, 0.32);
}

.canvas-object.canvas-processing::after {
  content: "";
  position: absolute;
  inset: -3px;
  pointer-events: none;
  border: 1px solid rgba(50, 191, 210, 0.58);
  border-radius: inherit;
  animation: canvasPulseRing 1.2s ease-in-out infinite;
}

.canvas-object.canvas-task-failed {
  box-shadow:
    0 24px 54px rgba(31, 36, 48, 0.12),
    0 0 0 2px rgba(255, 92, 92, 0.36);
}

.canvas-generated {
  box-shadow:
    0 30px 66px rgba(31, 36, 48, 0.18),
    0 0 0 1px rgba(50, 191, 210, 0.28);
}

.canvas-layer-split-object {
  background:
    linear-gradient(45deg, rgba(31, 36, 48, 0.055) 25%, transparent 25% 75%, rgba(31, 36, 48, 0.055) 75%),
    linear-gradient(45deg, rgba(31, 36, 48, 0.055) 25%, transparent 25% 75%, rgba(31, 36, 48, 0.055) 75%),
    rgba(255, 255, 255, 0.34);
  background-position: 0 0, 8px 8px, 0 0;
  background-size: 16px 16px, 16px 16px, auto;
  box-shadow:
    0 22px 48px rgba(31, 36, 48, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.62),
    0 0 0 2px rgba(50, 191, 210, 0.18);
}

.canvas-layer-split-object img {
  object-fit: contain;
}

.canvas-layer-split-object .object-label {
  background: rgba(17, 20, 26, 0.7);
}

.canvas-task-chip {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  max-width: min(320px, calc(100% - 16px));
  min-height: 24px;
  padding: 6px 9px;
  color: #fff;
  background: rgba(17, 20, 26, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(31, 36, 48, 0.18);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
  backdrop-filter: blur(14px);
}

.canvas-task-anchor {
  background: rgba(255, 255, 255, 0.58);
  border: 1px dashed rgba(50, 191, 210, 0.58);
  box-shadow:
    0 18px 44px rgba(31, 36, 48, 0.08),
    0 0 0 2px rgba(50, 191, 210, 0.12);
}

.canvas-task-anchor .canvas-frame-label {
  background: rgba(255, 255, 255, 0.92);
}

.canvas-object.canvas-task-failed .canvas-task-chip {
  color: #ffecec;
  background: rgba(68, 22, 25, 0.88);
  border-color: rgba(255, 112, 112, 0.42);
}

@keyframes canvasPulseRing {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }

  70% {
    opacity: 0;
    transform: scale(1.045);
  }

  100% {
    opacity: 0;
    transform: scale(1.045);
  }
}

.canvas-object .handle,
.canvas-object .rotate-handle,
.canvas-object .canvas-layer-meta {
  opacity: 0;
  pointer-events: none;
}

.canvas-object.selected .handle,
.canvas-object.selected .rotate-handle,
.canvas-object.selected .canvas-layer-meta,
.canvas-object.dragging .handle,
.canvas-object.dragging .rotate-handle,
.canvas-object.dragging .canvas-layer-meta {
  opacity: 1;
  pointer-events: auto;
}

.canvas-layer-meta {
  position: absolute;
  right: 0;
  top: -34px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  max-width: 260px;
  min-height: 24px;
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(17, 20, 26, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(31, 36, 48, 0.18);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  white-space: nowrap;
  transform: translateY(2px);
  backdrop-filter: blur(14px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.canvas-object.selected .canvas-layer-meta,
.canvas-object.dragging .canvas-layer-meta {
  transform: translateY(0);
}

.canvas-frame {
  background:
    linear-gradient(135deg, rgba(71, 120, 255, 0.08), rgba(39, 198, 218, 0.06)),
    rgba(255, 255, 255, 0.72);
  border: 1px dashed rgba(71, 120, 255, 0.42);
  border-radius: 20px;
}

.canvas-frame-label {
  position: absolute;
  left: 14px;
  top: 14px;
  z-index: 1;
  padding: 4px 9px;
  color: #516070;
  background: rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

.canvas-text {
  display: grid;
  align-content: center;
  padding: 18px 20px;
  background: transparent;
  color: #111827;
  border-radius: 20px;
}

.canvas-text-content {
  min-height: 56px;
  line-height: 1.5;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
  outline: none;
  color: inherit;
}

.canvas-text.editing-text {
  box-shadow:
    0 24px 54px rgba(31, 36, 48, 0.18),
    0 0 0 2px rgba(255, 196, 72, 0.34);
}

.canvas-text.editing-text .canvas-text-content {
  background: rgba(255, 255, 255, 0.72);
  border-radius: 12px;
}

.object-label {
  position: absolute;
  left: 0;
  top: -26px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #313946;
  font-size: 12px;
  font-weight: 800;
}

.object-label::before {
  content: "▧";
  color: #6f7b8e;
  font-size: 12px;
}

.handle {
  position: absolute;
  z-index: 2;
  width: 8px;
  height: 8px;
  background: #fff;
  border: 1px solid rgba(71, 120, 255, 0.45);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(31, 36, 48, 0.16);
}

.handle-nw {
  left: -5px;
  top: -5px;
}

.handle-ne {
  right: -5px;
  top: -5px;
}

.handle-sw {
  left: -5px;
  bottom: -5px;
}

.handle-se {
  right: -5px;
  bottom: -5px;
}

.handle-n,
.handle-s {
  left: 50%;
  width: 16px;
  height: 7px;
  border-radius: 999px;
  transform: translateX(-50%);
}

.handle-n {
  top: -5px;
}

.handle-s {
  bottom: -5px;
}

.handle-e,
.handle-w {
  top: 50%;
  width: 7px;
  height: 16px;
  border-radius: 999px;
  transform: translateY(-50%);
}

.handle-e {
  right: -5px;
}

.handle-w {
  left: -5px;
}

.rotate-handle {
  position: absolute;
  left: 50%;
  bottom: -43px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #465063;
  background: #fff;
  border: 1px solid rgba(35, 42, 54, 0.14);
  border-radius: 50%;
  box-shadow: 0 10px 22px rgba(31, 36, 48, 0.15);
  font-style: normal;
  transform: translateX(-50%);
}

.canvas-hidden-file {
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.canvas-zoom-control {
  position: absolute;
  left: 16px;
  bottom: 18px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #2f3642;
  font-size: 12px;
}

.canvas-zoom-control button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #4e5664;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(35, 42, 54, 0.1);
  border-radius: 50%;
}

.canvas-zoom-control strong {
  font-size: 12px;
}

.canvas-floating-prompt {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 6;
  display: grid;
  grid-template-columns: 42px minmax(360px, 1fr) 34px;
  gap: 8px;
  width: min(520px, calc(100% - 160px));
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(31, 36, 48, 0.16);
  backdrop-filter: blur(20px);
  transform: translateX(-50%);
}

.canvas-floating-prompt input {
  min-height: 42px;
  padding: 0 6px;
  color: #5c6470;
  background: transparent;
  border: 0;
  outline: 0;
}

.prompt-add,
.prompt-submit {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  align-self: center;
  border-radius: 12px;
}

.prompt-add {
  color: #5d6572;
  background: rgba(236, 238, 242, 0.9);
}

.prompt-submit {
  color: #fff;
  background: #151820;
  border-radius: 50%;
}

.canvas-context-menu {
  position: fixed;
  left: 64%;
  top: 36%;
  z-index: 80;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  width: 360px;
  max-height: min(72vh, 560px);
  overflow: auto;
  padding: 10px;
  color: rgba(255, 255, 255, 0.92);
  background:
    linear-gradient(180deg, rgba(31, 35, 44, 0.96), rgba(16, 19, 26, 0.94)),
    rgba(22, 25, 32, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  box-shadow:
    0 30px 80px rgba(16, 19, 26, 0.34),
    0 0 0 1px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  pointer-events: none;
  backdrop-filter: blur(26px) saturate(1.06);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.canvas-context-menu::-webkit-scrollbar {
  width: 5px;
}

.canvas-context-menu::-webkit-scrollbar-track {
  background: transparent;
}

.canvas-context-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}

.canvas-context-menu::before {
  content: "画布操作";
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 0 4px 2px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 11px;
  font-weight: 800;
}

.canvas-context-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.canvas-context-menu button {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 10px 0 8px;
  text-align: left;
  color: rgba(255, 255, 255, 0.9);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.canvas-context-menu button::before {
  content: "⌁";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 900;
}

.canvas-context-menu button[data-canvas-command="local-regenerate"]::before { content: "局"; }
.canvas-context-menu button[data-canvas-command="erase"]::before { content: "擦"; }
.canvas-context-menu button[data-canvas-command="edit"]::before { content: "调"; }
.canvas-context-menu button[data-canvas-command="video"]::before { content: "▶"; }
.canvas-context-menu button[data-canvas-command="material"]::before { content: "商"; }
.canvas-context-menu button[data-canvas-command="retouch"]::before { content: "修"; }
.canvas-context-menu button[data-canvas-command="regenerate"]::before { content: "↻"; }
.canvas-context-menu button[data-canvas-command="layer-split"]::before { content: "层"; }
.canvas-context-menu button[data-canvas-command="expand"]::before { content: "扩"; }
.canvas-context-menu button[data-canvas-command="cutout"]::before { content: "抠"; }
.canvas-context-menu button[data-canvas-command="edit-text"]::before { content: "改"; }
.canvas-context-menu button[data-canvas-command="save-asset"]::before { content: "存"; }
.canvas-context-menu button[data-canvas-command="save-template"]::before { content: "板"; }
.canvas-context-menu button[data-canvas-command="export-json"]::before { content: "{}"; }
.canvas-context-menu button[data-canvas-command="export-psd"]::before { content: "PS"; }
.canvas-context-menu button[data-canvas-command="duplicate"]::before { content: "副"; }
.canvas-context-menu button[data-canvas-command="delete"]::before { content: "删"; }

.canvas-context-menu button:hover,
.canvas-context-menu button:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

.canvas-context-menu button:hover::before,
.canvas-context-menu button:focus-visible::before {
  color: #151820;
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.72);
}

.canvas-context-menu button:active {
  transform: translateY(0) scale(0.985);
}

.canvas-context-menu button[data-canvas-command="delete"] {
  color: #ff8b8b;
}

.canvas-context-menu button[data-canvas-command="delete"]::before {
  color: #ff9b9b;
  background: rgba(217, 77, 77, 0.14);
}

.canvas-context-menu button[data-canvas-command="delete"]:hover,
.canvas-context-menu button[data-canvas-command="delete"]:focus-visible {
  color: #fff;
  background: #d94d4d;
  border-color: rgba(217, 77, 77, 0.22);
}

.canvas-menu-divider {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 1px;
  margin: 3px 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.11), transparent);
}

.rule-stack {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.rule-stack span {
  display: block;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: #555d69;
}

.upload-zone.compact {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  gap: 6px;
  width: 100%;
  min-height: 120px;
  margin-top: 14px;
  padding: 0 18px;
  text-align: center;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  background:
    linear-gradient(145deg, rgba(237, 243, 255, 0.72), rgba(255, 255, 255, 0.7));
  border: 1px dashed rgba(71, 120, 255, 0.34);
  border-radius: 20px;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  isolation: isolate;
}

.upload-zone.compact:hover,
.upload-zone.compact:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(71, 120, 255, 0.58);
  box-shadow: 0 16px 34px rgba(71, 120, 255, 0.16);
}

.upload-zone.compact:active {
  transform: scale(0.99);
}

.upload-zone.compact.uploaded {
  background:
    linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)),
    var(--upload-preview, #fff);
  background-size: cover;
  background-position: center;
  border-style: solid;
  border-color: rgba(71, 120, 255, 0.42);
  box-shadow: 0 16px 34px rgba(71, 120, 255, 0.14);
}

.upload-zone.compact span,
.upload-zone.compact strong,
.upload-zone.compact small {
  position: relative;
  z-index: 1;
  max-width: calc(100% - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload-zone.compact span {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--blue);
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--soft-shadow);
}

.upload-zone.compact small {
  color: var(--muted);
}

.upload-zone.compact.uploaded small {
  max-width: 78%;
  color: #48515d;
}

.upload-mini.three-col {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 12px;
}

.model-reference-state {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.model-reference-state span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 9px;
  color: #6f7784;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
}

.model-reference-state span.ready {
  color: #111317;
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(71, 120, 255, 0.28);
  box-shadow: 0 10px 20px rgba(71, 120, 255, 0.1);
}

.page-model [data-upload].attention {
  border-color: rgba(224, 88, 88, 0.48);
  box-shadow: 0 0 0 4px rgba(224, 88, 88, 0.09), var(--soft-shadow);
  animation: uploadAttention 0.9s ease both;
}

@keyframes uploadAttention {
  0%,
  100% {
    transform: translateY(0);
  }

  35% {
    transform: translateY(-2px);
  }
}

.model-route-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 42px;
  margin-top: 12px;
  padding: 0 14px;
  color: #5f6875;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(31, 36, 48, 0.06);
}

.model-route-status span {
  flex: 0 0 auto;
  color: #111317;
  font-size: 12px;
  font-weight: 950;
}

.model-route-status strong {
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 850;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-route-status.active {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.68)),
    linear-gradient(135deg, rgba(71, 120, 255, 0.1), rgba(42, 197, 126, 0.08));
  border-color: rgba(71, 120, 255, 0.24);
}

.model-gallery {
  display: grid;
  grid-template-columns: minmax(330px, 1.1fr) repeat(2, minmax(120px, 0.55fr));
  grid-auto-rows: 190px;
  gap: 14px;
  margin-top: 18px;
}

.model-gallery.result-pool {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: auto;
  align-content: start;
  align-items: start;
  max-height: calc(100vh - 214px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 4px 12px 2px;
  scroll-padding: 12px;
}

.model-gallery.result-pool::-webkit-scrollbar {
  width: 6px;
}

.model-gallery.result-pool::-webkit-scrollbar-thumb {
  background: rgba(24, 28, 38, 0.16);
  border-radius: 999px;
}

.model-result-notice {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  color: #5b6270;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  border-radius: 16px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: var(--soft-shadow);
}

.model-gallery.result-pool .model-result-notice {
  grid-column: 1 / -1;
}

.model-gallery article.large {
  grid-row: span 2;
}

.model-gallery.result-pool article,
.model-gallery.result-pool article.large {
  display: grid;
  grid-row: auto;
  min-height: 0;
  aspect-ratio: var(--model-result-ratio, 3 / 4);
  animation: creativeCardIn 0.32s ease both;
}

.model-gallery.result-pool article.large {
  grid-column: span 2;
}

.model-gallery.result-pool article.large:last-child {
  grid-column: span 2;
}

.model-gallery.result-pool img {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 241, 236, 0.84));
  object-fit: contain;
}

.model-gallery.result-pool .model-result-card,
.model-gallery.result-pool .model-placeholder {
  padding: 0;
}

.model-gallery.result-pool .model-result-card img,
.model-gallery.result-pool .model-placeholder {
  width: 100%;
  height: 100%;
}

.model-gallery.result-pool .model-result-card img {
  object-fit: contain;
}

.model-gallery.result-pool .model-result-card.large {
  grid-column: span 2;
}

.model-gallery.result-pool .model-result-card.large img {
  object-fit: contain;
}

.model-gallery.result-pool .model-result-card span {
  bottom: 10px;
  left: 10px;
}

.model-gallery.result-pool .model-result-card strong {
  top: 10px;
  left: 10px;
}

.model-save-asset {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  min-height: 30px;
  padding: 0 11px;
  color: #fff;
  background: #111317;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  box-shadow: 0 14px 28px rgba(16, 18, 24, 0.18);
  opacity: 0;
  transform: translateY(5px);
  transition: 0.18s ease;
}

.model-result-card:hover .model-save-asset,
.model-result-card:focus-within .model-save-asset,
.model-result-card.selected-card .model-save-asset {
  opacity: 1;
  transform: translateY(0);
}

.model-save-asset:hover {
  background: #2f2418;
}

.model-save-asset:active {
  transform: scale(0.96);
}

.model-result-card span,
.model-result-card strong {
  position: absolute;
  left: 12px;
  z-index: 2;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-result-card span {
  bottom: 12px;
  padding: 6px 9px;
  color: #fff;
  background: rgba(17, 19, 23, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  backdrop-filter: blur(10px);
}

.model-result-card strong {
  top: 12px;
  color: rgba(17, 19, 23, 0.74);
  font-size: 11px;
  font-weight: 900;
}

.model-placeholder {
  isolation: isolate;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.98), transparent 32%),
    linear-gradient(145deg, rgba(248, 249, 251, 0.96), rgba(230, 235, 244, 0.72));
  border: 1px solid rgba(255, 255, 255, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(23, 28, 38, 0.05),
    0 14px 34px rgba(38, 45, 58, 0.08);
}

.model-placeholder::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(20, 24, 32, 0.16);
  border-radius: inherit;
}

.page-model .model-gallery:not(.result-pool) .model-result-card img {
  object-fit: cover;
}

.page-model .model-gallery:not(.result-pool) .model-result-card.large {
  grid-column: span 1;
}

@media (max-width: 980px) {
  .model-gallery.result-pool article.large {
    grid-column: auto;
  }
}

.history-main {
  overflow: hidden;
}

.history-table {
  display: grid;
  gap: 10px;
}

.history-table article {
  display: grid;
  grid-template-columns: 110px 1fr 180px 220px;
  gap: 14px;
  align-items: center;
  min-height: 64px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}

.history-table article:not(.history-empty-state) {
  cursor: pointer;
}

.history-table article:not(.history-empty-state):hover,
.history-table article.selected-card {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(17, 19, 23, 0.2);
  box-shadow: 0 16px 34px rgba(32, 38, 48, 0.08);
}

.history-table article.history-empty-state {
  grid-template-columns: 110px 1fr 220px;
}

.history-table button:disabled,
.history-preview button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.history-table div {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
}

.history-preview-media {
  display: grid;
  place-items: center;
  height: 220px;
  margin-top: 16px;
  overflow: hidden;
  color: #7a828d;
  font-size: 13px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(242, 238, 229, 0.52)),
    repeating-linear-gradient(45deg, rgba(31, 36, 48, 0.05) 0 1px, transparent 1px 12px);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 18px;
}

.history-preview-media img,
.history-preview-media video {
  width: 100%;
  height: 220px;
  object-fit: contain;
  background: #111317;
}

.history-preview-media span {
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.account-overview,
.team-main {
  display: grid;
  gap: 18px;
}

.account-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.account-hero p {
  margin-top: 8px;
  font-size: 13px;
}

.account-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.account-metrics article {
  display: grid;
  gap: 5px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.account-metrics strong {
  font-size: 26px;
  letter-spacing: 0;
}

.account-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.account-tabs button {
  min-height: 34px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.member-list {
  display: grid;
  gap: 10px;
}

.member-list article {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.compact-list article {
  grid-template-columns: 1fr auto;
}

.usage-dashboard,
.team-section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.usage-dashboard section,
.team-card,
.personal-card,
.team-mini-block,
.team-log {
  padding: 14px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.mini-panel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.mini-panel-head span,
.ledger-list span,
.ledger-list small,
.order-strip span,
.order-strip small,
.team-feed span,
.ranking-list em,
.org-tree span,
.subaccount-list span,
.team-log span,
.side-stat-grid span,
.team-chip-row span,
.personal-card span,
.personal-card em {
  color: var(--muted);
  font-size: 12px;
}

.usage-bars {
  display: grid;
  gap: 11px;
}

.usage-bars article {
  display: grid;
  grid-template-columns: 86px 1fr 62px;
  gap: 10px;
  align-items: center;
}

.usage-bars i {
  display: block;
  height: 9px;
  background: linear-gradient(90deg, var(--blue), var(--gold));
  border-radius: 999px;
}

.usage-bars b {
  text-align: right;
  font-size: 12px;
}

.trend-bars {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: end;
  gap: 8px;
  height: 130px;
  padding: 10px;
  background: rgba(31, 36, 48, 0.04);
  border-radius: 14px;
}

.trend-bars i,
.month-trend i {
  display: block;
  min-height: 18px;
  background: linear-gradient(180deg, rgba(71, 120, 255, 0.86), rgba(191, 154, 98, 0.78));
  border-radius: 999px 999px 6px 6px;
}

.ledger-list,
.order-strip,
.team-feed,
.ranking-list,
.org-tree,
.subaccount-list,
.team-log {
  display: grid;
  gap: 10px;
}

.ledger-list article {
  display: grid;
  grid-template-columns: 95px 1fr 110px 90px;
  gap: 12px;
  align-items: center;
  min-height: 52px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
  border-radius: 15px;
}

.ledger-list em {
  font-style: normal;
  font-weight: 800;
  text-align: right;
}

.ledger-list em.positive {
  color: #247a4a;
}

.ledger-list em.negative {
  color: #a4493f;
}

.order-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.order-strip article,
.team-feed article,
.ranking-list article,
.org-tree article,
.subaccount-list article,
.team-log article {
  display: grid;
  gap: 5px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
  border-radius: 15px;
}

.order-strip button,
.team-actions button,
.subaccount-list button {
  min-height: 34px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 12px;
}

.security-panel {
  margin-top: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.security-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.task-advanced-drawer {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.task-advanced-drawer summary {
  cursor: pointer;
  color: #3d4450;
  font-size: 12px;
  font-weight: 900;
}

.task-advanced-drawer .team-chip-row {
  margin-top: 10px;
}

.security-grid article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
  min-width: 0;
  padding: 11px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.security-grid span {
  color: var(--muted);
  font-size: 12px;
}

.security-grid strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.security-grid button,
.plain-export {
  min-height: 30px;
  padding: 0 10px;
  color: #47505c;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.security-grid .danger-mini {
  color: #b25050;
}

.personal-card {
  display: grid;
  gap: 6px;
  margin-top: 16px;
}

.personal-card strong {
  font-size: 22px;
  letter-spacing: 0;
}

.side-stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.side-stat-grid article {
  display: grid;
  gap: 5px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
  border-radius: 15px;
}

.team-layout {
  display: grid;
  grid-template-columns: minmax(760px, 1fr) 340px;
  gap: 20px;
  min-height: calc(100vh - 88px);
}

.team-actions {
  display: flex;
  gap: 10px;
}

.team-actions button:last-child {
  color: #fff;
  background: #16181d;
}

.month-trend {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  align-items: end;
  gap: 10px;
  min-height: 164px;
  padding: 10px;
  background: rgba(31, 36, 48, 0.04);
  border-radius: 14px;
}

.month-trend article {
  display: grid;
  align-items: end;
  gap: 8px;
  height: 144px;
  text-align: center;
}

.month-trend span {
  color: var(--muted);
  font-size: 11px;
}

.ranking-list article {
  grid-template-columns: 34px 1fr auto;
  align-items: center;
}

.ranking-list b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #6a512d;
  background: rgba(245, 234, 215, 0.86);
  border-radius: 11px;
}

.team-side {
  display: grid;
  gap: 14px;
  align-content: start;
}

.team-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.team-chip-row span {
  padding: 6px 9px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.subaccount-list article {
  grid-template-columns: 1fr auto auto;
  align-items: center;
}

.subaccount-list span {
  grid-column: 1;
}

.subaccount-list button {
  grid-row: auto;
  grid-column: auto;
  border-radius: 999px;
}

.team-log .plain-export {
  justify-self: start;
}

.toast {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 20;
  min-width: 220px;
  max-width: 340px;
  padding: 14px 16px;
  color: #111317;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  pointer-events: none;
  backdrop-filter: blur(20px);
}

.ai-wait-layer.open ~ .toast,
.ai-wait-layer.done ~ .toast {
  bottom: 190px;
}

.assistant-drawer {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 30;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  width: 410px;
  height: calc(100vh - 36px);
  padding: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(248, 247, 244, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 28px;
  box-shadow: 0 34px 90px rgba(31, 36, 48, 0.22);
  backdrop-filter: blur(26px);
  transform: translateX(calc(100% + 32px));
  opacity: 0;
  pointer-events: none;
  transition: 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  font-family: var(--font-ui);
}

.assistant-drawer.open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.assistant-drawer {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  width: 440px;
  padding: 0;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 247, 244, 0.9)),
    rgba(255, 255, 255, 0.92);
  border-radius: 26px;
}

.assistant-drawer .chat-drawer-head {
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(31, 36, 48, 0.08);
}

.assistant-drawer .drawer-thread {
  gap: 0;
  padding: 0;
}

.assistant-drawer .chat-session-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  margin: 10px 14px 0;
  padding: 7px;
  background: rgba(31, 36, 48, 0.035);
  border: 1px solid rgba(31, 36, 48, 0.07);
  border-radius: 999px;
  box-shadow: none;
}

.assistant-drawer .chat-session-toolbar {
  display: flex;
  order: 2;
  min-width: 0;
}

.assistant-drawer .chat-session-toolbar > span {
  display: none;
}

.assistant-drawer .chat-session-toolbar div {
  justify-self: end;
  gap: 4px;
}

.assistant-drawer .chat-session-toolbar button {
  min-width: 28px;
  min-height: 28px;
  padding: 0 9px;
  color: #4c535e;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 36, 48, 0.08);
  box-shadow: none;
}

.assistant-drawer .chat-session-list {
  order: 1;
  display: flex;
  gap: 4px;
  overflow: hidden;
  min-width: 0;
}

.assistant-drawer .chat-session-item {
  min-height: 30px;
  max-width: 118px;
  padding: 0 10px;
  align-content: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
}

.assistant-drawer .chat-session-item small {
  display: none;
}

.assistant-drawer .chat-session-item strong {
  font-size: 11px;
}

.assistant-drawer .chat-session-item.is-active {
  color: #fff;
  background: #111317;
  box-shadow: none;
}

.assistant-drawer .chat-session-item:nth-child(n + 3) {
  display: none;
}

.assistant-drawer .chat-message-list {
  gap: 14px;
  padding: 22px 18px 18px;
}

.assistant-drawer .drawer-message {
  gap: 7px;
  max-width: 86%;
  padding: 0;
  border-radius: 0;
  font-size: 13px;
  font-weight: 680;
  line-height: 1.7;
}

.assistant-drawer .drawer-message.ai {
  width: auto;
  max-width: 92%;
  color: #1d222b;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.assistant-drawer .drawer-message.user {
  max-width: 84%;
  padding: 11px 13px;
  border-radius: 18px 18px 5px 18px;
  box-shadow: 0 14px 30px rgba(17, 19, 23, 0.16);
}

.assistant-drawer .drawer-message.ai .chat-message-body {
  padding: 11px 13px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 36, 48, 0.07);
  border-radius: 18px 18px 18px 5px;
}

.assistant-drawer .drawer-message.user .chat-message-body {
  color: #fff;
}

.assistant-drawer .chat-message-meta {
  order: 2;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 4px;
}

.assistant-drawer .drawer-message.user .chat-message-meta {
  justify-content: flex-end;
  color: rgba(255, 255, 255, 0.78);
}

.assistant-drawer .chat-task-chip {
  color: #20252d;
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(31, 36, 48, 0.08);
  box-shadow: none;
}

.assistant-drawer .chat-attachment-tray {
  margin: 0 14px 8px;
  padding: 7px;
  border-radius: 14px;
}

.assistant-drawer .drawer-input {
  margin: 0 14px 14px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(31, 36, 48, 0.1);
  border-radius: 22px;
  box-shadow:
    0 18px 44px rgba(31, 36, 48, 0.11),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.assistant-drawer .drawer-input textarea {
  min-height: 56px;
  max-height: 130px;
  padding: 10px 11px 4px;
  background: transparent;
  border: 0;
  border-radius: 16px;
  font-size: 13px;
  font-weight: 680;
  resize: none;
}

.assistant-drawer .chat-composer-footer {
  align-items: center;
}

.assistant-drawer .chat-composer-tools {
  gap: 5px;
  flex-wrap: nowrap;
}

.assistant-drawer .drawer-input button {
  min-height: 30px;
  padding: 0 10px;
  color: #4c535e;
  background: rgba(31, 36, 48, 0.045);
  border: 1px solid rgba(31, 36, 48, 0.06);
  border-radius: 999px;
  box-shadow: none;
}

.assistant-drawer .chat-send-button {
  display: grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  color: #fff;
  background: #111317;
  border-color: #111317;
  border-radius: 50%;
  font-size: 18px;
}

.assistant-drawer .drawer-input .doc-trigger,
.assistant-drawer .drawer-input .data-trigger,
.assistant-drawer .drawer-input .upload-trigger {
  color: #4c535e;
  background: rgba(31, 36, 48, 0.045);
  border-color: rgba(31, 36, 48, 0.06);
}

.assistant-drawer button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(16, 18, 24, 0.1);
}

.quick-popover {
  position: fixed;
  top: 70px;
  right: 28px;
  z-index: 34;
  width: 330px;
  padding: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(248, 247, 244, 0.78));
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 24px;
  box-shadow: 0 28px 74px rgba(31, 36, 48, 0.18);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
  backdrop-filter: blur(24px);
  transition: 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.quick-popover::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.34), transparent 42%),
    linear-gradient(315deg, rgba(71, 120, 255, 0.06), transparent 46%);
}

.quick-popover > * {
  position: relative;
  z-index: 1;
}

.quick-popover.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.notifications-popover {
  right: 250px;
}

.settings-popover {
  right: 188px;
  width: 520px;
  max-height: min(690px, calc(100vh - 92px));
  overflow: auto;
  padding: 14px 14px 38px;
  scroll-padding-bottom: 38px;
}

.settings-popover::-webkit-scrollbar {
  width: 6px;
}

.settings-popover::-webkit-scrollbar-thumb {
  background: rgba(31, 36, 48, 0.16);
  border-radius: 999px;
}

.profile-popover {
  right: 28px;
  width: 310px;
}

.recharge-scrim {
  position: fixed;
  inset: 0;
  z-index: 43;
  background: rgba(24, 27, 32, 0.24);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(5px);
  transition: 0.2s ease;
}

.recharge-scrim.open {
  opacity: 1;
  pointer-events: auto;
}

.recharge-popover {
  top: 50%;
  right: auto;
  left: 50%;
  z-index: 44;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(920px, calc(100vw - 56px));
  max-height: min(820px, calc(100vh - 40px));
  overflow: hidden;
  padding: 18px;
  transform: translate(-50%, calc(-50% - 10px)) scale(0.98);
}

.recharge-popover.open {
  transform: translate(-50%, -50%) scale(1);
}

.recharge-scroll-area {
  min-height: 0;
  overflow: auto;
  padding: 0 2px 12px;
  scroll-padding-bottom: 18px;
}

.recharge-scroll-area::-webkit-scrollbar {
  width: 6px;
}

.recharge-scroll-area::-webkit-scrollbar-thumb {
  background: rgba(31, 36, 48, 0.16);
  border-radius: 999px;
}

.popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.popover-head > div {
  display: grid;
  gap: 4px;
}

.popover-head strong,
.profile-identity strong {
  font-size: 16px;
}

.popover-head button {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 18px;
}

.notice-list,
.setting-list,
.profile-actions {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.notice-list article,
.setting-list article {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.notice-list span,
.setting-list span,
.profile-identity span,
.profile-quota span {
  color: var(--muted);
  font-size: 12px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.settings-grid label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}

.settings-grid select,
.settings-grid input {
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: #252a32;
  outline: 0;
}

.engine-quality-grid {
  margin: 0 12px 12px;
}

.settings-input-line {
  display: grid;
  gap: 7px;
}

.settings-input-line span {
  color: var(--muted);
  font-size: 12px;
}

.settings-input-line input {
  min-height: 34px;
  padding: 0 12px;
  color: #252a32;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 13px;
  outline: 0;
}

.settings-download-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2px;
}

.settings-status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}

.settings-quick-rail {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin-top: 10px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.settings-quick-rail button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 11px;
  color: #4e5663;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.settings-quick-rail button.selected,
.settings-quick-rail button:hover {
  color: #fff;
  background: #151820;
  border-color: #151820;
}

.settings-status-grid article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.settings-status-grid span {
  color: var(--muted);
  font-size: 12px;
}

.settings-status-grid strong {
  overflow: hidden;
  color: #252a32;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-module {
  display: grid;
  gap: 9px;
  margin-top: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.settings-module.pulse-target,
.settings-advanced.pulse-target {
  border-color: rgba(71, 120, 255, 0.28);
}

.settings-module-head {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
}

.settings-module-head > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #6a512d;
  background: rgba(245, 234, 215, 0.86);
  border: 1px solid rgba(191, 154, 98, 0.26);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 900;
}

.settings-module-head div {
  display: grid;
  gap: 3px;
}

.settings-module-head strong {
  font-size: 14px;
}

.settings-module-head small {
  color: var(--muted);
  font-size: 12px;
}

.settings-advanced {
  margin-top: 8px;
  padding: 0;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.settings-advanced summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 0 13px;
  cursor: pointer;
  list-style: none;
}

.settings-advanced summary::-webkit-details-marker {
  display: none;
}

.settings-advanced summary::after {
  content: "展开";
  color: var(--muted);
  font-size: 12px;
}

.settings-advanced[open] summary {
  border-bottom: 1px solid var(--line);
}

.settings-advanced[open] summary::after {
  content: "收起";
}

.settings-advanced summary span {
  font-size: 13px;
  font-weight: 800;
}

.settings-advanced summary small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.settings-engine-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.settings-engine-stack button {
  position: relative;
  display: grid;
  gap: 5px;
  min-height: 58px;
  padding: 10px 11px;
  text-align: left;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.settings-engine-stack button.selected {
  background: rgba(245, 234, 215, 0.72);
  border-color: rgba(191, 154, 98, 0.3);
}

.settings-engine-stack span,
.settings-field-note span,
.settings-link-list b,
.settings-link-list span,
.settings-account-mini span,
.settings-account-mini em {
  color: var(--muted);
  font-size: 12px;
}

.settings-engine-stack em {
  position: absolute;
  top: 11px;
  right: 11px;
  padding: 4px 7px;
  color: #5a431f;
  background: rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.settings-field-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 12px 12px;
  padding: 10px 12px;
  background: rgba(31, 36, 48, 0.04);
  border: 1px solid var(--line);
  border-radius: 13px;
}

.settings-action-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 0 12px 12px;
}

.settings-action-row button,
.settings-danger {
  min-height: 36px;
  color: #3d4450;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--line);
  border-radius: 13px;
  font-size: 12px;
}

.settings-danger {
  margin: 0 12px 12px;
  color: #8c423a;
  background: rgba(255, 243, 239, 0.74);
  border-color: rgba(170, 76, 60, 0.18);
  font-weight: 700;
}

.setting-list article {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.setting-switch {
  position: relative;
  width: 42px;
  height: 24px;
  background: #e3e6eb;
  border-radius: 999px;
}

.setting-switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(31, 36, 48, 0.18);
  transition: 0.18s ease;
}

.setting-switch.active {
  background: var(--blue);
}

.setting-switch.active i {
  left: 21px;
}

.settings-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 10px;
}

.settings-summary div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.settings-summary span {
  color: var(--muted);
  font-size: 11px;
}

.settings-summary strong {
  overflow: hidden;
  color: #252a32;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-link-list {
  display: grid;
  overflow: hidden;
  margin: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.settings-link-list button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  padding: 0 12px;
  text-align: left;
  background: rgba(255, 255, 255, 0.58);
  border-bottom: 1px solid var(--line);
}

.settings-link-list button:last-child {
  border-bottom: 0;
}

.settings-link-list b {
  white-space: nowrap;
}

.settings-account-mini {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0 10px 10px;
}

.settings-account-mini div {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.settings-account-mini strong {
  overflow: hidden;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-account-mini em {
  font-style: normal;
}

.recharge-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 14px;
  padding: 5px;
  background: rgba(31, 36, 48, 0.05);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.recharge-tabs button {
  min-height: 36px;
  color: #626975;
  background: transparent;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
}

.recharge-tabs button.selected {
  color: #fff;
  background: #1d2230;
  box-shadow: 0 12px 24px rgba(31, 36, 48, 0.16);
}

.recharge-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.recharge-summary article {
  display: grid;
  gap: 4px;
  min-height: 74px;
  padding: 11px 12px;
  background: rgba(255, 255, 255, 0.64);
  border: 1px solid var(--line);
  border-radius: 15px;
}

.recharge-summary span,
.recharge-summary small,
.recharge-section-head span,
.membership-grid em,
.credit-grid em,
.payment-grid em,
.recharge-note span {
  color: var(--muted);
  font-size: 12px;
}

.recharge-summary strong {
  font-size: 16px;
  letter-spacing: 0;
}

.recharge-summary small {
  line-height: 1.45;
}

.recharge-pane {
  display: none;
  display: grid;
  gap: 9px;
  margin-top: 12px;
}

.recharge-pane:not(.active) {
  display: none;
}

.recharge-pane.active {
  display: grid;
  animation: pageIn 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.membership-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 116px;
  padding: 17px 18px;
  background:
    linear-gradient(135deg, rgba(29, 34, 48, 0.94), rgba(55, 71, 124, 0.92)),
    #1d2230;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow: 0 18px 40px rgba(31, 36, 48, 0.18);
}

.membership-hero span {
  color: rgba(245, 234, 215, 0.9);
  font-size: 12px;
  font-weight: 900;
}

.membership-hero strong {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-size: 21px;
  line-height: 1.25;
}

.membership-hero p {
  max-width: 620px;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  line-height: 1.65;
}

.membership-hero-perks {
  display: grid;
  gap: 7px;
  min-width: 160px;
}

.membership-hero-perks span {
  display: block;
  padding: 7px 10px;
  color: #2d2415;
  background: rgba(245, 234, 215, 0.92);
  border-radius: 999px;
  font-size: 11px;
  text-align: center;
  white-space: nowrap;
}

.recharge-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.recharge-section-head strong {
  font-size: 15px;
}

.membership-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.membership-grid button,
.credit-grid button {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  text-align: left;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.membership-grid button:hover,
.credit-grid button:hover,
.payment-grid button:hover {
  transform: translateY(-2px);
  border-color: rgba(71, 120, 255, 0.18);
  box-shadow: 0 16px 32px rgba(39, 45, 57, 0.1);
}

.membership-grid button {
  min-height: 126px;
  padding: 12px;
  align-content: start;
}

.membership-grid button mark,
.credit-grid button mark {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 7px;
  color: #5a431f;
  background: rgba(245, 234, 215, 0.88);
  border: 1px solid rgba(191, 154, 98, 0.22);
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.membership-grid button.selected,
.credit-grid button.selected {
  background: rgba(245, 234, 215, 0.78);
  border-color: rgba(191, 154, 98, 0.34);
  box-shadow: 0 14px 28px rgba(191, 154, 98, 0.13);
}

.membership-grid strong {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
}

.membership-grid strong small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.membership-grid span,
.credit-grid span {
  font-size: 12px;
  font-weight: 800;
}

.member-caption {
  margin-top: 2px;
  color: #737a84;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}

.renewal-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.renewal-strip article {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 10px 12px;
  background: rgba(237, 243, 255, 0.58);
  border: 1px solid rgba(71, 120, 255, 0.14);
  border-radius: 15px;
}

.renewal-strip b {
  color: #27324a;
  font-size: 12px;
  font-weight: 900;
}

.renewal-strip span {
  color: #606976;
  font-size: 12px;
  line-height: 1.45;
}

.member-benefit-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.member-benefit-panel article {
  display: grid;
  gap: 4px;
  min-height: 82px;
  padding: 11px 12px;
  background: rgba(31, 36, 48, 0.04);
  border: 1px solid var(--line);
  border-radius: 15px;
}

.member-benefit-panel span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.member-benefit-panel strong {
  color: #252a32;
  font-size: 16px;
  font-weight: 800;
}

.member-benefit-panel em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.45;
}

.credit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.credit-grid button {
  min-height: 84px;
  padding: 12px;
  align-content: start;
}

.credit-grid button strong {
  font-size: 21px;
  letter-spacing: 0;
}

.credit-grid button em {
  margin-top: auto;
}

.recharge-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 0 12px;
  background: rgba(31, 36, 48, 0.04);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.recharge-note strong {
  max-width: 74%;
  font-size: 12px;
  text-align: right;
}

.recharge-warm-tip {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 11px 12px;
  color: #5a616b;
  background: rgba(245, 234, 215, 0.5);
  border: 1px solid rgba(191, 154, 98, 0.18);
  border-radius: 14px;
}

.recharge-warm-tip strong {
  color: #5a431f;
  font-size: 12px;
  font-weight: 900;
}

.recharge-warm-tip span {
  font-size: 12px;
  line-height: 1.55;
}

.payment-section {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.payment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.payment-grid button {
  display: grid;
  gap: 6px;
  min-height: 82px;
  padding: 12px;
  text-align: left;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.payment-grid button.selected {
  background: rgba(237, 243, 255, 0.86);
  border-color: rgba(71, 120, 255, 0.28);
  box-shadow: 0 14px 28px rgba(71, 120, 255, 0.1);
}

.pay-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: #fff;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 900;
}

.pay-icon.alipay {
  background: #1677ff;
}

.pay-icon.wechat {
  background: #19b36a;
}

.pay-icon.transfer {
  background: #1d2230;
}

.recharge-action-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 10px;
  margin-top: 14px;
}

.recharge-action-row button {
  min-height: 42px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 13px;
  font-weight: 800;
}

.recharge-action-row .primary-recharge {
  color: #fff;
  background:
    linear-gradient(135deg, #1d2230, #4b5f9d),
    #151820;
  box-shadow: 0 16px 30px rgba(50, 74, 136, 0.22);
}

.recharge-action-row .primary-recharge.loading,
.recharge-action-row .primary-recharge:disabled {
  opacity: 0.72;
  cursor: wait;
}

.profile-identity {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
}

.profile-avatar {
  width: 48px;
  height: 48px;
  border: 3px solid #fff;
  border-radius: 18px;
  background:
    radial-gradient(circle at 64% 32%, #ffe4bd 0 16%, transparent 17%),
    linear-gradient(135deg, #9fcfbf, #e5c39b);
  box-shadow: var(--soft-shadow);
}

.profile-quota {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.profile-quota div {
  display: grid;
  gap: 4px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.profile-quota strong {
  font-size: 22px;
  letter-spacing: 0;
}

.profile-meter {
  overflow: hidden;
  height: 9px;
  margin-top: 12px;
  background: rgba(31, 36, 48, 0.08);
  border-radius: 999px;
}

.profile-meter i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--blue));
  border-radius: inherit;
}

.profile-actions button {
  min-height: 38px;
  text-align: left;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--line);
  border-radius: 13px;
  color: #3d4450;
}

.profile-actions button[data-page] {
  color: #244fc6;
  background: var(--blue-soft);
  border-color: rgba(71, 120, 255, 0.18);
}

.task-drawer {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 55;
  display: grid;
  gap: 14px;
  width: 360px;
  max-height: calc(100vh - 36px);
  padding: 18px 18px 42px;
  overflow: auto;
  scroll-padding-bottom: 42px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 26px;
  box-shadow: 0 34px 90px rgba(31, 36, 48, 0.22);
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  pointer-events: none;
  backdrop-filter: blur(24px);
  transition: 0.22s ease;
}

.task-drawer.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.task-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.task-drawer-head button {
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 20px;
}

.task-drawer-head p {
  max-width: 260px;
  margin: 5px 0 0;
  color: #68707c;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.task-drawer [hidden] {
  display: none !important;
}

.task-drawer[data-task-mode="export"] .task-platform-list label {
  background:
    linear-gradient(135deg, rgba(71, 120, 255, 0.08), rgba(255, 255, 255, 0.72)),
    rgba(255, 255, 255, 0.76);
}

.task-drawer[data-task-mode="export"] {
  gap: 12px;
}

.task-drawer[data-task-mode="export"] .task-platform-list {
  gap: 8px;
}

.task-drawer[data-task-mode="export"] .task-platform-list label {
  padding: 10px 12px;
  border-radius: 14px;
}

.task-drawer [data-task-submit] {
  position: sticky;
  bottom: 0;
  z-index: 2;
  box-shadow: 0 -10px 28px rgba(255, 255, 255, 0.86);
}

.task-platform-list {
  display: grid;
  gap: 9px;
}

.task-platform-list label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.task-platform-list span {
  font-weight: 700;
}

.task-platform-list small {
  grid-row: 2;
  color: var(--muted);
  font-size: 12px;
}

.task-platform-list input {
  grid-row: 1 / span 2;
  accent-color: var(--blue);
}

.task-scrim {
  position: fixed;
  inset: 0;
  z-index: 54;
  background: rgba(18, 20, 26, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease;
}

.task-scrim.open {
  opacity: 1;
  pointer-events: auto;
}

.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 25;
  background: rgba(20, 22, 28, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: 0.22s ease;
}

.drawer-scrim.open {
  opacity: 1;
  pointer-events: auto;
}

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}

.chat-drawer-head h2 {
  max-width: 290px;
  margin: 2px 0 0;
  overflow: hidden;
  color: #111317;
  font-size: 18px;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-drawer-head small {
  display: block;
  margin-top: 5px;
  color: #777b83;
  font-size: 11px;
  font-weight: 760;
}

.drawer-head button {
  width: 34px;
  height: 34px;
  color: #fff;
  background: #111317;
  border: 1px solid #111317;
  border-radius: 50%;
  font-size: 20px;
  box-shadow: 0 12px 24px rgba(16, 18, 24, 0.16);
}

.drawer-thread {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  overflow: hidden;
  padding: 12px 1px 8px;
}

.chat-session-panel {
  display: grid;
  gap: 9px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(35, 42, 54, 0.08);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.chat-session-toolbar,
.chat-session-toolbar div {
  display: flex;
  align-items: center;
}

.chat-session-toolbar {
  justify-content: space-between;
  gap: 10px;
}

.chat-session-toolbar span {
  color: #111317;
  font-size: 12px;
  font-weight: 880;
}

.chat-session-toolbar div {
  gap: 6px;
}

.chat-session-toolbar button,
.chat-session-item,
.chat-message-action,
.chat-attachment-remove {
  font-family: var(--font-ui);
}

.chat-session-toolbar button {
  min-height: 28px;
  padding: 0 9px;
  color: #fff;
  background: #111317;
  border: 1px solid #111317;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
  box-shadow: 0 10px 20px rgba(16, 18, 24, 0.1);
}

.chat-session-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.chat-session-item {
  display: grid;
  min-width: 0;
  min-height: 58px;
  padding: 9px;
  text-align: left;
  background: rgba(244, 243, 239, 0.78);
  border: 1px solid rgba(35, 42, 54, 0.08);
  border-radius: 14px;
  color: #171a20;
}

.chat-session-item.is-active {
  color: #fff;
  background: #111317;
  border-color: #111317;
  box-shadow: 0 16px 30px rgba(16, 18, 24, 0.18);
}

.chat-session-item strong,
.chat-session-item small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-session-item strong {
  font-size: 11px;
  font-weight: 880;
}

.chat-session-item small {
  margin-top: 4px;
  color: inherit;
  opacity: 0.62;
  font-size: 10px;
  font-weight: 680;
}

.chat-message-list {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding: 2px 4px 4px 1px;
}

.chat-message-list::-webkit-scrollbar,
.drawer-research::-webkit-scrollbar {
  width: 5px;
}

.chat-message-list::-webkit-scrollbar-thumb,
.drawer-research::-webkit-scrollbar-thumb {
  background: rgba(31, 36, 48, 0.14);
  border-radius: 999px;
}

.drawer-message {
  display: grid;
  gap: 8px;
  width: fit-content;
  max-width: 88%;
  padding: 12px 13px;
  border-radius: 17px;
  line-height: 1.58;
  font-size: 12px;
  font-weight: 690;
}

.drawer-message.ai {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  color: #20242c;
  box-shadow: 0 14px 28px rgba(40, 45, 56, 0.07);
}

.drawer-message.user {
  justify-self: end;
  color: #fff;
  background: #111317;
  border: 1px solid #111317;
  box-shadow: 0 16px 30px rgba(16, 18, 24, 0.16);
}

.drawer-message.loading {
  min-width: 132px;
}

.drawer-message.loading span {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.drawer-message.loading span::after {
  content: "";
  width: 28px;
  height: 7px;
  background:
    radial-gradient(circle, #111317 38%, transparent 42%) 0 50% / 9px 7px repeat-x;
  animation: chatTyping 0.9s linear infinite;
  opacity: 0.52;
}

.chat-message-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: inherit;
  opacity: 0.55;
  font-size: 10px;
  font-weight: 780;
}

.chat-message-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chat-message-attachments span,
.chat-task-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  max-width: 100%;
  padding: 0 9px;
  overflow: hidden;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-message-attachments span {
  color: #2a303a;
  background: rgba(245, 244, 240, 0.9);
  border: 1px solid rgba(35, 42, 54, 0.08);
}

.drawer-message.user .chat-message-attachments span {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
}

.chat-task-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chat-task-chip {
  color: #fff;
  background: #111317;
  border: 1px solid #111317;
  box-shadow: 0 10px 18px rgba(16, 18, 24, 0.12);
}

.chat-attachment-tray {
  display: none;
  gap: 7px;
  max-height: 74px;
  overflow: auto;
  padding: 9px;
  margin-bottom: 8px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(35, 42, 54, 0.08);
  border-radius: 16px;
}

.chat-attachment-tray.has-items {
  display: flex;
}

.chat-attachment-chip {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(76px, 1fr) 18px;
  align-items: center;
  gap: 7px;
  min-width: 128px;
  max-width: 190px;
  min-height: 34px;
  padding: 5px 6px;
  background: rgba(244, 243, 239, 0.84);
  border: 1px solid rgba(35, 42, 54, 0.08);
  border-radius: 12px;
}

.chat-attachment-thumb {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  overflow: hidden;
  color: #fff;
  background: #111317;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 880;
}

.chat-attachment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-attachment-chip span {
  min-width: 0;
  overflow: hidden;
  color: #252b35;
  font-size: 10px;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-attachment-remove {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: #fff;
  background: #111317;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
}

.drawer-research {
  position: absolute;
  right: 16px;
  bottom: 76px;
  z-index: 2;
  display: grid;
  gap: 9px;
  width: 340px;
  max-height: calc(100vh - 180px);
  padding: 14px;
  overflow: auto;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 247, 244, 0.94));
  border-color: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 70px rgba(31, 36, 48, 0.2);
  backdrop-filter: blur(24px);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
  transition: 0.18s ease;
}

.drawer-research.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.drawer-research-head {
  display: grid;
  gap: 8px;
}

.drawer-research-head div,
.drawer-research-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.drawer-research label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.drawer-research select {
  min-height: 36px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: #29313c;
  outline: 0;
}

.drawer-research button,
.drawer-research-head button {
  min-height: 30px;
  padding: 0 11px;
  background: #111317;
  border: 1px solid #111317;
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 850;
  box-shadow: 0 10px 20px rgba(16, 18, 24, 0.12);
}

.drawer-research-tags button.selected {
  color: #fff;
  background: #111317;
  border-color: #111317;
}

.drawer-input {
  display: grid;
  gap: 8px;
  margin-top: 0;
  padding: 9px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(35, 42, 54, 0.09);
  border-radius: 19px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(16px);
}

.drawer-input textarea {
  width: 100%;
  min-height: 52px;
  max-height: 104px;
  padding: 9px 10px;
  resize: vertical;
  color: #20242c;
  background: rgba(246, 245, 242, 0.68);
  border: 1px solid rgba(35, 42, 54, 0.08);
  border-radius: 13px;
  outline: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.45;
}

.drawer-input textarea::placeholder {
  color: #8a8e96;
}

.chat-composer-footer,
.chat-composer-tools {
  display: flex;
  align-items: center;
  gap: 6px;
}

.chat-composer-footer {
  justify-content: space-between;
}

.chat-composer-tools {
  flex-wrap: wrap;
}

.drawer-input button {
  color: #fff;
  min-width: 0;
  min-height: 34px;
  padding: 0 10px;
  background: #111317;
  border: 1px solid #111317;
  border-radius: 12px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 850;
  box-shadow: 0 12px 24px rgba(16, 18, 24, 0.14);
}

.drawer-input .doc-trigger,
.drawer-input .data-trigger,
.drawer-input .upload-trigger,
.chat-send-button {
  color: #fff;
  background: #111317;
  border: 1px solid #111317;
}

.chat-send-button {
  min-width: 68px;
}

.chat-send-button.loading {
  opacity: 0.82;
  pointer-events: none;
}

.chat-send-button.loading::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 6px;
  border: 2px solid rgba(255, 255, 255, 0.38);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: -1px;
  animation: spin 0.8s linear infinite;
}

.chat-file-input {
  display: none;
}

.assistant-drawer button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(16, 18, 24, 0.18);
}

.assistant-drawer button:active {
  transform: scale(0.97);
}

.image-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(15, 17, 22, 0.48);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(10px);
  transition: 0.2s ease;
}

.image-preview-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.image-preview-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(520px, 1fr) minmax(330px, 390px);
  gap: 14px;
  width: min(1180px, 94vw);
  max-height: 86vh;
  padding: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 26px;
  box-shadow: 0 36px 110px rgba(0, 0, 0, 0.28);
}

.preview-close {
  position: absolute;
  right: -12px;
  top: -12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  color: #fff;
  background: #111317;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 20px;
}

.preview-media {
  overflow: hidden;
  min-height: min(560px, 74vh);
  background: #eef0f4;
  border-radius: 20px;
}

.preview-media img {
  width: 100%;
  height: 100%;
  max-height: 76vh;
  object-fit: contain;
}

.preview-info {
  display: grid;
  align-content: start;
  gap: 10px;
  max-height: calc(86vh - 28px);
  overflow: auto;
  padding: 12px;
}

.preview-info strong {
  font-size: 19px;
}

.preview-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.preview-actions button {
  min-height: 36px;
  padding: 0 10px;
  text-align: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 13px;
  color: #3f4652;
}

.preview-actions button:hover {
  color: #fff;
  background: #151820;
}

.preview-editor {
  display: none;
  gap: 9px;
  padding: 10px;
  background: rgba(247, 248, 250, 0.72);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.preview-editor.open {
  display: grid;
}

.preview-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.preview-editor-head strong {
  font-size: 14px;
}

.preview-editor-head div,
.editor-ratio-row,
.editor-result-confirm {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.preview-editor-head button,
.editor-ratio-row button,
.editor-result-confirm button {
  min-height: 30px;
  padding: 0 9px;
  color: #4b5360;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.editor-ratio-row button.selected,
.editor-ratio-row button:hover,
.editor-result-confirm button:last-child {
  color: #fff;
  background: #151820;
  border-color: #151820;
}

.compact-range input {
  width: 100%;
  accent-color: var(--blue);
}

.editor-result-confirm {
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background: rgba(31, 36, 48, 0.04);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.editor-result-confirm span {
  flex: 1 1 150px;
  color: var(--muted);
  font-size: 12px;
}

.compact-tabs {
  margin-top: 0;
}

.editor-tool-sections {
  display: grid;
  gap: 7px;
}

.editor-tool-sections section {
  display: grid;
  gap: 6px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(35, 42, 54, 0.08);
  border-radius: 14px;
}

.editor-tool-sections span {
  color: #5f6672;
  font-size: 11px;
  font-weight: 900;
}

.editor-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.editor-tool-grid button,
.preview-save-row button {
  min-height: 30px;
  padding: 0 8px;
  color: #47505c;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 800;
}

.preview-text-workflow {
  display: grid;
  gap: 8px;
  margin-top: 2px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(248, 249, 251, 0.9), rgba(255, 255, 255, 0.62));
  border: 1px solid rgba(35, 42, 54, 0.08);
  border-radius: 14px;
}

.preview-text-workflow p {
  margin: 0;
  color: #69717c;
  font-size: 12px;
  line-height: 1.5;
}

.preview-text-field {
  display: grid;
  gap: 5px;
}

.preview-text-field span {
  color: #5f6672;
  font-size: 11px;
  font-weight: 900;
}

.preview-text-field textarea {
  width: 100%;
  min-height: 54px;
  resize: vertical;
  padding: 9px 10px;
  color: #242a33;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--line);
  border-radius: 12px;
  font: inherit;
  font-size: 12px;
  line-height: 1.45;
  outline: 0;
}

.preview-text-field textarea:focus {
  background: #fff;
  border-color: rgba(71, 120, 255, 0.42);
  box-shadow: 0 0 0 3px rgba(71, 120, 255, 0.08);
}

.preview-text-actions {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 7px;
}

.preview-text-actions button {
  min-height: 32px;
  padding: 0 10px;
  color: #47505c;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 850;
}

.preview-text-actions button.primary,
.preview-text-actions button:hover {
  color: #fff;
  background: #151820;
  border-color: #151820;
}

.preview-text-workflow.loading {
  opacity: 0.72;
  pointer-events: none;
}

.preview-save-row {
  position: sticky;
  bottom: -10px;
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 8px;
  padding-top: 6px;
  background: linear-gradient(180deg, transparent, rgba(248, 249, 251, 0.98) 28%);
  z-index: 2;
}

.preview-editor .settings-input-line {
  gap: 5px;
}

.preview-editor .settings-input-line input {
  min-height: 32px;
}

.preview-save-row button:first-child {
  color: #fff;
  background: #151820;
  border-color: #151820;
}

.system-modal {
  position: fixed;
  inset: 0;
  z-index: 52;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 17, 22, 0.46);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(12px);
  transition: 0.2s ease;
}

.system-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.system-modal-panel {
  position: relative;
  width: min(560px, 92vw);
  padding: 22px;
  border-radius: 24px;
  box-shadow: 0 36px 110px rgba(0, 0, 0, 0.24);
}

.modal-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 36px;
  height: 36px;
  color: #fff;
  background: #111317;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 20px;
}

.system-modal-panel h2 {
  margin: 6px 0 8px;
  font-size: 24px;
}

.system-modal-panel p {
  margin: 0;
  color: #5f6670;
  line-height: 1.65;
}

.modal-field-grid {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}

.modal-field-grid label {
  display: grid;
  gap: 7px;
  color: #626975;
  font-size: 12px;
  font-weight: 800;
}

.modal-field-grid input,
.modal-field-grid textarea,
.modal-field-grid select {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  color: #252b34;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--line);
  border-radius: 13px;
  outline: 0;
}

.modal-field-grid textarea {
  min-height: 92px;
  padding-top: 10px;
  resize: vertical;
}

.payment-open-button {
  width: 100%;
  min-height: 42px;
  margin-top: 4px;
  color: #fff;
  background:
    linear-gradient(135deg, #1d2230, #4b5f9d),
    #151820;
  border: 0;
  border-radius: 14px;
  font-weight: 900;
  cursor: pointer;
}

.modal-action-row {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 18px;
}

.modal-action-row button {
  min-height: 38px;
  padding: 0 15px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 800;
}

.modal-action-row .primary-button {
  min-height: 38px;
  margin-top: 0;
  color: #fff;
  background: #151820;
}

.system-modal[data-modal-type="auth"] .system-modal-panel {
  width: min(860px, 94vw);
  padding: 18px;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(247, 249, 252, 0.9)),
    #fff;
  border: 1px solid rgba(255, 255, 255, 0.9);
}

.system-modal[data-modal-type="auth"] .section-kicker,
.system-modal[data-modal-type="auth"] [data-modal-title],
.system-modal[data-modal-type="auth"] [data-modal-body] {
  margin-left: 4px;
}

.system-modal[data-modal-type="auth"] [data-modal-title] {
  margin-top: 5px;
  font-size: 26px;
}

.system-modal[data-modal-type="auth"] [data-modal-body] {
  max-width: 680px;
  font-size: 13px;
}

.system-modal[data-modal-type="auth"] .modal-field-grid {
  margin-top: 18px;
}

.auth-modal-shell {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 14px;
}

.auth-visual-panel,
.auth-form-panel {
  position: relative;
  overflow: hidden;
  min-height: 318px;
  border-radius: 22px;
}

.auth-visual-panel {
  display: grid;
  align-content: end;
  padding: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 24% 12%, rgba(191, 154, 98, 0.42), transparent 34%),
    linear-gradient(145deg, #111317, #283043 74%, #151820);
}

.auth-orbit {
  position: absolute;
  inset: 18px;
  opacity: 0.82;
}

.auth-orbit i {
  position: absolute;
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  animation: authOrbit 6s ease-in-out infinite;
}

.auth-orbit i:nth-child(1) {
  inset: 22px 34px 78px 18px;
}

.auth-orbit i:nth-child(2) {
  inset: 64px 18px 30px 52px;
  animation-delay: -1.4s;
}

.auth-orbit i:nth-child(3) {
  width: 62px;
  height: 62px;
  right: 40px;
  top: 42px;
  background: rgba(255, 255, 255, 0.08);
  animation-delay: -2.8s;
}

.auth-brand-card {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  backdrop-filter: blur(16px);
}

.auth-brand-card span,
.auth-brand-card small {
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
}

.auth-brand-card strong {
  color: #fff;
  font-size: 21px;
}

.auth-benefit-list {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.auth-benefit-list span {
  padding: 6px 9px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.auth-form-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(31, 36, 48, 0.08);
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  background: rgba(244, 246, 250, 0.86);
  border: 1px solid rgba(31, 36, 48, 0.06);
  border-radius: 16px;
}

.auth-tabs button {
  min-height: 34px;
  color: #66707d;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 900;
}

.auth-tabs button.selected {
  color: #111317;
  background: #fff;
  border-color: rgba(71, 120, 255, 0.18);
  box-shadow: 0 10px 20px rgba(41, 48, 60, 0.08);
}

.auth-field-stack {
  display: grid;
  gap: 10px;
}

.auth-field-stack label {
  display: grid;
  gap: 7px;
  color: #626975;
  font-size: 12px;
  font-weight: 800;
}

.auth-field-stack input,
.auth-field-stack select {
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  color: #252b34;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(31, 36, 48, 0.09);
  border-radius: 14px;
  outline: 0;
}

.auth-code-field {
  position: relative;
  display: grid;
  align-items: center;
}

.auth-code-field input {
  min-width: 0;
  padding-right: 110px;
}

.auth-code-button {
  position: absolute;
  right: 5px;
  width: 96px;
  min-height: 32px;
  padding: 0 10px;
  color: #f7f8fb;
  background: #151820;
  border: 1px solid rgba(21, 24, 32, 0.9);
  border-radius: 11px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 9px 18px rgba(20, 24, 34, 0.16);
  transform: translateZ(0);
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, opacity 0.16s ease;
}

.auth-code-button:hover {
  background: #222837;
  box-shadow: 0 12px 22px rgba(20, 24, 34, 0.2);
  transform: translateY(-1px);
}

.auth-code-button:active {
  transform: translateY(0) scale(0.98);
}

.auth-code-button:disabled {
  cursor: default;
  opacity: 0.72;
  transform: none;
}

.auth-code-button.loading {
  color: rgba(255, 255, 255, 0.78);
  background: linear-gradient(135deg, #151820, #2d3546);
}

.auth-code-button.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  animation: loadingSweep 1s infinite;
}

.auth-passkey-row button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 12px;
  color: #151820;
  background: #fff;
  border: 1px solid rgba(31, 36, 48, 0.09);
  border-radius: 14px;
  font-size: 12px;
  font-weight: 900;
}

.auth-passkey-row {
  gap: 8px;
}

.auth-passkey-row button {
  flex: 1;
}

.auth-agreement {
  color: #7a828d !important;
  font-size: 12px;
  line-height: 1.55 !important;
}

.system-modal[data-modal-type="auth"] .modal-action-row {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
  margin-top: 14px;
}

.system-modal[data-modal-type="auth"] .modal-action-row button {
  width: 100%;
  white-space: nowrap;
}

.system-modal[data-modal-type="auth"] .modal-action-row .primary-button {
  min-width: 150px;
  background: linear-gradient(135deg, #151820, #35425b);
}

.system-modal[data-modal-type="auth"] .modal-close {
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 32px;
  height: 32px;
  color: #151820;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(31, 36, 48, 0.1);
}

@keyframes authOrbit {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(4px, -6px, 0) scale(1.015);
  }
}

.toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: 0.24s ease;
}

.pulse-target {
  animation: softPulse 1.1s ease;
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sheen {
  from {
    transform: translateX(-55%);
  }
  to {
    transform: translateX(55%);
  }
}

@keyframes loadingSweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes creativeCardIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes waitSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes waitTrack {
  0% {
    transform: translateX(-105%);
  }
  50% {
    transform: translateX(75%);
  }
  100% {
    transform: translateX(250%);
  }
}

@keyframes waitStep {
  0%,
  100% {
    color: #59616d;
    border-color: var(--line);
    transform: translateY(0);
  }
  45% {
    color: #315fe8;
    border-color: rgba(71, 120, 255, 0.3);
    transform: translateY(-2px);
  }
}

@keyframes softPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(71, 120, 255, 0.25), var(--soft-shadow);
  }
  100% {
    box-shadow: 0 0 0 18px rgba(71, 120, 255, 0), var(--soft-shadow);
  }
}

@keyframes corePulse {
  0%,
  100% {
    box-shadow:
      0 0 0 10px rgba(71, 120, 255, 0.08),
      0 0 32px rgba(71, 120, 255, 0.34),
      0 22px 42px rgba(58, 88, 150, 0.2);
    transform: translateX(-50%) scale(1);
  }
  50% {
    box-shadow:
      0 0 0 16px rgba(71, 120, 255, 0.05),
      0 0 44px rgba(71, 120, 255, 0.44),
      0 22px 42px rgba(58, 88, 150, 0.2);
    transform: translateX(-50%) scale(1.04);
  }
}

@keyframes progressGlow {
  0%,
  100% {
    filter: saturate(1);
  }
  50% {
    filter: saturate(1.35) brightness(1.08);
  }
}

@keyframes ripple {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(18);
  }
}

@keyframes ambientSweep {
  from {
    transform: translateX(-18%) rotate(0deg);
  }
  to {
    transform: translateX(18%) rotate(360deg);
  }
}

@keyframes floatCard {
  0%,
  100% {
    transform: translateY(0) rotate(2deg);
  }
  50% {
    transform: translateY(-14px) rotate(-1deg);
  }
}

@keyframes corePulseNoTranslate {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 12px rgba(71, 120, 255, 0.07), var(--soft-shadow);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 0 0 18px rgba(71, 120, 255, 0.04), 0 0 40px rgba(71, 120, 255, 0.28), var(--soft-shadow);
  }
}

@keyframes chatTyping {
  0% {
    background-position: 0 50%;
  }
  100% {
    background-position: 27px 50%;
  }
}

.prompt-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  color: #757b84;
  font-size: 12px;
}

@media (max-width: 1280px) {
  body {
    min-width: 1080px;
  }

  .home-grid,
  .production-layout {
    grid-template-columns: 210px minmax(0, 1fr);
  }

  .home-grid {
    grid-template-columns: 210px minmax(560px, 1fr) 250px;
  }

  .studio-layout {
    grid-template-columns: 280px minmax(0, 1fr);
  }

  .advanced-drawer-body.compact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .video-workbench,
  .video-output-grid {
    grid-template-columns: 260px 250px minmax(320px, 1fr);
  }

  .video-reference-wall,
  .video-result-grid:not(.generate-video-result) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .video-result-grid.generate-video-result.multi-video-result {
    grid-template-columns: minmax(220px, 1fr) minmax(96px, 132px);
    grid-template-rows: repeat(3, clamp(54px, 6.3vh, 74px));
    grid-auto-rows: clamp(54px, 6.3vh, 74px);
  }

  .video-plan-stage {
    grid-template-columns: 1fr;
  }

  .video-plan-briefs {
    grid-template-columns: 1fr;
  }

  .video-live-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .video-generate-console {
    width: min(940px, calc(100vw - 124px));
  }

  .video-generate-console .console-footer {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .image-preview-panel {
    grid-template-columns: minmax(500px, 1fr) 300px;
  }

  .assistant-drawer {
    width: 390px;
  }

  .chat-session-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar {
    grid-template-columns: 180px 1fr;
  }

  .lovart-canvas-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .canvas-surface {
    min-height: 600px;
  }
}
.banana-api-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(29, 34, 48, 0.08);
  border-radius: 999px;
  background: rgba(31, 36, 48, 0.82);
  color: #fff;
  font: 700 12px/1 var(--font-ui, Inter, system-ui, sans-serif);
  letter-spacing: 0;
  box-shadow:
    0 10px 18px rgba(31, 36, 48, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

/* Video composer: mature console shell with reference-inspired input polish. */
.page-video .video-generate-console {
  bottom: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: min(1020px, calc(100vw - 170px));
  padding: 14px 16px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(250, 251, 254, 0.97));
  border-color: rgba(31, 36, 48, 0.08);
  box-shadow:
    0 24px 68px rgba(31, 36, 48, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  overflow: visible;
}

.page-video .video-console-tabs {
  display: inline-flex;
}

.page-video .video-console-body {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  min-height: 92px;
  padding-top: 2px;
}

.page-video .video-generate-console .console-assets {
  position: relative;
  display: block;
  min-height: 56px;
  overflow: visible;
  z-index: 2;
}

.page-video .video-generate-console .console-assets > button {
  width: 100%;
  min-width: 0;
}

.page-video .video-generate-console .console-assets > button.upload-zone {
  display: grid;
  width: 104px;
  min-height: 54px;
  min-width: 0;
  padding: 7px 8px;
  place-items: center;
  align-content: center;
  gap: 4px;
  text-align: center;
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(246, 249, 255, 0.96), rgba(255, 255, 255, 0.94));
  border-color: rgba(71, 120, 255, 0.22);
  box-shadow: none;
}

.page-video .video-generate-console .console-assets > button.upload-zone span {
  display: grid;
  place-items: center;
  width: auto;
  height: auto;
  color: #315fe8;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  font-size: 18px;
  line-height: 1;
}

.page-video .video-generate-console .console-assets > button.upload-zone strong {
  color: #9aa3b5;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.15;
}

.page-video .video-generate-console .console-assets > button.upload-zone small {
  display: none;
}

.page-video .video-generate-console .console-asset-row {
  position: absolute;
  left: 0;
  top: 62px;
  display: grid;
  grid-template-columns: minmax(136px, 1fr);
  gap: 6px;
  min-width: 148px;
  padding: 8px;
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 18px 42px rgba(31, 36, 48, 0.14);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.page-video .video-generate-console .console-assets:hover .console-asset-row,
.page-video .video-generate-console .console-assets:focus-within .console-asset-row {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.page-video .video-generate-console .console-asset-row > button {
  min-width: 0;
  min-height: 34px;
  width: 100%;
  padding: 0 10px;
  border-radius: 10px;
  white-space: nowrap;
  writing-mode: horizontal-tb;
}

.page-video .video-generate-console .console-asset-row > button span,
.page-video .video-generate-console .console-asset-row > button small {
  white-space: normal;
}

.page-video .video-console-prompt {
  min-height: 92px;
}

.page-video .video-generate-console textarea {
  min-height: 92px;
  height: 92px;
  padding: 4px 0 0;
  border-radius: 0;
  color: #1f2630;
  background: transparent;
  border: 0;
  font-size: 14px;
  line-height: 1.65;
  resize: none;
  box-shadow: none;
  transition: color 0.18s ease;
}

.page-video .video-generate-console textarea::placeholder {
  color: #8a92a0;
}

.page-video .video-generate-console textarea:focus {
  background: transparent;
  box-shadow: none;
}

.page-video .video-generate-console .console-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
}

.page-video .video-generate-console .console-controls,
.page-video .video-generate-console .console-submit {
  gap: 8px;
  overflow: visible;
}

.page-video .video-generate-console .console-controls button,
.page-video .video-generate-console .console-submit button:not(.prompt-submit),
.page-video .video-console-more summary {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
}

.page-video .video-generate-console .prompt-submit {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #7b61ff, #5b6dff);
  box-shadow: 0 14px 28px rgba(91, 109, 255, 0.28);
}

.page-video .video-console-more > div {
  left: auto;
  right: 0;
  grid-template-columns: repeat(2, minmax(112px, 1fr));
  width: 264px;
}

@media (max-width: 1280px) {
  .page-video .video-generate-console {
    width: min(980px, calc(100vw - 124px));
  }
}

/* Video result preview v2: cinematic stage, keeps the composer untouched. */
@supports selector(.page-video:has([data-video-result])) {
  .page-video:has([data-video-result]) .video-reference-wall {
    height: clamp(48px, 4.5vw, 56px);
  }
}

.page-video .video-task-result.multi-video-task-result {
  position: relative;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head actions"
    "preview preview";
  gap: 10px 12px;
  margin: 12px 0 10px;
  padding: 13px 14px 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 28px;
  background:
    radial-gradient(circle at 76% 12%, rgba(71, 120, 255, 0.18), transparent 30%),
    radial-gradient(circle at 18% 0, rgba(191, 154, 98, 0.18), transparent 26%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 247, 251, 0.82));
  box-shadow:
    0 26px 70px rgba(31, 36, 48, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.page-video .video-task-result.multi-video-task-result::before {
  content: "";
  position: absolute;
  inset: 52px 14px 54px;
  pointer-events: none;
  border-radius: 24px;
  background:
    radial-gradient(circle at 45% 18%, rgba(255, 255, 255, 0.16), transparent 24%),
    linear-gradient(145deg, #111318, #06070a 64%, #181a20);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -28px 80px rgba(0, 0, 0, 0.34);
}

.page-video .video-task-result.multi-video-task-result .video-result-head {
  position: relative;
  z-index: 2;
  min-width: 0;
}

.page-video .video-task-result.multi-video-task-result .video-result-head strong {
  max-width: 620px;
  overflow: hidden;
  color: #111317;
  font-size: 17px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-video .video-task-result.multi-video-task-result .video-result-head em {
  min-height: 28px;
  color: #111317;
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(31, 36, 48, 0.08);
}

.page-video .video-task-result.multi-video-task-result .video-result-actions {
  position: relative;
  z-index: 2;
  grid-area: actions;
  align-self: center;
  justify-content: flex-end;
  padding: 0;
}

.page-video .video-task-result.multi-video-task-result .video-result-actions button {
  min-height: 30px;
  color: #111317;
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(31, 36, 48, 0.08);
  box-shadow: 0 10px 22px rgba(31, 36, 48, 0.06);
}

.page-video .video-task-result.multi-video-task-result .video-result-actions button:hover {
  color: #fff;
  background: #111317;
}

.page-video .video-task-result.multi-video-task-result .video-live-strip {
  position: relative;
  z-index: 5;
  grid-area: preview;
  align-self: start;
  justify-self: start;
  width: min(348px, calc(100% - 20px));
  margin: 12px 0 0 12px;
  grid-template-columns: minmax(0, 1fr) 156px;
  min-height: 36px;
  padding: 6px 8px 6px 10px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(8, 10, 14, 0.56);
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(16px);
}

.page-video .video-task-result.multi-video-task-result .video-live-main {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.page-video .video-task-result.multi-video-task-result .video-live-main span {
  padding: 4px 8px;
  color: #101216;
  background: rgba(255, 255, 255, 0.88);
  font-size: 10px;
}

.page-video .video-task-result.multi-video-task-result .video-live-main strong {
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 760;
}

.page-video .video-task-result.multi-video-task-result .video-live-progress {
  grid-template-columns: minmax(0, 1fr) 34px;
}

.page-video .video-task-result.multi-video-task-result .video-live-progress i {
  height: 6px;
  background: rgba(255, 255, 255, 0.18);
}

.page-video .video-task-result.multi-video-task-result .video-live-progress i::after {
  background: linear-gradient(90deg, #fff, #7f94ff);
}

.page-video .video-task-result.multi-video-task-result .video-live-progress b {
  color: rgba(255, 255, 255, 0.84);
  font-size: 11px;
}

.page-video .video-task-result.multi-video-task-result .video-result-meta {
  position: relative;
  z-index: 5;
  grid-area: preview;
  align-self: start;
  justify-self: end;
  margin: 12px 12px 0 0;
  justify-content: flex-end;
  gap: 6px;
  max-width: 520px;
  overflow: hidden;
  flex-wrap: nowrap;
}

.page-video .video-task-result.multi-video-task-result .video-result-meta span {
  padding: 6px 8px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(8, 10, 14, 0.52);
  border-color: rgba(255, 255, 255, 0.1);
  font-size: 11px;
  white-space: nowrap;
  backdrop-filter: blur(12px);
}

.page-video .video-task-result.multi-video-task-result .video-result-meta span:first-child,
.page-video .video-task-result.multi-video-task-result .video-result-meta span:nth-child(3) {
  display: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result {
  position: relative;
  z-index: 1;
  display: block;
  grid-area: preview;
  height: clamp(232px, 30vh, 278px);
  min-height: 232px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background:
    radial-gradient(circle at 41% 42%, rgba(255, 255, 255, 0.18), transparent 20%),
    radial-gradient(circle at 72% 50%, rgba(71, 120, 255, 0.24), transparent 32%),
    linear-gradient(145deg, #0f1116, #08090d 56%, #151a27);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -28px 80px rgba(0, 0, 0, 0.34);
}

.page-video .video-result-grid.generate-video-result.multi-video-result::before {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 12px;
  height: 24px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.52), transparent 70%);
  filter: blur(5px);
}

.page-video .video-result-grid.generate-video-result.multi-video-result::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 34px 100%,
    linear-gradient(180deg, transparent 0 72%, rgba(0, 0, 0, 0.22));
  opacity: 0.42;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-stage-backdrop {
  position: absolute;
  inset: -28px;
  z-index: 0;
  width: calc(100% + 56px);
  height: calc(100% + 56px);
  object-fit: cover;
  opacity: 0.34;
  filter: blur(22px) saturate(1.05) brightness(0.74);
  transform: scale(1.06);
  pointer-events: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card {
  position: absolute;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    #090a0d;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24);
  transition:
    transform 0.22s ease,
    opacity 0.22s ease,
    filter 0.22s ease,
    box-shadow 0.22s ease;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video {
  left: 40%;
  top: 50%;
  z-index: 6;
  width: min(31vw, 232px);
  height: calc(100% - 28px);
  min-width: 188px;
  max-width: 252px;
  overflow: visible;
  isolation: isolate;
  transform: translate(-50%, -50%);
  border-radius: 24px;
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 28px 62px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-portrait {
  width: clamp(124px, 11.8vw, 150px);
  min-width: 0;
  height: calc(100% - 24px);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-wide {
  left: 40%;
  width: min(62vw, 560px);
  height: auto;
  aspect-ratio: var(--video-ratio, 16 / 9);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-square {
  width: min(36vw, 270px);
  height: min(calc(100% - 28px), 270px);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video video,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video img,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card video,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card img {
  object-fit: contain;
  background: #050609;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) {
  z-index: 3;
  width: clamp(98px, 10vw, 126px);
  height: clamp(128px, 18vh, 172px);
  aspect-ratio: var(--video-ratio, 9 / 16);
  cursor: pointer;
  opacity: 0.82;
  filter: saturate(0.86) blur(0.2px);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(2) {
  left: calc(40% + 150px);
  top: 48%;
  transform: translate(-50%, -50%) rotate(4deg) scale(0.98);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(3) {
  left: calc(40% + 222px);
  top: 52%;
  z-index: 2;
  transform: translate(-50%, -50%) rotate(-3deg) scale(0.9);
  opacity: 0.66;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(4) {
  left: calc(40% + 282px);
  top: 56%;
  z-index: 1;
  transform: translate(-50%, -50%) rotate(5deg) scale(0.82);
  opacity: 0.52;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video):hover,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video):focus-within {
  z-index: 7;
  opacity: 1;
  filter: saturate(1) blur(0);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.18);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(2):hover,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(2):focus-within {
  transform: translate(-50%, -54%) rotate(1deg) scale(1.04);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(3):hover,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(3):focus-within {
  transform: translate(-50%, -54%) rotate(-1deg) scale(0.98);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(4):hover,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(4):focus-within {
  transform: translate(-50%, -54%) rotate(2deg) scale(0.92);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video::before {
  content: "";
  top: 10px;
  left: 10px;
  width: 8px;
  height: 8px;
  padding: 0;
  background: #31b57b;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(49, 181, 123, 0.16);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video)::before {
  content: "";
  inset: auto auto 10px 10px;
  width: 6px;
  height: 6px;
  padding: 0;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  backdrop-filter: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.ready::after {
  z-index: 2;
  background: linear-gradient(180deg, transparent 58%, rgba(4, 5, 8, 0.7));
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-card-backdrop {
  inset: -32px -150px;
  z-index: -1;
  object-fit: cover;
  opacity: 0.28;
  filter: blur(24px) saturate(1.08) brightness(0.84);
  transform: scale(1.05);
  pointer-events: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-card-player {
  z-index: 1;
  object-fit: contain;
  overflow: hidden;
  border-radius: inherit;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.34);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) .video-card-backdrop {
  display: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending:not(.is-main-video) {
  border-style: solid;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 9px),
    #101218;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending:not(.is-main-video)::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 0 32%, rgba(255, 255, 255, 0.14) 44%, transparent 58% 100%);
  transform: translateX(-120%);
  animation: loadingSweep 2.4s ease-in-out infinite;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending:not(.is-main-video) .video-card-status {
  position: absolute;
  right: 10px;
  bottom: 9px;
  left: 22px;
  z-index: 2;
  display: none;
  text-align: right;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending:not(.is-main-video) .video-card-status b {
  color: rgba(255, 255, 255, 0.74);
  font-size: 10px;
  font-weight: 760;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending:not(.is-main-video) .video-card-status small,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) small,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) span,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending:not(.is-main-video) .video-progress-orbit {
  display: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 3;
  padding: 5px 8px;
  color: #fff;
  background: rgba(0, 0, 0, 0.56);
  font-size: 11px;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video small {
  position: absolute;
  right: 12px;
  bottom: 13px;
  z-index: 3;
  max-width: 54%;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1280px) {
  .page-video .video-task-result.multi-video-task-result {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .page-video .video-result-grid.generate-video-result.multi-video-result {
    height: clamp(224px, 29vh, 250px);
  }

  .page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video {
    left: 40%;
    width: min(29vw, 220px);
  }

  .page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(2) {
    left: calc(40% + 144px);
  }

  .page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(3) {
    left: calc(40% + 212px);
  }

  .page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(4) {
    left: calc(40% + 270px);
  }
}

.page-video .video-result-grid.generate-video-result.single-video-result {
  min-height: clamp(224px, 30vh, 278px);
  padding: 12px;
  background:
    radial-gradient(circle at 48% 42%, rgba(255, 255, 255, 0.16), transparent 20%),
    radial-gradient(circle at 72% 44%, rgba(71, 120, 255, 0.22), transparent 34%),
    linear-gradient(145deg, #101218, #07080b 58%, #151a27);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -28px 80px rgba(0, 0, 0, 0.34);
}

.page-video .video-result-grid.generate-video-result.single-video-result .video-result-card.ratio-vertical,
.page-video .video-result-grid.generate-video-result.single-video-result .video-result-card.ratio-portrait {
  width: clamp(126px, 12vw, 156px);
  height: clamp(198px, 26vh, 252px);
  min-height: 0;
}

.page-video .video-result-grid.generate-video-result.single-video-result .video-result-card {
  overflow: visible;
  isolation: isolate;
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 28px 62px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

.page-video .video-result-grid.generate-video-result.single-video-result .video-card-backdrop {
  inset: -34px -220px;
  z-index: -1;
  object-fit: cover;
  opacity: 0.3;
  filter: blur(26px) saturate(1.08) brightness(0.84);
  transform: scale(1.04);
  pointer-events: none;
}

.page-video .video-result-grid.generate-video-result.single-video-result .video-card-player {
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.34);
}

.page-video .video-result-grid.generate-video-result.single-video-result .video-result-card::before {
  content: "";
  top: 10px;
  left: 10px;
  width: 8px;
  height: 8px;
  padding: 0;
  background: #31b57b;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(49, 181, 123, 0.16);
}

.page-video .video-task-result.single-video-task-result {
  position: relative;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head actions"
    "preview preview";
  gap: 10px 12px;
  margin: 12px 0 10px;
  padding: 13px 14px 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 28px;
  background:
    radial-gradient(circle at 72% 18%, rgba(71, 120, 255, 0.18), transparent 30%),
    radial-gradient(circle at 18% 0, rgba(191, 154, 98, 0.16), transparent 25%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 247, 251, 0.82));
  box-shadow:
    0 26px 70px rgba(31, 36, 48, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.page-video .video-task-result.single-video-task-result .video-result-head {
  grid-area: head;
  min-width: 0;
}

.page-video .video-task-result.single-video-task-result .video-result-head strong {
  max-width: 620px;
  overflow: hidden;
  font-size: 18px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-video .video-task-result.single-video-task-result .video-result-head em {
  min-height: 28px;
  color: #111317;
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(31, 36, 48, 0.08);
}

.page-video .video-task-result.single-video-task-result .video-result-actions {
  grid-area: actions;
  align-self: center;
  justify-content: flex-end;
  padding: 0;
}

.page-video .video-task-result.single-video-task-result .video-result-actions button {
  min-height: 30px;
  color: #111317;
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(31, 36, 48, 0.08);
  box-shadow: 0 10px 22px rgba(31, 36, 48, 0.06);
}

.page-video .video-task-result.single-video-task-result .video-result-actions button:hover {
  color: #fff;
  background: #111317;
}

.page-video .video-task-result.single-video-task-result .video-result-grid {
  grid-area: preview;
  width: 100%;
}

.page-video .video-task-result.single-video-task-result .video-live-strip {
  position: relative;
  z-index: 5;
  grid-area: preview;
  align-self: start;
  justify-self: start;
  width: min(348px, calc(100% - 20px));
  min-height: 36px;
  margin: 12px 0 0 12px;
  padding: 6px 8px 6px 10px;
  grid-template-columns: minmax(0, 1fr) 156px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(8, 10, 14, 0.56);
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(16px);
}

.page-video .video-task-result.single-video-task-result .video-live-main {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.page-video .video-task-result.single-video-task-result .video-live-main span {
  padding: 4px 8px;
  color: #101216;
  background: rgba(255, 255, 255, 0.88);
  font-size: 10px;
}

.page-video .video-task-result.single-video-task-result .video-live-main strong {
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 760;
}

.page-video .video-task-result.single-video-task-result .video-live-progress {
  grid-template-columns: minmax(0, 1fr) 34px;
}

.page-video .video-task-result.single-video-task-result .video-live-progress i {
  height: 6px;
  background: rgba(255, 255, 255, 0.18);
}

.page-video .video-task-result.single-video-task-result .video-live-progress i::after {
  background: linear-gradient(90deg, #fff, #7f94ff);
}

.page-video .video-task-result.single-video-task-result .video-live-progress b {
  color: rgba(255, 255, 255, 0.84);
  font-size: 11px;
}

.page-video .video-task-result.single-video-task-result .video-result-meta {
  position: relative;
  z-index: 5;
  grid-area: preview;
  align-self: start;
  justify-self: end;
  max-height: none;
  max-width: 520px;
  margin: 12px 12px 0 0;
  overflow: hidden;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
}

.page-video .video-task-result.single-video-task-result .video-result-meta span {
  padding: 6px 8px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(8, 10, 14, 0.52);
  border-color: rgba(255, 255, 255, 0.1);
  font-size: 11px;
  white-space: nowrap;
  backdrop-filter: blur(12px);
}

.page-video .video-task-result.single-video-task-result .video-result-meta span:first-child,
.page-video .video-task-result.single-video-task-result .video-result-meta span:nth-child(3) {
  display: none;
}

.page-video .video-result-grid.generate-video-result.single-video-result {
  position: relative;
  display: grid;
  min-height: clamp(226px, 29vh, 258px);
  height: clamp(226px, 29vh, 258px);
  overflow: hidden;
}

.page-video .video-result-grid.generate-video-result.single-video-result .video-result-card.ratio-vertical,
.page-video .video-result-grid.generate-video-result.single-video-result .video-result-card.ratio-portrait {
  width: clamp(154px, 14vw, 184px);
  height: calc(100% - 20px);
}

.page-video .video-result-grid.generate-video-result.single-video-result .video-card-backdrop {
  left: -420px;
  right: -420px;
  top: -46px;
  bottom: -46px;
  width: auto;
  height: auto;
  z-index: 0;
  opacity: 0.34;
  filter: blur(26px) saturate(1.14) brightness(0.92);
}

.page-video .video-result-grid.generate-video-result.single-video-result .video-card-player {
  z-index: 2;
}

@media (max-width: 1280px) {
  .page-video .video-result-grid.generate-video-result.single-video-result {
    min-height: 226px;
    height: 226px;
  }

  .page-video .video-result-grid.generate-video-result.single-video-result .video-result-card.ratio-vertical,
  .page-video .video-result-grid.generate-video-result.single-video-result .video-result-card.ratio-portrait {
    width: clamp(148px, 13vw, 176px);
  }
}

/* Video result shelf: center hero preview with blurred side variants. */
.page-video .video-task-result.multi-video-task-result {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head actions"
    "preview preview";
  align-items: start;
  gap: 8px 12px;
  padding: 12px 14px 14px;
}

.page-video .video-task-result.multi-video-task-result::before,
.page-video .video-task-result.multi-video-task-result .video-live-strip {
  display: none;
}

.page-video .video-task-result.multi-video-task-result .video-result-meta {
  display: none;
}

.page-video .video-task-result.multi-video-task-result .video-result-meta span {
  padding: 5px 8px;
  color: rgba(17, 19, 23, 0.72);
  background: rgba(255, 255, 255, 0.68);
  border-color: rgba(31, 36, 48, 0.08);
  font-size: 11px;
  white-space: nowrap;
}

.page-video .video-task-result.multi-video-task-result .video-result-meta span:first-child,
.page-video .video-task-result.multi-video-task-result .video-result-meta span:nth-child(3) {
  display: none;
}

.page-video .video-task-result.multi-video-task-result .video-result-grid.generate-video-result.multi-video-result {
  position: relative;
  isolation: isolate;
  display: block;
  grid-area: preview;
  height: clamp(224px, 29vh, 252px);
  min-height: 224px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 32%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 25% 100%,
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.13), transparent 25%),
    radial-gradient(circle at 84% 50%, rgba(71, 120, 255, 0.22), transparent 34%),
    linear-gradient(145deg, #101218, #07080b 58%, #151a27);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -42px 90px rgba(0, 0, 0, 0.34);
  perspective: 1000px;
}

.page-video .video-result-grid.generate-video-result.multi-video-result::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 12px;
  z-index: 0;
  height: 22px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  border-radius: 999px;
  filter: blur(8px);
  opacity: 0.72;
}

.page-video .video-result-grid.generate-video-result.multi-video-result::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 52%, transparent 0 30%, rgba(5, 6, 9, 0.34) 66%, rgba(5, 6, 9, 0.58)),
    linear-gradient(180deg, transparent 0 70%, rgba(0, 0, 0, 0.36));
  opacity: 0.78;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video),
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.ratio-vertical,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.ratio-portrait,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.ratio-square,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.ratio-wide,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-portrait,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-square,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-wide,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(2),
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(3),
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(4) {
  position: relative;
  inset: auto;
  left: auto;
  top: auto;
  grid-column: auto;
  grid-row: auto;
  z-index: 2;
  display: grid;
  place-items: center;
  width: clamp(190px, 22vw, 252px);
  height: calc(100% - 32px) !important;
  min-width: 0;
  max-width: none;
  min-height: 0;
  aspect-ratio: auto !important;
  padding: 0;
  overflow: hidden;
  opacity: 0.42;
  filter: blur(4px) saturate(0.9) brightness(0.72);
  transform: none;
  cursor: pointer;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025)),
    rgba(8, 9, 12, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 38px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.24s ease,
    opacity 0.24s ease,
    filter 0.24s ease,
    border-color 0.24s ease,
    box-shadow 0.24s ease;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(2) {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-108%, -50%) scale(0.88) rotateY(14deg);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(3) {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(8%, -50%) scale(0.88) rotateY(-14deg);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(4) {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(70%, -50%) scale(0.72) rotateY(-18deg);
  opacity: 0.3;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card::before,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video::before,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video)::before {
  content: "";
  position: absolute;
  inset: auto 14px 12px;
  z-index: 3;
  width: auto;
  height: 2px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 8;
  width: clamp(190px, 19vw, 236px);
  height: calc(100% - 24px) !important;
  opacity: 1;
  filter: none;
  transform: translate(-50%, -50%);
  border-color: rgba(255, 255, 255, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    0 24px 50px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ready::after,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.image::after {
  display: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video::before {
  background: linear-gradient(90deg, #31b57b, rgba(255, 255, 255, 0.3));
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card video,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card img,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video video,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: var(--video-ratio, 9 / 16);
  object-fit: contain;
  border-radius: 20px;
  background: transparent;
  transform: none;
  box-shadow: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-card-backdrop {
  position: absolute;
  inset: -24px;
  z-index: 0;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;
  opacity: 0.44;
  filter: blur(20px) saturate(1.12) brightness(0.78);
  transform: scale(1.08);
  pointer-events: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-card-player {
  z-index: 1;
  opacity: 1;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.35));
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.ratio-vertical .video-card-player,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.ratio-portrait .video-card-player {
  left: 50%;
  top: 10px;
  right: auto;
  bottom: auto;
  width: auto;
  height: calc(100% - 20px);
  max-width: calc(100% - 20px);
  transform: translateX(-50%);
  background: #050609;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical .video-card-player,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-portrait .video-card-player {
  top: 8px;
  height: calc(100% - 16px);
  max-width: calc(100% - 16px);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending {
  cursor: default;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 12px),
    rgba(12, 14, 20, 0.78);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending:not(.is-main-video) .video-card-status {
  opacity: 0;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.12), transparent 30%),
    linear-gradient(100deg, transparent 0 30%, rgba(255, 255, 255, 0.13) 44%, transparent 58% 100%);
  opacity: 0.86;
  animation: loadingSweep 2.4s ease-in-out infinite;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending .video-card-status {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 8px 10px;
  color: rgba(255, 255, 255, 0.78);
  text-align: center;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  backdrop-filter: blur(14px);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending .video-card-status b {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending .video-card-status small,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending .video-progress-orbit,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending span {
  display: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card span {
  position: absolute;
  left: 12px;
  bottom: 14px;
  z-index: 4;
  padding: 5px 8px;
  color: #fff;
  background: rgba(0, 0, 0, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(10px);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card small {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 12px;
  z-index: 4;
  max-width: none;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.74);
  font-size: 11px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:hover,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:focus-within {
  opacity: 0.78;
  filter: blur(1px) saturate(0.98) brightness(0.9);
  border-color: rgba(255, 255, 255, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 24px 48px rgba(0, 0, 0, 0.36);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video:hover,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video:focus-within {
  opacity: 1;
  filter: none;
  transform: translate(-50%, -50%) scale(1.015);
}

@media (max-width: 1180px) {
  .page-video .video-task-result.multi-video-task-result .video-result-grid.generate-video-result.multi-video-result {
    height: 220px;
    min-height: 220px;
  }
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-portrait,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-square,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-wide {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 9;
  width: clamp(128px, 11vw, 150px);
  height: calc(100% - 18px) !important;
  opacity: 1;
  filter: none;
  transform: translate(-50%, -50%);
  background: #050609;
  border-radius: 22px;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-wide {
  width: min(58vw, 520px);
  height: auto !important;
  aspect-ratio: var(--video-ratio, 16 / 9) !important;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-square {
  width: min(34vw, 224px);
  height: min(calc(100% - 18px), 224px) !important;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video .video-card-player,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical .video-card-player,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-portrait .video-card-player {
  inset: 0;
  left: auto;
  top: auto;
  right: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  max-width: none;
  opacity: 1;
  filter: none;
  transform: none;
  object-fit: contain;
  background: #050609;
  box-shadow:
    0 22px 46px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.is-video-unavailable::after {
  content: "视频预览已过期";
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.72);
  background:
    linear-gradient(180deg, rgba(5, 6, 9, 0.18), rgba(5, 6, 9, 0.78)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 12px);
  border-radius: 22px;
  font-size: 12px;
  font-weight: 800;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ready::after,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).image::after {
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(5, 6, 9, 0.16), rgba(5, 6, 9, 0.58)),
    radial-gradient(circle at 50% 48%, transparent 0 34%, rgba(5, 6, 9, 0.44));
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video:hover,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video:focus-within {
  opacity: 1;
  filter: none;
  transform: translate(-50%, -50%) scale(1.012);
}

/* Refined video display: remove the empty black-field feel and make the hero preview readable. */
.page-video .video-task-result.multi-video-task-result {
  padding: 10px 14px 12px;
}

.page-video .video-task-result.multi-video-task-result .video-result-grid.generate-video-result.multi-video-result {
  height: clamp(242px, 32vh, 252px);
  min-height: 242px;
  overflow: hidden;
  border-color: rgba(31, 36, 48, 0.08);
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.18) 30%, transparent 48%),
    radial-gradient(circle at 22% 70%, rgba(49, 181, 123, 0.12), transparent 30%),
    radial-gradient(circle at 82% 42%, rgba(71, 120, 255, 0.2), transparent 34%),
    linear-gradient(145deg, rgba(248, 250, 255, 0.86), rgba(225, 232, 244, 0.48));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -34px 70px rgba(17, 19, 23, 0.12),
    0 18px 44px rgba(31, 36, 48, 0.08);
}

.page-video .video-result-grid.generate-video-result.multi-video-result::before {
  left: 9%;
  right: 9%;
  bottom: 16px;
  height: 20px;
  background: radial-gradient(ellipse at center, rgba(17, 19, 23, 0.2), transparent 68%);
  filter: blur(4px);
  opacity: 0.9;
}

.page-video .video-result-grid.generate-video-result.multi-video-result::after {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.28) 1px, transparent 1px) 0 0 / 25% 100%,
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 48%, rgba(17, 19, 23, 0.1));
  opacity: 0.64;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video),
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.ratio-vertical,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.ratio-portrait,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(2),
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(3),
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(4) {
  width: clamp(210px, 19vw, 246px);
  height: calc(100% - 44px) !important;
  opacity: 0.62;
  filter: blur(2px) saturate(0.96) brightness(0.9);
  border-color: rgba(255, 255, 255, 0.22);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.025)),
    rgba(7, 9, 13, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 22px 48px rgba(17, 19, 23, 0.2);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(2) {
  transform: translate(-124%, -50%) scale(0.82) rotateY(14deg);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(3) {
  transform: translate(24%, -50%) scale(0.82) rotateY(-14deg);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(4) {
  transform: translate(100%, -50%) scale(0.66) rotateY(-18deg);
  opacity: 0.46;
  filter: blur(3px) saturate(0.92) brightness(0.82);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-portrait {
  width: clamp(152px, 13.5vw, 176px);
  height: calc(100% - 12px) !important;
  opacity: 1;
  filter: none;
  border-color: rgba(255, 255, 255, 0.36);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)),
    #050609;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 30px 64px rgba(17, 19, 23, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video .video-card-backdrop {
  opacity: 0.62;
  filter: blur(18px) saturate(1.16) brightness(0.82);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video .video-card-player,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical .video-card-player,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-portrait .video-card-player {
  background: transparent;
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-video-unavailable {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 12px),
    #0b0d12;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-video-unavailable .video-card-player,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-video-unavailable .video-card-backdrop {
  opacity: 0;
}

/* Online-inspired review layout: large playable result + compact version rail. */
.page-video .video-task-result.multi-video-task-result {
  padding: 11px 14px 13px;
}

.page-video .video-task-result.multi-video-task-result .video-result-grid.generate-video-result.multi-video-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(176px, 18vw, 224px);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 10px;
  height: clamp(236px, 31vh, 258px);
  min-height: 236px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 24px;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.9), transparent 32%),
    radial-gradient(circle at 82% 8%, rgba(71, 120, 255, 0.16), transparent 34%),
    linear-gradient(145deg, rgba(247, 249, 253, 0.96), rgba(225, 231, 242, 0.78));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 18px 44px rgba(31, 36, 48, 0.08);
  perspective: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result::before,
.page-video .video-result-grid.generate-video-result.multi-video-result::after {
  display: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video),
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.ratio-vertical,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.ratio-portrait,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.ratio-square,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.ratio-wide,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-portrait,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-square,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-wide,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(2),
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(3),
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(4) {
  position: relative;
  inset: auto;
  left: auto;
  top: auto;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100% !important;
  min-width: 0;
  max-width: none;
  min-height: 0;
  opacity: 1;
  filter: none;
  transform: none;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.015)),
    #080a0f;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 18px 38px rgba(31, 36, 48, 0.12);
  overflow: hidden;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-portrait,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-square,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-wide {
  grid-column: 1;
  grid-row: 1 / 4;
  z-index: 4;
  border-radius: 22px;
  border-color: rgba(255, 255, 255, 0.24);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08), transparent 32%),
    linear-gradient(145deg, #11151d, #07080c 68%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 24px 58px rgba(31, 36, 48, 0.2);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(4) {
  grid-column: 2;
  grid-row: 3;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(n + 5) {
  display: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) {
  cursor: pointer;
  opacity: 0.92;
  filter: saturate(0.92) brightness(0.94);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02)),
    #0b0d12;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 9, 13, 0.28), rgba(7, 9, 13, 0.1));
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video):hover,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video):focus-within {
  opacity: 1;
  filter: none;
  transform: translateX(-2px);
  border-color: rgba(49, 181, 123, 0.34);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video:hover,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video:focus-within {
  opacity: 1;
  filter: none;
  transform: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-card-backdrop {
  position: absolute;
  inset: -20px;
  z-index: 0;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  object-fit: cover;
  opacity: 0.46;
  filter: blur(22px) saturate(1.12) brightness(0.8);
  transform: scale(1.08);
  pointer-events: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-card-player {
  position: absolute;
  z-index: 1;
  opacity: 1;
  filter: none;
  background: #050609;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical .video-card-player,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-portrait .video-card-player {
  left: 50%;
  top: 12px;
  right: auto;
  bottom: auto;
  width: auto;
  height: calc(100% - 24px);
  max-width: calc(100% - 24px);
  transform: translateX(-50%);
  border-radius: 18px;
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.14);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-square .video-card-player {
  left: 50%;
  top: 50%;
  width: min(calc(100% - 24px), calc(100vh - 520px));
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-wide .video-card-player {
  left: 50%;
  top: 50%;
  width: calc(100% - 28px);
  height: auto;
  transform: translate(-50%, -50%);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) .video-card-player,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(1px);
  opacity: 0.72;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-video-unavailable .video-card-player,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-video-unavailable .video-card-backdrop {
  opacity: 0;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.is-video-unavailable::after {
  content: "视频预览已过期";
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.78);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.1), transparent 28%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 12px),
    #0a0c12;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 850;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card span {
  left: 12px;
  bottom: 12px;
  z-index: 6;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card small {
  left: 12px;
  right: 12px;
  top: 12px;
  z-index: 6;
}

/* Video review layout final: app-style preview surface, not a decorative black stage. */
@supports selector(.page-video:has([data-video-result])) {
  .page-video:has([data-video-result]) .video-reference-wall {
    height: clamp(46px, 4vw, 54px);
  }
}

.page-video .video-task-result.multi-video-task-result {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "head actions"
    "preview preview";
  gap: 10px 12px;
  margin: 12px 0 10px;
  padding: 12px;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.74);
  background:
    radial-gradient(circle at 14% 0, rgba(191, 154, 98, 0.15), transparent 26%),
    radial-gradient(circle at 86% 0, rgba(71, 120, 255, 0.14), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 247, 250, 0.84));
  box-shadow:
    0 22px 58px rgba(31, 36, 48, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.page-video .video-task-result.multi-video-task-result::before {
  display: none;
}

.page-video .video-task-result.multi-video-task-result .video-result-head {
  grid-area: head;
  min-width: 0;
}

.page-video .video-task-result.multi-video-task-result .video-result-head strong {
  max-width: 620px;
  overflow: hidden;
  color: #151719;
  font-size: 17px;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-video .video-task-result.multi-video-task-result .video-result-head em {
  min-height: 28px;
  color: #151719;
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(35, 42, 54, 0.08);
}

.page-video .video-task-result.multi-video-task-result .video-result-actions {
  grid-area: actions;
  align-self: center;
  justify-content: flex-end;
  padding: 0;
}

.page-video .video-task-result.multi-video-task-result .video-result-actions button {
  min-height: 30px;
  color: #151719;
  background: rgba(255, 255, 255, 0.76);
  border-color: rgba(35, 42, 54, 0.08);
  box-shadow: 0 10px 22px rgba(31, 36, 48, 0.06);
}

.page-video .video-task-result.multi-video-task-result .video-result-actions button:hover,
.page-video .video-task-result.multi-video-task-result .video-result-actions button:focus-visible {
  color: #fff;
  background: #111317;
  border-color: #111317;
  transform: translateY(-1px);
}

.page-video .video-task-result.multi-video-task-result .video-live-strip,
.page-video .video-task-result.multi-video-task-result .video-result-meta {
  z-index: 8;
  grid-area: preview;
  align-self: end;
  margin: 0 10px 10px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(9, 11, 16, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(16px);
}

.page-video .video-task-result.multi-video-task-result .video-live-strip {
  justify-self: start;
  width: min(380px, calc(100% - 324px));
  min-height: 34px;
  padding: 6px 8px 6px 10px;
  grid-template-columns: minmax(0, 1fr) 126px;
  gap: 10px;
}

.page-video .video-task-result.multi-video-task-result .video-live-main {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.page-video .video-task-result.multi-video-task-result .video-live-main span {
  padding: 4px 8px;
  color: #111317;
  background: rgba(255, 255, 255, 0.9);
  font-size: 10px;
}

.page-video .video-task-result.multi-video-task-result .video-live-main strong {
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
  font-weight: 760;
}

.page-video .video-task-result.multi-video-task-result .video-live-progress {
  grid-template-columns: minmax(0, 1fr) 34px;
}

.page-video .video-task-result.multi-video-task-result .video-live-progress i {
  height: 6px;
  background: rgba(255, 255, 255, 0.18);
}

.page-video .video-task-result.multi-video-task-result .video-live-progress i::after {
  background: linear-gradient(90deg, #fff, #8da0ff);
}

.page-video .video-task-result.multi-video-task-result .video-live-progress b {
  color: rgba(255, 255, 255, 0.86);
  font-size: 11px;
}

.page-video .video-task-result.multi-video-task-result .video-result-meta {
  justify-self: end;
  display: flex;
  width: fit-content;
  max-width: min(520px, calc(100% - 420px));
  padding: 5px;
  gap: 4px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.page-video .video-task-result.multi-video-task-result .video-result-meta span {
  padding: 5px 7px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.08);
  font-size: 11px;
  white-space: nowrap;
}

.page-video .video-task-result.multi-video-task-result .video-result-meta span:first-child,
.page-video .video-task-result.multi-video-task-result .video-result-meta span:nth-child(3) {
  display: none;
}

.page-video .video-task-result.multi-video-task-result .video-result-grid.generate-video-result.multi-video-result {
  position: relative;
  z-index: 1;
  grid-area: preview;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(170px, 17vw, 216px);
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 10px;
  height: clamp(248px, 32vh, 282px);
  min-height: 248px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(35, 42, 54, 0.08);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(249, 250, 252, 0.96), rgba(229, 234, 243, 0.82)),
    radial-gradient(circle at 38% 18%, rgba(255, 255, 255, 0.86), transparent 34%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.78),
    0 18px 42px rgba(31, 36, 48, 0.08);
  perspective: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result::before,
.page-video .video-result-grid.generate-video-result.multi-video-result::after {
  display: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video),
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.ratio-vertical,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.ratio-portrait,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.ratio-square,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.ratio-wide,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-portrait,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-square,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-wide,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(2),
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(3),
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(4) {
  position: relative;
  inset: auto;
  left: auto;
  top: auto;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100% !important;
  min-width: 0;
  max-width: none;
  min-height: 0;
  padding: 0;
  opacity: 1;
  filter: none;
  transform: none;
  border-radius: 18px;
  border: 1px solid rgba(35, 42, 54, 0.09);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(245, 247, 251, 0.58)),
    #f4f6fa;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 14px 30px rgba(31, 36, 48, 0.08);
  overflow: hidden;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card::before,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video)::before,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video::before {
  content: attr(data-video-index);
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: #fff;
  background: rgba(17, 19, 23, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 850;
  backdrop-filter: blur(12px);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-portrait,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-square,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-wide {
  grid-column: 1;
  grid-row: 1 / 4;
  z-index: 3;
  border-radius: 20px;
  border-color: rgba(17, 19, 23, 0.1);
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.12), transparent 32%),
    linear-gradient(145deg, #131720, #080a0f 72%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 22px 50px rgba(31, 36, 48, 0.18);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(4) {
  grid-column: 2;
  grid-row: 3;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(n + 5) {
  display: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) {
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video):hover,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video):focus-visible,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video):focus-within {
  transform: translateX(-2px);
  border-color: rgba(17, 19, 23, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 18px 34px rgba(31, 36, 48, 0.12);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video:hover,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video:focus-within {
  transform: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-card-backdrop {
  position: absolute;
  inset: -20px;
  z-index: 0;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  object-fit: cover;
  opacity: 0.44;
  filter: blur(22px) saturate(1.12) brightness(0.8);
  transform: scale(1.08);
  pointer-events: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-card-player {
  position: absolute;
  z-index: 2;
  opacity: 1;
  filter: none;
  background: #050609;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical .video-card-player,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-portrait .video-card-player {
  left: 50%;
  top: 10px;
  right: auto;
  bottom: auto;
  width: auto;
  height: calc(100% - 20px);
  max-width: calc(100% - 20px);
  transform: translateX(-50%);
  border-radius: 17px;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.12);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-square .video-card-player {
  left: 50%;
  top: 50%;
  width: min(calc(100% - 24px), calc(100vh - 500px));
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 17px;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-wide .video-card-player {
  left: 50%;
  top: 50%;
  width: calc(100% - 24px);
  height: auto;
  transform: translate(-50%, -50%);
  border-radius: 17px;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) .video-card-backdrop {
  opacity: 0.2;
  filter: blur(12px) saturate(1.05) brightness(0.92);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) .video-card-player,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  filter: saturate(0.98);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending {
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.92), transparent 34%),
    repeating-linear-gradient(135deg, rgba(35, 42, 54, 0.045) 0 1px, transparent 1px 12px),
    linear-gradient(145deg, rgba(246, 248, 252, 0.96), rgba(232, 236, 244, 0.72));
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending .video-progress-orbit {
  position: absolute;
  left: 50%;
  top: 46%;
  z-index: 3;
  display: grid;
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.96) 0 55%, transparent 56%),
    conic-gradient(#111317 calc(var(--video-progress, 0) * 1%), rgba(31, 36, 48, 0.1) 0);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending .video-card-status {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 11px;
  z-index: 4;
  display: grid;
  justify-items: start;
  gap: 2px;
  text-align: left;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending .video-card-status b {
  color: #151719;
  font-size: 12px;
  font-weight: 850;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending .video-card-status small {
  max-width: 100%;
  overflow: hidden;
  color: #787f8b;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 6;
  width: fit-content;
  padding: 5px 8px;
  color: #fff;
  background: rgba(17, 19, 23, 0.58);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 820;
  backdrop-filter: blur(12px);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card small {
  position: absolute;
  left: 46px;
  right: 12px;
  top: 12px;
  z-index: 6;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.76);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending span {
  display: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending:not(.is-main-video) .video-progress-orbit {
  display: grid;
  width: 32px;
  height: 32px;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending:not(.is-main-video) .video-card-status {
  left: 10px;
  right: 10px;
  bottom: 8px;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-video-unavailable .video-card-player,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-video-unavailable .video-card-backdrop {
  opacity: 0;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-video-unavailable::after {
  content: "视频预览已过期";
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  color: #151719;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.92), transparent 30%),
    repeating-linear-gradient(135deg, rgba(35, 42, 54, 0.045) 0 1px, transparent 1px 12px),
    linear-gradient(145deg, rgba(246, 248, 252, 0.98), rgba(229, 234, 243, 0.8));
  border-radius: inherit;
  font-size: 13px;
  font-weight: 850;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.is-video-unavailable::after {
  color: #151719;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.92), transparent 28%),
    repeating-linear-gradient(135deg, rgba(35, 42, 54, 0.045) 0 1px, transparent 1px 12px),
    linear-gradient(145deg, rgba(246, 248, 252, 0.98), rgba(226, 231, 240, 0.86));
  font-size: 14px;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending:not(.is-main-video),
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending {
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.92), transparent 34%),
    repeating-linear-gradient(135deg, rgba(35, 42, 54, 0.045) 0 1px, transparent 1px 12px),
    linear-gradient(145deg, rgba(246, 248, 252, 0.96), rgba(232, 236, 244, 0.72));
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending:not(.is-main-video)::after,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border: 0;
  border-radius: inherit;
  background:
    linear-gradient(100deg, transparent 0 34%, rgba(255, 255, 255, 0.52) 48%, transparent 62% 100%);
  opacity: 0.42;
  animation: loadingSweep 2.6s ease-in-out infinite;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending:not(.is-main-video) .video-progress-orbit,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending .video-progress-orbit {
  display: grid;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending:not(.is-main-video) .video-card-status,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending .video-card-status {
  display: grid;
  opacity: 1;
}

.page-video .video-task-result.multi-video-task-result .video-result-meta {
  justify-self: start;
  align-self: end;
  width: fit-content;
  max-width: calc(100% - 300px);
  margin: 0 0 18px 28px;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending .video-card-status {
  padding: 0;
  color: #151719;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending:not(.is-main-video) .video-progress-orbit {
  left: auto;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending:not(.is-main-video) .video-card-status {
  left: 44px;
  right: 52px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending:not(.is-main-video) .video-card-status small {
  display: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending:not(.is-main-video) .video-card-status b {
  overflow: hidden;
  color: #5e6570;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.is-video-unavailable {
  background:
    radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.7), transparent 32%),
    repeating-linear-gradient(135deg, rgba(35, 42, 54, 0.034) 0 1px, transparent 1px 14px),
    linear-gradient(145deg, rgba(248, 250, 253, 0.98), rgba(223, 229, 239, 0.86));
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical.is-video-unavailable::after,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-portrait.is-video-unavailable::after {
  inset: 10px auto auto 50%;
  width: min(34%, 150px);
  height: calc(100% - 20px);
  aspect-ratio: var(--video-ratio, 9 / 16);
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.84);
  background:
    radial-gradient(circle at 50% 32%, rgba(255, 255, 255, 0.12), transparent 30%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 12px),
    linear-gradient(145deg, #151923, #080a10 72%);
  border: 1px solid rgba(17, 19, 23, 0.18);
  box-shadow:
    0 18px 40px rgba(31, 36, 48, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-square.is-video-unavailable::after {
  inset: 16px auto auto 50%;
  width: min(46%, 188px);
  height: auto;
  aspect-ratio: 1;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.84);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 12px),
    linear-gradient(145deg, #151923, #080a10 72%);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-portrait {
  justify-self: center;
  width: auto !important;
  min-width: 0;
  max-width: none;
  aspect-ratio: var(--video-ratio, 9 / 16);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video .video-card-backdrop {
  display: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical .video-card-player,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-portrait .video-card-player {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  transform: none;
  border-radius: 18px;
  background: transparent;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video::after {
  background: linear-gradient(180deg, transparent 64%, rgba(13, 16, 24, 0.18));
}

.page-video .video-task-result.multi-video-task-result .video-result-grid.generate-video-result.multi-video-result {
  align-items: center;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical {
  align-self: center;
  width: clamp(132px, 10vw, 158px) !important;
  height: auto !important;
  aspect-ratio: var(--video-ratio, 9 / 16);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-portrait {
  align-self: center;
  width: clamp(172px, 15vw, 224px) !important;
  height: auto !important;
  aspect-ratio: var(--video-ratio, 3 / 4);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical .video-card-player,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-portrait .video-card-player {
  inset: 0;
  object-fit: contain;
  background: transparent;
  box-shadow:
    0 18px 34px rgba(31, 36, 48, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.22);
}

.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical.is-video-unavailable::after,
.page-video .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-portrait.is-video-unavailable::after {
  inset: 0;
  width: auto;
  height: auto;
  transform: none;
  color: #151719;
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.92), transparent 30%),
    repeating-linear-gradient(135deg, rgba(35, 42, 54, 0.045) 0 1px, transparent 1px 12px),
    linear-gradient(145deg, rgba(246, 248, 252, 0.98), rgba(229, 234, 243, 0.86));
}

/* Direct video task state: submitted / generating / completed must feel like a real backend job. */
@supports selector(.page-video:has(.direct-video-task-result)) {
  .page-video:has(.direct-video-task-result) .video-plan-stage {
    display: none;
  }
}

.page-video.has-direct-video-task .video-plan-stage {
  display: none;
}

.page-video .video-task-result.direct-video-task-result {
  grid-template-columns: minmax(270px, 0.34fr) minmax(0, 0.66fr);
  grid-template-areas:
    "head preview"
    "live preview"
    "rail preview"
    "meta preview"
    "actions preview";
  align-items: stretch;
  gap: 10px 16px;
  min-height: 312px;
  margin: 12px 0 10px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 26px;
  background:
    radial-gradient(circle at 16% 12%, rgba(191, 154, 98, 0.16), transparent 26%),
    radial-gradient(circle at 86% 20%, rgba(71, 120, 255, 0.16), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 247, 252, 0.86));
  box-shadow:
    0 26px 68px rgba(31, 36, 48, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.page-video .video-task-result.direct-video-task-result::before {
  display: none;
}

.page-video .direct-video-task-result .video-result-head {
  grid-area: head;
  align-items: flex-start;
}

.page-video .direct-video-task-result .video-result-head > div {
  display: grid;
  align-content: start;
  gap: 5px;
}

.page-video .direct-video-task-result .direct-video-mode-note {
  width: fit-content;
  padding: 4px 8px;
  color: rgba(17, 19, 23, 0.68);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 820;
  line-height: 1;
}

.page-video .direct-video-task-result .video-result-head strong {
  max-width: 360px;
  color: #111317;
  font-size: 20px;
  line-height: 1.18;
  white-space: normal;
}

.page-video .direct-video-task-result .video-result-subtitle {
  display: block;
  max-width: 420px;
  margin-top: 7px;
  color: #68707d;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.55;
}

.page-video .direct-video-task-result .video-result-head em {
  min-width: 58px;
  color: #111317;
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(31, 36, 48, 0.08);
}

.page-video .direct-video-task-result .video-live-strip {
  grid-area: live;
  display: grid !important;
  width: 100%;
  min-height: 62px;
  margin: 0;
  padding: 10px 12px;
  grid-template-columns: minmax(0, 1fr) 126px;
  color: #111317;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 18px;
  box-shadow: 0 16px 34px rgba(31, 36, 48, 0.06);
  backdrop-filter: blur(16px);
}

.page-video .direct-video-task-result .video-live-main {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.page-video .direct-video-task-result .video-live-main span {
  color: #fff;
  background: #111317;
  font-size: 11px;
}

.page-video .direct-video-task-result.video-task-completed .video-live-main span,
.page-video .direct-video-task-result.video-task-completed .direct-video-task-rail span.done i {
  background: #1f9d68;
}

.page-video .direct-video-task-result.video-task-failed .video-live-main span,
.page-video .direct-video-task-result.video-task-failed .direct-video-task-rail span.failed i {
  background: #d84e4e;
}

.page-video .direct-video-task-result .video-live-main strong {
  color: #313946;
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
}

.page-video .direct-video-task-result .video-live-progress i {
  background: rgba(31, 36, 48, 0.08);
}

.page-video .direct-video-task-result .video-live-progress i::after {
  background: linear-gradient(90deg, #111317, #315fe8);
}

.page-video .direct-video-task-result .video-live-progress b {
  color: #111317;
}

.page-video .direct-video-task-rail {
  grid-area: rail;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(31, 36, 48, 0.07);
  border-radius: 18px;
}

.page-video .direct-video-task-rail span {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  padding: 8px 4px 7px;
  color: #858c97;
  background: transparent;
  border-radius: 13px;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
}

.page-video .direct-video-task-rail span i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: #8f96a2;
  background: rgba(31, 36, 48, 0.08);
  border-radius: 50%;
  font-style: normal;
  font-size: 10px;
}

.page-video .direct-video-task-rail span.done,
.page-video .direct-video-task-rail span.active {
  color: #151719;
  background: rgba(255, 255, 255, 0.82);
}

.page-video .direct-video-task-rail span.done i,
.page-video .direct-video-task-rail span.active i {
  color: #fff;
  background: #111317;
}

.page-video .direct-video-task-rail span.active i {
  box-shadow: 0 0 0 6px rgba(17, 19, 23, 0.08);
}

.page-video .direct-video-task-result .video-result-meta {
  grid-area: meta;
  display: flex !important;
  align-self: start;
  justify-content: flex-start;
  max-width: 100%;
  margin: 0;
  gap: 6px;
  flex-wrap: wrap;
  overflow: visible;
}

.page-video .direct-video-task-result .video-result-meta span,
.page-video .direct-video-task-result .video-result-meta span:first-child,
.page-video .direct-video-task-result .video-result-meta span:nth-child(3) {
  display: inline-flex;
  padding: 6px 8px;
  color: rgba(17, 19, 23, 0.72);
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(31, 36, 48, 0.08);
  font-size: 11px;
  white-space: nowrap;
}

.page-video .direct-video-task-result .video-result-actions {
  grid-area: actions;
  align-self: end;
  justify-content: flex-start;
}

.page-video .direct-video-task-result .video-result-actions button {
  color: #111317;
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(31, 36, 48, 0.08);
}

.page-video .direct-video-task-result .video-result-actions button:hover,
.page-video .direct-video-task-result .video-result-actions button:focus-visible {
  color: #fff;
  background: #111317;
  border-color: #111317;
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result {
  grid-area: preview;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(158px, 17vw, 214px);
  grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: 8px;
  height: clamp(324px, 44vh, 430px);
  min-height: 324px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.9), transparent 34%),
    radial-gradient(circle at 18% 76%, rgba(49, 181, 123, 0.1), transparent 30%),
    radial-gradient(circle at 88% 22%, rgba(71, 120, 255, 0.16), transparent 32%),
    linear-gradient(145deg, rgba(248, 250, 254, 0.98), rgba(228, 234, 244, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    0 18px 44px rgba(31, 36, 48, 0.08);
  perspective: none;
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result::before,
.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result::after {
  display: none;
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card,
.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video,
.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video),
.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.ratio-vertical,
.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.ratio-portrait,
.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.ratio-square,
.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.ratio-wide,
.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(2),
.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(3),
.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(4),
.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(n + 5) {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100% !important;
  height: 100% !important;
  min-width: 0;
  max-width: none;
  min-height: 0;
  padding: 0;
  opacity: 1;
  filter: none;
  transform: none !important;
  cursor: default;
  border: 1px solid rgba(31, 36, 48, 0.09);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(244, 247, 252, 0.62)),
    #f5f7fb;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    0 14px 32px rgba(31, 36, 48, 0.08);
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video {
  grid-column: 1;
  grid-row: 1 / -1;
  z-index: 3;
  border-radius: 22px;
  border-color: rgba(17, 19, 23, 0.12);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(234, 239, 248, 0.72)),
    #f6f8fb;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 24px 54px rgba(31, 36, 48, 0.12);
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(2) {
  grid-column: 2;
  grid-row: auto;
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(3) {
  grid-column: 2;
  grid-row: auto;
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(4) {
  grid-column: 2;
  grid-row: auto;
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(n + 5) {
  grid-column: 2;
  grid-row: auto;
  display: grid;
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card::before {
  content: attr(data-video-index);
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  color: #fff;
  background: rgba(17, 19, 23, 0.72);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 880;
  box-shadow: none;
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video::before {
  content: "主输出";
  width: auto;
  min-width: 54px;
  padding: 0 10px;
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending .video-card-pulse {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.72), transparent 30%),
    linear-gradient(100deg, transparent 0 32%, rgba(255, 255, 255, 0.64) 46%, transparent 60% 100%);
  opacity: 0.7;
  animation: loadingSweep 2.55s ease-in-out infinite;
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending::after {
  display: none;
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending .video-progress-orbit,
.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending span,
.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending small,
.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending .video-card-status {
  display: grid !important;
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending .video-card-status {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 4;
  justify-items: start;
  gap: 4px;
  padding: 0;
  color: #151719;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending .video-card-status b {
  color: #151719;
  font-size: 13px;
  font-weight: 860;
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending .video-card-status small {
  position: static;
  max-width: 100%;
  overflow: hidden;
  color: #68707d;
  font-size: 11px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending .video-progress-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  z-index: 4;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.98) 0 55%, transparent 56%),
    conic-gradient(#111317 calc(var(--video-progress, 0) * 1%), rgba(31, 36, 48, 0.1) 0);
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending:not(.is-main-video) .video-progress-orbit {
  width: 34px;
  height: 34px;
  right: 12px;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending:not(.is-main-video) .video-card-status {
  left: 14px;
  right: 54px;
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending:not(.is-main-video) .video-card-status small {
  display: none !important;
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.pending span {
  position: absolute;
  left: 18px;
  top: 52px;
  bottom: auto;
  z-index: 4;
  width: fit-content;
  color: #151719;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(31, 36, 48, 0.08);
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.ready {
  background: #050609;
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.ready video,
.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.ready img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #050609;
  border-radius: inherit;
}

@media (max-width: 1180px) {
  .page-video .video-task-result.direct-video-task-result {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "live"
      "rail"
      "meta"
      "preview"
      "actions";
  }

  .page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result {
    height: 300px;
  }
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result {
  grid-template-columns: max-content max-content !important;
  grid-template-rows: repeat(3, auto) !important;
  align-content: center;
  align-items: center;
  justify-content: center;
  justify-items: center;
  width: fit-content;
  max-width: 100%;
  height: auto;
  min-height: 0;
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card,
.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video,
.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) {
  width: clamp(76px, 7vw, 96px) !important;
  height: clamp(101px, 9.34vw, 128px) !important;
  aspect-ratio: var(--video-ratio, 9 / 16);
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: clamp(210px, 19vw, 270px) !important;
  height: clamp(280px, 25.34vw, 360px) !important;
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical {
  width: clamp(164px, 15vw, 220px) !important;
  height: clamp(292px, 26.67vw, 391px) !important;
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-square {
  width: clamp(230px, 21vw, 310px) !important;
  height: clamp(230px, 21vw, 310px) !important;
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-wide {
  width: clamp(340px, 34vw, 520px) !important;
  height: clamp(191px, 19.13vw, 293px) !important;
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ratio-vertical {
  width: clamp(58px, 5.4vw, 78px) !important;
  height: clamp(103px, 9.6vw, 139px) !important;
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ratio-square {
  width: clamp(84px, 7vw, 104px) !important;
  height: clamp(84px, 7vw, 104px) !important;
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ratio-wide {
  width: clamp(126px, 11vw, 168px) !important;
  height: clamp(71px, 6.2vw, 95px) !important;
}

.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.ready video,
.page-video .direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.ready img {
  object-fit: cover;
}

/* Direct video results should collapse to the requested media ratio instead of stretching a full-width stage. */
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result {
  align-self: center;
  justify-self: center;
  width: fit-content !important;
  max-width: 100%;
  min-width: 0;
  height: auto !important;
  min-height: 0 !important;
  padding: 8px;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.single-video-result {
  grid-template-columns: max-content !important;
  grid-template-rows: max-content !important;
  justify-content: center;
  justify-items: center;
  align-content: center;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result {
  grid-template-columns: max-content max-content !important;
  grid-template-rows: repeat(3, max-content) !important;
  justify-content: center;
  justify-items: center;
  align-content: center;
  align-items: center;
  width: fit-content !important;
  max-width: 100%;
  height: auto !important;
  min-height: 0 !important;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.single-video-result .video-result-card,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) {
  position: relative !important;
  inset: auto !important;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.single-video-result .video-result-card,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.single-video-result .video-result-card.ratio-vertical,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.single-video-result .video-result-card.ratio-portrait {
  width: clamp(220px, 24vw, 320px) !important;
  aspect-ratio: var(--video-ratio, 3 / 4) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.single-video-result .video-result-card.ratio-square {
  width: clamp(240px, 24vw, 320px) !important;
  aspect-ratio: var(--video-ratio, 1 / 1) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.single-video-result .video-result-card.ratio-wide {
  width: clamp(320px, 34vw, 560px) !important;
  aspect-ratio: var(--video-ratio, 16 / 9) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: clamp(220px, 24vw, 320px) !important;
  aspect-ratio: var(--video-ratio, 3 / 4) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-square {
  width: clamp(240px, 24vw, 320px) !important;
  aspect-ratio: var(--video-ratio, 1 / 1) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-wide {
  width: clamp(320px, 34vw, 560px) !important;
  aspect-ratio: var(--video-ratio, 16 / 9) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) {
  width: clamp(84px, 8vw, 120px) !important;
  aspect-ratio: var(--video-ratio, 3 / 4) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ratio-square {
  width: clamp(92px, 8vw, 116px) !important;
  aspect-ratio: var(--video-ratio, 1 / 1) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ratio-wide {
  width: clamp(128px, 11vw, 176px) !important;
  aspect-ratio: var(--video-ratio, 16 / 9) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.single-video-result .video-card-backdrop,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card .video-card-backdrop {
  inset: 0 !important;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0.22;
  filter: blur(16px) saturate(1.04) brightness(0.9);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.single-video-result .video-card-player,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.ready .video-card-player {
  object-fit: contain;
  background: #050609;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.single-video-result .video-result-card video,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.single-video-result .video-result-card img,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card video,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card img {
  border-radius: inherit;
}

/* Direct video player only: main video on the left, selectable videos on the right. */
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result {
  grid-area: preview;
  display: grid;
  grid-template-columns: max-content clamp(112px, 10vw, 146px) !important;
  grid-template-rows: repeat(3, max-content) !important;
  gap: 10px;
  align-content: start;
  align-items: start;
  justify-content: start;
  justify-items: stretch;
  justify-self: start;
  width: fit-content !important;
  max-width: 100%;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(245, 247, 252, 0.58)),
    #f4f6fb;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 18px 44px rgba(31, 36, 48, 0.08);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  z-index: 1;
  grid-column: 2;
  grid-row: auto;
  align-self: start !important;
  justify-self: start !important;
  width: clamp(84px, 8.6vw, 126px) !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: var(--video-ratio, 3 / 4) !important;
  opacity: 0.86;
  filter: none;
  transform: none !important;
  cursor: pointer;
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 10px 24px rgba(31, 36, 48, 0.12);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video {
  grid-column: 1;
  grid-row: 1 / span 3;
  z-index: 3;
  align-self: start !important;
  justify-self: start !important;
  width: clamp(300px, 32vw, 430px) !important;
  height: auto !important;
  aspect-ratio: var(--video-ratio, 3 / 4) !important;
  opacity: 1;
  cursor: default;
  border-radius: 22px;
  box-shadow:
    0 24px 54px rgba(31, 36, 48, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.2);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical {
  width: clamp(220px, 24vw, 320px) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-square {
  width: clamp(320px, 34vw, 480px) !important;
  aspect-ratio: var(--video-ratio, 1 / 1) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-wide {
  width: clamp(520px, 54vw, 760px) !important;
  aspect-ratio: var(--video-ratio, 16 / 9) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ratio-vertical {
  width: clamp(68px, 7vw, 96px) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ratio-square {
  width: clamp(92px, 8vw, 112px) !important;
  aspect-ratio: var(--video-ratio, 1 / 1) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ratio-wide {
  width: clamp(124px, 11vw, 154px) !important;
  aspect-ratio: var(--video-ratio, 16 / 9) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video):hover,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video):focus-within {
  opacity: 1;
  transform: translateX(-2px) !important;
  border-color: rgba(17, 19, 23, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 14px 30px rgba(31, 36, 48, 0.18);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video::before {
  content: "正在播放";
  top: 12px;
  left: 12px;
  width: auto;
  min-width: 0;
  height: 26px;
  padding: 0 10px;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video)::before {
  content: attr(data-video-index);
  top: 10px;
  left: 10px;
  width: 24px;
  height: 24px;
  padding: 0;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(n + 5) {
  display: none;
}

@media (max-width: 1180px) {
  .page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result {
    grid-template-columns: max-content clamp(92px, 18vw, 124px) !important;
  }

  .page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video {
    width: clamp(240px, 46vw, 360px) !important;
  }
}

/* Polished direct-video player: keep the existing task card, refine only the playback module. */
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result {
  --video-main-w: clamp(260px, 26vw, 348px);
  --video-side-w: clamp(82px, 7.2vw, 104px);
  grid-template-columns: var(--video-main-w) var(--video-side-w) !important;
  grid-template-rows: repeat(3, max-content) !important;
  gap: 10px 12px;
  align-content: center;
  align-items: start;
  justify-content: center;
  justify-items: start;
  width: fit-content !important;
  max-width: 100%;
  margin-inline: auto;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 22px;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.78), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(238, 242, 249, 0.7));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 18px 42px rgba(31, 36, 48, 0.08);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 36%),
    #06070a;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: var(--video-main-w) !important;
  height: auto !important;
  aspect-ratio: var(--video-ratio, 3 / 4) !important;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  box-shadow:
    0 22px 46px rgba(17, 19, 23, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical {
  --video-main-w: clamp(220px, 21vw, 292px);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-square {
  --video-main-w: clamp(300px, 30vw, 420px);
  aspect-ratio: var(--video-ratio, 1 / 1) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-wide {
  --video-main-w: clamp(430px, 48vw, 640px);
  aspect-ratio: var(--video-ratio, 16 / 9) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) {
  grid-column: 2;
  grid-row: auto;
  align-self: start !important;
  justify-self: start !important;
  width: var(--video-side-w) !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: var(--video-ratio, 3 / 4) !important;
  opacity: 0.74;
  border: 1px solid rgba(31, 36, 48, 0.12);
  border-radius: 15px;
  filter: saturate(0.9) brightness(0.9);
  transform: none !important;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 10px 22px rgba(31, 36, 48, 0.1);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ratio-vertical {
  --video-side-w: clamp(64px, 5.8vw, 84px);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ratio-square {
  --video-side-w: clamp(86px, 7vw, 104px);
  aspect-ratio: var(--video-ratio, 1 / 1) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ratio-wide {
  --video-side-w: clamp(112px, 10vw, 142px);
  aspect-ratio: var(--video-ratio, 16 / 9) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video):hover,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video):focus-within {
  opacity: 1;
  filter: none;
  transform: translateX(-3px) !important;
  border-color: rgba(17, 19, 23, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 14px 28px rgba(31, 36, 48, 0.16);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video::before {
  content: "正在播放";
  top: 12px;
  left: 12px;
  width: auto;
  min-width: 0;
  height: 25px;
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(7, 9, 13, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
  backdrop-filter: blur(14px);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video)::before {
  content: attr(data-video-index);
  top: 9px;
  left: 9px;
  width: 23px;
  height: 23px;
  padding: 0;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(7, 9, 13, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
  backdrop-filter: blur(12px);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.ready::after {
  background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.46));
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ready::after {
  display: block;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.16), transparent 26%),
    linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, 0.58));
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-card-player,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.ready img {
  object-fit: cover;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video .video-card-player,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ready img {
  object-fit: contain;
  background: #06070a;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) span,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) small {
  display: none;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video span {
  left: 14px;
  bottom: 14px;
  padding: 6px 9px;
  background: rgba(7, 9, 13, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video small {
  right: 14px;
  bottom: 14px;
  padding: 6px 9px;
  background: rgba(7, 9, 13, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  backdrop-filter: blur(14px);
}

/* Final direct-video player pass: keep the task shell, make the player feel like a real preview deck. */
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result {
  --video-main-w: clamp(360px, 36vw, 520px);
  --video-thumb-w: clamp(108px, 9.2vw, 132px);
  display: grid;
  grid-template-columns: var(--video-main-w) var(--video-thumb-w) !important;
  grid-template-rows: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px 12px;
  align-content: center;
  justify-content: center;
  width: min(100%, calc(var(--video-main-w) + var(--video-thumb-w) + 48px)) !important;
  min-height: auto;
  height: auto;
  margin-inline: auto;
  padding: 14px;
  overflow: hidden;
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(242, 245, 251, 0.72)),
    #f7f8fb;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 18px 44px rgba(31, 36, 48, 0.08);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video),
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.ratio-vertical,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.ratio-portrait,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.ratio-square,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.ratio-wide,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(2),
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(3),
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:nth-child(4) {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1;
  display: block;
  min-width: 0;
  max-width: none;
  min-height: 0;
  max-height: none;
  opacity: 1;
  transform: none !important;
  filter: none;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: var(--video-main-w) !important;
  height: auto !important;
  aspect-ratio: var(--video-ratio, 3 / 4) !important;
  align-self: center !important;
  justify-self: center !important;
  overflow: hidden;
  border: 1px solid rgba(17, 19, 23, 0.12);
  border-radius: 22px;
  background: #090b10;
  box-shadow:
    0 24px 54px rgba(17, 19, 23, 0.18),
    0 0 0 6px rgba(255, 255, 255, 0.68);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.media-wide,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-wide {
  --video-main-w: clamp(500px, 48vw, 660px);
  aspect-ratio: var(--video-ratio, 16 / 9) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.media-square,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-square {
  --video-main-w: clamp(380px, 35vw, 500px);
  aspect-ratio: var(--video-ratio, 1 / 1) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.media-portrait,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-portrait,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical {
  --video-main-w: clamp(330px, 30vw, 430px);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) {
  grid-column: 2;
  grid-row: auto;
  width: var(--video-thumb-w) !important;
  height: auto !important;
  aspect-ratio: var(--video-ratio, 3 / 4) !important;
  align-self: center !important;
  justify-self: center !important;
  overflow: hidden;
  border: 1px solid rgba(17, 19, 23, 0.12);
  border-radius: 17px;
  background: #111317;
  cursor: pointer;
  box-shadow:
    0 10px 24px rgba(31, 36, 48, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).media-wide,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ratio-wide {
  aspect-ratio: var(--video-ratio, 16 / 9) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video):hover,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video):focus-within {
  transform: translateX(-3px) !important;
  border-color: rgba(17, 19, 23, 0.32);
  box-shadow:
    0 16px 30px rgba(31, 36, 48, 0.18),
    0 0 0 3px rgba(255, 255, 255, 0.74);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-card-backdrop {
  display: none !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-card-player,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.ready img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  background: #090b10;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video .video-card-player,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ready img {
  object-fit: cover;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video::before {
  content: "正在播放";
  top: 12px;
  left: 12px;
  width: auto;
  min-width: 0;
  height: 26px;
  padding: 0 10px;
  color: rgba(255, 255, 255, 0.94);
  background: rgba(9, 11, 16, 0.54);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  box-shadow: none;
  backdrop-filter: blur(14px);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video)::before {
  content: attr(data-video-index);
  top: 8px;
  left: 8px;
  width: 23px;
  height: 23px;
  padding: 0;
  color: #fff;
  background: rgba(9, 11, 16, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  box-shadow: none;
  backdrop-filter: blur(12px);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ready::after {
  display: block;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), transparent 26%),
    linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, 0.56));
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ready::after {
  display: block;
  background: linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, 0.48));
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) span,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) small {
  display: none !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video span {
  left: 14px;
  bottom: 14px;
  padding: 6px 10px;
  color: rgba(255, 255, 255, 0.94);
  background: rgba(9, 11, 16, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  backdrop-filter: blur(14px);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video small {
  right: 14px;
  bottom: 14px;
  max-width: calc(100% - 120px);
  padding: 6px 10px;
  color: rgba(255, 255, 255, 0.94);
  background: rgba(9, 11, 16, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  backdrop-filter: blur(14px);
}

@media (max-width: 1180px) {
  .page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result {
    --video-main-w: clamp(290px, 44vw, 420px);
    --video-thumb-w: clamp(84px, 14vw, 112px);
    padding: 12px;
  }
}

/* Video-theater correction: direct video uses a familiar wide player with soft media fill. */
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result {
  --video-main-w: clamp(430px, 37vw, 520px);
  --video-thumb-w: clamp(112px, 9.4vw, 132px);
  grid-template-columns: var(--video-main-w) var(--video-thumb-w) !important;
  grid-template-rows: repeat(3, minmax(0, auto)) !important;
  gap: 10px 12px;
  align-items: center;
  width: min(100%, calc(var(--video-main-w) + var(--video-thumb-w) + 52px)) !important;
  padding: 12px;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.media-portrait,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-portrait,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.media-square,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-square,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.media-wide,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-wide {
  width: var(--video-main-w) !important;
  aspect-ratio: 16 / 9 !important;
  background: #0a0c10;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video),
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).media-portrait,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ratio-portrait,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ratio-vertical,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).media-square,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ratio-square,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).media-wide,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ratio-wide {
  width: var(--video-thumb-w) !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 14px;
  background: #101319;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video .video-card-backdrop {
  position: absolute;
  inset: -24px;
  z-index: 0;
  display: block !important;
  width: calc(100% + 48px) !important;
  height: calc(100% + 48px) !important;
  object-fit: cover;
  opacity: 0.72;
  filter: blur(24px) saturate(1.14) brightness(0.72);
  transform: scale(1.08);
  pointer-events: none;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) .video-card-backdrop {
  display: none !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video .video-card-player,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ready img {
  z-index: 2;
  left: 50%;
  top: 0;
  right: auto;
  bottom: auto;
  width: auto !important;
  height: 100% !important;
  max-width: 100%;
  object-fit: contain;
  background: transparent;
  transform: translateX(-50%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 18px 34px rgba(0, 0, 0, 0.22);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.media-wide .video-card-player,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-wide .video-card-player {
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transform: none;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) .video-card-player,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ready img {
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transform: scale(1.08);
  background: #101319;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ready::after {
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 28%),
    linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, 0.56));
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ready::after {
  z-index: 2;
  background: linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.52));
}

@media (max-width: 1180px) {
  .page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result {
    --video-main-w: clamp(320px, 46vw, 440px);
    --video-thumb-w: clamp(92px, 13vw, 112px);
  }
}

/* Direct video player final polish: keep the accepted task shell, make only the player ratio-faithful. */
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result {
  grid-area: preview;
  align-self: center;
  justify-self: center;
  width: fit-content !important;
  max-width: 100%;
  height: auto !important;
  min-height: 0 !important;
  padding: 10px;
  overflow: visible;
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(242, 245, 251, 0.74)),
    #f7f8fb;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 18px 44px rgba(31, 36, 48, 0.08);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result {
  --video-main-w: clamp(292px, 24vw, 330px);
  --video-thumb-w: clamp(92px, calc(var(--video-main-w) / 3.12), 108px);
  display: grid;
  grid-template-columns: var(--video-main-w) var(--video-thumb-w) !important;
  grid-template-rows: repeat(3, auto) !important;
  gap: 10px 12px;
  align-content: center;
  align-items: center;
  justify-content: center;
  justify-items: center;
  width: min(100%, calc(var(--video-main-w) + var(--video-thumb-w) + 42px)) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.single-video-result {
  --video-main-w: clamp(300px, 28vw, 360px);
  display: grid;
  grid-template-columns: var(--video-main-w) !important;
  grid-template-rows: auto !important;
  place-items: center;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card.is-main-video,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card:not(.is-main-video),
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card.ratio-vertical,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card.ratio-portrait,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card.ratio-square,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card.ratio-wide,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card:nth-child(2),
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card:nth-child(3),
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card:nth-child(4) {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 1;
  display: block;
  min-width: 0;
  max-width: none;
  min-height: 0;
  max-height: none;
  aspect-ratio: var(--video-ratio, 3 / 4) !important;
  overflow: hidden;
  opacity: 1;
  filter: none;
  transform: none !important;
  border: 1px solid rgba(17, 19, 23, 0.12);
  border-radius: 20px;
  background: #f2f5f9;
  box-shadow:
    0 18px 38px rgba(31, 36, 48, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.72);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card.is-main-video {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: var(--video-main-w) !important;
  height: auto !important;
  justify-self: center !important;
  align-self: center !important;
  cursor: default;
  border-radius: 22px;
  box-shadow:
    0 24px 54px rgba(31, 36, 48, 0.16),
    0 0 0 6px rgba(255, 255, 255, 0.66);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.single-video-result .video-result-card.is-main-video,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.single-video-result .video-result-card {
  width: var(--video-main-w) !important;
  height: auto !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card.is-main-video.media-wide,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card.is-main-video.ratio-wide {
  --video-main-w: clamp(430px, 42vw, 600px);
  aspect-ratio: var(--video-ratio, 16 / 9) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card.is-main-video.media-square,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card.is-main-video.ratio-square {
  --video-main-w: clamp(310px, 28vw, 390px);
  aspect-ratio: var(--video-ratio, 1 / 1) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card.is-main-video.media-portrait,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card.is-main-video.ratio-portrait,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card.is-main-video.ratio-vertical {
  --video-main-w: clamp(292px, 24vw, 330px);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) {
  grid-column: 2;
  grid-row: auto;
  width: var(--video-thumb-w) !important;
  height: auto !important;
  justify-self: center !important;
  align-self: center !important;
  cursor: pointer;
  border-radius: 16px;
  box-shadow:
    0 10px 24px rgba(31, 36, 48, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.68);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).media-wide,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ratio-wide {
  aspect-ratio: var(--video-ratio, 16 / 9) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).media-square,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ratio-square {
  aspect-ratio: var(--video-ratio, 1 / 1) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video):hover,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video):focus-within {
  transform: translateX(-3px) !important;
  border-color: rgba(17, 19, 23, 0.28);
  box-shadow:
    0 16px 30px rgba(31, 36, 48, 0.18),
    0 0 0 3px rgba(255, 255, 255, 0.78);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-card-backdrop {
  display: none !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card.ready .video-card-player,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card.ready img {
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  z-index: 1;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  background: #f2f5f9;
  border-radius: inherit;
  box-shadow: none;
  transform: none;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card:not(.is-main-video) .video-card-player {
  pointer-events: none;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card.ready::after,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card.is-main-video.ready::after,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card:not(.is-main-video).ready::after {
  display: none !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card.ready span,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card.ready small {
  display: none !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card.is-main-video::before {
  display: none !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video)::before {
  content: attr(data-video-index);
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  color: #fff;
  background: rgba(17, 19, 23, 0.56);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 820;
  line-height: 1;
  box-shadow: none;
  backdrop-filter: blur(12px);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result .video-result-card.pending {
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.3) 0 34%, rgba(255, 255, 255, 0.78) 48%, rgba(255, 255, 255, 0.32) 64% 100%),
    linear-gradient(145deg, rgba(247, 249, 253, 0.98), rgba(231, 236, 246, 0.84));
}

@media (max-width: 1180px) {
  .page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result {
    --video-main-w: clamp(260px, 44vw, 320px);
    --video-thumb-w: clamp(78px, calc(var(--video-main-w) / 3.12), 102px);
  }
}

/* Hard stop for older theater rules: vertical direct-video outputs must not be forced into 16:9. */
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.media-portrait,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-portrait,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-vertical {
  width: var(--video-main-w) !important;
  height: auto !important;
  aspect-ratio: var(--video-ratio, 3 / 4) !important;
  background: #f2f5f9 !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).media-portrait,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ratio-portrait,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ratio-vertical {
  width: var(--video-thumb-w) !important;
  height: auto !important;
  aspect-ratio: var(--video-ratio, 3 / 4) !important;
  background: #f2f5f9 !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.media-square,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-square {
  width: var(--video-main-w) !important;
  height: auto !important;
  aspect-ratio: var(--video-ratio, 1 / 1) !important;
  background: #f2f5f9 !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).media-square,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ratio-square {
  width: var(--video-thumb-w) !important;
  height: auto !important;
  aspect-ratio: var(--video-ratio, 1 / 1) !important;
  background: #f2f5f9 !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.media-wide,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ratio-wide {
  width: clamp(430px, 42vw, 600px) !important;
  height: auto !important;
  aspect-ratio: var(--video-ratio, 16 / 9) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).media-wide,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ratio-wide {
  width: clamp(112px, 10vw, 142px) !important;
  height: auto !important;
  aspect-ratio: var(--video-ratio, 16 / 9) !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.ready .video-card-backdrop,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.single-video-result .video-result-card.ready .video-card-backdrop {
  display: none !important;
  opacity: 0 !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.ready .video-card-player,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.ready img,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ready .video-card-player,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ready img,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.single-video-result .video-result-card.ready .video-card-player,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.single-video-result .video-result-card.ready img {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  background: #f2f5f9 !important;
  border-radius: inherit !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Direct video result deck: keep the player compact, ratio-true, and left-heavy. */
.page-video .video-task-result.direct-video-task-result {
  width: min(100%, 1080px);
  justify-self: start;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result {
  --video-main-w: clamp(360px, 33vw, 448px);
  --video-thumb-w: clamp(108px, 9.2vw, 132px);
  grid-area: preview;
  display: grid;
  grid-template-columns: var(--video-main-w) var(--video-thumb-w) !important;
  grid-template-rows: repeat(3, minmax(0, auto)) !important;
  align-items: start;
  justify-content: start;
  align-content: start;
  gap: 10px 12px;
  width: min(100%, calc(var(--video-main-w) + var(--video-thumb-w) + 40px)) !important;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(244, 247, 252, 0.74)),
    #f7f8fb;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 18px 44px rgba(31, 36, 48, 0.08);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  min-width: 0;
  min-height: 0 !important;
  overflow: hidden;
  opacity: 1;
  filter: none;
  transform: none !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: var(--video-main-w) !important;
  height: auto !important;
  aspect-ratio: var(--video-ratio, 3 / 4) !important;
  border: 1px solid rgba(17, 19, 23, 0.12);
  border-radius: 22px;
  background: #eef2f7 !important;
  box-shadow:
    0 24px 54px rgba(31, 36, 48, 0.14),
    0 0 0 6px rgba(255, 255, 255, 0.66);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) {
  grid-column: 2;
  width: var(--video-thumb-w) !important;
  height: auto !important;
  aspect-ratio: var(--video-ratio, 3 / 4) !important;
  border: 1px solid rgba(17, 19, 23, 0.11);
  border-radius: 17px;
  background: #eef2f7 !important;
  cursor: pointer;
  box-shadow:
    0 10px 24px rgba(31, 36, 48, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.74);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video):hover,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video):focus-within {
  transform: translateX(-2px) !important;
  border-color: rgba(17, 19, 23, 0.28);
  box-shadow:
    0 16px 30px rgba(31, 36, 48, 0.16),
    0 0 0 3px rgba(255, 255, 255, 0.78);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-card-backdrop {
  display: none !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.ready .video-card-player,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.ready img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  background: #eef2f7 !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ready .video-card-player,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ready img {
  object-fit: contain !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.ready::after,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ready::after,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video).ready::after {
  display: none !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video::before,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video)::before {
  color: #fff;
  background: rgba(17, 19, 23, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: none;
  backdrop-filter: blur(12px);
}

@media (max-width: 1180px) {
  .page-video .video-task-result.direct-video-task-result {
    width: 100%;
  }

  .page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result {
    --video-main-w: clamp(300px, 46vw, 420px);
    --video-thumb-w: clamp(84px, 13vw, 112px);
  }
}

/* Direct video result card: final player composition, scoped away from the console input. */
.page-video .video-task-result.direct-video-task-result {
  grid-template-columns: minmax(0, 0.64fr) minmax(300px, 0.36fr) !important;
  grid-template-areas:
    "preview head"
    "preview live"
    "preview rail"
    "preview meta"
    "preview actions" !important;
  align-items: start;
  gap: 10px 16px;
  width: min(100%, 1080px);
  padding: 14px 16px;
}

.page-video .video-task-result.direct-video-task-result .video-result-head {
  align-self: end;
}

.page-video .video-task-result.direct-video-task-result .video-result-head strong {
  max-width: 300px;
  font-size: 19px;
  line-height: 1.2;
}

.page-video .video-task-result.direct-video-task-result .video-result-subtitle {
  max-width: 310px;
}

.page-video .direct-video-task-result .video-live-strip {
  grid-template-columns: minmax(0, 1fr);
  min-height: 56px;
  padding: 10px;
}

.page-video .direct-video-task-result .video-live-progress {
  display: none;
}

.page-video .direct-video-task-rail {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.page-video .direct-video-task-result .video-result-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.page-video .direct-video-task-result .video-result-actions button {
  min-width: 0;
  padding-inline: 10px;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result {
  --video-main-w: clamp(360px, 33vw, 448px);
  --video-thumb-w: clamp(108px, 9.2vw, 132px);
  display: grid !important;
  grid-template-columns: var(--video-main-w) var(--video-thumb-w) !important;
  grid-template-rows: repeat(3, minmax(0, auto)) !important;
  align-content: start;
  align-items: start;
  justify-content: start;
  justify-self: start;
  width: min(100%, calc(var(--video-main-w) + var(--video-thumb-w) + 40px)) !important;
  padding: 12px;
  overflow: hidden;
  border-color: rgba(31, 36, 48, 0.08);
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(242, 246, 252, 0.76)),
    #f7f8fb;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 20px 46px rgba(31, 36, 48, 0.1);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video {
  grid-column: 1;
  grid-row: 1 / span 3;
  width: var(--video-main-w) !important;
  height: auto !important;
  aspect-ratio: var(--video-ratio, 3 / 4) !important;
  overflow: hidden;
  border-color: rgba(17, 19, 23, 0.1);
  border-radius: 24px;
  background: #edf2f7 !important;
  box-shadow:
    0 26px 58px rgba(31, 36, 48, 0.16),
    0 0 0 6px rgba(255, 255, 255, 0.68);
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card:not(.is-main-video) {
  grid-column: 2;
  width: var(--video-thumb-w) !important;
  height: auto !important;
  aspect-ratio: var(--video-ratio, 3 / 4) !important;
  overflow: hidden;
  border-radius: 18px;
  background: #edf2f7 !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card .video-card-backdrop {
  display: none !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.ready .video-card-player,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.ready img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  background: #edf2f7 !important;
  transform: none !important;
}

.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ready .video-card-player,
.page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result .video-result-card.is-main-video.ready img {
  object-fit: contain !important;
}

@media (max-width: 1180px) {
  .page-video .video-task-result.direct-video-task-result {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "head"
      "preview"
      "live"
      "rail"
      "meta"
      "actions" !important;
    width: 100%;
  }

  .page-video .video-task-result.direct-video-task-result .video-result-grid.generate-video-result.multi-video-result {
    --video-main-w: clamp(300px, 46vw, 420px);
    --video-thumb-w: clamp(84px, 13vw, 112px);
    justify-self: center;
  }
}

/* Video task tray: compact like ecommerce task records, separate from the accepted input console. */
.page-video .video-task-result.video-result-minimized {
  display: none !important;
}

.page-video .video-task-history {
  display: grid;
  gap: 10px;
  margin: 10px 0 14px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 248, 251, 0.88));
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 20px;
  box-shadow: 0 18px 46px rgba(31, 36, 48, 0.1);
}

.page-video .video-task-history-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.page-video .video-task-history-toggle {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  text-align: left;
}

.page-video .video-task-history-toggle span {
  padding: 6px 9px;
  color: #fff;
  background: #111317;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 860;
}

.page-video .video-task-history-toggle strong {
  min-width: 0;
  overflow: hidden;
  color: #151820;
  font-size: 14px;
  font-weight: 880;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-video .video-task-history-toggle small {
  color: #727b88;
  font-size: 12px;
  font-weight: 760;
}

.page-video .video-task-history-actions {
  display: flex;
  gap: 6px;
}

.page-video .video-task-history-actions button,
.page-video .video-task-tray-delete {
  height: 30px;
  padding: 0 11px;
  color: #343a44;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.page-video .video-task-history-actions button:hover,
.page-video .video-task-history-actions button:focus-visible,
.page-video .video-task-tray-delete:hover,
.page-video .video-task-tray-delete:focus-visible {
  color: #fff;
  background: #111317;
  border-color: #111317;
  transform: translateY(-1px);
}

.page-video .video-task-tray-preview {
  display: flex;
  gap: 6px;
  min-width: 0;
}

.page-video .video-task-tray-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(238px, 0.32fr);
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.page-video .video-task-history.is-collapsed .video-task-tray-list {
  display: none;
}

.page-video .video-task-history.is-open .video-task-tray-preview {
  display: none;
}

.page-video .video-task-tray-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 7px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(31, 36, 48, 0.07);
  border-radius: 16px;
}

.page-video .video-task-tray-chip.active {
  border-color: rgba(17, 19, 23, 0.2);
  box-shadow: inset 0 0 0 1px rgba(17, 19, 23, 0.12);
}

.page-video .video-task-tray-main {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  text-align: left;
}

.page-video .video-task-tray-media {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 34px;
  gap: 3px;
  min-width: 0;
}

.page-video .video-task-tray-thumb {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-width: 0;
  color: #7a8290;
  background: linear-gradient(145deg, rgba(243, 245, 249, 0.96), rgba(255, 255, 255, 0.72));
  border: 1px solid rgba(31, 36, 48, 0.06);
  border-radius: 8px;
}

.page-video .video-task-tray-thumb img,
.page-video .video-task-tray-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-video .video-task-tray-thumb.pending i,
.page-video .video-task-tray-thumb.failed i,
.page-video .video-task-tray-thumb b {
  position: absolute;
  right: 5px;
  bottom: 4px;
  padding: 2px 5px;
  color: #fff;
  background: rgba(17, 19, 23, 0.72);
  border-radius: 999px;
  font-size: 9px;
  font-style: normal;
  font-weight: 860;
}

.page-video .video-task-tray-thumb.failed i {
  background: #d94b4b;
}

.page-video .video-task-tray-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.page-video .video-task-tray-copy strong,
.page-video .video-task-tray-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-video .video-task-tray-copy strong {
  color: #161a22;
  font-size: 13px;
  font-weight: 880;
}

.page-video .video-task-tray-copy small {
  color: #747d8b;
  font-size: 11px;
  font-weight: 720;
}

.page-video .video-task-tray-delete {
  height: 28px;
  padding: 0 9px;
}

@media (max-width: 760px) {
  .page-video .video-task-history-head,
  .page-video .video-task-history-toggle,
  .page-video .video-task-tray-chip {
    grid-template-columns: minmax(0, 1fr);
  }

  .page-video .video-task-history-actions {
    justify-content: stretch;
  }

  .page-video .video-task-history-actions button {
    flex: 1;
  }
}