: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 {
  position: relative;
  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);
  transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.rail-cta-stack {
  display: grid;
  gap: 6px;
  width: 100%;
  margin-top: auto;
}

.rail-cta-button {
  position: relative;
  z-index: 8;
  display: grid;
  place-items: center;
  width: 52px;
  min-height: 46px;
  gap: 4px;
  color: #555a63;
  background: rgba(255, 255, 255, 0.52);
  border: 1px solid rgba(35, 42, 54, 0.1);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(31, 38, 54, 0.06);
  overflow: hidden;
}

.rail-cta-button span {
  font-size: 15px;
  line-height: 1;
}

.rail-cta-button small {
  max-width: 46px;
  font-size: 9px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  transform: scale(0.86);
  transform-origin: center;
}

.rail-cta-button:hover,
.rail-cta-button:focus-visible {
  color: #fff;
  background: #111317;
  border-color: #111317;
  box-shadow: 0 16px 30px rgba(16, 18, 24, 0.18);
  transform: translateY(-1px);
}

.rail-cta-button.private-deploy-entry {
  color: #7b5a28;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(250, 241, 224, 0.78));
}

.rail-cta-button.private-deploy-entry:hover,
.rail-cta-button.private-deploy-entry:focus-visible {
  color: var(--gold-soft);
  background: #111317;
}

.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 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  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;
}

body:not(.banana-account-ready) .recharge-button {
  display: none;
}

.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;
  cursor: pointer;
}

.account-dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 9px;
  background: linear-gradient(135deg, #141820, #8aa78f 48%, #e1bd83);
  box-shadow: 0 6px 14px rgba(31, 36, 48, 0.16);
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  overflow: hidden;
}

.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);
}

.banana-guide-entry {
  color: #151820;
  font-size: 13px;
  font-weight: 950;
}

body:not(.banana-account-ready) .top-actions .project-switcher {
  gap: 0;
  padding: 0 14px;
  color: #313842;
  font-weight: 850;
}

body:not(.banana-account-ready) .top-actions .project-switcher .account-dot,
body:not(.banana-account-ready) .top-actions .project-switcher .switcher-arrow {
  display: none;
}

body:not(.banana-account-ready) .top-actions .project-switcher [data-profile-label] {
  font-size: 0;
}

body:not(.banana-account-ready) .top-actions .project-switcher [data-profile-label]::after {
  content: "登录 / 注册";
  font-size: 12px;
}

.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 {
  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.always-open {
  display: block;
  padding: 10px;
}

.ecom-mode-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 30px;
  padding: 0 2px 8px;
}

.ecom-mode-heading span {
  color: #69717d;
  font-size: 12px;
  font-weight: 850;
}

.ecom-mode-heading strong {
  color: #151820;
  font-size: 13px;
  font-weight: 950;
}

.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-mode-extra-settings {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.page-material .ecom-mode-extra-settings:empty {
  display: none;
}

.page-material .ecom-mode-extra-settings [data-ecom-mode-control][hidden] {
  display: none;
}

.page-material .ecom-mode-extra-settings .mini-setting-drawer {
  overflow: visible;
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(17, 19, 23, 0.12);
  border-radius: 16px;
}

.page-material .ecom-mode-extra-settings .mini-setting-drawer summary {
  min-height: 38px;
  padding: 0 10px 0 12px;
}

.page-material .ecom-mode-extra-settings .mini-setting-drawer .option-strip.compact {
  position: static;
  width: 100%;
  max-width: none;
  margin-top: 6px;
  border: 0;
  box-shadow: none;
}

.page-material .ecom-side-settings .mini-setting-drawer,
.page-material .ecom-mode-extra-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,
.page-material .ecom-mode-extra-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,
.page-material .ecom-mode-extra-settings .mini-setting-drawer summary::after {
  display: none;
}

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

.page-material .ecom-side-settings .mini-setting-drawer summary span,
.page-material .ecom-mode-extra-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,
.page-material .ecom-mode-extra-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,
.page-material .ecom-mode-extra-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,
.page-material .ecom-mode-extra-settings .option-strip.compact span {
  width: 100%;
  flex-basis: 100%;
}

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

.page-material .ecom-side-settings [data-ecom-mode-control][hidden] {
  display: none;
}

.page-material .ecom-side-settings .option-strip.compact.multi-select button.selected,
.page-material .ecom-mode-extra-settings .option-strip.compact.multi-select button.selected {
  color: #fff;
  background: #111317;
  border-color: rgba(17, 19, 23, 0.38);
}

.page-material .ecom-mode-extra-settings .mini-setting-drawer {
  overflow: visible;
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(17, 19, 23, 0.12);
  border-radius: 16px;
}

.page-material .ecom-mode-extra-settings .mini-setting-drawer[open] {
  background: rgba(255, 255, 255, 0.9);
}

.page-material .ecom-mode-extra-settings .mini-setting-drawer[open] .option-strip.compact {
  position: static;
  width: 100%;
  max-width: none;
  margin-top: 6px;
  border: 0;
  box-shadow: none;
}

.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: none;
  overflow: visible;
}

.ecom-control-panel .ecom-mode-tabs button {
  min-height: 46px;
  padding: 8px;
  border-radius: 13px;
}

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

.ecom-control-panel .ecom-mode-tabs button small {
  font-size: 10px;
  line-height: 1.2;
}

.ecom-control-panel .ecom-mode-extra-settings .mini-setting-drawer {
  border-radius: 14px;
}

.ecom-control-panel .ecom-mode-extra-settings .mini-setting-drawer[open] .option-strip.compact {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px;
}

.page-material .ecom-control-panel .ecom-mode-extra-settings .mini-setting-drawer,
.page-material .ecom-control-panel .ecom-mode-extra-settings .mini-setting-drawer[open] {
  overflow: visible;
  border-radius: 16px;
}

.page-material .ecom-control-panel .ecom-mode-extra-settings .mini-setting-drawer summary {
  min-height: 36px;
}

.page-material .ecom-control-panel .ecom-mode-extra-settings .mini-setting-drawer[open] .option-strip.compact {
  position: static;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: none;
  min-height: 38px;
  margin-top: 0;
  padding: 0 8px 8px;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.page-material .ecom-control-panel .ecom-mode-extra-settings .option-strip.compact button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 6px 10px;
  color: #3d454f;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 36, 48, 0.1);
  border-radius: 999px;
}

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

.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: default;
  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;
  touch-action: none;
  -webkit-user-drag: none;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease;
}

.canvas-object img {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.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;
  cursor: grabbing;
  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: "▩"; }
.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,
.partner-leads-panel,
.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,
.partner-leads-panel 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;
}

.partner-leads-panel article {
  grid-template-columns: 120px 170px 1fr;
  align-items: start;
}

.partner-leads-panel p {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.55;
}

.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-owner-card {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.team-owner-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 2px solid #fff;
  border-radius: 16px;
  background: linear-gradient(135deg, #151820, #86a891 52%, #d6b272);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  background-size: cover;
  background-position: center;
}

.team-owner-card strong {
  display: block;
  color: #16181d;
}

.team-owner-card small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.team-empty-row {
  color: var(--muted);
}

.team-empty-trend {
  opacity: 0.72;
}

.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;
}

.team-command-shell {
  display: grid;
  gap: 16px;
  min-height: calc(100vh - 88px);
}

.team-command-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 148px;
  padding: 22px 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(246, 243, 236, 0.72)),
    linear-gradient(90deg, rgba(22, 24, 29, 0.05), rgba(191, 154, 98, 0.09));
  border-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 62px rgba(31, 36, 48, 0.1);
}

.team-command-hero::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 18px;
  width: 270px;
  height: 72px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(22, 24, 29, 0.06) 1px, transparent 1px),
    linear-gradient(180deg, rgba(22, 24, 29, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(90deg, transparent, #000 28%, transparent);
  opacity: 0.55;
}

.team-identity-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.team-identity-panel .team-owner-avatar {
  width: 66px;
  height: 66px;
  border-radius: 22px;
  box-shadow: 0 14px 28px rgba(31, 36, 48, 0.14);
}

.team-identity-panel h2 {
  margin: 4px 0 0;
  font-size: 34px;
  line-height: 1.05;
}

.team-identity-panel p {
  max-width: 680px;
  margin: 9px 0 0;
  color: #606873;
  font-size: 13px;
}

.team-command-hero .team-actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 390px;
  gap: 8px;
}

.team-command-hero .team-actions button {
  min-height: 36px;
  padding: 0 13px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(35, 42, 54, 0.1);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(31, 36, 48, 0.06);
}

.team-command-hero .team-actions button:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 14px 26px rgba(31, 36, 48, 0.1);
}

.team-command-hero .team-actions button:last-child {
  color: #fff;
  background: #16181d;
  border-color: #16181d;
}

.team-metric-ribbon {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.team-metric-ribbon article {
  position: relative;
  overflow: hidden;
  min-height: 104px;
  padding: 15px 16px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(35, 42, 54, 0.09);
  border-radius: 20px;
  box-shadow: 0 16px 38px rgba(31, 36, 48, 0.06);
}

.team-metric-ribbon article::after {
  content: "";
  position: absolute;
  inset: auto 14px 12px auto;
  width: 52px;
  height: 6px;
  background: linear-gradient(90deg, #16181d, var(--gold));
  border-radius: 999px;
  opacity: 0.22;
}

.team-metric-ribbon span,
.team-metric-ribbon small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.team-metric-ribbon strong {
  display: block;
  margin: 16px 0 8px;
  font-size: 30px;
  line-height: 1;
}

.team-work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 16px;
  align-items: start;
}

.team-main-stack {
  display: grid;
  gap: 14px;
}

.team-hub-row,
.team-analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.team-card {
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(248, 247, 244, 0.64));
  border: 1px solid rgba(35, 42, 54, 0.09);
  box-shadow: 0 16px 42px rgba(31, 36, 48, 0.06);
}

.team-asset-hub,
.team-people-hub {
  min-height: 196px;
}

.team-content-board {
  min-height: 156px;
}

.team-shelf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.team-shelf article {
  display: grid;
  align-content: space-between;
  min-height: 116px;
  padding: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(245, 239, 228, 0.52));
  border: 1px solid rgba(35, 42, 54, 0.08);
  border-radius: 17px;
}

.team-shelf b {
  font-size: 16px;
}

.team-content-board .team-feed {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-content: start;
}

.team-content-board .team-feed article {
  min-height: 68px;
}

.team-content-board .team-feed .team-empty-row {
  grid-column: 1 / -1;
  max-width: 460px;
}

.team-asset-hub .team-chip-row span,
.team-people-hub .org-tree span,
.team-content-board .team-feed span {
  line-height: 1.45;
}

.team-control-rail {
  position: sticky;
  top: 96px;
  overflow: hidden auto;
  max-height: calc(100vh - 110px);
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(246, 243, 236, 0.74));
  border: 1px solid rgba(255, 255, 255, 0.92);
}

.team-rail-head {
  display: grid;
  gap: 4px;
}

.team-rail-head strong {
  font-size: 24px;
}

.team-control-rail .team-card,
.team-control-rail .team-mini-block,
.team-control-rail .team-log,
.team-control-rail .subaccount-list article {
  background: rgba(255, 255, 255, 0.64);
  box-shadow: none;
}

.team-owner-card {
  min-height: 74px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(244, 237, 224, 0.58));
}

.team-owner-card .team-owner-avatar {
  border-radius: 18px;
}

.org-tree article,
.subaccount-list article,
.team-log article,
.team-feed article,
.ranking-list article {
  border-color: rgba(35, 42, 54, 0.08);
}

.org-tree article {
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
}

.team-feed article b,
.subaccount-list article b,
.team-log article b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-member-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.team-member-row small {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: #7a828e;
  font-size: 11px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-member-row.owner-row {
  border-color: rgba(191, 154, 98, 0.22);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(247, 238, 221, 0.62));
}

.team-member-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.team-member-actions button {
  min-width: 0;
  padding: 0 8px;
}

.team-member-actions button[data-team-member-action="remove"] {
  color: #a4493f;
  border-color: rgba(164, 73, 63, 0.22);
}

.system-modal[data-modal-type^="team-"] .system-modal-panel {
  width: min(680px, 94vw);
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 244, 238, 0.9));
}

.system-modal[data-modal-type^="team-"] [data-modal-title] {
  max-width: 520px;
  font-size: 28px;
  letter-spacing: 0;
}

.system-modal[data-modal-type^="team-"] [data-modal-body] {
  max-width: 560px;
  font-size: 13px;
}

.team-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.team-form-grid label {
  min-width: 0;
}

.team-form-section {
  grid-column: 1 / -1;
  display: grid;
  gap: 9px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(35, 42, 54, 0.08);
  border-radius: 16px;
}

.team-form-section > span {
  color: #626975;
  font-size: 12px;
  font-weight: 900;
}

.team-permission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.modal-field-grid .team-permission-pill {
  position: relative;
  display: block;
  min-height: 38px;
}

.team-permission-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.team-permission-pill span {
  display: grid;
  min-height: 38px;
  place-items: center;
  color: #4b535f;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(35, 42, 54, 0.09);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  transition: 0.18s ease;
}

.team-permission-pill input:checked + span {
  color: #fff;
  background: #16181d;
  border-color: #16181d;
  box-shadow: 0 10px 24px rgba(31, 36, 48, 0.16);
}

.team-chip-row span {
  background: rgba(255, 255, 255, 0.78);
}

.team-empty-row {
  color: #747b85;
}

.team-empty-row b {
  color: #252a32;
}

@media (max-width: 1120px) {
  .team-command-hero {
    grid-template-columns: 1fr;
  }

  .team-command-hero .team-actions {
    justify-content: flex-start;
    max-width: none;
  }

  .team-work-grid {
    grid-template-columns: 1fr;
  }

  .team-control-rail {
    position: static;
    max-height: none;
  }
}

@media (max-width: 680px) {
  .team-form-grid,
  .team-permission-grid {
    grid-template-columns: 1fr;
  }
}

.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(4, 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 {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 3px solid #fff;
  border-radius: 18px;
  background: linear-gradient(135deg, #151820, #8aa78f 52%, #e5c39b);
  box-shadow: var(--soft-shadow);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.profile-avatar.is-anonymous,
.account-dot.is-anonymous {
  color: #656c76;
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(31, 36, 48, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 6px 14px rgba(31, 36, 48, 0.08);
}

.profile-avatar.has-image,
.account-dot.has-image {
  color: transparent;
  text-shadow: none;
}

.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: 90;
  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-modal.preview-zoom-mode {
  padding: 12px;
  background: rgba(9, 11, 16, 0.82);
}

.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);
}

.image-preview-modal.preview-zoom-mode .image-preview-panel {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  width: min(1540px, 98vw);
  max-height: 94vh;
  background: rgba(245, 246, 249, 0.78);
}

.image-preview-modal.preview-zoom-mode .preview-media {
  min-height: calc(94vh - 32px);
  background: #07090d;
  border-radius: 22px;
}

.image-preview-modal.preview-zoom-mode .preview-media img {
  max-width: 100%;
  max-height: calc(94vh - 36px);
  object-fit: contain;
}

.image-preview-modal.preview-zoom-mode .preview-info {
  opacity: 0.38;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.image-preview-modal.preview-zoom-mode .preview-info:hover,
.image-preview-modal.preview-zoom-mode .preview-info:focus-within {
  opacity: 1;
}

.preview-close {
  position: absolute;
  right: -12px;
  top: -12px;
  z-index: 4;
  width: 36px;
  height: 36px;
  color: #fff;
  background: #111317;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 20px;
}

.preview-media {
  position: relative;
  display: grid;
  place-items: center;
  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-edit-stage {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.preview-crop-box {
  position: absolute;
  z-index: 6;
  border: 2px solid rgba(255, 255, 255, 0.98);
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(13, 17, 23, 0.48), 0 18px 42px rgba(0, 0, 0, 0.24);
  cursor: move;
  pointer-events: auto;
}

.preview-crop-grid {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent 33.333%, rgba(255, 255, 255, 0.58) 33.333%, rgba(255, 255, 255, 0.58) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent 66.666%, rgba(255, 255, 255, 0.58) 66.666%, rgba(255, 255, 255, 0.58) calc(66.666% + 1px), transparent calc(66.666% + 1px)),
    linear-gradient(180deg, transparent 33.333%, rgba(255, 255, 255, 0.58) 33.333%, rgba(255, 255, 255, 0.58) calc(33.333% + 1px), transparent calc(33.333% + 1px), transparent 66.666%, rgba(255, 255, 255, 0.58) 66.666%, rgba(255, 255, 255, 0.58) calc(66.666% + 1px), transparent calc(66.666% + 1px));
  pointer-events: none;
}

.preview-crop-box button {
  position: absolute;
  width: 15px;
  height: 15px;
  padding: 0;
  background: #ffffff;
  border: 1px solid rgba(22, 25, 32, 0.28);
  border-radius: 5px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
  pointer-events: auto;
}

.preview-crop-box [data-crop-handle="nw"] { left: -8px; top: -8px; cursor: nw-resize; }
.preview-crop-box [data-crop-handle="n"] { left: 50%; top: -8px; transform: translateX(-50%); cursor: ns-resize; }
.preview-crop-box [data-crop-handle="ne"] { right: -8px; top: -8px; cursor: ne-resize; }
.preview-crop-box [data-crop-handle="w"] { left: -8px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.preview-crop-box [data-crop-handle="e"] { right: -8px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.preview-crop-box [data-crop-handle="sw"] { left: -8px; bottom: -8px; cursor: sw-resize; }
.preview-crop-box [data-crop-handle="s"] { left: 50%; bottom: -8px; transform: translateX(-50%); cursor: ns-resize; }
.preview-crop-box [data-crop-handle="se"] { right: -8px; bottom: -8px; cursor: se-resize; }

.preview-mask-canvas {
  position: absolute;
  z-index: 7;
  cursor: crosshair;
  pointer-events: auto;
  mix-blend-mode: screen;
  opacity: 0.72;
  filter: drop-shadow(0 0 8px rgba(68, 130, 255, 0.38));
}

.preview-editor-status {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 9;
  max-width: min(520px, calc(100% - 36px));
  padding: 9px 13px;
  color: #fff;
  background: rgba(18, 21, 28, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  box-shadow: 0 18px 42px rgba(12, 14, 20, 0.28);
  backdrop-filter: blur(14px);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  pointer-events: none;
}

.preview-editor-status[data-status="loading"]::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: -1px;
  animation: previewEditorSpin 0.8s linear infinite;
}

.preview-editor-status[data-status="success"] {
  background: rgba(14, 99, 77, 0.88);
}

.preview-editor-status[data-status="error"] {
  background: rgba(133, 32, 42, 0.9);
}

@keyframes previewEditorSpin {
  to { transform: rotate(360deg); }
}

.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-tool-grid button.selected,
.preview-editor [data-preview-tool].selected,
.preview-editor [data-preview-mode].selected,
.preview-editor [data-preview-strategy].selected,
.preview-editor [data-preview-adjust].selected,
.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-adjust-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(35, 42, 54, 0.08);
  border-radius: 14px;
}

.preview-adjust-panel[hidden] {
  display: none;
}

.preview-adjust-panel label {
  display: grid;
  gap: 5px;
}

.preview-adjust-panel span {
  display: flex;
  justify-content: space-between;
  color: #5f6672;
  font-size: 11px;
  font-weight: 900;
}

.preview-adjust-panel b {
  color: #262c35;
  font-variant-numeric: tabular-nums;
}

.preview-adjust-panel input {
  width: 100%;
  accent-color: #151820;
}

.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;
}

.banana-guide-layer {
  position: fixed;
  inset: 0;
  z-index: 51;
  opacity: 0;
  pointer-events: none;
  background: rgba(14, 16, 22, 0.18);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: opacity 0.2s ease;
}

.banana-guide-layer.open {
  opacity: 1;
  pointer-events: auto;
}

.banana-guide-spotlight {
  position: fixed;
  left: var(--guide-x, 108px);
  top: var(--guide-y, 92px);
  width: var(--guide-w, 360px);
  height: var(--guide-h, 180px);
  border: 2px solid rgba(255, 255, 255, 0.96);
  border-radius: var(--guide-radius, 24px);
  box-shadow:
    0 0 0 9999px rgba(14, 16, 22, 0.22),
    0 24px 70px rgba(0, 0, 0, 0.24),
    inset 0 0 0 1px rgba(191, 154, 98, 0.5);
  pointer-events: none;
  transition:
    left 0.24s ease,
    top 0.24s ease,
    width 0.24s ease,
    height 0.24s ease,
    border-radius 0.24s ease;
}

.banana-guide-panel {
  position: fixed;
  right: 28px;
  top: 96px;
  display: grid;
  gap: 13px;
  width: min(430px, calc(100vw - 52px));
  max-height: calc(100vh - 128px);
  overflow: auto;
  padding: 18px;
  color: #151820;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(248, 247, 244, 0.92)),
    #fff;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 24px;
  box-shadow: 0 34px 110px rgba(0, 0, 0, 0.25);
}

.banana-guide-panel::-webkit-scrollbar {
  width: 0;
}

.banana-guide-head,
.banana-guide-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.banana-guide-head span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 950;
}

.banana-guide-head button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #fff;
  background: #111317;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}

.banana-guide-progress {
  overflow: hidden;
  height: 7px;
  background: rgba(31, 36, 48, 0.08);
  border-radius: 999px;
}

.banana-guide-progress i {
  display: block;
  width: var(--guide-progress, 6.25%);
  height: 100%;
  background: linear-gradient(90deg, #151820, var(--gold));
  border-radius: inherit;
  transition: width 0.24s ease;
}

.banana-guide-meta {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  background: rgba(246, 244, 238, 0.86);
  border: 1px solid rgba(191, 154, 98, 0.18);
  border-radius: 16px;
}

.banana-guide-meta span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 950;
}

.banana-guide-meta strong {
  color: #252b35;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.32;
}

.banana-guide-panel h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 950;
  line-height: 1.12;
}

.banana-guide-panel p {
  margin: 0;
  color: #626a75;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.7;
}

.banana-guide-task-grid {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.banana-guide-layer.show-task-shortcuts .banana-guide-task-grid {
  display: grid;
}

.banana-guide-task-grid button {
  display: grid;
  gap: 4px;
  min-width: 0;
  min-height: 54px;
  padding: 9px;
  text-align: left;
  color: #303744;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 36, 48, 0.09);
  border-radius: 16px;
}

.banana-guide-task-grid button:hover,
.banana-guide-task-grid button:focus-visible {
  color: #fff;
  background: #111317;
  border-color: #111317;
  transform: translateY(-1px);
}

.banana-guide-task-grid strong,
.banana-guide-task-grid small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.banana-guide-task-grid strong {
  font-size: 12px;
  font-weight: 950;
}

.banana-guide-task-grid small {
  color: #78808d;
  font-size: 10px;
  font-weight: 760;
}

.banana-guide-task-grid button:hover small,
.banana-guide-task-grid button:focus-visible small {
  color: rgba(255, 255, 255, 0.72);
}

.banana-guide-points {
  display: grid;
  gap: 8px;
}

.banana-guide-points span {
  position: relative;
  padding: 9px 10px 9px 30px;
  color: #4f5764;
  background: rgba(247, 248, 251, 0.78);
  border: 1px solid rgba(31, 36, 48, 0.07);
  border-radius: 14px;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.48;
}

.banana-guide-points span::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 16px;
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 999px;
}

.banana-guide-practice {
  display: grid;
}

.banana-guide-practice[hidden] {
  display: none;
}

.banana-guide-practice-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(31, 36, 48, 0.09);
  border-radius: 18px;
}

.banana-guide-practice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.banana-guide-practice-head span {
  color: #151820;
  font-size: 13px;
  font-weight: 950;
}

.banana-guide-practice-head small {
  color: #7b8390;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.banana-guide-practice-card ol {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
}

.banana-guide-practice-card li {
  color: #48515f;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.48;
}

.banana-guide-example,
.banana-guide-warning {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border-radius: 14px;
}

.banana-guide-example {
  background: rgba(31, 36, 48, 0.05);
}

.banana-guide-warning {
  background: rgba(191, 154, 98, 0.12);
  border: 1px solid rgba(191, 154, 98, 0.18);
}

.banana-guide-example strong,
.banana-guide-warning strong {
  color: #222832;
  font-size: 11px;
  font-weight: 950;
}

.banana-guide-example p,
.banana-guide-warning p {
  color: #535c6a;
  font-size: 12px;
  font-weight: 740;
  line-height: 1.52;
}

.banana-guide-foot {
  padding-top: 4px;
}

.banana-guide-foot button {
  min-height: 38px;
  padding: 0 14px;
  color: #343b46;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(31, 36, 48, 0.1);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.banana-guide-foot button:disabled {
  cursor: default;
  opacity: 0.44;
  transform: none;
  box-shadow: none;
}

.banana-guide-foot .primary-button {
  min-height: 38px;
  margin-top: 0;
  color: #fff;
  background: #151820;
  border-color: #151820;
}

.banana-guide-foot span {
  color: #747c88;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.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(820px, 94vw);
  padding: 16px;
  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: 24px;
}

.system-modal[data-modal-type="auth"] [data-modal-body] {
  max-width: 680px;
  font-size: 13px;
}

.system-modal[data-modal-type="auth"] [data-modal-body]:empty {
  display: none;
}

.system-modal[data-modal-type="auth"] .modal-field-grid {
  margin-top: 18px;
}

.auth-modal-shell {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 12px;
}

.auth-visual-panel,
.auth-form-panel {
  position: relative;
  overflow: hidden;
  min-height: 330px;
  border-radius: 20px;
}

.auth-visual-panel {
  display: grid;
  align-content: end;
  padding: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 28% 10%, rgba(236, 204, 143, 0.42), transparent 34%),
    radial-gradient(circle at 88% 88%, rgba(125, 148, 190, 0.26), transparent 32%),
    linear-gradient(145deg, #101216, #202838 76%, #11151c);
}

.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: 8px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.11);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 24px 54px rgba(4, 7, 12, 0.22);
  backdrop-filter: blur(18px);
}

.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: 28px;
  letter-spacing: 0;
}

.auth-form-panel {
  display: grid;
  align-content: start;
  gap: 15px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(31, 36, 48, 0.08);
}

.auth-form-head {
  display: grid;
  gap: 4px;
}

.auth-form-head span {
  color: #8a748f;
  font-size: 12px;
  font-weight: 900;
}

.auth-form-head strong {
  color: #151820;
  font-size: 24px;
  font-weight: 950;
  letter-spacing: 0;
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  background: rgba(239, 242, 247, 0.86);
  border: 1px solid rgba(31, 36, 48, 0.06);
  border-radius: 14px;
}

.auth-tabs button {
  min-height: 38px;
  color: #66707d;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 11px;
  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: 12px;
}

.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: 46px;
  padding: 0 14px;
  color: #252b34;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(31, 36, 48, 0.09);
  border-radius: 14px;
  outline: 0;
}

.auth-field-stack input:focus,
.auth-field-stack select:focus {
  border-color: rgba(191, 154, 98, 0.55);
  box-shadow: 0 0 0 4px rgba(191, 154, 98, 0.12);
}

.auth-row {
  display: flex;
  justify-content: flex-end;
  min-height: 22px;
}

.auth-row[hidden],
.auth-check-row[hidden],
.auth-field-stack label[hidden] {
  display: none !important;
}

.auth-row button {
  padding: 0;
  color: #6f5f47;
  background: transparent;
  border: 0;
  font-size: 12px;
  font-weight: 850;
}

.auth-row button:hover {
  color: #151820;
}

.auth-check-row {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: center;
  gap: 8px !important;
  min-height: 28px;
  color: #6a7280 !important;
  font-size: 12px !important;
}

.auth-check-row input {
  width: 15px !important;
  min-width: 15px;
  height: 15px;
  min-height: 15px !important;
  padding: 0 !important;
  accent-color: #151820;
}

.auth-error {
  min-height: 18px;
  margin: -2px 0 0;
  color: #c54545;
  font-size: 12px;
  font-weight: 850;
}

.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: 6px;
  width: 96px;
  min-height: 34px;
  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;
}

.system-modal[data-modal-type="auth"] .modal-action-row {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.system-modal[data-modal-type="auth"] .modal-action-row button {
  width: auto;
  min-width: 92px;
  white-space: nowrap;
}

.system-modal[data-modal-type="auth"] .modal-action-row .primary-button {
  min-width: 128px;
  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;
  }

  .banana-guide-panel {
    left: 14px;
    right: 14px;
    top: auto;
    bottom: 14px;
    width: auto;
    max-height: 72vh;
    border-radius: 22px;
  }

  .banana-guide-task-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .banana-guide-practice-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .banana-guide-practice-head small {
    white-space: normal;
  }

  .banana-guide-spotlight {
    display: none;
  }
}
/* Private deployment conversion modal */
.system-modal[data-modal-type="private-deploy"] {
  padding: 28px;
  background:
    radial-gradient(circle at 18% 16%, rgba(183, 145, 92, 0.16), transparent 30%),
    radial-gradient(circle at 82% 12%, rgba(64, 78, 128, 0.2), transparent 34%),
    rgba(15, 17, 22, 0.58);
}

.system-modal[data-modal-type="private-deploy"] .system-modal-panel {
  width: min(1040px, 94vw);
  max-height: min(860px, 92vh);
  overflow: auto;
  padding: 26px;
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(244, 246, 251, 0.9)),
    #fff;
}

.system-modal[data-modal-type="private-deploy"] .section-kicker {
  color: #9d7a45;
}

.system-modal[data-modal-type="private-deploy"] [data-modal-title] {
  margin-bottom: 2px;
  color: #171b24;
  font-size: 30px;
  letter-spacing: 0;
}

.system-modal[data-modal-type="private-deploy"] [data-modal-body] {
  display: none;
}

.system-modal[data-modal-type="private-deploy"] .modal-field-grid {
  margin-top: 18px;
}

.private-deploy-modal {
  display: grid;
  gap: 16px;
}

.private-deploy-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 22px;
  min-height: 232px;
  overflow: hidden;
  padding: 30px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(20, 23, 31, 0.96), rgba(39, 49, 78, 0.92)),
    #151820;
  border-radius: 24px;
}

.private-deploy-hero::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  pointer-events: none;
}

.private-deploy-hero span {
  color: rgba(229, 207, 164, 0.9);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.private-deploy-hero h3 {
  max-width: 660px;
  margin: 14px 0 12px;
  color: #fff;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: 0;
}

.private-deploy-hero p {
  max-width: 660px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.8;
}

.private-deploy-orbit {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 180px;
}

.private-deploy-orbit i {
  position: absolute;
  width: 148px;
  aspect-ratio: 1;
  border: 1px solid rgba(232, 210, 167, 0.22);
  border-radius: 50%;
  transform: rotate(var(--r, 0deg)) scale(var(--s, 1));
}

.private-deploy-orbit i:nth-child(2) {
  --r: 52deg;
  --s: 0.76;
}

.private-deploy-orbit i:nth-child(3) {
  --r: -42deg;
  --s: 1.2;
}

.private-deploy-orbit strong {
  display: grid;
  place-items: center;
  width: 116px;
  height: 116px;
  color: #151820;
  background: linear-gradient(145deg, #f8e6b9, #b99257);
  border-radius: 34px;
  font-size: 13px;
  font-weight: 950;
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.28);
}

.private-deploy-proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.private-deploy-proof article,
.private-deploy-card {
  border: 1px solid rgba(31, 36, 48, 0.09);
  box-shadow: 0 18px 42px rgba(30, 36, 52, 0.08);
}

.private-deploy-proof article {
  display: grid;
  gap: 8px;
  min-height: 108px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.74);
  border-radius: 18px;
}

.private-deploy-proof b {
  color: #1d2330;
  font-size: 15px;
  font-weight: 950;
}

.private-deploy-proof span {
  color: #626b78;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.55;
}

.private-deploy-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.private-deploy-card {
  display: grid;
  align-content: start;
  min-height: 184px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 20px;
}

.private-deploy-card.primary {
  color: #fff;
  background: linear-gradient(145deg, #1b2030, #465993);
}

.private-deploy-card small {
  color: #a48a5d;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
}

.private-deploy-card.primary small,
.private-deploy-card.primary p {
  color: rgba(255, 255, 255, 0.72);
}

.private-deploy-card h4 {
  margin: 18px 0 8px;
  color: inherit;
  font-size: 20px;
  letter-spacing: 0;
}

.private-deploy-card p {
  color: #626b78;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.68;
}

.private-deploy-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  background: rgba(31, 36, 48, 0.05);
  border: 1px solid rgba(31, 36, 48, 0.07);
  border-radius: 18px;
}

.private-deploy-flow span {
  min-height: 42px;
  display: grid;
  place-items: center;
  color: #252b36;
  background: rgba(255, 255, 255, 0.76);
  border-radius: 13px;
  font-size: 12px;
  font-weight: 900;
}

.private-deploy-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(232, 210, 167, 0.22), rgba(255, 255, 255, 0.72));
  border: 1px solid rgba(183, 145, 92, 0.18);
  border-radius: 20px;
}

.private-deploy-bottom strong {
  color: #1d2330;
  font-size: 14px;
  font-weight: 950;
}

.private-deploy-bottom p {
  margin-top: 6px;
  color: #626b78;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.55;
}

.private-deploy-bottom .primary-button {
  min-height: 46px;
  margin: 0;
  border-radius: 16px;
}

.system-modal[data-modal-type="about-enterprise"] {
  padding: 28px;
  background:
    radial-gradient(circle at 18% 16%, rgba(183, 145, 92, 0.16), transparent 30%),
    radial-gradient(circle at 82% 20%, rgba(71, 120, 255, 0.1), transparent 26%),
    rgba(9, 10, 13, 0.52);
}

.system-modal[data-modal-type="about-enterprise"] .system-modal-panel {
  width: min(1160px, 94vw);
  max-height: min(820px, 90vh);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px;
  background:
    linear-gradient(145deg, rgba(249, 250, 253, 0.98), rgba(235, 238, 246, 0.94)),
    #f7f8fb;
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 32px 92px rgba(8, 12, 20, 0.36);
}

.system-modal[data-modal-type="about-enterprise"] .section-kicker {
  color: #9d7a45;
}

.system-modal[data-modal-type="about-enterprise"] [data-modal-title] {
  padding-left: 8px;
  color: #171b24;
  font-size: 22px;
}

.system-modal[data-modal-type="about-enterprise"] [data-modal-body] {
  display: none;
}

.system-modal[data-modal-type="about-enterprise"] .modal-field-grid {
  margin-top: 18px;
}

.about-enterprise-modal {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 100%;
}

.about-enterprise-modal,
.about-enterprise-modal * {
  box-sizing: border-box;
}

.about-enterprise-hero {
  position: relative;
  overflow: hidden;
  min-height: 390px;
  padding: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
  align-items: center;
  gap: 34px;
  border-radius: 22px;
  background:
    linear-gradient(115deg, rgba(10, 12, 16, 0.98), rgba(24, 28, 37, 0.98) 48%, rgba(111, 86, 45, 0.92)),
    #11151d;
  box-shadow: 0 30px 80px rgba(18, 21, 30, 0.24);
}

.about-enterprise-hero::before {
  content: "";
  position: absolute;
  inset: 20px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  pointer-events: none;
}

.about-enterprise-hero > .about-enterprise-copy > span {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 7px 10px;
  color: #d2b377;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
}

.about-enterprise-hero h3 {
  max-width: 720px;
  margin: 22px 0 16px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(34px, 3.7vw, 56px);
  line-height: 1.06;
}

.about-enterprise-hero p {
  max-width: 700px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 15px;
  font-weight: 760;
  line-height: 1.9;
}

.about-enterprise-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.about-enterprise-visual {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 24px 52px rgba(0, 0, 0, 0.22);
}

.about-enterprise-visual img {
  display: block;
  width: 100%;
  min-height: 260px;
  object-fit: cover;
  border-radius: 14px;
}

.about-enterprise-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.about-enterprise-hero-tags em {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.about-enterprise-statement {
  padding: 24px 28px;
  border: 1px solid rgba(181, 141, 75, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(248, 241, 229, 0.82)),
    #fff;
  box-shadow: 0 18px 42px rgba(31, 38, 54, 0.08);
}

.about-enterprise-statement strong {
  display: block;
  max-width: 920px;
  color: #151820;
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 950;
  line-height: 1.35;
}

.about-enterprise-statement p {
  max-width: 760px;
  margin: 10px 0 0;
  color: #68707d;
  font-size: 13px;
  font-weight: 780;
  line-height: 1.7;
}

.about-enterprise-image-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.about-enterprise-image-row figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(30, 38, 55, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 38px rgba(31, 38, 54, 0.08);
}

.about-enterprise-image-row img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: #11151d;
}

.about-enterprise-image-row figcaption {
  display: grid;
  gap: 6px;
  padding: 14px 16px 16px;
  line-height: 1.45;
}

.about-enterprise-image-row figcaption b {
  color: #171b24;
  font-size: 15px;
  font-weight: 950;
}

.about-enterprise-image-row figcaption span {
  color: #68707d;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.65;
}

.about-enterprise-strip,
.about-enterprise-grid {
  display: grid;
  gap: 14px;
}

.about-enterprise-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-enterprise-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.about-enterprise-strip article,
.about-enterprise-grid article,
.about-enterprise-bottom {
  min-width: 0;
  border: 1px solid rgba(30, 38, 55, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 38px rgba(31, 38, 54, 0.08);
}

.about-enterprise-strip article {
  min-height: 132px;
  padding: 20px;
}

.about-enterprise-strip b {
  display: block;
  margin-bottom: 12px;
  color: #171b24;
  font-size: 18px;
  font-weight: 950;
}

.about-enterprise-strip span,
.about-enterprise-grid p,
.about-enterprise-bottom p {
  color: #626b78;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.75;
}

.about-enterprise-section-title {
  display: grid;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 2px 0;
}

.about-enterprise-section-title span,
.about-enterprise-proof span {
  color: #9d7a45;
  font-size: 11px;
  font-weight: 950;
}

.about-enterprise-section-title strong {
  color: #151820;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 950;
  line-height: 1.25;
}

.about-enterprise-grid article {
  min-height: 190px;
  padding: 20px;
  display: grid;
  align-content: start;
  gap: 12px;
}

.about-enterprise-grid small {
  width: max-content;
  padding: 5px 9px;
  color: #9d7a45;
  background: rgba(191, 154, 98, 0.12);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
}

.about-enterprise-grid strong {
  color: #171b24;
  font-size: 18px;
  font-weight: 950;
}

.about-enterprise-proof {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 22px;
  align-items: center;
  padding: 24px;
  border-radius: 18px;
  color: #f8f1e4;
  background:
    linear-gradient(135deg, rgba(18, 20, 26, 0.98), rgba(36, 42, 54, 0.96)),
    #171b24;
  box-shadow: 0 26px 58px rgba(17, 22, 31, 0.18);
}

.about-enterprise-proof strong {
  display: block;
  margin-top: 8px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.35vw, 34px);
  font-weight: 950;
  line-height: 1.25;
}

.about-enterprise-proof p {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 14px;
  font-weight: 780;
  line-height: 1.85;
}

.about-enterprise-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 24px;
}

.about-enterprise-bottom strong {
  display: block;
  margin-bottom: 8px;
  color: #171b24;
  font-size: 18px;
  font-weight: 950;
}

.about-enterprise-bottom .primary-button {
  width: max-content;
  align-self: center;
}

.system-modal[data-modal-type="about-enterprise"] .modal-action-row {
  display: none;
}

.about-enterprise-modal-v2 {
  gap: 18px;
}

.about-v2-hero {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(360px, 0.97fr);
  gap: 34px;
  align-items: stretch;
  padding: 42px;
  border-radius: 24px;
  color: #fff;
  background:
    linear-gradient(120deg, rgba(8, 10, 14, 0.98), rgba(21, 25, 34, 0.98) 54%, rgba(116, 86, 42, 0.95)),
    #11151d;
  box-shadow: 0 32px 86px rgba(13, 17, 24, 0.3);
}

.about-v2-hero::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 20px;
  pointer-events: none;
}

.about-v2-copy,
.about-v2-stage {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.about-v2-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-v2-eyebrow {
  width: max-content;
  max-width: 100%;
  padding: 7px 11px;
  color: #d8b77a;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
}

.about-v2-copy h3 {
  max-width: 760px;
  margin: 22px 0 18px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(38px, 4.15vw, 64px);
  font-weight: 950;
  line-height: 1.02;
}

.about-v2-copy p {
  max-width: 720px;
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 15px;
  font-weight: 760;
  line-height: 1.9;
}

.about-v2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 28px;
}

.about-v2-actions .primary-button {
  width: max-content;
  min-width: 126px;
  margin: 0;
  background: linear-gradient(135deg, #f2d28d, #b98a3e);
  color: #15110a;
  box-shadow: 0 16px 34px rgba(185, 138, 62, 0.28);
}

.about-v2-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  color: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
}

.about-v2-stage {
  min-height: 342px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 28px 58px rgba(0, 0, 0, 0.22);
}

.about-v2-glass-card,
.about-v2-floating-card {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(12, 15, 22, 0.72);
  box-shadow: 0 22px 44px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(18px);
}

.about-v2-glass-card.main {
  inset: 58px 34px auto 34px;
  min-height: 156px;
  padding: 24px;
  border-radius: 22px;
}

.about-v2-glass-card small,
.about-v2-floating-card span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  font-weight: 900;
}

.about-v2-glass-card strong {
  display: block;
  margin: 12px 0 8px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 950;
}

.about-v2-glass-card > span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 780;
}

.about-v2-floating-card {
  display: grid;
  gap: 6px;
  width: 178px;
  padding: 16px;
  border-radius: 18px;
}

.about-v2-floating-card b {
  color: #f5d89a;
  font-size: 16px;
  font-weight: 950;
}

.about-v2-floating-card.card-a {
  left: 26px;
  bottom: 34px;
}

.about-v2-floating-card.card-b {
  right: 32px;
  bottom: 56px;
}

.about-v2-floating-card.card-c {
  right: 88px;
  top: 28px;
}

.about-v2-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.about-v2-metrics article {
  min-height: 126px;
  padding: 22px;
  border: 1px solid rgba(30, 38, 55, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 42px rgba(31, 38, 54, 0.08);
}

.about-v2-metrics strong {
  display: block;
  color: #151820;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 950;
}

.about-v2-metrics span {
  display: block;
  margin-top: 10px;
  color: #626b78;
  font-size: 13px;
  font-weight: 780;
  line-height: 1.7;
}

.about-v2-section-head {
  display: grid;
  gap: 8px;
  padding: 14px 4px 0;
}

.about-v2-section-head span,
.about-v2-build-list > div span,
.about-v2-proof span {
  color: #9d7a45;
  font-size: 11px;
  font-weight: 950;
}

.about-v2-section-head strong {
  max-width: 850px;
  color: #151820;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.65vw, 38px);
  font-weight: 950;
  line-height: 1.18;
}

.about-v2-section-head p {
  max-width: 720px;
  margin: 0;
  color: #68707d;
  font-size: 13px;
  font-weight: 780;
  line-height: 1.75;
}

.about-v2-capability-grid {
  display: grid;
  grid-template-columns: 1.16fr 0.84fr;
  gap: 14px;
}

.about-v2-capability-grid article {
  min-width: 0;
  overflow: hidden;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(30, 38, 55, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 40px rgba(31, 38, 54, 0.08);
}

.about-v2-capability-grid article.wide {
  grid-row: span 3;
  grid-template-rows: minmax(260px, 1fr) auto;
}

.about-v2-capability-grid img {
  width: 100%;
  min-height: 150px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  background: #11151d;
}

.about-v2-capability-grid .wide img {
  min-height: 300px;
}

.about-v2-capability-grid small {
  width: max-content;
  padding: 5px 9px;
  color: #9d7a45;
  background: rgba(191, 154, 98, 0.12);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
}

.about-v2-capability-grid strong {
  color: #171b24;
  font-size: 19px;
  font-weight: 950;
}

.about-v2-capability-grid p {
  margin: 0;
  color: #626b78;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.75;
}

.about-v2-build-list {
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
  gap: 18px;
  padding: 24px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 241, 229, 0.78)),
    #fff;
  border: 1px solid rgba(181, 141, 75, 0.2);
  box-shadow: 0 18px 44px rgba(31, 38, 54, 0.08);
}

.about-v2-build-list > div strong {
  display: block;
  margin-top: 10px;
  color: #151820;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 950;
  line-height: 1.18;
}

.about-v2-build-list ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.about-v2-build-list li {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(30, 38, 55, 0.08);
}

.about-v2-build-list b {
  color: #171b24;
  font-size: 14px;
  font-weight: 950;
}

.about-v2-build-list em {
  color: #68707d;
  font-style: normal;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.55;
}

.about-v2-proof {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 24px;
  align-items: center;
  padding: 28px;
  border-radius: 20px;
  color: #f8f1e4;
  background:
    linear-gradient(135deg, rgba(18, 20, 26, 0.98), rgba(44, 48, 58, 0.96)),
    #171b24;
  box-shadow: 0 26px 58px rgba(17, 22, 31, 0.2);
}

.about-v2-proof strong {
  display: block;
  margin-top: 10px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.5vw, 36px);
  font-weight: 950;
  line-height: 1.22;
}

.about-v2-proof p {
  margin: 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 14px;
  font-weight: 780;
  line-height: 1.9;
}

.about-enterprise-modal-v3 {
  gap: 22px;
  color: #16191f;
}

.about-v3-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: 34px;
  min-height: 500px;
  padding: 48px;
  border-radius: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 80% 16%, rgba(245, 201, 126, 0.34), transparent 32%),
    linear-gradient(135deg, #08090d 0%, #141923 48%, #2b2217 100%);
  box-shadow: 0 38px 90px rgba(10, 14, 22, 0.34);
}

.about-v3-hero::before {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 22px;
  pointer-events: none;
}

.about-v3-hero::after {
  content: "";
  position: absolute;
  right: -10%;
  bottom: -46%;
  width: 64%;
  aspect-ratio: 1;
  border: 1px solid rgba(241, 198, 126, 0.2);
  border-radius: 50%;
  box-shadow: inset 0 0 80px rgba(241, 198, 126, 0.08);
  pointer-events: none;
}

.about-v3-hero-copy,
.about-v3-command {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.about-v3-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-v3-eyebrow {
  width: max-content;
  max-width: 100%;
  padding: 8px 12px;
  color: #f3d99f;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
}

.about-v3-hero h3 {
  max-width: 820px;
  margin: 24px 0 20px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(42px, 5.2vw, 76px);
  font-weight: 950;
  line-height: 1;
}

.about-v3-hero p {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 15px;
  font-weight: 760;
  line-height: 1.95;
}

.about-v3-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 30px;
}

.about-v3-hero-actions .primary-button {
  width: max-content;
  min-width: 136px;
  margin: 0;
  background: linear-gradient(135deg, #f5d596, #b98538);
  color: #16110a;
  box-shadow: 0 18px 38px rgba(185, 133, 56, 0.3);
}

.about-v3-ghost-link {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  color: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 900;
}

.about-v3-command {
  align-self: center;
  display: grid;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 28px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04)),
    rgba(8, 10, 14, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 34px 70px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
}

.about-v3-command-top,
.about-v3-command-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.about-v3-command-top span {
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
  font-weight: 950;
}

.about-v3-command-top b {
  color: #f3d99f;
  font-size: 15px;
  font-weight: 950;
}

.about-v3-command-screen {
  display: grid;
  gap: 14px;
  min-height: 310px;
  padding: 22px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    #10141c;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.about-v3-screen-main {
  display: grid;
  align-content: end;
  min-height: 160px;
  padding: 24px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(246, 210, 144, 0.18), rgba(255, 255, 255, 0.04)),
    #151a24;
  border: 1px solid rgba(246, 210, 144, 0.18);
}

.about-v3-screen-main small {
  color: rgba(245, 217, 159, 0.72);
  font-size: 11px;
  font-weight: 950;
}

.about-v3-screen-main strong {
  margin-top: 10px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.1vw, 32px);
  font-weight: 950;
  line-height: 1.12;
}

.about-v3-screen-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.about-v3-screen-grid span,
.about-v3-command-foot span {
  min-width: 0;
  padding: 12px;
  border-radius: 14px;
  color: rgba(255, 255, 255, 0.74);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 12px;
  font-weight: 900;
}

.about-v3-command-foot span {
  flex: 1;
  text-align: center;
}

.about-v3-manifesto {
  display: grid;
  gap: 10px;
  padding: 8px 4px 0;
}

.about-v3-manifesto span,
.about-v3-capabilities article > span,
.about-v3-capability-large span,
.about-v3-scope-title span,
.about-v3-close span {
  color: #9c7640;
  font-size: 11px;
  font-weight: 950;
}

.about-v3-manifesto strong {
  max-width: 940px;
  color: #141820;
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 950;
  line-height: 1.14;
}

.about-v3-capabilities {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 16px;
}

.about-v3-capabilities article {
  min-width: 0;
  overflow: hidden;
  display: grid;
  gap: 12px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(27, 34, 48, 0.09);
  box-shadow: 0 20px 44px rgba(24, 31, 44, 0.08);
}

.about-v3-capabilities article:not(.about-v3-capability-large) {
  grid-template-columns: 148px minmax(0, 1fr);
  align-items: center;
}

.about-v3-capabilities article:not(.about-v3-capability-large) img {
  grid-row: 1 / 4;
}

.about-v3-capabilities article:not(.about-v3-capability-large) > span,
.about-v3-capabilities article:not(.about-v3-capability-large) > strong,
.about-v3-capabilities article:not(.about-v3-capability-large) > p {
  grid-column: 2;
}

.about-v3-capability-large {
  grid-row: span 3;
  grid-template-rows: auto minmax(300px, 1fr);
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(249, 242, 230, 0.88)),
    #fff;
  border-color: rgba(181, 138, 70, 0.22);
}

.about-v3-capabilities img {
  width: 100%;
  min-height: 122px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 15px;
  background: #11151d;
}

.about-v3-capability-large img {
  min-height: 330px;
}

.about-v3-capabilities strong {
  color: #171b24;
  font-size: 20px;
  font-weight: 950;
}

.about-v3-capability-large strong {
  display: block;
  margin-top: 8px;
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 44px);
}

.about-v3-capabilities p {
  margin: 0;
  color: #626b78;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.78;
}

.about-v3-scope {
  display: grid;
  grid-template-columns: minmax(260px, 0.36fr) minmax(0, 0.64fr);
  gap: 18px;
  padding: 26px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(20, 24, 32, 0.98), rgba(35, 37, 43, 0.96)),
    #151820;
  box-shadow: 0 28px 66px rgba(16, 21, 30, 0.22);
}

.about-v3-scope-title strong {
  display: block;
  margin-top: 12px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(30px, 3.2vw, 46px);
  font-weight: 950;
  line-height: 1.12;
}

.about-v3-scope-title p {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.85;
}

.about-v3-scope-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.about-v3-scope-list article {
  min-width: 0;
  padding: 15px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.about-v3-scope-list b {
  display: block;
  color: #f3d99f;
  font-size: 14px;
  font-weight: 950;
}

.about-v3-scope-list em {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.66);
  font-style: normal;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.6;
}

.about-v3-close {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 28px;
  align-items: center;
  padding: 30px;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 239, 224, 0.9)),
    #fff;
  border: 1px solid rgba(181, 138, 70, 0.18);
  box-shadow: 0 20px 48px rgba(24, 31, 44, 0.08);
}

.about-v3-close strong {
  display: block;
  margin-top: 10px;
  color: #141820;
  font-family: var(--font-display);
  font-size: clamp(26px, 2.65vw, 40px);
  font-weight: 950;
  line-height: 1.16;
}

.about-v3-close p {
  margin: 0;
  color: #626b78;
  font-size: 14px;
  font-weight: 780;
  line-height: 1.9;
}

.system-modal[data-modal-type="private-deploy"] .modal-action-row {
  margin-top: 16px;
}

@media (max-width: 860px) {
  .system-modal[data-modal-type="private-deploy"] {
    padding: 12px;
  }

  .system-modal[data-modal-type="private-deploy"] .system-modal-panel {
    width: 96vw;
    padding: 16px;
  }

  .private-deploy-hero,
  .private-deploy-bottom {
    grid-template-columns: 1fr;
  }

  .private-deploy-orbit {
    display: none;
  }

  .private-deploy-proof,
  .private-deploy-grid,
  .private-deploy-flow {
    grid-template-columns: 1fr;
  }

  .system-modal[data-modal-type="about-enterprise"] {
    padding: 12px;
  }

  .system-modal[data-modal-type="about-enterprise"] .system-modal-panel {
    width: 96vw;
    padding: 16px;
  }

  .about-enterprise-hero,
  .about-enterprise-bottom,
  .about-enterprise-proof {
    grid-template-columns: 1fr;
  }

  .about-enterprise-hero {
    min-height: 0;
    padding: 24px;
  }

  .about-enterprise-visual img {
    min-height: 180px;
  }

  .about-enterprise-image-row,
  .about-enterprise-strip,
  .about-enterprise-grid {
    grid-template-columns: 1fr;
  }

  .about-enterprise-statement,
  .about-enterprise-proof,
  .about-enterprise-bottom {
    padding: 20px;
  }

  .about-v2-hero,
  .about-v2-capability-grid,
  .about-v2-build-list,
  .about-v2-proof {
    grid-template-columns: 1fr;
  }

  .about-v2-hero {
    min-height: 0;
    padding: 26px;
  }

  .about-v2-copy h3 {
    font-size: clamp(32px, 8vw, 44px);
  }

  .about-v2-stage {
    min-height: 330px;
  }

  .about-v2-metrics,
  .about-v2-build-list ul {
    grid-template-columns: 1fr;
  }

  .about-v2-capability-grid article.wide {
    grid-row: auto;
  }

  .about-v2-capability-grid .wide img {
    min-height: 190px;
  }

  .about-v2-build-list,
  .about-v2-proof {
    padding: 20px;
  }
}

/* Private deployment premium pass */
.system-modal[data-modal-type="private-deploy"] .system-modal-panel {
  width: min(1180px, 95vw);
  padding: 18px;
  background:
    linear-gradient(145deg, rgba(249, 250, 253, 0.98), rgba(235, 238, 246, 0.94)),
    #f7f8fb;
  border: 1px solid rgba(255, 255, 255, 0.72);
}

.system-modal[data-modal-type="private-deploy"] [data-modal-title] {
  padding-left: 8px;
  font-size: 22px;
}

.system-modal[data-modal-type="private-deploy"] .modal-close {
  top: 14px;
  right: 14px;
  color: #151820;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 36, 48, 0.12);
}

.private-deploy-modal {
  gap: 14px;
}

.private-deploy-hero {
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  min-height: 520px;
  padding: 54px;
  background:
    radial-gradient(circle at 18% 0, rgba(232, 210, 167, 0.24), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(135, 153, 204, 0.22), transparent 30%),
    linear-gradient(135deg, rgba(10, 12, 18, 0.99), rgba(23, 30, 48, 0.97) 48%, rgba(63, 72, 104, 0.92)),
    #111317;
  border-radius: 30px;
  box-shadow: 0 40px 110px rgba(19, 24, 39, 0.34);
}

.private-deploy-hero::before {
  inset: 22px;
  border-color: rgba(255, 255, 255, 0.08);
  border-radius: 24px;
}

.private-deploy-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: start;
}

.private-eyebrow {
  display: inline-grid;
  place-items: center;
  min-height: 30px;
  padding: 0 12px;
  background: rgba(232, 210, 167, 0.1);
  border: 1px solid rgba(232, 210, 167, 0.18);
  border-radius: 999px;
}

.private-deploy-copy h3 {
  max-width: 820px;
  margin: 18px 0 14px;
  color: #fff;
  font-size: clamp(48px, 6vw, 82px);
  line-height: 0.96;
  font-weight: 950;
}

.private-deploy-copy p {
  max-width: 720px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  line-height: 1.85;
}

.private-hero-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(640px, 100%);
  margin-top: 24px;
}

.private-hero-metrics article {
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
}

.private-hero-metrics b {
  color: #f4d59c;
  font-size: 34px;
  line-height: 1;
  font-weight: 950;
}

.private-hero-metrics span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 12px;
  font-weight: 900;
}

.private-commercial-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.private-commercial-badges span {
  min-height: 32px;
  display: inline-grid;
  place-items: center;
  padding: 0 12px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(232, 210, 167, 0.2);
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-weight: 900;
}

.private-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.private-hero-actions button {
  min-height: 46px;
  padding: 0 18px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
}

.private-hero-actions .primary-button {
  color: #151820;
  background: linear-gradient(145deg, #f8e6b9, #c39b5f);
  border-color: transparent;
  box-shadow: 0 18px 42px rgba(190, 151, 88, 0.24);
}

.private-deploy-system {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 320px;
}

.private-system-core {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 250px;
  height: 250px;
  padding: 24px;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(225, 230, 242, 0.86)),
    #fff;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 62px;
  box-shadow: 0 34px 88px rgba(0, 0, 0, 0.28);
}

.private-system-core small {
  color: #a27d47;
  font-size: 11px;
  font-weight: 950;
}

.private-system-core strong {
  color: #171b24;
  font-size: 30px;
  font-weight: 950;
}

.private-system-core span {
  color: #687080;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.private-system-ring {
  position: absolute;
  width: 310px;
  aspect-ratio: 1;
  border: 1px solid rgba(232, 210, 167, 0.22);
  border-radius: 50%;
}

.private-system-ring.ring-b {
  width: 410px;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.16);
}

.private-system-node {
  position: absolute;
  z-index: 4;
  min-width: 106px;
  padding: 10px 12px;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  backdrop-filter: blur(14px);
}

.private-system-node.node-a { top: 22px; left: 24px; }
.private-system-node.node-b { top: 54px; right: 0; }
.private-system-node.node-c { bottom: 42px; left: 0; }
.private-system-node.node-d { right: 34px; bottom: 12px; }

.private-value-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: rgba(31, 36, 48, 0.08);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 22px;
}

.private-value-strip article {
  display: grid;
  gap: 8px;
  min-height: 118px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.74);
}

.private-value-strip b {
  color: #b18a51;
  font-size: 13px;
  font-weight: 950;
}

.private-value-strip span {
  color: #202633;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.32;
}

.private-track-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  background: rgba(31, 36, 48, 0.06);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 18px;
}

.private-track-switch button {
  min-height: 46px;
  color: #4f5868;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 14px;
  font-size: 14px;
  font-weight: 950;
  transition: 0.18s ease;
}

.private-track-switch button.selected,
.private-track-switch button:hover {
  color: #fff;
  background: #151820;
  border-color: #151820;
  box-shadow: 0 16px 36px rgba(21, 24, 32, 0.18);
}

.private-track-showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.private-track-card {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  padding: 28px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(239, 242, 248, 0.72)),
    #fff;
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 26px;
  box-shadow: 0 18px 55px rgba(28, 34, 50, 0.08);
  opacity: 0.74;
  transition: 0.22s ease;
}

.private-track-card::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -70px;
  width: 180px;
  aspect-ratio: 1;
  border: 1px solid rgba(177, 138, 81, 0.18);
  border-radius: 50%;
}

.private-track-card.selected {
  opacity: 1;
  border-color: rgba(177, 138, 81, 0.28);
  box-shadow: 0 24px 80px rgba(28, 34, 50, 0.14);
  transform: translateY(-2px);
}

.private-track-card small {
  color: #a17b46;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
}

.private-track-card h4 {
  max-width: 520px;
  margin: 16px 0 12px;
  color: #171b24;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.12;
}

.private-track-card p {
  max-width: 560px;
  color: #626b78;
  font-size: 14px;
  font-weight: 730;
  line-height: 1.82;
}

.private-track-meta {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px 10px;
  margin-top: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 18px;
}

.private-track-meta b {
  color: #9b7a4d;
  font-size: 12px;
  font-weight: 950;
}

.private-track-meta span {
  color: #252d3b;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
}

.private-track-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.private-track-card div span {
  min-height: 34px;
  display: inline-grid;
  place-items: center;
  padding: 0 12px;
  color: #2a3140;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 850;
}

.private-track-card[data-private-track-panel="agent"].selected {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(248, 238, 217, 0.78)),
    #fff;
}

.private-track-card[data-private-track-panel="local"].selected {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(226, 232, 246, 0.82)),
    #fff;
}

.private-deploy-split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 14px;
}

.private-deploy-statement,
.private-deploy-matrix,
.private-delivery-board,
.private-deploy-bottom {
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 24px;
  box-shadow: 0 18px 55px rgba(28, 34, 50, 0.08);
}

.private-deploy-statement {
  padding: 28px;
}

.private-deploy-statement span,
.private-board-head span {
  color: #a17b46;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
}

.private-deploy-statement h4 {
  margin: 14px 0 12px;
  color: #171b24;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.16;
}

.private-deploy-statement p {
  color: #626b78;
  font-size: 14px;
  font-weight: 720;
  line-height: 1.82;
}

.private-deploy-matrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  padding: 1px;
  background: rgba(31, 36, 48, 0.08);
}

.private-deploy-matrix article {
  display: grid;
  align-content: center;
  min-height: 136px;
  padding: 22px;
  background: rgba(255, 255, 255, 0.8);
}

.private-deploy-matrix span {
  color: #9b7a4d;
  font-size: 11px;
  font-weight: 950;
}

.private-deploy-matrix b {
  margin: 8px 0 6px;
  color: #171b24;
  font-size: 22px;
  font-weight: 950;
}

.private-deploy-matrix em {
  color: #6a7280;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.private-delivery-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 16px 24px 2px;
  background: rgba(255, 255, 255, 0.78);
}

.private-delivery-timeline span {
  position: relative;
  min-height: 38px;
  display: grid;
  place-items: center;
  color: #1c2330;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 240, 229, 0.74));
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 950;
}

.private-delivery-timeline span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -9px;
  top: 50%;
  width: 9px;
  height: 1px;
  background: rgba(177, 138, 81, 0.36);
}

.private-delivery-board {
  overflow: hidden;
}

.private-board-head {
  display: grid;
  gap: 8px;
  padding: 22px 24px;
  background:
    linear-gradient(135deg, rgba(21, 24, 32, 0.96), rgba(50, 60, 88, 0.92)),
    #151820;
}

.private-board-head strong {
  color: #fff;
  font-size: 24px;
  line-height: 1.22;
}

.private-board-lines {
  display: grid;
}

.private-board-lines article {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 20px;
  padding: 16px 24px;
  border-top: 1px solid rgba(31, 36, 48, 0.07);
}

.private-board-lines b {
  color: #171b24;
  font-size: 14px;
  font-weight: 950;
}

.private-board-lines span {
  color: #626b78;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.55;
}

.private-deploy-bottom {
  grid-template-columns: minmax(0, 1fr) 190px;
  padding: 22px 24px;
  background:
    linear-gradient(135deg, rgba(231, 209, 165, 0.24), rgba(255, 255, 255, 0.86)),
    #fff;
}

.private-contact-page {
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  gap: 14px;
  padding: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 12% 0, rgba(232, 210, 167, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(14, 17, 24, 0.98), rgba(40, 48, 72, 0.95)),
    #151820;
  border: 1px solid rgba(232, 210, 167, 0.16);
  border-radius: 28px;
  box-shadow: 0 28px 82px rgba(21, 24, 32, 0.22);
}

.private-contact-page.active {
  display: grid;
}

.private-contact-copy {
  display: grid;
  align-content: center;
}

.private-contact-copy span {
  color: #d2b377;
  font-size: 11px;
  font-weight: 950;
}

.private-contact-copy h4 {
  margin: 12px 0 10px;
  color: #fff;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.02;
  font-weight: 950;
}

.private-contact-copy p {
  max-width: 560px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.8;
}

.private-contact-card {
  display: grid;
  align-content: center;
  gap: 14px;
  min-height: 220px;
  padding: 26px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
}

.private-contact-card small {
  color: #d2b377;
  font-size: 12px;
  font-weight: 950;
}

.private-contact-card strong {
  color: #fff;
  font-size: clamp(34px, 4vw, 50px);
  font-weight: 950;
  letter-spacing: 0;
}

.private-contact-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.private-contact-card a,
.private-contact-card button {
  min-height: 42px;
  display: inline-grid;
  place-items: center;
  padding: 0 16px;
  color: #151820;
  text-decoration: none;
  background: linear-gradient(145deg, #f8e6b9, #c39b5f);
  border: 0;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 950;
}

.private-page-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.private-page-switch button {
  display: grid;
  justify-items: start;
  gap: 6px;
  min-height: 108px;
  padding: 20px 22px;
  text-align: left;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(239, 242, 248, 0.78)),
    #fff;
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 24px;
  box-shadow: 0 18px 55px rgba(28, 34, 50, 0.08);
  transition: 0.2s ease;
}

.private-page-switch button.selected,
.private-page-switch button:hover {
  color: #fff;
  background:
    linear-gradient(145deg, rgba(21, 24, 32, 0.98), rgba(55, 64, 94, 0.94)),
    #151820;
  border-color: rgba(232, 210, 167, 0.2);
  box-shadow: 0 26px 78px rgba(21, 24, 32, 0.22);
  transform: translateY(-2px);
}

.private-page-switch small {
  color: #a17b46;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
}

.private-page-switch strong {
  color: inherit;
  font-size: 24px;
  font-weight: 950;
}

.private-page-switch span {
  color: #667080;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.private-page-switch button.selected span,
.private-page-switch button:hover span {
  color: rgba(255, 255, 255, 0.72);
}

.private-page-stack {
  display: grid;
}

.private-page-panel {
  display: none;
  gap: 14px;
}

.private-page-panel.selected {
  display: grid;
}

.private-page-header {
  position: relative;
  overflow: hidden;
  min-height: 285px;
  padding: 34px;
  background:
    radial-gradient(circle at 92% 12%, rgba(232, 210, 167, 0.26), transparent 32%),
    linear-gradient(135deg, rgba(21, 24, 32, 0.98), rgba(44, 52, 77, 0.94)),
    #151820;
  border: 1px solid rgba(232, 210, 167, 0.16);
  border-radius: 30px;
  box-shadow: 0 28px 82px rgba(21, 24, 32, 0.2);
}

.private-page-header.local {
  background:
    radial-gradient(circle at 92% 12%, rgba(176, 193, 230, 0.24), transparent 32%),
    linear-gradient(135deg, rgba(18, 24, 38, 0.98), rgba(42, 57, 91, 0.94)),
    #151820;
}

.private-page-header span,
.private-brand-statement small {
  color: #d2b377;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
}

.private-page-header h4 {
  max-width: 820px;
  margin: 18px 0 14px;
  color: #fff;
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.02;
  font-weight: 950;
}

.private-page-header p {
  max-width: 760px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  font-weight: 760;
  line-height: 1.85;
}

.private-page-proof,
.private-advantage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.private-page-proof article,
.private-brand-statement,
.private-advantage-grid article,
.private-route-board {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 24px;
  box-shadow: 0 18px 55px rgba(28, 34, 50, 0.08);
}

.private-page-proof article {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 128px;
  padding: 22px;
}

.private-page-proof b {
  color: #171b24;
  font-size: 18px;
  font-weight: 950;
}

.private-page-proof span {
  color: #626b78;
  font-size: 13px;
  font-weight: 780;
  line-height: 1.55;
}

.private-strength-band {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
  padding: 28px;
  color: #fff;
  background:
    radial-gradient(circle at 0 0, rgba(232, 210, 167, 0.22), transparent 34%),
    linear-gradient(135deg, rgba(22, 26, 36, 0.98), rgba(48, 56, 82, 0.94)),
    #151820;
  border: 1px solid rgba(232, 210, 167, 0.16);
  border-radius: 28px;
  box-shadow: 0 26px 78px rgba(21, 24, 32, 0.2);
}

.private-strength-band.local {
  background:
    radial-gradient(circle at 0 0, rgba(181, 198, 232, 0.2), transparent 34%),
    linear-gradient(135deg, rgba(18, 24, 38, 0.98), rgba(43, 58, 92, 0.94)),
    #151820;
}

.private-strength-band small {
  color: #d2b377;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0;
}

.private-strength-band h5 {
  max-width: 520px;
  margin: 14px 0 0;
  color: #fff;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.12;
  font-weight: 950;
}

.private-strength-band ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.private-strength-band li {
  min-height: 132px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.private-strength-band b {
  color: #f3d59c;
  font-size: 17px;
  font-weight: 950;
}

.private-strength-band span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.62;
}

.private-brand-statement {
  padding: 30px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 238, 217, 0.76)),
    #fff;
}

.private-brand-statement.local {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(229, 235, 249, 0.78)),
    #fff;
}

.private-brand-statement strong {
  display: block;
  max-width: 980px;
  margin: 14px 0 12px;
  color: #171b24;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.18;
  font-weight: 950;
}

.private-brand-statement p {
  max-width: 900px;
  color: #626b78;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.82;
}

.private-advantage-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.private-advantage-grid article {
  min-height: 210px;
  padding: 24px;
}

.private-advantage-grid span {
  color: #b18a51;
  font-size: 12px;
  font-weight: 950;
}

.private-advantage-grid b {
  display: block;
  margin: 18px 0 10px;
  color: #171b24;
  font-size: 24px;
  font-weight: 950;
}

.private-advantage-grid p {
  color: #626b78;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.7;
}

.private-route-board {
  display: grid;
  grid-template-columns: 150px repeat(5, minmax(0, 1fr));
  gap: 8px;
  align-items: center;
  padding: 18px;
}

.private-route-board b {
  color: #171b24;
  font-size: 18px;
  font-weight: 950;
}

.private-route-board span {
  min-height: 46px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  color: #252d3b;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(31, 36, 48, 0.08);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

@media (max-width: 980px) {
  .private-deploy-hero,
  .private-deploy-split,
  .private-deploy-bottom,
  .private-contact-page {
    grid-template-columns: 1fr;
  }

  .private-deploy-system {
    min-height: 280px;
  }

  .private-value-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .private-track-showcase {
    grid-template-columns: 1fr;
  }

  .private-page-switch,
  .private-page-proof,
  .private-advantage-grid,
  .private-strength-band,
  .private-route-board {
    grid-template-columns: 1fr;
  }

  .private-strength-band ul {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .private-deploy-hero {
    min-height: auto;
    padding: 26px;
  }

  .private-deploy-copy h3 {
    font-size: 34px;
  }

  .private-deploy-system {
    display: none;
  }

  .private-value-strip,
  .private-deploy-matrix,
  .private-track-switch,
  .private-hero-metrics,
  .private-delivery-timeline {
    grid-template-columns: 1fr;
  }

  .private-delivery-timeline span::after {
    display: none;
  }

  .private-board-lines article {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

@media (max-width: 860px) {
  .system-modal[data-modal-type="about-enterprise"] .about-v3-hero,
  .system-modal[data-modal-type="about-enterprise"] .about-v3-capabilities,
  .system-modal[data-modal-type="about-enterprise"] .about-v3-scope,
  .system-modal[data-modal-type="about-enterprise"] .about-v3-close {
    grid-template-columns: 1fr;
  }

  .system-modal[data-modal-type="about-enterprise"] .about-v3-hero {
    min-height: 0;
    padding: 24px;
    border-radius: 22px;
  }

  .system-modal[data-modal-type="about-enterprise"] .about-v3-hero h3 {
    font-size: clamp(34px, 10vw, 48px);
  }

  .system-modal[data-modal-type="about-enterprise"] .about-v3-command {
    display: none;
  }

  .system-modal[data-modal-type="about-enterprise"] .about-v3-capability-large {
    grid-row: auto;
    grid-template-rows: auto;
  }

  .system-modal[data-modal-type="about-enterprise"] .about-v3-capability-large img {
    min-height: 220px;
  }

  .system-modal[data-modal-type="about-enterprise"] .about-v3-capabilities article:not(.about-v3-capability-large) {
    grid-template-columns: 104px minmax(0, 1fr);
  }

  .system-modal[data-modal-type="about-enterprise"] .about-v3-scope-list {
    grid-template-columns: 1fr;
  }

  .system-modal[data-modal-type="about-enterprise"] .about-v3-scope,
  .system-modal[data-modal-type="about-enterprise"] .about-v3-close {
    padding: 20px;
  }
}

/* About enterprise V4 premium brand pass */
.system-modal[data-modal-type="about-enterprise"] {
  padding: 18px;
  background:
    radial-gradient(circle at 18% 0, rgba(214, 177, 109, 0.22), transparent 32%),
    radial-gradient(circle at 84% 8%, rgba(112, 133, 196, 0.16), transparent 28%),
    rgba(6, 7, 10, 0.68);
}

.system-modal[data-modal-type="about-enterprise"] .system-modal-panel {
  width: min(1280px, 96vw);
  max-height: min(900px, 94vh);
  padding: 14px;
  background:
    linear-gradient(145deg, rgba(246, 247, 250, 0.98), rgba(235, 238, 244, 0.95)),
    #f6f7fa;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 32px;
  box-shadow: 0 44px 120px rgba(4, 7, 13, 0.46);
}

.system-modal[data-modal-type="about-enterprise"] .section-kicker,
.system-modal[data-modal-type="about-enterprise"] [data-modal-title],
.system-modal[data-modal-type="about-enterprise"] [data-modal-body] {
  display: none;
}

.system-modal[data-modal-type="about-enterprise"] .modal-close {
  top: 24px;
  right: 24px;
  z-index: 5;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(18px);
}

.system-modal[data-modal-type="about-enterprise"] .modal-field-grid {
  margin-top: 0;
}

.about-enterprise-modal-v3 {
  gap: 16px;
}

.about-v3-hero {
  min-height: 560px;
  padding: 64px;
  grid-template-columns: minmax(0, 1.06fr) minmax(420px, 0.94fr);
  gap: 44px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 74% 10%, rgba(249, 216, 157, 0.28), transparent 34%),
    radial-gradient(circle at 18% 4%, rgba(255, 255, 255, 0.12), transparent 26%),
    linear-gradient(132deg, #07080c 0%, #151923 46%, #302516 100%);
  box-shadow: 0 36px 100px rgba(9, 12, 18, 0.38);
}

.about-v3-hero::before {
  inset: 24px;
  border-color: rgba(255, 255, 255, 0.1);
  border-radius: 24px;
}

.about-v3-hero::after {
  right: -18%;
  bottom: -64%;
  width: 76%;
  opacity: 0.85;
}

.about-v3-eyebrow {
  min-height: 32px;
  padding: 0 13px;
  color: #f7dfab;
  background: rgba(248, 220, 170, 0.1);
  border-color: rgba(248, 220, 170, 0.18);
}

.about-v3-hero h3 {
  max-width: 860px;
  margin: 22px 0 18px;
  font-size: clamp(48px, 5.8vw, 84px);
  line-height: 0.98;
}

.about-v3-hero p {
  max-width: 780px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 16px;
  line-height: 1.88;
}

.about-v3-hero-actions {
  margin-top: 30px;
}

.about-v3-hero-actions .primary-button,
.about-v3-ghost-link {
  min-height: 46px;
}

.about-v3-hero-actions .primary-button {
  min-width: 148px;
  border-radius: 999px;
  background: linear-gradient(145deg, #f8e6b9, #c39a59);
  box-shadow: 0 20px 46px rgba(195, 154, 89, 0.28);
}

.about-v3-ghost-link {
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.06);
}

.about-v3-hero-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(720px, 100%);
  margin-top: 28px;
}

.about-v3-hero-proof article {
  min-height: 84px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.about-v3-hero-proof b {
  color: #f4d69d;
  font-size: 18px;
  font-weight: 950;
}

.about-v3-hero-proof span {
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 900;
}

.about-v3-command {
  padding: 16px;
  border-radius: 30px;
  transform: perspective(1100px) rotateY(-4deg) rotateX(2deg);
}

.about-v3-command-screen {
  min-height: 370px;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035)),
    #0d1118;
}

.about-v3-screen-main {
  min-height: 178px;
  background:
    radial-gradient(circle at 90% 20%, rgba(244, 214, 157, 0.22), transparent 38%),
    linear-gradient(135deg, rgba(246, 210, 144, 0.18), rgba(255, 255, 255, 0.04)),
    #141a24;
}

.about-v3-screen-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.about-v3-manifesto {
  grid-template-columns: minmax(0, 0.25fr) minmax(0, 0.75fr);
  align-items: start;
  gap: 24px;
  padding: 28px 16px 10px;
}

.about-v3-manifesto strong {
  max-width: 980px;
  font-size: clamp(30px, 3.6vw, 50px);
}

.about-v3-value-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(29, 36, 50, 0.08);
  border-radius: 24px;
  background: rgba(29, 36, 50, 0.08);
}

.about-v3-value-strip article {
  min-height: 136px;
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(248, 241, 229, 0.72)),
    #fff;
}

.about-v3-value-strip span {
  color: #9c7640;
  font-size: 12px;
  font-weight: 950;
}

.about-v3-value-strip b {
  color: #18202c;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.42;
}

.about-v3-capabilities {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 14px;
}

.about-v3-capabilities article {
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(246, 248, 252, 0.78)),
    #fff;
  box-shadow: 0 22px 60px rgba(24, 31, 44, 0.08);
}

.about-v3-capability-large {
  padding: 28px;
  border-color: rgba(181, 138, 70, 0.2);
}

.about-v3-capabilities article:not(.about-v3-capability-large) {
  grid-template-columns: 136px minmax(0, 1fr);
  min-height: 178px;
}

.about-v3-capabilities strong {
  font-size: 21px;
}

.about-v3-capability-large strong {
  font-size: clamp(34px, 3.4vw, 50px);
}

.about-v3-scope {
  padding: 34px;
  grid-template-columns: minmax(300px, 0.38fr) minmax(0, 0.62fr);
  border-radius: 28px;
  background:
    radial-gradient(circle at 0 0, rgba(227, 196, 138, 0.2), transparent 34%),
    linear-gradient(135deg, rgba(18, 22, 31, 0.99), rgba(40, 47, 66, 0.96)),
    #151820;
}

.about-v3-scope-list {
  gap: 12px;
}

.about-v3-scope-list article {
  min-height: 106px;
  display: grid;
  align-content: start;
  padding: 18px;
  border-radius: 18px;
}

.about-v3-delivery {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  padding: 22px;
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(236, 240, 248, 0.82)),
    #fff;
  border: 1px solid rgba(31, 36, 48, 0.08);
  box-shadow: 0 20px 55px rgba(24, 31, 44, 0.08);
}

.about-v3-delivery > span {
  display: grid;
  place-items: center;
  color: #9c7640;
  background: rgba(156, 118, 64, 0.08);
  border: 1px solid rgba(156, 118, 64, 0.14);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 950;
}

.about-v3-delivery > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.about-v3-delivery article {
  min-height: 132px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 36, 48, 0.08);
}

.about-v3-delivery b {
  color: #c09759;
  font-size: 18px;
  font-weight: 950;
}

.about-v3-delivery strong {
  display: block;
  margin: 12px 0 8px;
  color: #171b24;
  font-size: 18px;
  font-weight: 950;
}

.about-v3-delivery em {
  color: #667080;
  font-style: normal;
  font-size: 12px;
  font-weight: 780;
  line-height: 1.55;
}

.about-v3-close {
  padding: 34px;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(251, 244, 229, 0.92), rgba(255, 255, 255, 0.94)),
    #fff;
}

.about-v3-close strong {
  font-size: clamp(28px, 3vw, 44px);
}

@media (max-width: 980px) {
  .about-v3-hero,
  .about-v3-manifesto,
  .about-v3-capabilities,
  .about-v3-scope,
  .about-v3-delivery,
  .about-v3-close {
    grid-template-columns: 1fr;
  }

  .about-v3-command {
    transform: none;
  }

  .about-v3-value-strip,
  .about-v3-delivery > div {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .system-modal[data-modal-type="about-enterprise"] {
    padding: 8px;
  }

  .system-modal[data-modal-type="about-enterprise"] .system-modal-panel {
    width: 98vw;
    padding: 10px;
    border-radius: 24px;
  }

  .about-v3-hero {
    min-height: auto;
    padding: 28px;
  }

  .about-v3-hero h3 {
    font-size: clamp(34px, 11vw, 48px);
  }

  .about-v3-hero-proof,
  .about-v3-screen-grid,
  .about-v3-scope-list {
    grid-template-columns: 1fr;
  }

  .about-v3-command {
    display: none;
  }

  .about-v3-capabilities article:not(.about-v3-capability-large) {
    grid-template-columns: 1fr;
  }

  .about-v3-capabilities article:not(.about-v3-capability-large) img,
  .about-v3-capability-large img {
    min-height: 190px;
  }
}

/* About enterprise V5: premium brand refinement */
.about-enterprise-modal-v5 {
  gap: 18px;
  color: #121722;
}

.about-enterprise-modal-v5 .about-v3-hero {
  position: relative;
  min-height: 600px;
  overflow: hidden;
  padding: 68px 62px 52px;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.78fr);
  align-items: center;
  gap: 52px;
  background:
    linear-gradient(90deg, rgba(7, 8, 12, 0.94), rgba(8, 9, 13, 0.72) 42%, rgba(12, 12, 15, 0.18) 64%),
    radial-gradient(circle at 82% 18%, rgba(235, 197, 126, 0.5), transparent 24%),
    linear-gradient(132deg, #06070a 0%, #151923 48%, #f0d49a 100%);
}

.about-enterprise-modal-v5 .about-v3-hero::before {
  inset: 22px;
  border-color: rgba(248, 224, 176, 0.14);
}

.about-enterprise-modal-v5 .about-v3-hero-copy {
  position: relative;
  z-index: 2;
}

.about-enterprise-modal-v5 .about-v3-eyebrow {
  min-height: 30px;
  padding: 0 12px;
  color: #f5d69b;
  background: rgba(246, 214, 156, 0.09);
  border-color: rgba(246, 214, 156, 0.2);
  letter-spacing: 0;
}

.about-enterprise-modal-v5 .about-v3-hero h3 {
  max-width: 720px;
  margin: 22px 0 20px;
  color: #fff8eb;
  font-size: clamp(42px, 4.55vw, 66px);
  font-weight: 950;
  line-height: 1.06;
  letter-spacing: 0;
  text-wrap: balance;
}

.about-enterprise-modal-v5 .about-v3-hero h3 span {
  display: block;
}

.about-enterprise-modal-v5 .about-v3-hero h3 span:first-child {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 820;
}

.about-enterprise-modal-v5 .about-v3-hero p {
  max-width: 690px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  line-height: 1.9;
}

.about-enterprise-modal-v5 .about-v3-hero-proof {
  width: min(620px, 100%);
  margin-top: 30px;
}

.about-enterprise-modal-v5 .about-v3-hero-proof article {
  min-height: 78px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(18px);
}

.about-enterprise-modal-v5 .about-v3-hero-proof b {
  color: #f8d99a;
  font-size: 15px;
}

.about-enterprise-modal-v5 .about-v3-hero-proof span {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
}

.about-enterprise-modal-v5 .about-v3-command {
  position: relative;
  z-index: 2;
  padding: 14px;
  border-radius: 28px;
  transform: perspective(1200px) rotateY(-3deg) rotateX(1deg);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.08)),
    rgba(11, 13, 19, 0.38);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: 0 34px 80px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(24px);
}

.about-enterprise-modal-v5 .about-v3-command-screen {
  min-height: 332px;
  padding: 18px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    #0c1118;
}

.about-enterprise-modal-v5 .about-v3-screen-main {
  min-height: 154px;
  padding: 20px;
  border-radius: 20px;
}

.about-enterprise-modal-v5 .about-v3-screen-main strong {
  max-width: 420px;
  font-size: clamp(21px, 2vw, 29px);
  line-height: 1.18;
}

.about-enterprise-modal-v5 .about-v3-screen-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.about-enterprise-modal-v5 .about-v3-screen-grid span {
  min-height: 42px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 12px;
}

.about-enterprise-modal-v5 .about-v3-manifesto {
  padding: 34px 22px 14px;
  grid-template-columns: minmax(170px, 0.2fr) minmax(0, 0.8fr);
}

.about-enterprise-modal-v5 .about-v3-manifesto strong {
  max-width: 1040px;
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.16;
}

.about-enterprise-modal-v5 .about-v3-value-strip {
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(28, 34, 47, 0.12), rgba(194, 151, 86, 0.16));
}

.about-enterprise-modal-v5 .about-v3-value-strip article {
  min-height: 126px;
  padding: 24px 28px;
}

.about-enterprise-modal-v5 .about-v3-value-strip span,
.about-enterprise-modal-v5 .about-v3-capabilities span,
.about-enterprise-modal-v5 .about-v3-scope-title span,
.about-enterprise-modal-v5 .about-v3-delivery > span,
.about-enterprise-modal-v5 .about-v3-close span {
  letter-spacing: 0;
}

.about-enterprise-modal-v5 .about-v3-value-strip b {
  font-size: 17px;
  line-height: 1.48;
}

.about-enterprise-modal-v5 .about-v3-capabilities {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 16px;
}

.about-enterprise-modal-v5 .about-v3-capabilities article {
  overflow: hidden;
  border: 1px solid rgba(18, 24, 36, 0.08);
  box-shadow: 0 22px 62px rgba(20, 28, 42, 0.08);
}

.about-enterprise-modal-v5 .about-v3-capability-large {
  min-height: 430px;
  background:
    linear-gradient(145deg, rgba(19, 23, 33, 0.98), rgba(42, 47, 63, 0.92)),
    #151923;
}

.about-enterprise-modal-v5 .about-v3-capability-large strong,
.about-enterprise-modal-v5 .about-v3-capability-large p {
  color: #fff;
}

.about-enterprise-modal-v5 .about-v3-capability-large p {
  color: rgba(255, 255, 255, 0.7);
}

.about-enterprise-modal-v5 .about-v3-capabilities article:not(.about-v3-capability-large) {
  min-height: 168px;
  grid-template-columns: 124px minmax(0, 1fr);
}

.about-enterprise-modal-v5 .about-v3-capabilities article:not(.about-v3-capability-large) img {
  min-height: 168px;
  object-fit: cover;
}

.about-enterprise-modal-v5 .about-v3-scope {
  padding: 34px;
  grid-template-columns: minmax(280px, 0.34fr) minmax(0, 0.66fr);
  background:
    radial-gradient(circle at 0 0, rgba(236, 204, 143, 0.26), transparent 32%),
    linear-gradient(135deg, #10141d, #202737 62%, #2d2417),
    #151820;
}

.about-enterprise-modal-v5 .about-v3-scope-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-enterprise-modal-v5 .about-v3-scope-list article {
  min-height: 112px;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.about-enterprise-modal-v5 .about-v3-delivery {
  grid-template-columns: minmax(150px, 0.16fr) minmax(0, 0.84fr);
  padding: 18px;
  border-radius: 28px;
}

.about-enterprise-modal-v5 .about-v3-delivery > div {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.about-enterprise-modal-v5 .about-v3-delivery article {
  min-height: 120px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(247, 240, 228, 0.7));
}

.about-enterprise-modal-v5 .about-v3-close {
  display: grid;
  grid-template-columns: minmax(0, 0.58fr) minmax(0, 0.42fr);
  gap: 28px;
  align-items: center;
  padding: 36px;
  background:
    linear-gradient(135deg, rgba(250, 239, 218, 0.95), rgba(255, 255, 255, 0.94)),
    #fff;
}

.about-enterprise-modal-v5 .about-v3-close strong {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.14;
}

@media (max-width: 980px) {
  .about-enterprise-modal-v5 .about-v3-hero,
  .about-enterprise-modal-v5 .about-v3-manifesto,
  .about-enterprise-modal-v5 .about-v3-capabilities,
  .about-enterprise-modal-v5 .about-v3-scope,
  .about-enterprise-modal-v5 .about-v3-delivery,
  .about-enterprise-modal-v5 .about-v3-close {
    grid-template-columns: 1fr;
  }

  .about-enterprise-modal-v5 .about-v3-command {
    transform: none;
  }

  .about-enterprise-modal-v5 .about-v3-scope-list,
  .about-enterprise-modal-v5 .about-v3-delivery > div {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .about-enterprise-modal-v5 .about-v3-hero {
    padding: 32px 26px;
    min-height: auto;
  }

  .about-enterprise-modal-v5 .about-v3-hero h3 {
    font-size: clamp(34px, 10vw, 46px);
  }

  .about-enterprise-modal-v5 .about-v3-hero-proof,
  .about-enterprise-modal-v5 .about-v3-screen-grid,
  .about-enterprise-modal-v5 .about-v3-value-strip {
    grid-template-columns: 1fr;
  }

  .about-enterprise-modal-v5 .about-v3-capabilities article:not(.about-v3-capability-large) {
    grid-template-columns: 1fr;
  }
}

/* ===== 扩图参数面板 (品牌UI风格) ===== */
.canvas-expand-panel {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 90;
  width: 360px;
  max-height: min(82vh, 620px);
  overflow: auto;
  padding: 22px;
  color: var(--ink);
  background: var(--glass-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  font-family: var(--font-ui);
}
.canvas-expand-panel[hidden] { display: none; }
.canvas-expand-panel .expand-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.canvas-expand-panel .expand-panel-head strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-display);
}
.canvas-expand-panel .expand-panel-close {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.canvas-expand-panel .expand-panel-close:hover {
  background: var(--blue-soft);
  color: var(--blue);
  border-color: var(--blue);
}
.canvas-expand-panel .expand-panel-hint {
  margin: 4px 0 16px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.canvas-expand-panel .expand-panel-section { margin-bottom: 18px; }
.canvas-expand-panel .expand-panel-label {
  display: block;
  margin-bottom: 9px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.canvas-expand-panel .expand-direction-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.canvas-expand-panel .expand-ratio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.canvas-expand-panel .expand-amount-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.canvas-expand-panel .expand-panel-section button {
  min-height: 38px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.canvas-expand-panel .expand-panel-section button:hover {
  background: var(--blue-soft);
  border-color: rgba(71, 120, 255, 0.4);
  color: var(--blue);
}
.canvas-expand-panel .expand-panel-section button.selected {
  background: var(--blue);
  border-color: var(--blue);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(71, 120, 255, 0.28);
}
.canvas-expand-panel .expand-panel-actions {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 10px;
  margin-top: 8px;
}
.canvas-expand-panel .expand-cancel {
  min-height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: var(--glass-solid);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.canvas-expand-panel .expand-cancel:hover {
  background: var(--bg);
  color: var(--ink);
}
.canvas-expand-panel .expand-confirm {
  min-height: 44px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--blue);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(71, 120, 255, 0.3);
  transition: all 0.15s ease;
}
.canvas-expand-panel .expand-confirm:hover { background: #3667ee; transform: translateY(-1px); }
.canvas-expand-panel .expand-confirm:active { transform: scale(0.98); }
.canvas-expand-backdrop {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: rgba(40, 45, 56, 0.28);
  backdrop-filter: blur(3px);
}
.canvas-expand-backdrop[hidden] { display: none; }

/* ===== 通用确认弹窗 (品牌UI风格) ===== */
.canvas-confirm-dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 92;
  width: 340px;
  padding: 28px 24px 22px;
  text-align: center;
  color: var(--ink);
  background: var(--glass-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  font-family: var(--font-ui);
}
.canvas-confirm-dialog[hidden] { display: none; }
.canvas-confirm-dialog .confirm-dialog-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  font-size: 26px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
}
.canvas-confirm-dialog .confirm-dialog-title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-display);
  margin-bottom: 8px;
}
.canvas-confirm-dialog .confirm-dialog-message {
  margin: 0 0 22px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.canvas-confirm-dialog .confirm-dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.canvas-confirm-dialog .confirm-dialog-cancel {
  min-height: 44px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-strong);
  background: var(--glass-solid);
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.canvas-confirm-dialog .confirm-dialog-cancel:hover {
  background: var(--bg);
  color: var(--ink);
}
.canvas-confirm-dialog .confirm-dialog-ok {
  min-height: 44px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--blue);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(71, 120, 255, 0.3);
  transition: all 0.15s ease;
}
.canvas-confirm-dialog .confirm-dialog-ok:hover { background: #3667ee; transform: translateY(-1px); }
.canvas-confirm-dialog .confirm-dialog-ok:active { transform: scale(0.98); }


/* ===== 视频工作台修复 (banana seedance) ===== */
/* Bug1: 视频上传后缩略图更明显 */
.console-assets > button.upload-zone.has-video-preview::before,
.console-assets > button.upload-zone.uploaded.has-video-preview::before {
  opacity: 0.82;
}
.console-assets > button.upload-zone.has-video-preview::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.28));
}
.console-assets > button.upload-zone.has-video-preview span,
.console-assets > button.upload-zone.has-video-preview strong,
.console-assets > button.upload-zone.has-video-preview small {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}
.console-assets > button.upload-zone.has-video-preview::after {
  content: "▶";
  display: grid;
  place-items: center;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.92);
}
/* console-asset-row 按钮(参考视频/首帧/尾帧)上传后显示缩略图 */
.page-video .video-generate-console .console-asset-row > button.uploaded {
  position: relative;
  overflow: hidden;
  background-image: var(--upload-preview, none);
  background-size: cover;
  background-position: center;
}
.page-video .video-generate-console .console-asset-row > button.uploaded::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.32));
  z-index: 0;
}
.page-video .video-generate-console .console-asset-row > button.uploaded span,
.page-video .video-generate-console .console-asset-row > button.uploaded small {
  position: relative;
  z-index: 1;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* Bug2: @素材引用选择浮层 */
.video-mention-menu {
  position: absolute;
  left: 16px;
  bottom: 64px;
  z-index: 40;
  width: min(320px, calc(100vw - 220px));
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(31, 36, 48, 0.1);
  background: rgba(255, 255, 255, 0.99);
  box-shadow: 0 24px 60px rgba(31, 36, 48, 0.22);
  animation: videoMentionPop 0.16s ease;
}
@keyframes videoMentionPop {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.video-mention-menu-head {
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}
.video-mention-menu-list {
  display: grid;
  gap: 4px;
}
.video-mention-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.video-mention-menu-item:hover,
.video-mention-menu-item:focus-visible {
  background: rgba(71, 120, 255, 0.08);
  border-color: rgba(71, 120, 255, 0.28);
}
.video-mention-thumb {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: rgba(71, 120, 255, 0.1);
  background-size: cover;
  background-position: center;
  font-size: 16px;
  color: rgba(71, 120, 255, 0.7);
}
.video-mention-thumb.is-video {
  background-color: rgba(31, 36, 48, 0.85);
  color: #fff;
}
.video-mention-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.video-mention-copy strong {
  font-size: 13px;
  color: #111317;
}
.video-mention-copy small {
  font-size: 11px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 失败卡片字形(替代pulse跳动) */
.video-card-glyph {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border-radius: 50%;
  font-size: 20px;
  font-weight: 700;
}
.video-card-glyph.failed {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}
.video-card-glyph.expired {
  background: rgba(107, 114, 128, 0.14);
  color: #6b7280;
}

/* ===== 视频生成模式开关 (flow-mode) ===== */
.video-flow-switch { display: flex; flex-direction: column; gap: 14px; margin: 16px 0; padding: 18px 20px; }
.video-flow-switch-head { display: flex; flex-direction: column; gap: 6px; }
.video-flow-switch-hint { margin: 0; font-size: 12.5px; line-height: 1.5; opacity: 0.7; }
.video-flow-switch-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.video-flow-option { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); cursor: pointer; transition: all 0.18s ease; text-align: left; }
.video-flow-option strong { font-size: 14.5px; }
.video-flow-option small { font-size: 11.5px; opacity: 0.62; }
.video-flow-option:hover { border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.06); }
.video-flow-option.selected { border-color: rgba(120,180,255,0.7); background: rgba(90,150,255,0.14); box-shadow: 0 0 0 1px rgba(120,180,255,0.4) inset; }

/* 直接生成模式: 隐藏整个策划展示区 */
.page-video.flow-mode-direct .video-plan-stage { display: none; }

/* 策划模式: 显示策划区 */
.page-video.flow-mode-planned .video-plan-stage { display: grid; }
/* 占位样板始终可见(用户选择保留好看的占位样板) */
[data-video-plan-empty] { display: none !important; }