/*!*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/.pnpm/next@14.2.35_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!../../node_modules/.pnpm/next@14.2.35_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./src/app/globals.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}
.\!container {
  width: 100% !important;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {
  .\!container {
    max-width: 640px !important;
  }
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;
  }
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px !important;
  }
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important;
  }
  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {
  .\!container {
    max-width: 1536px !important;
  }
  .container {
    max-width: 1536px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.collapse {
  visibility: collapse;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-x-2 {
  left: 0.5rem;
  right: 0.5rem;
}
.inset-x-3 {
  left: 0.75rem;
  right: 0.75rem;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-6 {
  bottom: -1.5rem;
}
.-bottom-\[17px\] {
  bottom: -17px;
}
.-right-2 {
  right: -0.5rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-1 {
  bottom: 0.25rem;
}
.bottom-1\.5 {
  bottom: 0.375rem;
}
.bottom-\[calc\(100\%\+6px\)\] {
  bottom: calc(100% + 6px);
}
.bottom-full {
  bottom: 100%;
}
.left-0 {
  left: 0px;
}
.left-0\.5 {
  left: 0.125rem;
}
.left-1 {
  left: 0.25rem;
}
.left-1\.5 {
  left: 0.375rem;
}
.left-2 {
  left: 0.5rem;
}
.left-3 {
  left: 0.75rem;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-1\.5 {
  right: 0.375rem;
}
.right-2 {
  right: 0.5rem;
}
.right-2\.5 {
  right: 0.625rem;
}
.right-6 {
  right: 1.5rem;
}
.top-0 {
  top: 0px;
}
.top-0\.5 {
  top: 0.125rem;
}
.top-1 {
  top: 0.25rem;
}
.top-1\.5 {
  top: 0.375rem;
}
.top-1\/2 {
  top: 50%;
}
.top-2 {
  top: 0.5rem;
}
.top-2\.5 {
  top: 0.625rem;
}
.top-3 {
  top: 0.75rem;
}
.top-\[-46px\] {
  top: -46px;
}
.top-\[0\.9em\] {
  top: 0.9em;
}
.top-full {
  top: 100%;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[1\] {
  z-index: 1;
}
.col-span-1 {
  grid-column: span 1 / span 1;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.m-0 {
  margin: 0px;
}
.m-auto {
  margin: auto;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-1\.5 {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-2\.5 {
  margin-bottom: 0.625rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-7 {
  margin-bottom: 1.75rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-\[2px\] {
  margin-left: 2px;
}
.ml-auto {
  margin-left: auto;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.mt-20 {
  margin-top: 5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-\[3px\] {
  margin-top: 3px;
}
.mt-auto {
  margin-top: auto;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.line-clamp-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.line-clamp-5 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}
.\!block {
  display: block !important;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.inline-grid {
  display: inline-grid;
}
.hidden {
  display: none;
}
.aspect-\[16\/10\] {
  aspect-ratio: 16/10;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.\!h-full {
  height: 100% !important;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[118px\] {
  height: 118px;
}
.h-\[160px\] {
  height: 160px;
}
.h-\[18px\] {
  height: 18px;
}
.h-\[20px\] {
  height: 20px;
}
.h-\[22px\] {
  height: 22px;
}
.h-\[292px\] {
  height: 292px;
}
.h-\[2px\] {
  height: 2px;
}
.h-\[320px\] {
  height: 320px;
}
.h-\[340px\] {
  height: 340px;
}
.h-\[36px\] {
  height: 36px;
}
.h-\[72px\] {
  height: 72px;
}
.h-\[7px\] {
  height: 7px;
}
.h-\[88px\] {
  height: 88px;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.h-screen {
  height: 100vh;
}
.max-h-\[112px\] {
  max-height: 112px;
}
.max-h-\[240px\] {
  max-height: 240px;
}
.max-h-\[430px\] {
  max-height: 430px;
}
.max-h-\[450px\] {
  max-height: 450px;
}
.max-h-\[58vh\] {
  max-height: 58vh;
}
.max-h-\[78vh\] {
  max-height: 78vh;
}
.max-h-\[86vh\] {
  max-height: 86vh;
}
.min-h-0 {
  min-height: 0px;
}
.min-h-\[140px\] {
  min-height: 140px;
}
.min-h-\[224px\] {
  min-height: 224px;
}
.min-h-\[22px\] {
  min-height: 22px;
}
.min-h-\[46vh\] {
  min-height: 46vh;
}
.min-h-\[480px\] {
  min-height: 480px;
}
.min-h-\[62px\] {
  min-height: 62px;
}
.min-h-screen {
  min-height: 100vh;
}
.\!w-full {
  width: 100% !important;
}
.w-1 {
  width: 0.25rem;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-1\/3 {
  width: 33.333333%;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-16 {
  width: 4rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-4 {
  width: 1rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-7 {
  width: 1.75rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[140px\] {
  width: 140px;
}
.w-\[168px\] {
  width: 168px;
}
.w-\[176px\] {
  width: 176px;
}
.w-\[18px\] {
  width: 18px;
}
.w-\[206px\] {
  width: 206px;
}
.w-\[22px\] {
  width: 22px;
}
.w-\[240px\] {
  width: 240px;
}
.w-\[340px\] {
  width: 340px;
}
.w-\[380px\] {
  width: 380px;
}
.w-\[440px\] {
  width: 440px;
}
.w-\[72px\] {
  width: 72px;
}
.w-\[7px\] {
  width: 7px;
}
.w-\[min\(390px\2c calc\(100vw-48px\)\)\] {
  width: min(390px, calc(100vw - 48px));
}
.w-auto {
  width: auto;
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-8 {
  min-width: 2rem;
}
.min-w-\[104px\] {
  min-width: 104px;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-\[1040px\] {
  max-width: 1040px;
}
.max-w-\[1120px\] {
  max-width: 1120px;
}
.max-w-\[1280px\] {
  max-width: 1280px;
}
.max-w-\[360px\] {
  max-width: 360px;
}
.max-w-\[520px\] {
  max-width: 520px;
}
.max-w-\[560px\] {
  max-width: 560px;
}
.max-w-\[590px\] {
  max-width: 590px;
}
.max-w-\[620px\] {
  max-width: 620px;
}
.max-w-\[720px\] {
  max-width: 720px;
}
.max-w-\[780px\] {
  max-width: 780px;
}
.max-w-\[820px\] {
  max-width: 820px;
}
.max-w-\[88vw\] {
  max-width: 88vw;
}
.max-w-\[92px\] {
  max-width: 92px;
}
.max-w-\[980px\] {
  max-width: 980px;
}
.max-w-\[calc\(100\%-16px\)\] {
  max-width: calc(100% - 16px);
}
.max-w-\[calc\(100\%-96px\)\] {
  max-width: calc(100% - 96px);
}
.max-w-\[min\(720px\2c 82\%\)\] {
  max-width: min(720px, 82%);
}
.max-w-\[min\(760px\2c 86\%\)\] {
  max-width: min(760px, 86%);
}
.max-w-\[min\(840px\2c 88\%\)\] {
  max-width: min(840px, 88%);
}
.max-w-prose {
  max-width: 65ch;
}
.max-w-sm {
  max-width: 24rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-1 {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-110 {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.1;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.scale-125 {
  --tw-scale-x: 1.25;
  --tw-scale-y: 1.25;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {
  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-zoom-out {
  cursor: zoom-out;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize {
  resize: both;
}
.snap-x {
  scroll-snap-type: x var(--tw-scroll-snap-strictness);
}
.snap-start {
  scroll-snap-align: start;
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-\[repeat\(auto-fill\2c minmax\(210px\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fill,minmax(210px,1fr));
}
.grid-cols-\[repeat\(auto-fill\2c minmax\(220px\2c 1fr\)\)\] {
  grid-template-columns: repeat(auto-fill,minmax(220px,1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-items-center {
  place-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-3\.5 {
  gap: 0.875rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-7 {
  gap: 1.75rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-\[2px\] {
  gap: 2px;
}
.gap-x-1 {
  -moz-column-gap: 0.25rem;
       column-gap: 0.25rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.-space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(-0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.overscroll-contain {
  overscroll-behavior: contain;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.break-words {
  overflow-wrap: break-word;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-\[10px\] {
  border-radius: 10px;
}
.rounded-\[12px\] {
  border-radius: 12px;
}
.rounded-\[14px\] {
  border-radius: 14px;
}
.rounded-\[16px\] {
  border-radius: 16px;
}
.rounded-\[18px\] {
  border-radius: 18px;
}
.rounded-\[20px\] {
  border-radius: 20px;
}
.rounded-\[2px\] {
  border-radius: 2px;
}
.rounded-\[3px\] {
  border-radius: 3px;
}
.rounded-\[4px\] {
  border-radius: 4px;
}
.rounded-\[5px\] {
  border-radius: 5px;
}
.rounded-\[8px\] {
  border-radius: 8px;
}
.rounded-\[9px\] {
  border-radius: 9px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-pill {
  border-radius: 9999px;
}
.rounded-surface-2xl {
  border-radius: 14px;
}
.rounded-surface-3xl {
  border-radius: 16px;
}
.rounded-surface-4xl {
  border-radius: 20px;
}
.rounded-surface-lg {
  border-radius: 10px;
}
.rounded-surface-md {
  border-radius: 8px;
}
.rounded-surface-sm {
  border-radius: 6px;
}
.rounded-surface-xl {
  border-radius: 12px;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-\[\#1d2b40\] {
  --tw-border-opacity: 1;
  border-color: rgb(29 43 64 / var(--tw-border-opacity, 1));
}
.border-\[\#1d2b40\]\/80 {
  border-color: rgb(29 43 64 / 0.8);
}
.border-\[\#31435c\] {
  --tw-border-opacity: 1;
  border-color: rgb(49 67 92 / var(--tw-border-opacity, 1));
}
.border-\[\#68e0cf\]\/55 {
  border-color: rgb(104 224 207 / 0.55);
}
.border-\[\#68e0cf\]\/60 {
  border-color: rgb(104 224 207 / 0.6);
}
.border-accent-400 {
  --tw-border-opacity: 1;
  border-color: rgb(251 146 60 / var(--tw-border-opacity, 1));
}
.border-accent-400\/30 {
  border-color: rgb(251 146 60 / 0.3);
}
.border-accent-400\/55 {
  border-color: rgb(251 146 60 / 0.55);
}
.border-accent-400\/65 {
  border-color: rgb(251 146 60 / 0.65);
}
.border-accent-400\/70 {
  border-color: rgb(251 146 60 / 0.7);
}
.border-accent-500\/20 {
  border-color: rgb(249 115 22 / 0.2);
}
.border-accent-500\/30 {
  border-color: rgb(249 115 22 / 0.3);
}
.border-accent-500\/35 {
  border-color: rgb(249 115 22 / 0.35);
}
.border-accent-500\/45 {
  border-color: rgb(249 115 22 / 0.45);
}
.border-bg-surface {
  --tw-border-opacity: 1;
  border-color: rgb(20 23 29 / var(--tw-border-opacity, 1));
}
.border-border-accent {
  border-color: rgba(251, 146, 60, 0.55);
}
.border-border-ghost {
  border-color: rgba(255, 255, 255, 0.1);
}
.border-border-strong {
  --tw-border-opacity: 1;
  border-color: rgb(58 61 68 / var(--tw-border-opacity, 1));
}
.border-border-subtle {
  --tw-border-opacity: 1;
  border-color: rgb(46 46 46 / var(--tw-border-opacity, 1));
}
.border-current {
  border-color: currentColor;
}
.border-cyan-200\/30 {
  border-color: rgb(165 243 252 / 0.3);
}
.border-danger-500\/30 {
  border-color: rgb(248 113 113 / 0.3);
}
.border-danger-500\/35 {
  border-color: rgb(248 113 113 / 0.35);
}
.border-danger-500\/55 {
  border-color: rgb(248 113 113 / 0.55);
}
.border-orange-300\/70 {
  border-color: rgb(253 186 116 / 0.7);
}
.border-orange-400\/55 {
  border-color: rgb(251 146 60 / 0.55);
}
.border-red-500\/30 {
  border-color: rgb(239 68 68 / 0.3);
}
.border-success-500\/30 {
  border-color: rgb(52 211 153 / 0.3);
}
.border-transparent {
  border-color: transparent;
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.border-white\/15 {
  border-color: rgb(255 255 255 / 0.15);
}
.border-white\/20 {
  border-color: rgb(255 255 255 / 0.2);
}
.border-white\/25 {
  border-color: rgb(255 255 255 / 0.25);
}
.border-white\/\[0\.05\] {
  border-color: rgb(255 255 255 / 0.05);
}
.border-white\/\[0\.06\] {
  border-color: rgb(255 255 255 / 0.06);
}
.border-white\/\[0\.07\] {
  border-color: rgb(255 255 255 / 0.07);
}
.border-white\/\[0\.085\] {
  border-color: rgb(255 255 255 / 0.085);
}
.border-white\/\[0\.08\] {
  border-color: rgb(255 255 255 / 0.08);
}
.border-white\/\[0\.09\] {
  border-color: rgb(255 255 255 / 0.09);
}
.border-white\/\[0\.12\] {
  border-color: rgb(255 255 255 / 0.12);
}
.border-white\/\[0\.13\] {
  border-color: rgb(255 255 255 / 0.13);
}
.border-white\/\[0\.16\] {
  border-color: rgb(255 255 255 / 0.16);
}
.border-white\/\[0\.18\] {
  border-color: rgb(255 255 255 / 0.18);
}
.border-white\/\[0\.1\] {
  border-color: rgb(255 255 255 / 0.1);
}
.border-t-current {
  border-top-color: currentColor;
}
.border-t-transparent {
  border-top-color: transparent;
}
.border-t-white {
  --tw-border-opacity: 1;
  border-top-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.bg-\[\#060607\] {
  --tw-bg-opacity: 1;
  background-color: rgb(6 6 7 / var(--tw-bg-opacity, 1));
}
.bg-\[\#060d1a\] {
  --tw-bg-opacity: 1;
  background-color: rgb(6 13 26 / var(--tw-bg-opacity, 1));
}
.bg-\[\#080a0d\] {
  --tw-bg-opacity: 1;
  background-color: rgb(8 10 13 / var(--tw-bg-opacity, 1));
}
.bg-\[\#0e1725\] {
  --tw-bg-opacity: 1;
  background-color: rgb(14 23 37 / var(--tw-bg-opacity, 1));
}
.bg-\[\#101827\]\/95 {
  background-color: rgb(16 24 39 / 0.95);
}
.bg-\[\#101d2f\]\/80 {
  background-color: rgb(16 29 47 / 0.8);
}
.bg-\[\#111f35\] {
  --tw-bg-opacity: 1;
  background-color: rgb(17 31 53 / var(--tw-bg-opacity, 1));
}
.bg-\[\#5ad9b0\] {
  --tw-bg-opacity: 1;
  background-color: rgb(90 217 176 / var(--tw-bg-opacity, 1));
}
.bg-\[\#68e0cf\]\/80 {
  background-color: rgb(104 224 207 / 0.8);
}
.bg-accent-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 215 170 / var(--tw-bg-opacity, 1));
}
.bg-accent-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 186 116 / var(--tw-bg-opacity, 1));
}
.bg-accent-300\/90 {
  background-color: rgb(253 186 116 / 0.9);
}
.bg-accent-400\/20 {
  background-color: rgb(251 146 60 / 0.2);
}
.bg-accent-400\/90 {
  background-color: rgb(251 146 60 / 0.9);
}
.bg-accent-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.bg-accent-500\/10 {
  background-color: rgb(249 115 22 / 0.1);
}
.bg-accent-500\/15 {
  background-color: rgb(249 115 22 / 0.15);
}
.bg-accent-500\/85 {
  background-color: rgb(249 115 22 / 0.85);
}
.bg-accent-500\/\[0\.045\] {
  background-color: rgb(249 115 22 / 0.045);
}
.bg-accent-500\/\[0\.06\] {
  background-color: rgb(249 115 22 / 0.06);
}
.bg-accent-500\/\[0\.08\] {
  background-color: rgb(249 115 22 / 0.08);
}
.bg-accent-500\/\[0\.16\] {
  background-color: rgb(249 115 22 / 0.16);
}
.bg-bg-base {
  --tw-bg-opacity: 1;
  background-color: rgb(15 17 21 / var(--tw-bg-opacity, 1));
}
.bg-bg-base\/40 {
  background-color: rgb(15 17 21 / 0.4);
}
.bg-bg-base\/80 {
  background-color: rgb(15 17 21 / 0.8);
}
.bg-bg-base\/95 {
  background-color: rgb(15 17 21 / 0.95);
}
.bg-bg-chip {
  --tw-bg-opacity: 1;
  background-color: rgb(53 57 66 / var(--tw-bg-opacity, 1));
}
.bg-bg-chip\/60 {
  background-color: rgb(53 57 66 / 0.6);
}
.bg-bg-input {
  --tw-bg-opacity: 1;
  background-color: rgb(14 16 21 / var(--tw-bg-opacity, 1));
}
.bg-bg-input\/65 {
  background-color: rgb(14 16 21 / 0.65);
}
.bg-bg-input\/70 {
  background-color: rgb(14 16 21 / 0.7);
}
.bg-bg-input\/80 {
  background-color: rgb(14 16 21 / 0.8);
}
.bg-bg-surface {
  --tw-bg-opacity: 1;
  background-color: rgb(20 23 29 / var(--tw-bg-opacity, 1));
}
.bg-bg-surface-2 {
  --tw-bg-opacity: 1;
  background-color: rgb(24 27 34 / var(--tw-bg-opacity, 1));
}
.bg-bg-surface-2\/60 {
  background-color: rgb(24 27 34 / 0.6);
}
.bg-bg-surface-3 {
  --tw-bg-opacity: 1;
  background-color: rgb(27 29 34 / var(--tw-bg-opacity, 1));
}
.bg-bg-surface\/70 {
  background-color: rgb(20 23 29 / 0.7);
}
.bg-bg-surface\/95 {
  background-color: rgb(20 23 29 / 0.95);
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/20 {
  background-color: rgb(0 0 0 / 0.2);
}
.bg-black\/25 {
  background-color: rgb(0 0 0 / 0.25);
}
.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/35 {
  background-color: rgb(0 0 0 / 0.35);
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/45 {
  background-color: rgb(0 0 0 / 0.45);
}
.bg-black\/55 {
  background-color: rgb(0 0 0 / 0.55);
}
.bg-black\/65 {
  background-color: rgb(0 0 0 / 0.65);
}
.bg-black\/75 {
  background-color: rgb(0 0 0 / 0.75);
}
.bg-cyan-200\/10 {
  background-color: rgb(165 243 252 / 0.1);
}
.bg-danger-500\/10 {
  background-color: rgb(248 113 113 / 0.1);
}
.bg-danger-500\/15 {
  background-color: rgb(248 113 113 / 0.15);
}
.bg-danger-500\/\[0\.08\] {
  background-color: rgb(248 113 113 / 0.08);
}
.bg-emerald-300\/10 {
  background-color: rgb(110 231 183 / 0.1);
}
.bg-emerald-300\/20 {
  background-color: rgb(110 231 183 / 0.2);
}
.bg-orange-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(253 186 116 / var(--tw-bg-opacity, 1));
}
.bg-orange-300\/85 {
  background-color: rgb(253 186 116 / 0.85);
}
.bg-orange-400\/90 {
  background-color: rgb(251 146 60 / 0.9);
}
.bg-orange-500\/15 {
  background-color: rgb(249 115 22 / 0.15);
}
.bg-orange-500\/\[0\.045\] {
  background-color: rgb(249 115 22 / 0.045);
}
.bg-red-500\/\[0\.08\] {
  background-color: rgb(239 68 68 / 0.08);
}
.bg-success-500\/10 {
  background-color: rgb(52 211 153 / 0.1);
}
.bg-text-secondary {
  background-color: rgba(255, 255, 255, 0.85);
}
.bg-text-secondary\/65 {
  background-color: rgba(255, 255, 255, 0.65);
}
.bg-text-subtle {
  background-color: rgba(255, 255, 255, 0.35);
}
.bg-transparent {
  background-color: transparent;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/30 {
  background-color: rgb(255 255 255 / 0.3);
}
.bg-white\/35 {
  background-color: rgb(255 255 255 / 0.35);
}
.bg-white\/90 {
  background-color: rgb(255 255 255 / 0.9);
}
.bg-white\/\[0\.018\] {
  background-color: rgb(255 255 255 / 0.018);
}
.bg-white\/\[0\.025\] {
  background-color: rgb(255 255 255 / 0.025);
}
.bg-white\/\[0\.035\] {
  background-color: rgb(255 255 255 / 0.035);
}
.bg-white\/\[0\.03\] {
  background-color: rgb(255 255 255 / 0.03);
}
.bg-white\/\[0\.045\] {
  background-color: rgb(255 255 255 / 0.045);
}
.bg-white\/\[0\.04\] {
  background-color: rgb(255 255 255 / 0.04);
}
.bg-white\/\[0\.05\] {
  background-color: rgb(255 255 255 / 0.05);
}
.bg-white\/\[0\.06\] {
  background-color: rgb(255 255 255 / 0.06);
}
.bg-white\/\[0\.075\] {
  background-color: rgb(255 255 255 / 0.075);
}
.bg-white\/\[0\.07\] {
  background-color: rgb(255 255 255 / 0.07);
}
.bg-white\/\[0\.08\] {
  background-color: rgb(255 255 255 / 0.08);
}
.bg-white\/\[0\.09\] {
  background-color: rgb(255 255 255 / 0.09);
}
.bg-white\/\[0\.1\] {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-\[radial-gradient\(circle_at_18\%_12\%\2c rgba\(104\2c 224\2c 207\2c 0\.14\)\2c transparent_30\%\)\2c radial-gradient\(circle_at_84\%_8\%\2c rgba\(138\2c 180\2c 255\2c 0\.13\)\2c transparent_34\%\)\2c linear-gradient\(180deg\2c rgba\(255\2c 255\2c 255\2c 0\.04\)\2c transparent_36\%\)\] {
  background-image: radial-gradient(circle at 18% 12%,rgba(104,224,207,0.14),transparent 30%),radial-gradient(circle at 84% 8%,rgba(138,180,255,0.13),transparent 34%),linear-gradient(180deg,rgba(255,255,255,0.04),transparent 36%);
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}
.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}
.from-\[\#22d3ee\] {
  --tw-gradient-from: #22d3ee var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(34 211 238 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-\[\#67e8f9\] {
  --tw-gradient-from: #67e8f9 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(103 232 249 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/45 {
  --tw-gradient-from: rgb(0 0 0 / 0.45) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/55 {
  --tw-gradient-from: rgb(0 0 0 / 0.55) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/75 {
  --tw-gradient-from: rgb(0 0 0 / 0.75) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-black\/80 {
  --tw-gradient-from: rgb(0 0 0 / 0.8) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-cyan-300\/20 {
  --tw-gradient-from: rgb(103 232 249 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(103 232 249 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-indigo-500\/35 {
  --tw-gradient-from: rgb(99 102 241 / 0.35) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-indigo-500\/40 {
  --tw-gradient-from: rgb(99 102 241 / 0.4) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[\#818cf8\] {
  --tw-gradient-to: rgb(129 140 248 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #818cf8 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-black\/50 {
  --tw-gradient-to: rgb(0 0 0 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(0 0 0 / 0.5) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.via-indigo-300\/15 {
  --tw-gradient-to: rgb(165 180 252 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(165 180 252 / 0.15) var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#818cf8\] {
  --tw-gradient-to: #818cf8 var(--tw-gradient-to-position);
}
.to-\[\#c084fc\] {
  --tw-gradient-to: #c084fc var(--tw-gradient-to-position);
}
.to-fuchsia-300\/15 {
  --tw-gradient-to: rgb(240 171 252 / 0.15) var(--tw-gradient-to-position);
}
.to-purple-500\/25 {
  --tw-gradient-to: rgb(168 85 247 / 0.25) var(--tw-gradient-to-position);
}
.to-purple-500\/40 {
  --tw-gradient-to: rgb(168 85 247 / 0.4) var(--tw-gradient-to-position);
}
.to-transparent {
  --tw-gradient-to: transparent var(--tw-gradient-to-position);
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-\[3px\] {
  padding: 3px;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-7 {
  padding-top: 1.75rem;
  padding-bottom: 1.75rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-\[1px\] {
  padding-top: 1px;
  padding-bottom: 1px;
}
.py-\[2px\] {
  padding-top: 2px;
  padding-bottom: 2px;
}
.py-\[7px\] {
  padding-top: 7px;
  padding-bottom: 7px;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-1\.5 {
  padding-bottom: 0.375rem;
}
.pb-10 {
  padding-bottom: 2.5rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-2\.5 {
  padding-bottom: 0.625rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-24 {
  padding-bottom: 6rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pl-1 {
  padding-left: 0.25rem;
}
.pl-1\.5 {
  padding-left: 0.375rem;
}
.pl-2\.5 {
  padding-left: 0.625rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pt-0\.5 {
  padding-top: 0.125rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-1\.5 {
  padding-top: 0.375rem;
}
.pt-12 {
  padding-top: 3rem;
}
.pt-14 {
  padding-top: 3.5rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-8 {
  padding-top: 2rem;
}
.pt-\[136px\] {
  padding-top: 136px;
}
.pt-\[96px\] {
  padding-top: 96px;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.font-display {
  font-family: Avenir Next, SF Pro Display, Segoe UI, PingFang SC, Microsoft YaHei, system-ui, sans-serif;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
  font-family: Avenir Next, SF Pro Text, Segoe UI, PingFang SC, Microsoft YaHei, system-ui, sans-serif;
}
.font-serif {
  font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}
.text-\[10\.5px\] {
  font-size: 10.5px;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11\.5px\] {
  font-size: 11.5px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12\.5px\] {
  font-size: 12.5px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13\.5px\] {
  font-size: 13.5px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[16px\] {
  font-size: 16px;
}
.text-\[17px\] {
  font-size: 17px;
}
.text-\[18px\] {
  font-size: 18px;
}
.text-\[19px\] {
  font-size: 19px;
}
.text-\[20px\] {
  font-size: 20px;
}
.text-\[22px\] {
  font-size: 22px;
}
.text-\[24px\] {
  font-size: 24px;
}
.text-\[26px\] {
  font-size: 26px;
}
.text-\[30px\] {
  font-size: 30px;
}
.text-\[32px\] {
  font-size: 32px;
}
.text-\[64px\] {
  font-size: 64px;
}
.text-\[7px\] {
  font-size: 7px;
}
.text-\[8px\] {
  font-size: 8px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-light {
  font-weight: 300;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-4 {
  line-height: 1rem;
}
.leading-7 {
  line-height: 1.75rem;
}
.leading-8 {
  line-height: 2rem;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.02em\] {
  letter-spacing: 0.02em;
}
.tracking-\[0\.08em\] {
  letter-spacing: 0.08em;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-\[0\.24em\] {
  letter-spacing: 0.24em;
}
.tracking-\[0\.28em\] {
  letter-spacing: 0.28em;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-\[0\.3em\] {
  letter-spacing: 0.3em;
}
.tracking-normal {
  letter-spacing: 0em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.text-\[\#06101f\] {
  --tw-text-opacity: 1;
  color: rgb(6 16 31 / var(--tw-text-opacity, 1));
}
.text-\[\#07c160\] {
  --tw-text-opacity: 1;
  color: rgb(7 193 96 / var(--tw-text-opacity, 1));
}
.text-\[\#1a1a1a\] {
  --tw-text-opacity: 1;
  color: rgb(26 26 26 / var(--tw-text-opacity, 1));
}
.text-\[\#466482\] {
  --tw-text-opacity: 1;
  color: rgb(70 100 130 / var(--tw-text-opacity, 1));
}
.text-\[\#4f708f\] {
  --tw-text-opacity: 1;
  color: rgb(79 112 143 / var(--tw-text-opacity, 1));
}
.text-\[\#5b7a9e\] {
  --tw-text-opacity: 1;
  color: rgb(91 122 158 / var(--tw-text-opacity, 1));
}
.text-\[\#7d95b3\] {
  --tw-text-opacity: 1;
  color: rgb(125 149 179 / var(--tw-text-opacity, 1));
}
.text-\[\#94e7ed\] {
  --tw-text-opacity: 1;
  color: rgb(148 231 237 / var(--tw-text-opacity, 1));
}
.text-\[\#9fd0ff\] {
  --tw-text-opacity: 1;
  color: rgb(159 208 255 / var(--tw-text-opacity, 1));
}
.text-\[\#b8fff4\] {
  --tw-text-opacity: 1;
  color: rgb(184 255 244 / var(--tw-text-opacity, 1));
}
.text-\[\#c8d9ec\] {
  --tw-text-opacity: 1;
  color: rgb(200 217 236 / var(--tw-text-opacity, 1));
}
.text-\[\#eef4fb\] {
  --tw-text-opacity: 1;
  color: rgb(238 244 251 / var(--tw-text-opacity, 1));
}
.text-accent-200 {
  --tw-text-opacity: 1;
  color: rgb(254 215 170 / var(--tw-text-opacity, 1));
}
.text-accent-200\/80 {
  color: rgb(254 215 170 / 0.8);
}
.text-accent-200\/90 {
  color: rgb(254 215 170 / 0.9);
}
.text-accent-300 {
  --tw-text-opacity: 1;
  color: rgb(253 186 116 / var(--tw-text-opacity, 1));
}
.text-accent-300\/90 {
  color: rgb(253 186 116 / 0.9);
}
.text-accent-400 {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.text-amber-200\/90 {
  color: rgb(253 230 138 / 0.9);
}
.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity, 1));
}
.text-cyan-100 {
  --tw-text-opacity: 1;
  color: rgb(207 250 254 / var(--tw-text-opacity, 1));
}
.text-danger-500 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-emerald-100 {
  --tw-text-opacity: 1;
  color: rgb(209 250 229 / var(--tw-text-opacity, 1));
}
.text-emerald-300\/90 {
  color: rgb(110 231 183 / 0.9);
}
.text-emerald-50 {
  --tw-text-opacity: 1;
  color: rgb(236 253 245 / var(--tw-text-opacity, 1));
}
.text-orange-100 {
  --tw-text-opacity: 1;
  color: rgb(255 237 213 / var(--tw-text-opacity, 1));
}
.text-orange-200\/90 {
  color: rgb(254 215 170 / 0.9);
}
.text-orange-300 {
  --tw-text-opacity: 1;
  color: rgb(253 186 116 / var(--tw-text-opacity, 1));
}
.text-orange-300\/90 {
  color: rgb(253 186 116 / 0.9);
}
.text-orange-50 {
  --tw-text-opacity: 1;
  color: rgb(255 247 237 / var(--tw-text-opacity, 1));
}
.text-red-200 {
  --tw-text-opacity: 1;
  color: rgb(254 202 202 / var(--tw-text-opacity, 1));
}
.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-success-500 {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}
.text-text-disabled {
  color: rgba(255, 255, 255, 0.25);
}
.text-text-muted {
  --tw-text-opacity: 1;
  color: rgb(186 186 186 / var(--tw-text-opacity, 1));
}
.text-text-primary {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-text-secondary {
  color: rgba(255, 255, 255, 0.85);
}
.text-text-subtle {
  color: rgba(255, 255, 255, 0.35);
}
.text-transparent {
  color: transparent;
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/25 {
  color: rgb(255 255 255 / 0.25);
}
.text-white\/30 {
  color: rgb(255 255 255 / 0.3);
}
.text-white\/35 {
  color: rgb(255 255 255 / 0.35);
}
.text-white\/40 {
  color: rgb(255 255 255 / 0.4);
}
.text-white\/45 {
  color: rgb(255 255 255 / 0.45);
}
.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}
.text-white\/55 {
  color: rgb(255 255 255 / 0.55);
}
.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}
.text-white\/65 {
  color: rgb(255 255 255 / 0.65);
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.text-white\/75 {
  color: rgb(255 255 255 / 0.75);
}
.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}
.text-white\/85 {
  color: rgb(255 255 255 / 0.85);
}
.text-white\/90 {
  color: rgb(255 255 255 / 0.9);
}
.text-white\/95 {
  color: rgb(255 255 255 / 0.95);
}
.text-white\/\[0\.035\] {
  color: rgb(255 255 255 / 0.035);
}
.underline {
  text-decoration-line: underline;
}
.no-underline {
  text-decoration-line: none;
}
.opacity-0 {
  opacity: 0;
}
.opacity-100 {
  opacity: 1;
}
.opacity-20 {
  opacity: 0.2;
}
.opacity-25 {
  opacity: 0.25;
}
.opacity-35 {
  opacity: 0.35;
}
.opacity-45 {
  opacity: 0.45;
}
.opacity-80 {
  opacity: 0.8;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_1px_rgba\(110\2c 231\2c 183\2c 0\.14\)\] {
  --tw-shadow: 0 0 0 1px rgba(110,231,183,0.14);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_1px_rgba\(253\2c 186\2c 116\2c 0\.16\)\] {
  --tw-shadow: 0 0 0 1px rgba(253,186,116,0.16);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_1px_rgba\(253\2c 186\2c 116\2c 0\.32\)\2c 0_18px_48px_rgba\(0\2c 0\2c 0\2c 0\.32\)\] {
  --tw-shadow: 0 0 0 1px rgba(253,186,116,0.32),0 18px 48px rgba(0,0,0,0.32);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 18px 48px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_3px_rgba\(129\2c 140\2c 248\2c 0\.07\)\] {
  --tw-shadow: 0 0 0 3px rgba(129,140,248,0.07);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_28px_-4px_rgba\(255\2c 120\2c 50\2c 0\.32\)\] {
  --tw-shadow: 0 0 28px -4px rgba(255,120,50,0.32);
  --tw-shadow-colored: 0 0 28px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_36px_-6px_rgba\(255\2c 120\2c 50\2c 0\.32\)\] {
  --tw-shadow: 0 0 36px -6px rgba(255,120,50,0.32);
  --tw-shadow-colored: 0 0 36px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_6px_rgba\(90\2c 217\2c 176\2c 0\.65\)\] {
  --tw-shadow: 0 0 6px rgba(90,217,176,0.65);
  --tw-shadow-colored: 0 0 6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_8px_rgba\(103\2c 232\2c 249\2c 0\.8\)\] {
  --tw-shadow: 0 0 8px rgba(103,232,249,0.8);
  --tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.08\)_inset\2c 0_1px_4px_rgba\(0\2c 0\2c 0\2c 0\.35\)\] {
  --tw-shadow: 0 1px 0 rgba(255,255,255,0.08) inset,0 1px 4px rgba(0,0,0,0.35);
  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color), 0 1px 4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.5\)_inset\2c 0_4px_12px_-2px_rgba\(0\2c 0\2c 0\2c 0\.4\)\] {
  --tw-shadow: 0 1px 0 rgba(255,255,255,0.5) inset,0 4px 12px -2px rgba(0,0,0,0.4);
  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_20px_48px_-12px_rgba\(0\2c 0\2c 0\2c 0\.7\)\] {
  --tw-shadow: 0 20px 48px -12px rgba(0,0,0,0.7);
  --tw-shadow-colored: 0 20px 48px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_70px_-22px_rgba\(0\2c 0\2c 0\2c 0\.95\)\] {
  --tw-shadow: 0 24px 70px -22px rgba(0,0,0,0.95);
  --tw-shadow-colored: 0 24px 70px -22px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_0_0_1px_rgba\(255\2c 255\2c 255\2c 0\.09\)\] {
  --tw-shadow: inset 0 0 0 1px rgba(255,255,255,0.09);
  --tw-shadow-colored: inset 0 0 0 1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.025\)\] {
  --tw-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.03\)\] {
  --tw-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[inset_0_1px_0_rgba\(255\2c 255\2c 255\2c 0\.055\)\] {
  --tw-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
  --tw-shadow-colored: inset 0 1px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-cta-accent {
  --tw-shadow: 0 6px 20px -8px rgba(255, 120, 50, 0.6);
  --tw-shadow-colored: 0 6px 20px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-elev-1 {
  --tw-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.55);
  --tw-shadow-colored: 0 4px 14px -8px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-elev-2 {
  --tw-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.7);
  --tw-shadow-colored: 0 10px 30px -18px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-elev-3 {
  --tw-shadow: 0 18px 48px -24px rgba(0, 0, 0, 0.78);
  --tw-shadow-colored: 0 18px 48px -24px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-elev-4 {
  --tw-shadow: 0 36px 110px -34px rgba(0, 0, 0, 0.95);
  --tw-shadow-colored: 0 36px 110px -34px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-inset {
  --tw-ring-inset: inset;
}
.ring-accent-400\/30 {
  --tw-ring-color: rgb(251 146 60 / 0.3);
}
.ring-accent-400\/35 {
  --tw-ring-color: rgb(251 146 60 / 0.35);
}
.ring-accent-400\/55 {
  --tw-ring-color: rgb(251 146 60 / 0.55);
}
.ring-accent-400\/70 {
  --tw-ring-color: rgb(251 146 60 / 0.7);
}
.ring-bg-surface {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(20 23 29 / var(--tw-ring-opacity, 1));
}
.ring-border-accent {
  --tw-ring-color: rgba(251, 146, 60, 0.55);
}
.ring-border-accent\/30 {
  --tw-ring-color: rgba(251, 146, 60, 0.3);
}
.ring-border-ghost {
  --tw-ring-color: rgba(255, 255, 255, 0.1);
}
.ring-orange-400\/50 {
  --tw-ring-color: rgb(251 146 60 / 0.5);
}
.ring-white\/10 {
  --tw-ring-color: rgb(255 255 255 / 0.1);
}
.ring-white\/15 {
  --tw-ring-color: rgb(255 255 255 / 0.15);
}
.ring-white\/20 {
  --tw-ring-color: rgb(255 255 255 / 0.2);
}
.ring-white\/25 {
  --tw-ring-color: rgb(255 255 255 / 0.25);
}
.ring-white\/5 {
  --tw-ring-color: rgb(255 255 255 / 0.05);
}
.ring-white\/\[0\.045\] {
  --tw-ring-color: rgb(255 255 255 / 0.045);
}
.ring-white\/\[0\.055\] {
  --tw-ring-color: rgb(255 255 255 / 0.055);
}
.ring-white\/\[0\.05\] {
  --tw-ring-color: rgb(255 255 255 / 0.05);
}
.ring-white\/\[0\.06\] {
  --tw-ring-color: rgb(255 255 255 / 0.06);
}
.ring-white\/\[0\.09\] {
  --tw-ring-color: rgb(255 255 255 / 0.09);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-2xl {
  --tw-blur: blur(40px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.blur-md {
  --tw-blur: blur(12px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.saturate-50 {
  --tw-saturate: saturate(.5);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur {
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-2xl {
  --tw-backdrop-blur: blur(40px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-blur-xl {
  --tw-backdrop-blur: blur(24px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.backdrop-filter {
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background-color\2c border-color\2c box-shadow\2c transform\] {
  transition-property: background-color,border-color,box-shadow,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background-color\2c border-color\2c color\2c box-shadow\2c opacity\2c transform\] {
  transition-property: background-color,border-color,color,box-shadow,opacity,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background-color\2c border-color\2c color\2c box-shadow\2c opacity\] {
  transition-property: background-color,border-color,color,box-shadow,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background-color\2c border-color\2c color\2c box-shadow\] {
  transition-property: background-color,border-color,color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background-color\2c border-color\2c color\] {
  transition-property: background-color,border-color,color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background-color\2c box-shadow\2c color\] {
  transition-property: background-color,box-shadow,color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background-color\2c box-shadow\2c opacity\] {
  transition-property: background-color,box-shadow,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background-color\2c box-shadow\] {
  transition-property: background-color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background-color\2c color\2c box-shadow\] {
  transition-property: background-color,color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background-color\2c color\2c opacity\] {
  transition-property: background-color,color,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background-color\2c color\2c transform\] {
  transition-property: background-color,color,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background-color\2c color\] {
  transition-property: background-color,color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[background-color\2c opacity\] {
  transition-property: background-color,opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[border-color\2c background-color\2c box-shadow\] {
  transition-property: border-color,background-color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[border-color\2c background-color\2c color\2c transform\] {
  transition-property: border-color,background-color,color,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[border-color\2c background-color\2c color\] {
  transition-property: border-color,background-color,color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[border-color\2c box-shadow\2c transform\] {
  transition-property: border-color,box-shadow,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[border-color\2c box-shadow\] {
  transition-property: border-color,box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[font-size\2c color\] {
  transition-property: font-size,color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[opacity\2c transform\] {
  transition-property: opacity,transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-\[width\] {
  transition-property: width;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.duration-base {
  transition-duration: 180ms;
}
.duration-emphasis {
  transition-duration: 280ms;
}
.duration-fast {
  transition-duration: 120ms;
}
.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.ease-standard {
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}
.\[color-scheme\:dark\] {
  color-scheme: dark;
}
.\[scrollbar-width\:thin\] {
  scrollbar-width: thin;
}
.\[skill\:character-sheet\] {
  skill: character-sheet;
}
.\[skill\:comic-drama\] {
  skill: comic-drama;
}
.\[skill\:seedance-2\.0\] {
  skill: seedance-2.0;
}
.\[skill\:storyboard-design\] {
  skill: storyboard-design;
}
.\[skill\:subject-extraction\] {
  skill: subject-extraction;
}
.\[skill\:x\] {
  skill: x;
}
.\[skill\:\5206\955C\] {
  skill: 分镜;
}

:root {
  /* next/font/google 已移除(构建环境无外网),变量落系统字体栈 */
  --font-inter: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-jbm: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  --color-bg-base: #0f1115;
  --color-bg-surface: #14171d;
  --color-bg-surface-2: #181b22;
  --color-bg-surface-3: #1b1d22;
  --color-bg-input: #0e1015;
  --color-bg-section: #0f1218;
  --color-bg-scrim: rgba(15, 17, 21, 0.85);
  --color-bg-sidebar: #212326;
  --color-bg-chip: #353942;
  --color-bg-chip-hover: #3f434c;

  --color-border-subtle: #2e2e2e;
  --color-border-strong: #3a3d44;
  --color-border-ghost: rgba(255, 255, 255, 0.1);
  --color-border-accent: rgba(251, 146, 60, 0.55);

  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.85);
  --color-text-muted: rgba(255, 255, 255, 0.55);
  --color-text-subtle: rgba(255, 255, 255, 0.35);
  --color-text-disabled: rgba(255, 255, 255, 0.25);
  --color-text-placeholder: rgba(255, 255, 255, 0.35);

  --color-accent-400: #fb923c;
  --color-accent-500: #f97316;
  --color-accent-glow: rgba(255, 120, 50, 0.55);
  --color-danger-500: #f87171;
  --color-success-500: #34d399;

  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-emphasis: 280ms;
  --motion-slow: 480ms;
  --motion-cinema: 720ms;

  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Minimal resets we opted out of preflight for. */
html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  min-height: 100vh;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* UI system rule: scrollable areas must keep scrolling, but never show
   platform scrollbars. Win/macOS scrollbar chrome changes layout and breaks
   the dark surface rhythm. */
html,
body,
* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Reset native button chrome for custom buttons only.
   AntD's own components carry .ant-btn and are unaffected. */
:where(button:not([class*='ant-'])) {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  cursor: pointer;
}

:where(a) {
  color: inherit;
  text-decoration: none;
}

:where(a:visited) {
  color: inherit;
}

.aiv-delete-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.5);
  animation: aiv-delete-fade-in 200ms ease-out;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.aiv-delete-modal__panel {
  width: min(420px, 92vw);
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: rgba(20, 24, 30, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 40px 80px -20px rgba(0, 0, 0, 0.7);
  animation: aiv-delete-pop 240ms cubic-bezier(0.18, 1.18, 0.32, 1.08);
  backdrop-filter: blur(60px) saturate(1.4);
  -webkit-backdrop-filter: blur(60px) saturate(1.4);
}

.aiv-delete-modal__header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.aiv-delete-modal__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid rgba(248, 113, 113, 0.28);
  border-radius: 12px;
  background: rgba(248, 113, 113, 0.1);
  color: #fca5a5;
}

.aiv-delete-modal__icon--archive {
  border-color: rgba(251, 146, 60, 0.32);
  background: rgba(251, 146, 60, 0.12);
  color: #fed7aa;
}

.aiv-delete-modal__title {
  color: rgba(248, 250, 252, 0.96);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

.aiv-delete-modal__body {
  margin-top: 8px;
  color: rgba(248, 250, 252, 0.48);
  font-size: 13px;
  line-height: 1.55;
}

.aiv-delete-modal__name,
.aiv-delete-modal__details {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.3);
  color: rgba(248, 250, 252, 0.94);
  font-size: 13px;
  line-height: 1.5;
}

.aiv-delete-modal__details {
  margin-top: 10px;
  color: rgba(248, 250, 252, 0.56);
}

.aiv-delete-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

.aiv-delete-modal__btn {
  height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(248, 250, 252, 0.96);
  font-size: 13px;
  transition:
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard);
}

.aiv-delete-modal__btn--ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}

.aiv-delete-modal__btn--danger {
  border-color: #ef4444;
  background: #ef4444;
  color: #fff;
  font-weight: 500;
}

.aiv-delete-modal__btn--danger:hover:not(:disabled) {
  border-color: #dc2626;
  background: #dc2626;
}

.aiv-delete-modal__btn--archive {
  border-color: #f97316;
  background: #f97316;
  color: #fff;
  font-weight: 500;
}

.aiv-delete-modal__btn--archive:hover:not(:disabled) {
  border-color: #ea580c;
  background: #ea580c;
}

.aiv-delete-modal__btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

@keyframes aiv-delete-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes aiv-delete-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.aiv-history-prompt-bubble {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(135deg, rgba(24, 27, 34, 0.96), rgba(20, 23, 29, 0.9)),
    radial-gradient(circle at 92% 0%, rgba(251, 146, 60, 0.12), transparent 36%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 18px 42px -30px rgba(0, 0, 0, 0.92);
}

.aiv-history-prompt-bubble::before {
  content: '';
  position: absolute;
  inset: 10px auto 10px 0;
  width: 2px;
  border-radius: 9999px;
  background: linear-gradient(180deg, rgba(251, 146, 60, 0.75), rgba(251, 146, 60, 0.08));
  pointer-events: none;
}

.aiv-history-prompt-bubble::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 22px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: var(--color-bg-surface-2);
  pointer-events: none;
}

.aiv-history-result-card {
  position: relative;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background:
    linear-gradient(180deg, rgba(24, 27, 34, 0.92), rgba(20, 23, 29, 0.82)),
    var(--color-bg-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 20px 48px -32px rgba(0, 0, 0, 0.9);
}

.aiv-history-result-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  pointer-events: none;
}

.aiv-history-result-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

.aiv-history-ref-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: -0.2em;
  margin: 0 2px;
  padding: 1px 8px 1px 3px;
  border-radius: 999px;
  border: 1px solid rgba(251, 146, 60, 0.22);
  background: rgba(249, 115, 22, 0.14);
  color: #fdba74;
  font-size: 0.92em;
  line-height: 1.4;
  white-space: nowrap;
  cursor: zoom-in;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    border-color 120ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 120ms cubic-bezier(0.2, 0.8, 0.2, 1),
    color 120ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 180ms cubic-bezier(0.25, 1, 0.5, 1);
}

.aiv-history-ref-chip:hover,
.aiv-history-ref-chip:focus-visible {
  border-color: rgba(251, 146, 60, 0.58);
  background: rgba(249, 115, 22, 0.22);
  color: #fed7aa;
  transform: translateY(-1px);
}

.aiv-history-ref-chip:focus-visible {
  outline: 2px solid rgba(251, 146, 60, 0.35);
  outline-offset: 2px;
}

.aiv-history-ref-chip__thumb {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.4);
}

.aiv-history-ref-chip__label {
  white-space: nowrap;
  font-weight: 600;
}

.aiv-ref-fan {
  --ref-expanded-width: 68px;
  position: relative;
  isolation: isolate;
  z-index: 1;
  flex: 0 0 auto;
  width: 108px;
  height: 56px;
  overflow: visible;
}

.aiv-ref-fan::before {
  content: '';
  position: absolute;
  left: -8px;
  top: -7px;
  width: var(--ref-expanded-width);
  height: 66px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(20, 23, 29, 0.9);
  box-shadow: 0 18px 44px -28px rgba(0, 0, 0, 0.95);
  opacity: 0;
  transform: scaleX(0.76);
  transform-origin: left center;
  transition:
    opacity 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 280ms cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.aiv-ref-fan:hover,
.aiv-ref-fan:focus-within,
.aiv-ref-fan--expanded {
  z-index: 25;
}

.aiv-ref-fan:hover::before,
.aiv-ref-fan:focus-within::before,
.aiv-ref-fan--expanded::before {
  opacity: 1;
  transform: scaleX(1);
}

.aiv-ref-fan__item {
  position: absolute;
  left: 0;
  top: 3px;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--color-bg-chip);
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.9);
  opacity: 0.95;
  transform: translateX(var(--ref-collapsed-x)) rotate(var(--ref-rotate)) scale(0.98);
  transform-origin: center bottom;
  transition:
    border-color 120ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 280ms cubic-bezier(0.25, 1, 0.5, 1);
}

.aiv-ref-fan:hover .aiv-ref-fan__item,
.aiv-ref-fan:focus-within .aiv-ref-fan__item,
.aiv-ref-fan--expanded .aiv-ref-fan__item {
  opacity: 1;
  transform: translateX(var(--ref-expanded-x)) rotate(0deg) scale(1);
}

.aiv-ref-fan:hover .aiv-ref-fan__item:hover,
.aiv-ref-fan:focus-within .aiv-ref-fan__item:focus-visible,
.aiv-ref-fan--expanded .aiv-ref-fan__item:hover,
.aiv-ref-fan--expanded .aiv-ref-fan__item:focus-visible {
  z-index: 90 !important;
  box-shadow: 0 18px 38px -22px rgba(0, 0, 0, 0.95);
  transform: translateX(var(--ref-expanded-x)) rotate(0deg) scale(1.08);
}

.aiv-sidebar-project-link,
.aiv-sidebar-project-link:visited,
.aiv-sidebar-project-link:hover,
.aiv-sidebar-project-link:active {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .aiv-ref-fan::before,
  .aiv-ref-fan__item {
    transition-duration: 0ms;
  }
}

.aiv-login-page::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.72), transparent);
          mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.72), transparent);
}

.aiv-login-page::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(15, 17, 21, 0.92));
}

.aiv-login-panel .ant-tabs-nav {
  margin-bottom: 24px;
}

.aiv-login-panel .ant-tabs-nav-list {
  display: flex;
  gap: 24px;
}

.aiv-login-panel .ant-tabs-nav::before {
  border-bottom-color: var(--color-border-ghost);
}

.aiv-login-panel .ant-tabs-tab {
  margin: 0;
  padding: 0 0 12px;
  color: var(--color-text-muted);
}

.aiv-login-panel .ant-tabs-tab:hover,
.aiv-login-panel .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
  color: var(--color-text-primary);
}

.aiv-login-panel .ant-tabs-ink-bar {
  background: var(--color-accent-400);
}

.aiv-login-panel .ant-form-item {
  margin-bottom: 18px;
}

.aiv-login-panel .ant-form-item-label > label {
  color: var(--color-text-secondary);
  font-size: 13px;
}

.aiv-login-panel .ant-form-item-control-input-content,
.aiv-login-panel .ant-input,
.aiv-login-panel .ant-input-affix-wrapper {
  width: 100%;
}

.aiv-login-panel .ant-input,
.aiv-login-panel .ant-input-affix-wrapper {
  min-height: 44px;
  border-color: var(--color-border-ghost);
  border-radius: 10px;
  background: var(--color-bg-input);
  color: var(--color-text-primary);
  box-shadow: none;
}

.aiv-login-panel .ant-input {
  padding: 0 12px;
}

.aiv-login-panel .ant-input-affix-wrapper {
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.aiv-login-panel .ant-input::-moz-placeholder, .aiv-login-panel .ant-input-affix-wrapper input::-moz-placeholder {
  color: var(--color-text-placeholder);
}

.aiv-login-panel .ant-input::placeholder,
.aiv-login-panel .ant-input-affix-wrapper input::placeholder {
  color: var(--color-text-placeholder);
}

.aiv-login-panel .ant-input:hover,
.aiv-login-panel .ant-input-affix-wrapper:hover {
  border-color: var(--color-border-strong);
  background: var(--color-bg-input);
}

.aiv-login-panel .ant-input:focus,
.aiv-login-panel .ant-input-affix-wrapper-focused {
  border-color: var(--color-border-accent);
  box-shadow: 0 0 0 2px rgba(251, 146, 60, 0.18);
}

.aiv-login-panel .ant-input-affix-wrapper .ant-input {
  flex: 1;
  width: 0;
  min-width: 0;
  height: 42px;
  min-height: auto;
  border: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.aiv-login-panel .ant-input-suffix {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin-inline-start: 8px;
}

.aiv-login-panel .ant-input-password-icon {
  color: var(--color-text-muted);
}

.aiv-login-panel .aiv-password-input input[type='password'] {
  direction: ltr;
  text-align: left;
}

.aiv-login-panel .aiv-password-input input[type='password']:not(:-moz-placeholder) {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
}

.aiv-login-panel .aiv-password-input input[type='password']:not(:placeholder-shown) {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
}

.aiv-login-panel .aiv-password-input input[type='password']:not(:placeholder-shown)::-moz-selection {
  background: rgba(251, 146, 60, 0.26);
}

.aiv-login-panel .aiv-password-input input[type='password']:not(:-moz-placeholder)::selection {
  background: rgba(251, 146, 60, 0.26);
}

.aiv-login-panel .aiv-password-input input[type='password']:not(:placeholder-shown)::selection {
  background: rgba(251, 146, 60, 0.26);
}

.aiv-login-panel .ant-form-item-explain-error {
  color: var(--color-danger-500);
  font-size: 12px;
}

.aiv-home-confirm-modal .ant-modal-content {
  padding: 0;
  border-radius: 18px;
  background: transparent;
  box-shadow: none;
}

.aiv-home-confirm-modal .ant-modal-body {
  padding: 0;
}

/* Sparkle animation used by the active nav item in the sidebar */
@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

.sparkle {
  position: absolute;
  pointer-events: none;
  color: rgba(255, 255, 255, 0.85);
  animation: sparkle-twinkle 1.6s ease-in-out infinite;
}

@keyframes aiv-fade-up {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes aiv-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.aiv-hero-title,
.aiv-hero-subtitle,
.aiv-creator-enter,
.aiv-mode-pill,
.aiv-inspiration-card {
  opacity: 0;
  animation: aiv-fade-up 680ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.aiv-hero-title {
  animation-delay: 40ms;
}

.aiv-hero-subtitle {
  animation-delay: 120ms;
}

.aiv-creator-enter {
  animation-delay: 210ms;
}

.aiv-mode-pill > * {
  position: relative;
  z-index: 1;
}

.aiv-mode-pill::before,
.aiv-mode-pill::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: inherit;
}

.aiv-mode-pill::before {
  inset: 1px;
  background:
    radial-gradient(
      circle at 18% 8%,
      color-mix(in srgb, var(--aiv-accent, #fb923c) 22%, transparent) 0%,
      transparent 48%
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 56%);
  opacity: 0;
  transform: scale(0.985);
  transition:
    opacity var(--motion-emphasis) var(--ease-standard),
    transform var(--motion-emphasis) var(--ease-standard);
}

.aiv-mode-pill::after {
  inset: 0;
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      color-mix(in srgb, var(--aiv-accent, #fb923c) 12%, transparent) 42%,
      transparent 72%
    );
  opacity: 0;
  transform: translateX(-34%);
  transition:
    opacity var(--motion-emphasis) var(--ease-standard),
    transform var(--motion-slow) var(--ease-out-expo);
}

.aiv-mode-pill:hover::before,
.aiv-mode-pill[aria-pressed='true']::before {
  opacity: 1;
  transform: scale(1);
}

.aiv-mode-pill:hover::after {
  opacity: 0.56;
  transform: translateX(34%);
}

.aiv-mode-pill[aria-pressed='true']::after {
  opacity: 0.28;
  transform: translateX(0);
}

.aiv-creator-frame {
  isolation: isolate;
}

.aiv-creator-frame::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: 11;
  pointer-events: none;
  border-radius: 23px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 34px color-mix(in srgb, var(--aiv-accent, #27f5e1) 9%, transparent) inset;
  transition: box-shadow 220ms ease;
}

.aiv-creator-frame--active::after,
.aiv-creator-frame:hover::after {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--aiv-accent, #27f5e1) 34%, rgba(255,255,255,0.1)) inset,
    0 0 36px color-mix(in srgb, var(--aiv-accent, #27f5e1) 12%, transparent) inset;
}

.aiv-modal-pop {
  transform-origin: center;
  animation: aiv-pop 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.aiv-token-textarea {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.aiv-token-textarea::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.aiv-inspiration-card {
  transform: translateY(0);
}

.aiv-inspiration-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    108deg,
    transparent 0%,
    rgba(255, 255, 255, 0.16) 48%,
    transparent 72%
  );
  transform: translateX(-130%);
  transition: transform 720ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.aiv-inspiration-card:hover::before {
  transform: translateX(130%);
}

.aiv-source-card::before,
.aiv-source-card::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
}

.aiv-source-card::before {
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0;
  transform: scale(0.985);
  transition:
    opacity var(--motion-emphasis) var(--ease-standard),
    transform var(--motion-emphasis) var(--ease-standard);
}

.aiv-source-card::after {
  inset: 0;
  background: linear-gradient(
    112deg,
    transparent 0%,
    rgba(255, 255, 255, 0.08) 46%,
    transparent 70%
  );
  opacity: 0;
  transform: translateX(-128%);
  transition:
    opacity var(--motion-emphasis) var(--ease-standard),
    transform var(--motion-cinema) var(--ease-out-expo);
}

.aiv-source-card:hover::before,
.aiv-source-card:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.aiv-source-card:hover::after,
.aiv-source-card:focus-visible::after {
  opacity: 0.28;
  transform: translateX(128%);
}

.aiv-preview {
  animation: aiv-preview-fade-in var(--motion-base) var(--ease-standard) both;
}

.aiv-preview-shell {
  animation: aiv-preview-shell-in var(--motion-emphasis) var(--ease-out-quart) both;
  --aiv-device-height: clamp(104px, 12vh, 124px);
  --aiv-output-drop: clamp(86px, 10vh, 112px);
  width: min(980px, calc(100vw - 56px));
  max-width: calc(100vw - 56px);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.aiv-preview-shell::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: var(--aiv-device-height);
  z-index: 1;
  pointer-events: none;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), transparent 17%),
    linear-gradient(315deg, rgba(0, 0, 0, 0.52), transparent 28%),
    linear-gradient(180deg, #20252d 0%, #171b22 100%);
  box-shadow:
    0 34px 110px -58px rgba(0, 0, 0, 0.98),
    0 1px 0 rgba(255, 255, 255, 0.09) inset,
    0 0 0 1px rgba(0, 0, 0, 0.42),
    0 18px 42px -34px rgba(0, 0, 0, 0.95) inset;
}

.aiv-preview-shell::after {
  content: none;
}

.aiv-preview-shell > * {
  position: relative;
  z-index: 2;
}

.aiv-preview-device-bar {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 16px;
  z-index: 3;
  display: flex;
  pointer-events: none;
  align-items: center;
  gap: 12px;
}

.aiv-preview-device-bar__lens {
  width: 36px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background:
    radial-gradient(circle at 42% 46%, rgba(251, 146, 60, 0.32) 0 18%, transparent 19%),
    radial-gradient(circle at 58% 52%, rgba(255, 255, 255, 0.18) 0 8%, transparent 9%),
    #0e1015;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 12px 24px -18px rgba(0, 0, 0, 0.9);
}

.aiv-preview-device-bar__slot {
  height: 6px;
  flex: 1;
  max-width: 360px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent),
    #0b0d11;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 18px -14px rgba(0, 0, 0, 1) inset;
}

.aiv-preview-device-bar__light {
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--color-accent-400);
  box-shadow:
    0 0 16px rgba(251, 146, 60, 0.62),
    0 0 0 4px rgba(251, 146, 60, 0.08);
}

.aiv-preview-media {
  position: relative;
  padding-top: 0;
}

.aiv-preview-print-slot {
  position: absolute;
  left: clamp(18px, 3vw, 34px);
  right: clamp(18px, 3vw, 34px);
  bottom: clamp(14px, 2.4vh, 24px);
  z-index: 1;
  height: 24px;
  margin: 0;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 46%),
    #0c0e12;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1),
    0 13px 22px -15px rgba(0, 0, 0, 1) inset,
    0 -1px 0 rgba(255, 255, 255, 0.05) inset,
    0 22px 34px -24px rgba(0, 0, 0, 0.95);
}

.aiv-preview-print-slot::before {
  content: '';
  position: absolute;
  left: 32px;
  right: 32px;
  top: 7px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.aiv-preview-print-slot::after {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: -8px;
  height: 12px;
  border-radius: 0 0 999px 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent),
    #141922;
  box-shadow: 0 18px 28px -22px rgba(0, 0, 0, 0.95);
}

.aiv-preview-output {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, auto);
  justify-content: center;
  gap: 16px;
  margin-top: var(--aiv-output-drop);
  padding: 0 8px 8px;
}

.aiv-preview-media,
.aiv-preview-panel {
  z-index: 2;
}

@media (min-width: 1024px) {
  .aiv-preview-output {
    grid-template-columns: minmax(0, auto) minmax(280px, 340px);
    align-items: start;
    gap: 20px;
    padding: 0 14px 14px;
  }
}

.aiv-preview-frame {
  aspect-ratio: var(--aiv-media-ratio, 1);
  position: relative;
  overflow: visible;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(235, 238, 231, 0.98)),
    #edf0e9;
  box-shadow:
    0 28px 44px -30px rgba(0, 0, 0, 0.92),
    0 1px 0 rgba(255, 255, 255, 0.75) inset;
  width: min(100%, calc(var(--aiv-media-ratio, 1) * min(38vh, 420px)));
  max-height: min(38vh, 420px);
  transform: translateY(-4px);
}

.aiv-preview-frame::before,
.aiv-preview-frame::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 4;
  border-radius: 10px;
}

.aiv-preview-frame::before {
  inset: -10px;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.42),
    0 18px 34px -28px rgba(0, 0, 0, 0.95);
  background: #11141a;
}

.aiv-preview-frame::after {
  inset: 10px;
  z-index: 4;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 8px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.28),
    0 12px 24px -22px rgba(0, 0, 0, 0.75) inset;
}

.aiv-preview-frame__mat {
  position: relative;
  width: 100%;
  height: 100%;
  padding: clamp(12px, 1.7vw, 18px) clamp(12px, 1.7vw, 18px) clamp(28px, 3.4vw, 38px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(240, 242, 236, 0.98)),
    #edf0e9;
  border-radius: inherit;
}

.aiv-preview-frame__mat::before,
.aiv-preview-frame__mat::after {
  content: '';
  position: absolute;
  z-index: 3;
  pointer-events: none;
  width: 22px;
  height: 22px;
}

.aiv-preview-frame__mat::before {
  left: 9px;
  top: 9px;
  border-left: 1px solid rgba(15, 17, 21, 0.16);
  border-top: 1px solid rgba(15, 17, 21, 0.16);
}

.aiv-preview-frame__mat::after {
  right: 9px;
  bottom: 9px;
  border-right: 1px solid rgba(15, 17, 21, 0.14);
  border-bottom: 1px solid rgba(15, 17, 21, 0.14);
}

.aiv-preview-frame__inner {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: var(--color-bg-input);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5),
    0 18px 34px -28px rgba(0, 0, 0, 0.82);
}

.aiv-preview-frame__plate {
  position: absolute;
  left: 50%;
  bottom: 10px;
  z-index: 5;
  display: inline-flex;
  max-width: calc(100% - 42px);
  transform: translateX(-50%);
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(15, 17, 21, 0.78);
  padding: 4px 9px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.aiv-preview-frame__plate span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;
}

.aiv-preview-panel {
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(237, 240, 233, 0.98)),
    #edf0e9;
  color: #111827;
  box-shadow:
    0 28px 44px -34px rgba(0, 0, 0, 0.92),
    0 1px 0 rgba(255, 255, 255, 0.78) inset,
    0 0 0 1px rgba(0, 0, 0, 0.14);
  width: min(340px, calc(100vw - 48px));
  max-height: min(58vh, 520px);
  transform: translateY(8px) rotate(0.35deg);
}

.aiv-preview-panel::after {
  content: '';
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: -9px;
  z-index: 3;
  height: 20px;
  pointer-events: none;
  border-radius: 0 0 18px 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 42%),
    #11161d;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 22px 32px -24px rgba(0, 0, 0, 0.92);
}

.aiv-preview-panel__head {
  border-bottom: 1px solid rgba(17, 24, 39, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent),
    rgba(255, 255, 255, 0.18);
}

.aiv-preview-panel__kicker {
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  background: rgba(17, 24, 39, 0.08);
  padding: 4px 8px;
  color: rgba(17, 24, 39, 0.48);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.aiv-preview-panel__kicker::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-accent-400);
  box-shadow: 0 0 12px rgba(251, 146, 60, 0.52);
}

.aiv-preview-panel .text-text-secondary {
  color: rgba(17, 24, 39, 0.72);
}

.aiv-preview-panel .text-text-muted {
  color: rgba(17, 24, 39, 0.56);
}

.aiv-preview-panel__body {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent 34%),
    rgba(255, 255, 255, 0.06);
}

.aiv-preview-label-card {
  position: relative;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0.22)),
    rgba(255, 255, 255, 0.5);
  padding: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 18px 34px -30px rgba(0, 0, 0, 0.36);
}

.aiv-preview-label-card--receipt {
  border-style: solid;
}

.aiv-preview-label-card--receipt::after {
  content: '';
  position: absolute;
  left: 18px;
  right: 18px;
  top: -1px;
  height: 5px;
  border-radius: 0 0 999px 999px;
  background:
    linear-gradient(90deg, transparent 0 4px, rgba(255, 255, 255, 0.12) 4px 8px, transparent 8px 12px);
  background-size: 12px 5px;
  opacity: 0.52;
}

.aiv-preview-label-card::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 12px;
  width: 14px;
  height: 14px;
  pointer-events: none;
  border-left: 1px solid rgba(17, 24, 39, 0.16);
  border-top: 1px solid rgba(17, 24, 39, 0.16);
}

.aiv-preview-label-card__content {
  border: 1px solid rgba(17, 24, 39, 0.08);
  background: rgba(255, 255, 255, 0.48);
  color: rgba(17, 24, 39, 0.72);
  box-shadow: 0 12px 28px -26px rgba(0, 0, 0, 0.4) inset;
}

.aiv-preview-label-card__content--clamped {
  position: relative;
  max-height: 112px;
  overflow: hidden;
}

.aiv-preview-label-card__content--clamped::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.84));
}

.aiv-prompt-expanded__card {
  animation: aiv-preview-shell-in var(--motion-emphasis) var(--ease-out-quart) both;
}

.aiv-preview-media-object {
  animation: aiv-preview-object-in var(--motion-emphasis) var(--ease-standard) 80ms both;
}

.aiv-preview--closing {
  animation: aiv-preview-fade-out var(--motion-base) var(--ease-standard) both;
}

.aiv-preview--closing .aiv-preview-shell,
.aiv-preview--closing .aiv-preview-media-object {
  animation-duration: var(--motion-base);
  animation-direction: reverse;
  animation-delay: 0ms;
}

@keyframes aiv-preview-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes aiv-preview-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes aiv-preview-shell-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes aiv-preview-object-in {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (min-width: 1024px) {
  .aiv-preview-frame {
    width: min(
      calc(var(--aiv-media-ratio, 1) * min(56vh, 520px)),
      560px
    );
    max-height: min(56vh, 520px);
  }
}

.aiv-preview-shell {
  display: flex;
  width: min(980px, calc(100vw - 44px));
  max-width: calc(100vw - 44px);
  flex-direction: column;
  align-items: center;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.aiv-preview-shell::before,
.aiv-preview-shell::after {
  content: none;
}

.aiv-instant-camera {
  position: relative;
  z-index: 5;
  width: min(760px, calc(100vw - 54px), 100%);
  height: clamp(168px, 21vh, 214px);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 30px 30px 34px 34px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 24%),
    linear-gradient(315deg, rgba(0, 0, 0, 0.5), transparent 32%),
    linear-gradient(180deg, #242a34 0%, #151a22 100%);
  box-shadow:
    0 42px 96px -56px rgba(0, 0, 0, 1),
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 -22px 46px -34px rgba(0, 0, 0, 0.9) inset,
    0 0 0 1px rgba(0, 0, 0, 0.45);
  transform: rotate(-0.6deg);
}

.aiv-instant-camera::before {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 24px 24px 28px 28px;
  pointer-events: none;
  background:
    radial-gradient(circle at 35% 56%, rgba(255, 255, 255, 0.08), transparent 0 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 42%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.aiv-instant-camera::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 15px;
  z-index: 7;
  width: min(500px, 76%);
  height: 24px;
  transform: translateX(-50%);
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.7);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 40%),
    #080a0e;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 26px -18px rgba(0, 0, 0, 1) inset,
    0 26px 34px -24px rgba(0, 0, 0, 0.9);
}

.aiv-instant-camera__face {
  position: absolute;
  inset: 0;
}

.aiv-instant-camera__brand {
  position: absolute;
  left: 34px;
  bottom: 42px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
}

.aiv-instant-camera__viewfinder {
  position: absolute;
  left: 30px;
  top: 26px;
  width: 68px;
  height: 40px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    radial-gradient(circle at 38% 48%, rgba(251, 146, 60, 0.42) 0 10%, transparent 11%),
    radial-gradient(circle at 60% 48%, rgba(255, 255, 255, 0.18) 0 7%, transparent 8%),
    #0c0f14;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 16px 24px -18px rgba(0, 0, 0, 0.95);
}

.aiv-instant-camera__lens {
  position: absolute;
  left: 50%;
  top: 48%;
  width: clamp(82px, 9vw, 118px);
  height: clamp(82px, 9vw, 118px);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(circle at 42% 38%, rgba(255, 255, 255, 0.2) 0 7%, transparent 8%),
    radial-gradient(circle, #202938 0 30%, #0d1118 31% 56%, #080a0d 57% 100%);
  box-shadow:
    0 0 0 11px rgba(255, 255, 255, 0.045),
    0 0 0 22px rgba(0, 0, 0, 0.18),
    0 28px 44px -30px rgba(0, 0, 0, 0.95),
    0 1px 0 rgba(255, 255, 255, 0.12) inset;
}

.aiv-instant-camera__flash {
  position: absolute;
  right: 76px;
  top: 32px;
  width: 48px;
  height: 32px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.32), transparent 50%),
    rgba(255, 255, 255, 0.08);
  box-shadow:
    0 0 26px rgba(255, 255, 255, 0.09),
    0 1px 0 rgba(255, 255, 255, 0.14) inset;
}

.aiv-instant-camera__shutter {
  position: absolute;
  right: 28px;
  top: 28px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--color-accent-400);
  box-shadow:
    0 0 20px rgba(251, 146, 60, 0.58),
    0 0 0 7px rgba(251, 146, 60, 0.08);
}

.aiv-instant-camera__slot {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 8;
  width: min(452px, 68%);
  height: 5px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.aiv-preview-close {
  position: absolute;
  right: 28px;
  bottom: 44px;
  z-index: 12;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 10, 14, 0.7);
  color: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 14px 24px -18px rgba(0, 0, 0, 0.96),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;
  backdrop-filter: blur(10px);
}

.aiv-preview-close:hover {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(15, 18, 24, 0.86);
  color: rgba(255, 255, 255, 0.92);
}

.aiv-preview-output {
  position: relative;
  z-index: 3;
  display: grid;
  width: min(860px, calc(100vw - 64px));
  grid-template-columns: minmax(0, auto);
  justify-content: center;
  gap: 16px;
  margin-top: -24px;
  border: 1px solid rgba(17, 24, 39, 0.12);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 241, 234, 0.98)),
    #f4f5ef;
  padding: clamp(14px, 2vw, 20px) clamp(14px, 2vw, 20px) clamp(34px, 4vw, 46px);
  box-shadow:
    0 42px 88px -54px rgba(0, 0, 0, 0.98),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;
  transform: rotate(0.5deg);
  animation: aiv-preview-print-out var(--motion-cinema) var(--ease-out-expo) 80ms both;
}

.aiv-preview-output::before {
  content: none;
}

.aiv-preview-output::after {
  content: 'AIV INSTANT PRINT';
  position: absolute;
  left: 50%;
  bottom: 13px;
  transform: translateX(-50%);
  color: rgba(17, 24, 39, 0.34);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  white-space: nowrap;
}

@media (min-width: 760px) {
  .aiv-preview-output {
    grid-template-columns: minmax(0, 1fr) minmax(244px, 292px);
    align-items: start;
    gap: clamp(12px, 1.6vw, 18px);
  }

  .aiv-preview-panel {
    width: min(292px, 38vw);
  }
}

.aiv-preview-media {
  position: relative;
  z-index: 2;
  min-width: 0;
  width: 100%;
  padding-top: 0;
}

.aiv-preview-frame {
  aspect-ratio: var(--aiv-media-ratio, 1);
  position: relative;
  width: min(
    100%,
    500px,
    calc(var(--aiv-media-ratio, 1) * min(46vh, 440px))
  );
  max-width: 100%;
  max-height: min(46vh, 440px);
  overflow: visible;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  transform: none;
}

@media (min-width: 1024px) {
  .aiv-preview-frame {
    width: min(
      100%,
      calc(var(--aiv-media-ratio, 1) * min(50vh, 470px)),
      520px
    );
    max-height: min(50vh, 470px);
  }
}

.aiv-preview-frame::before {
  inset: -8px;
  z-index: -1;
  border: 1px solid rgba(17, 24, 39, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow:
    0 20px 42px -34px rgba(0, 0, 0, 0.76),
    0 1px 0 rgba(255, 255, 255, 0.72) inset;
}

.aiv-preview-frame::after {
  inset: 8px;
  z-index: 4;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 8px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.34),
    0 12px 24px -22px rgba(0, 0, 0, 0.72) inset;
}

.aiv-preview-frame__mat {
  padding: clamp(10px, 1.5vw, 15px) clamp(10px, 1.5vw, 15px) clamp(24px, 3vw, 34px);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(242, 244, 238, 0.98)),
    #f1f3ee;
  border-radius: inherit;
}

.aiv-preview-frame__inner {
  border-radius: 8px;
  border: 1px solid rgba(17, 24, 39, 0.18);
  background: var(--color-bg-input);
  box-shadow: 0 18px 34px -30px rgba(0, 0, 0, 0.82);
}

.aiv-preview-frame__plate {
  bottom: 7px;
  background: rgba(17, 24, 39, 0.82);
}

.aiv-preview-panel {
  position: relative;
  z-index: 2;
  width: min(328px, calc(100vw - 86px));
  min-width: 0;
  max-width: 100%;
  min-height: min(46vh, 470px);
  max-height: min(52vh, 520px);
  overflow: hidden;
  align-self: stretch;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.38)),
    rgba(247, 249, 244, 0.78);
  color: #111827;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.72) inset,
    0 20px 42px -34px rgba(0, 0, 0, 0.46);
  transform: none;
}

@media (min-width: 760px) {
  .aiv-preview-panel {
    width: 100%;
  }
}

@media (max-width: 759px) {
  .aiv-preview-output {
    width: min(560px, calc(100vw - 42px));
  }

  .aiv-preview-panel {
    width: 100%;
    min-height: auto;
    max-height: min(42vh, 420px);
  }
}

.aiv-preview-panel::after {
  content: '';
  position: absolute;
  inset: 10px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(17, 24, 39, 0.06);
  border-radius: 14px;
  background: transparent;
  box-shadow: none;
}

.aiv-preview-panel__head {
  border-bottom: 1px solid rgba(17, 24, 39, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.52), transparent),
    rgba(255, 255, 255, 0.22);
}

.aiv-preview-panel__kicker {
  background: rgba(17, 24, 39, 0.07);
  color: rgba(17, 24, 39, 0.5);
  letter-spacing: 0.09em;
}

.aiv-preview-panel__body {
  flex: 1;
  background: transparent;
}

.aiv-preview-label-card {
  border-color: rgba(17, 24, 39, 0.09);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.46);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.68) inset;
}

.aiv-preview-label-card--receipt::after {
  opacity: 0.34;
}

.aiv-preview-label-card__content {
  background: rgba(255, 255, 255, 0.48);
}

.aiv-preview-ref-shelf {
  margin-top: auto;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.22)),
    rgba(247, 249, 244, 0.6);
  padding: 12px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.68) inset;
}

.aiv-preview-ref-grid {
  gap: 6px;
}

.aiv-preview-ref-grid > div {
  border-color: rgba(17, 24, 39, 0.1);
  border-radius: 10px;
  background: rgba(17, 24, 39, 0.06);
  box-shadow: 0 10px 20px -18px rgba(0, 0, 0, 0.54);
}

.aiv-preview-ref-grid span {
  padding: 10px 5px 4px;
  font-size: 9px;
}

.aiv-preview-media-object {
  animation: aiv-preview-object-in var(--motion-emphasis) var(--ease-standard) 180ms both;
}

.aiv-preview--closing .aiv-preview-output,
.aiv-preview--closing .aiv-preview-media-object {
  animation-duration: var(--motion-base);
  animation-direction: reverse;
  animation-delay: 0ms;
}

@keyframes aiv-preview-print-out {
  from {
    opacity: 0;
    transform: translateY(-54px) rotate(0.5deg) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotate(0.5deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aiv-hero-title,
  .aiv-hero-subtitle,
  .aiv-creator-enter,
  .aiv-mode-pill,
  .aiv-inspiration-card,
  .aiv-modal-pop {
    animation: none;
    opacity: 1;
  }

  .aiv-inspiration-card::before {
    display: none;
  }

  .aiv-source-card,
  .aiv-source-card::before,
  .aiv-source-card::after,
  .aiv-preview,
  .aiv-preview-shell,
  .aiv-preview-media-object,
  .aiv-preview--closing {
    animation: none;
    transition: none;
  }

  .aiv-source-card::after {
    display: none;
  }

  .aiv-mode-pill::before,
  .aiv-mode-pill::after {
    transition: none;
  }
}

/* ---------------- 参考素材 @ token 输入框（v3：contenteditable）
 * 结构：.aiv-mentions { .aiv-mentions__editor[contenteditable] | .aiv-mentions__suggestions }
 *      .aiv-mentions__editor 内部 inline 排：text + .aiv-mentions__chip + text
 *      .aiv-mentions__chip[contenteditable=false] { .aiv-mentions__chip-thumb + .aiv-mentions__chip-label }
 *
 * v2 (textarea + mirror) 与 v3 的关键差别：
 *   v2 必须保证 mirror 与 textarea 的字符宽度恒等 → chip 不能加 padding/border/margin，
 *     只能靠 ::after + 末尾 4 个空格"假装"胶囊 → 空格被一起送 prompt
 *   v3 chip 是真实 inline-flex 元素，缩略图嵌进 chip 内部，宽度任意 → 不需要任何
 *     补偿空格，光标天然落在 chip 之后；value 里只有 "@图片1" 干干净净。
 */
.aiv-prompt-mentions {
  width: 100%;
}
.aiv-mentions {
  position: relative;
  width: 100%;
}
.aiv-mentions__editor {
  position: relative;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: normal;
  padding: 0;
  border: 0;
  margin: 0;
  min-height: 72px;
  max-height: 180px;
  width: 100%;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-y: auto;
  color: rgba(255, 255, 255, 0.85);
  caret-color: white;
  outline: none;
  /* 隐藏滚动条 —— 跨平台一致（解决 Win/Mac 行宽差异 → 跨行选中错位）。
   * overflow-y 仍是 auto，鼠标 / 触控板 / 键盘导航都能滚。 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.aiv-mentions--has-labeled-expand .aiv-mentions__editor {
  padding-right: 92px;
}
.aiv-mentions__editor::-webkit-scrollbar {
  width: 0;
  height: 0;
}
/* placeholder：editor 空时显示 data-placeholder 属性内容。
 * absolute 定位 → 不占 inline 流，光标始终落在 editor 起点。 */
.aiv-mentions__editor[data-empty='true']::before {
  content: attr(data-placeholder);
  position: absolute;
  top: 0;
  left: 0;
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  white-space: pre-wrap;
}

/* mention chip：缩略图在左 + 文字在右，整体一颗药丸。
 * 用真正的 padding / border-radius，不再有任何 ::after 黑魔法。 */
.aiv-mentions__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle; /* 与中文行内文字基线对齐，不至于浮起来 */
  margin: 0 2px;
  padding: 1px 8px 1px 3px;
  box-sizing: border-box;
  min-height: 20px;
  height: 1.6em;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.16);
  color: #fdba74;
  font-size: 13px;
  line-height: 1;
  /* chip 内部不可编辑、不参与文本选区扩展 */
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  cursor: default;
  white-space: nowrap;
}
.aiv-mentions__chip--editable {
  cursor: pointer;
}
/* 可编辑 chip 的可发现性：悬停亮起 + 下划虚线暗示「点我可改」 */
.aiv-mentions__chip--editable:hover {
  background: rgba(249, 115, 22, 0.3);
  box-shadow: 0 0 0 1px rgba(253, 186, 116, 0.45) inset;
}
.aiv-mentions__chip--editable .aiv-mentions__chip-label {
  -webkit-text-decoration: underline dotted rgba(253, 186, 116, 0.6);
          text-decoration: underline dotted rgba(253, 186, 116, 0.6);
  text-underline-offset: 3px;
}
/* 该 token 引用的素材已被删除或不存在；保留 chip 但走红色降级，提交时会忽略。 */
.aiv-mentions__chip--orphan {
  background: rgba(248, 113, 113, 0.18);
  color: #fca5a5;
  text-decoration: line-through;
  text-decoration-color: rgba(248, 113, 113, 0.55);
  text-decoration-thickness: 1px;
}
.aiv-mentions__chip--orphan .aiv-mentions__chip-thumb {
  filter: grayscale(1);
  opacity: 0.55;
}
.aiv-mentions__chip--orphan .aiv-mentions__chip-thumb--audio,
.aiv-mentions__chip--orphan .aiv-mentions__chip-thumb--icon {
  background: rgba(248, 113, 113, 0.32);
}
.aiv-mentions__chip-thumb {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: inline-block;
}
.aiv-mentions__chip-thumb--audio,
.aiv-mentions__chip-thumb--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(249, 115, 22, 0.42);
  color: rgba(255, 255, 255, 0.9);
  font-size: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.aiv-mentions__chip-thumb--time svg {
  display: block;
  width: 12px;
  height: 12px;
}
.aiv-mentions__chip-label {
  white-space: nowrap;
  font-weight: 500;
  line-height: 1;
  max-width: 18em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aiv-mentions__editor[data-disabled='true'] {
  cursor: wait;
  opacity: 0.72;
}

/* 放大编辑按钮：右上角浮动；与分镜台 PromptBlock 上的 ⤢ 视觉对齐 */
.aiv-mentions__expand {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 5;
  display: inline-flex;
  height: 22px;
  width: 22px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.55);
  background: rgba(20, 23, 29, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.aiv-mentions__expand--labeled {
  width: auto;
  min-width: 76px;
  gap: 5px;
  padding: 0 8px;
  color: rgba(255, 255, 255, 0.72);
}
.aiv-mentions__expand-label {
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.aiv-mentions__expand:hover {
  color: #fdba74;
  border-color: rgba(251, 146, 60, 0.55);
  background: rgba(249, 115, 22, 0.12);
}

/* 放大弹窗里的大尺寸 editor：覆盖 compact 默认 72/180 限制。
 * max-height 留 64vh：弹窗 grid 总 78vh，扣掉提交栏 ~50 + 上下 padding 32 = 82px ≈ 8vh；
 * 文本框最多 64vh + 提交栏 + padding ≈ 72vh，正好被 grid 的 max-h-[78vh] 框住。 */
.aiv-mentions--expanded .aiv-mentions__editor {
  min-height: 360px;
  max-height: 64vh;
  font-size: 15px;
  line-height: 1.7;
  padding: 14px 16px;
}
.aiv-mentions--expanded .aiv-mentions__editor[data-empty='true']::before {
  top: 14px;
  left: 16px;
}

.aiv-promptbar-collapsed .aiv-mentions__editor {
  min-height: 24px;
  max-height: 42px;
  overflow-y: hidden;
  font-size: 14px;
  line-height: 1.5;
}

.aiv-promptbar-collapsed .aiv-mentions__editor[data-empty='true']::before {
  right: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.aiv-promptbar-collapsed .aiv-mentions__expand {
  display: none;
}

/* 通用：隐藏元素的滚动条但保留滚动功能。
 * 用于放大弹窗右侧素材面板 —— 用户反馈"内容不长，简单滑就行，不要经典滚动条"。 */
.aiv-no-scrollbar {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old IE/Edge */
}
.aiv-no-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

/* 候选 popover：JS 算出 viewport left/top 后通过 portal 挂到 document.body，
 * 避免输入框所在画布节点/面板的 transform、overflow 或局部 stacking context 截断。 */
.aiv-mentions__suggestions {
  position: fixed;
  background: #14171d;
  border: 1px solid #2e2e2e;
  border-radius: 10px;
  padding: 4px;
  z-index: var(--aiv-z-global-popover, 10000);
  max-height: min(360px, calc(100vh - 24px));
  min-width: 200px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  list-style: none;
  margin: 0;
}
.aiv-mentions__suggestions__item {
  padding: 6px 8px;
  border-radius: 8px;
  color: white;
  cursor: pointer;
}
.aiv-mentions__suggestions__item--focused {
  background: rgba(255, 255, 255, 0.08);
}
.aiv-mentions__suggestions--prompt-editor {
  background: #fdfdff;
  border-color: rgba(25, 31, 45, 0.08);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}
.aiv-mentions__suggestions--prompt-editor .aiv-mentions__suggestions__item {
  color: #141821;
}
.aiv-mentions__suggestions--prompt-editor .aiv-mentions__suggestions__item--focused {
  background: rgba(83, 93, 255, 0.1);
}
.aiv-mention-suggestion {
  display: flex;
  align-items: center;
  gap: 8px;
}
.aiv-mention-suggestion .thumb {
  width: 36px;
  height: 36px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  flex: 0 0 36px;
}
.aiv-mention-suggestion .thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.aiv-mentions__suggestions--prompt-editor .aiv-mention-suggestion .thumb-placeholder {
  background: rgba(83, 93, 255, 0.88);
  color: #fff;
}
.aiv-mention-suggestion .label {
  font-size: 13px;
  white-space: nowrap;
}
.aiv-mentions__suggestions--prompt-editor .aiv-mention-suggestion .label {
  color: #141821;
  font-weight: 600;
}
.aiv-mentions__image-preview {
  position: fixed;
  z-index: 10001;
  width: min(560px, calc(100vw - 24px));
  min-width: 260px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(12, 15, 22, 0.96);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.36);
  pointer-events: none;
}
.aiv-mentions__image-preview img,
.aiv-mentions__image-preview video {
  display: block;
  width: 100%;
  max-height: min(420px, calc(100vh - 24px));
  -o-object-fit: contain;
     object-fit: contain;
  background: rgba(8, 10, 15, 0.96);
}
.aiv-mentions__edit-popover {
  position: absolute;
  z-index: 10000;
  width: min(380px, calc(100% - 16px));
  border-radius: 16px;
  border: 1px solid rgba(125, 146, 255, 0.22);
  background: rgba(19, 23, 34, 0.96);
  padding: 16px;
  color: rgba(238, 242, 255, 0.94);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.aiv-mentions__edit-popover--number {
  width: auto;
  min-width: 188px;
  border-radius: 999px;
  padding: 6px;
}
.aiv-mentions__time-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
}
.aiv-mentions__time-step,
.aiv-mentions__time-ok {
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(238, 242, 255, 0.92);
  font-size: 14px;
  font-weight: 800;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}
.aiv-mentions__time-step {
  width: 34px;
  border-radius: 999px;
}
.aiv-mentions__time-ok {
  min-width: 42px;
  border-radius: 999px;
  padding: 0 12px;
  border-color: rgba(103, 121, 255, 0.7);
  background: linear-gradient(180deg, #5c65ff 0%, #4652f3 100%);
  color: #fff;
}
.aiv-mentions__time-step:hover,
.aiv-mentions__time-ok:hover {
  border-color: rgba(153, 166, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
}
.aiv-mentions__time-ok:hover {
  background: linear-gradient(180deg, #6b73ff 0%, #5260ff 100%);
}
.aiv-mentions__time-step:active,
.aiv-mentions__time-ok:active {
  transform: translateY(1px);
}
.aiv-mentions__time-value {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(134, 151, 255, 0.4);
  background: rgba(7, 10, 18, 0.56);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.aiv-mentions__time-value input {
  width: 42px;
  height: 30px;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: rgba(245, 247, 255, 0.96);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.aiv-mentions__time-value span {
  color: rgba(190, 199, 230, 0.78);
  font-size: 13px;
  font-weight: 800;
}
.aiv-mentions__edit-title {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: rgba(246, 248, 255, 0.96);
}
.aiv-mentions__edit-field {
  display: flex;
  align-items: center;
  gap: 10px;
}
.aiv-mentions__edit-field input,
.aiv-mentions__edit-field textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(134, 151, 255, 0.34);
  background: rgba(7, 10, 18, 0.56);
  color: rgba(245, 247, 255, 0.95);
  font-size: 15px;
  line-height: 1.55;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}
.aiv-mentions__edit-field input {
  height: 48px;
  padding: 0 14px;
}
.aiv-mentions__edit-field textarea {
  min-height: 116px;
  resize: vertical;
  padding: 12px 14px;
}
.aiv-mentions__edit-field input::-moz-placeholder, .aiv-mentions__edit-field textarea::-moz-placeholder {
  color: rgba(168, 178, 205, 0.48);
}
.aiv-mentions__edit-field input::placeholder,
.aiv-mentions__edit-field textarea::placeholder {
  color: rgba(168, 178, 205, 0.48);
}
.aiv-mentions__edit-field input:focus,
.aiv-mentions__edit-field textarea:focus {
  border-color: rgba(118, 132, 255, 0.82);
  box-shadow: 0 0 0 4px rgba(83, 93, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.aiv-mentions__edit-field span {
  color: rgba(209, 216, 238, 0.74);
  font-size: 15px;
  font-weight: 600;
}
.aiv-mentions__edit-count {
  margin-top: 6px;
  text-align: right;
  color: rgba(170, 181, 210, 0.72);
  font-size: 12px;
}
.aiv-mentions__edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}
.aiv-mentions__edit-actions button {
  height: 40px;
  min-width: 84px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.065);
  color: rgba(230, 235, 250, 0.86);
  font-size: 14px;
  font-weight: 700;
}
.aiv-mentions__edit-actions button:hover {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.aiv-mentions__edit-actions button.primary {
  border-color: rgba(126, 144, 255, 0.74);
  background: linear-gradient(180deg, #6268ff 0%, #4b54f5 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(83, 93, 255, 0.28);
}
.aiv-mentions__edit-actions button.primary:hover {
  border-color: rgba(162, 174, 255, 0.92);
  background: linear-gradient(180deg, #7378ff 0%, #5861ff 100%);
}

/* ---------------- 分镜台「参考素材」提示词高亮（R2-05，v2 contenteditable + ::highlight）
 * 单层 contenteditable div：文字 / 选区 / 光标全在同一图层 → 跨行复制不错位。
 * 橙色高亮通过 CSS Custom Highlight API（CSS.highlights + ::highlight() 选择器）
 * 画在文字背后的浏览器原生 paint 层，不修改 DOM、不改字符宽度 → 不破坏选区/光标。
 *
 * 浏览器支持：Chrome 105+ (2022.09) / Edge 105+ / Safari 17.4 (2024.03) / Firefox 140+。
 * 不支持时：编辑器仍可用，只是缺少橙色高亮（优雅降级）。
 */
.aiv-shot-prompt {
  position: relative;
  width: 100%;
}
.aiv-shot-prompt__editor {
  display: block;
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  font-variant: inherit;
  font-kerning: inherit;
  font-feature-settings: inherit;
  text-rendering: inherit;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  letter-spacing: normal;
  padding: 10px 12px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  -moz-tab-size: 2;
    -o-tab-size: 2;
       tab-size: 2;
  box-sizing: border-box;
  width: 100%;
  min-height: inherit;
  max-height: inherit;
  overflow-y: auto;
  caret-color: white;
  outline: none;
  /* 跨平台一致隐藏滚动条 → 内容宽度恒等，无 Win/Mac 差异 */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.aiv-shot-prompt__editor::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.aiv-shot-prompt--compact .aiv-shot-prompt__editor {
  font-size: 12.5px;
  line-height: 20px;
}
.aiv-shot-prompt--expanded .aiv-shot-prompt__editor {
  font-size: 14px;
  line-height: 24px;
}
.aiv-shot-prompt__editor[data-empty='true']::before {
  content: attr(data-placeholder);
  color: rgba(255, 255, 255, 0.25);
  pointer-events: none;
  /* placeholder 不参与 inline 流，光标始终落在 editor 起点 */
  position: absolute;
  top: 10px;
  left: 12px;
}
/* 选区与系统默认 textarea 的蓝色一致 */
.aiv-shot-prompt__editor::-moz-selection {
  background: rgba(59, 130, 246, 0.38);
}
.aiv-shot-prompt__editor::selection {
  background: rgba(59, 130, 246, 0.38);
}
.aiv-shot-prompt__editor::-moz-selection {
  background: rgba(59, 130, 246, 0.38);
}
/* CSS Custom Highlight API：在文字背后画橙色（颜色 / 背景）。
 * ::highlight() 只支持 color / background-color / text-decoration / text-shadow，
 * 完全不影响 inline 布局 → 选区蓝色与橙色文字同图层、必然对齐。 */
::highlight(aiv-shot-active) {
  color: #ff7a1a;
}
::highlight(aiv-shot-default) {
  color: #fb923c;
}
::highlight(aiv-shot-orphan) {
  color: #fecaca;
  background-color: rgba(239, 68, 68, 0.22);
  -webkit-text-decoration: underline wavy rgba(248, 113, 113, 0.9);
          text-decoration: underline wavy rgba(248, 113, 113, 0.9);
}
.aiv-shot-prompt__suggestions {
  position: absolute;
  z-index: 30;
  list-style: none;
  margin: 0;
  min-width: 240px;
  max-width: min(360px, 100%);
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: #181b22;
  padding: 4px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.aiv-shot-prompt__suggestion {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  padding: 6px 8px;
  color: rgba(255, 255, 255, 0.82);
}
.aiv-shot-prompt__suggestion--focused {
  background: rgba(251, 146, 60, 0.13);
  color: #fff7ed;
}
.aiv-shot-prompt__suggestion-thumb {
  display: flex;
  height: 30px;
  width: 30px;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
}
.aiv-shot-prompt__suggestion-thumb img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.aiv-shot-prompt__suggestion-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}
.aiv-shot-prompt__suggestion-token {
  color: #fb923c;
  font-size: 12px;
  line-height: 1.1;
}
.aiv-shot-prompt__suggestion-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1.15;
  color: rgba(255, 255, 255, 0.55);
}

/* PipelineProgress 进度条流光动画 */
@keyframes aiv-progress-shimmer {
  0% { transform: translateX(-50%) skewX(-12deg); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateX(450%) skewX(-12deg); opacity: 0; }
}
.aiv-progress-shimmer {
  animation: aiv-progress-shimmer 2.4s linear infinite;
}

/* Shared AI generation card motion */
@keyframes aiv-generation-card-breathe {
  0%, 100% {
    border-color: rgba(103, 232, 249, 0.3);
    box-shadow:
      0 0 0 1px rgba(34, 211, 238, 0.12) inset,
      0 14px 38px rgba(0, 0, 0, 0.22),
      0 0 32px rgba(14, 165, 233, 0.1);
  }
  42% {
    border-color: rgba(196, 181, 253, 0.42);
    box-shadow:
      0 0 0 1px rgba(196, 181, 253, 0.2) inset,
      0 18px 48px rgba(0, 0, 0, 0.28),
      0 0 46px rgba(124, 58, 237, 0.14);
  }
  72% {
    border-color: rgba(251, 191, 36, 0.34);
    box-shadow:
      0 0 0 1px rgba(251, 191, 36, 0.14) inset,
      0 16px 44px rgba(0, 0, 0, 0.25),
      0 0 38px rgba(249, 115, 22, 0.1);
  }
}

@keyframes aiv-generation-plasma-flow {
  0% {
    transform: translate3d(-8%, 5%, 0) rotate(0deg) scale(1.08);
    background-position: 0% 36%, 100% 28%, 40% 100%, 0% 50%;
  }
  50% {
    transform: translate3d(7%, -5%, 0) rotate(8deg) scale(1.15);
    background-position: 86% 58%, 14% 50%, 72% 18%, 100% 50%;
  }
  100% {
    transform: translate3d(-8%, 5%, 0) rotate(0deg) scale(1.08);
    background-position: 0% 36%, 100% 28%, 40% 100%, 0% 50%;
  }
}

@keyframes aiv-generation-border-spin {
  0%, 100% {
    filter: hue-rotate(0deg);
    opacity: 0.48;
  }
  50% {
    filter: hue-rotate(78deg);
    opacity: 0.68;
  }
}

@keyframes aiv-generation-scan {
  0% {
    opacity: 0;
    transform: translateX(-130%) skewX(-16deg);
  }
  18%,
  72% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translateX(140%) skewX(-16deg);
  }
}

@keyframes aiv-generation-orb-pulse {
  0%, 100% {
    filter: hue-rotate(0deg);
    transform: scale(0.96);
    box-shadow:
      0 0 0 1px rgba(207, 250, 254, 0.22) inset,
      0 0 26px rgba(34, 211, 238, 0.22);
  }
  45% {
    filter: hue-rotate(48deg);
    transform: scale(1.04);
    box-shadow:
      0 0 0 1px rgba(233, 213, 255, 0.3) inset,
      0 0 34px rgba(168, 85, 247, 0.26);
  }
  76% {
    filter: hue-rotate(96deg);
    transform: scale(1);
    box-shadow:
      0 0 0 1px rgba(254, 240, 138, 0.24) inset,
      0 0 30px rgba(251, 146, 60, 0.18);
  }
}

@keyframes aiv-video-generation-frame-pulse {
  0%, 100% {
    opacity: 0.36;
    transform: translateY(0);
    border-color: rgba(207, 250, 254, 0.08);
  }
  50% {
    opacity: 0.72;
    transform: translateY(-2px);
    border-color: rgba(196, 181, 253, 0.2);
  }
}

@keyframes aiv-video-generation-frame-scan {
  0% {
    opacity: 0;
    transform: translateX(-130%) skewX(-18deg);
  }
  30%,
  70% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
    transform: translateX(130%) skewX(-18deg);
  }
}

@keyframes aiv-video-generation-rail-flow {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(260%);
  }
}

.aiv-generation-card,
.aiv-first-frame-card--generating {
  isolation: isolate;
  animation: aiv-generation-card-breathe 3.8s ease-in-out infinite;
}

.aiv-generation-card {
  position: relative;
  overflow: hidden;
}

.aiv-generation-card::before {
  content: '';
  position: absolute;
  inset: -42%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 26%, rgba(34, 211, 238, 0.26), transparent 34%),
    radial-gradient(ellipse at 82% 30%, rgba(168, 85, 247, 0.22), transparent 36%),
    radial-gradient(ellipse at 48% 84%, rgba(251, 146, 60, 0.16), transparent 38%),
    linear-gradient(115deg, rgba(8, 13, 20, 0.12), rgba(14, 165, 233, 0.2), rgba(124, 58, 237, 0.16), rgba(251, 146, 60, 0.1), rgba(8, 13, 20, 0.12));
  background-size: 170% 170%, 180% 180%, 190% 190%, 240% 240%;
  filter: saturate(1.2);
  mix-blend-mode: screen;
  opacity: 0.74;
  animation: aiv-generation-plasma-flow 6s ease-in-out infinite;
}

.aiv-generation-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  pointer-events: none;
  border-radius: inherit;
  background:
    conic-gradient(
      from 0deg,
      transparent,
      rgba(34, 211, 238, 0.72),
      rgba(168, 85, 247, 0.48),
      rgba(251, 146, 60, 0.42),
      transparent 72%
    );
  opacity: 0.52;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: aiv-generation-border-spin 5s linear infinite;
}

.aiv-generation-card > * {
  position: relative;
  z-index: 1;
}

.aiv-generation-surface {
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 18%, rgba(34, 211, 238, 0.2), transparent 34%),
    radial-gradient(circle at 76% 78%, rgba(168, 85, 247, 0.18), transparent 36%),
    linear-gradient(135deg, rgba(10, 16, 28, 0.94), rgba(9, 12, 22, 0.82));
}

.aiv-generation-surface::before {
  content: '';
  position: absolute;
  inset: -36%;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    radial-gradient(ellipse at 32% 30%, rgba(34, 211, 238, 0.22), transparent 32%),
    radial-gradient(ellipse at 72% 64%, rgba(251, 146, 60, 0.14), transparent 34%);
  background-size: 28px 28px, 28px 28px, 160% 160%, 170% 170%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  opacity: 0.72;
  animation: aiv-generation-plasma-flow 7.2s ease-in-out infinite;
}

.aiv-generation-surface::after {
  content: '';
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  z-index: 0;
  width: 32%;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(207, 250, 254, 0.14),
      rgba(167, 139, 250, 0.12),
      transparent
    );
  filter: blur(0.5px);
  animation: aiv-generation-scan 2.7s linear infinite;
}

.aiv-generation-surface > * {
  position: relative;
  z-index: 1;
}

.aiv-generation-orb {
  display: inline-flex;
  height: 42px;
  width: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.42), transparent 20%),
    conic-gradient(from 210deg, #22d3ee, #8b5cf6, #fb923c, #22d3ee);
  color: white;
  animation: aiv-generation-orb-pulse 2.4s ease-in-out infinite;
}

.aiv-generation-orb--sm {
  height: 34px;
  width: 34px;
}

.aiv-generation-orb--lg {
  height: 52px;
  width: 52px;
}

.aiv-generation-orb svg {
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.36));
}

.aiv-video-generation-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(207, 250, 254, 0.1);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 34%),
    radial-gradient(circle at 30% 28%, rgba(34, 211, 238, 0.2), transparent 34%),
    radial-gradient(circle at 76% 70%, rgba(168, 85, 247, 0.16), transparent 38%),
    rgba(255, 255, 255, 0.035);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.025) inset,
    0 10px 26px rgba(0, 0, 0, 0.18);
  animation: aiv-video-generation-frame-pulse 2.6s ease-in-out infinite;
}

.aiv-video-generation-frame::after {
  content: '';
  position: absolute;
  inset: -10% auto -10% 0;
  width: 46%;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(207, 250, 254, 0.16),
      rgba(251, 191, 36, 0.1),
      transparent
    );
  animation: aiv-video-generation-frame-scan 2.8s linear infinite;
}

.aiv-video-generation-rail {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.045) inset;
}

.aiv-video-generation-beam {
  display: block;
  height: 100%;
  width: 38%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(34, 211, 238, 0.82),
      rgba(168, 85, 247, 0.72),
      rgba(251, 146, 60, 0.56),
      transparent
    );
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.28));
  animation: aiv-video-generation-rail-flow 2.9s linear infinite;
}

/* Storyboard first-frame generation: soft water-wave sheen */
@keyframes aiv-first-frame-card-breathe {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(103, 232, 249, 0.13) inset,
      0 14px 38px rgba(0, 0, 0, 0.2),
      0 0 34px rgba(20, 184, 166, 0.08);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(165, 243, 252, 0.24) inset,
      0 18px 48px rgba(0, 0, 0, 0.26),
      0 0 48px rgba(59, 130, 246, 0.14);
  }
}

@keyframes aiv-first-frame-wave-flow {
  0% {
    transform: translate3d(-10%, 5%, 0) rotate(0deg) scale(1.12);
    background-position: 0% 42%, 100% 36%, 50% 100%, 0% 50%;
  }
  50% {
    transform: translate3d(8%, -4%, 0) rotate(6deg) scale(1.18);
    background-position: 82% 62%, 16% 48%, 64% 18%, 100% 50%;
  }
  100% {
    transform: translate3d(-10%, 5%, 0) rotate(0deg) scale(1.12);
    background-position: 0% 42%, 100% 36%, 50% 100%, 0% 50%;
  }
}

@keyframes aiv-first-frame-ripple {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55);
  }
  18% {
    opacity: 0.46;
  }
  82% {
    opacity: 0.08;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

.aiv-first-frame-card--generating {
  position: relative;
  overflow: hidden;
}

.aiv-first-frame-wave {
  overflow: hidden;
}

.aiv-first-frame-wave::before {
  content: '';
  position: absolute;
  inset: -42%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 24%, rgba(45, 212, 191, 0.34), transparent 34%),
    radial-gradient(ellipse at 82% 30%, rgba(96, 165, 250, 0.3), transparent 36%),
    radial-gradient(ellipse at 46% 82%, rgba(251, 146, 60, 0.18), transparent 38%),
    linear-gradient(115deg, rgba(8, 13, 20, 0.08), rgba(20, 184, 166, 0.18), rgba(59, 130, 246, 0.2), rgba(251, 146, 60, 0.1), rgba(8, 13, 20, 0.1));
  background-size: 180% 180%, 170% 170%, 190% 190%, 240% 240%;
  filter: saturate(1.12);
  mix-blend-mode: screen;
  animation: aiv-first-frame-wave-flow 5.6s ease-in-out infinite;
}

.aiv-first-frame-wave::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(86%, 280px);
  aspect-ratio: 1;
  pointer-events: none;
  border-radius: 999px;
  border: 1px solid rgba(207, 250, 254, 0.28);
  box-shadow:
    0 0 0 18px rgba(34, 211, 238, 0.035),
    0 0 42px rgba(56, 189, 248, 0.12);
  animation: aiv-first-frame-ripple 2.9s ease-out infinite;
}

/* aiv-gen-* — global media generation frame shared by image/video placeholders. */
.aiv-gen-tile {
  position: relative;
  border: 1px solid rgba(251, 146, 60, 0.18);
  background: linear-gradient(180deg, #0e1116, #0a0c10);
  box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.06) inset, 0 8px 24px rgba(0, 0, 0, 0.35);
}
.aiv-gen-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  animation: aiv-gen-tile-breathe 2.6s ease-in-out infinite;
}
@keyframes aiv-gen-tile-breathe {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.10), 0 0 24px rgba(251, 146, 60, 0.04) inset;
  }
  50% {
    box-shadow: 0 0 0 1px rgba(251, 146, 60, 0.30), 0 0 28px rgba(251, 146, 60, 0.10) inset;
  }
}

.aiv-gen-dots {
  position: absolute;
  inset: 0;
}
.aiv-gen-dots__dot {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px;
  border-radius: 50%;
  background: var(--color-accent-400);
  opacity: 0.18;
  animation: aiv-gen-dots-pulse 1.8s ease-in-out infinite;
}
@keyframes aiv-gen-dots-pulse {
  0%, 100% { opacity: 0.12; transform: scale(0.7); }
  50%      { opacity: 0.95; transform: scale(1.4); box-shadow: 0 0 10px var(--color-accent-glow); }
}

/* aiv-thinking-stage — LLM thinking / parsing wait state.
 * Built as a small timeline: raw stream -> parsing gates -> structured slate. */
.aiv-thinking-stage {
  --aiv-thinking-accent: 251, 146, 60;
  --aiv-thinking-accent-strong: #fb923c;
  --aiv-thinking-secondary: 45, 212, 191;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(310px, 1.1fr);
  gap: 22px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(var(--aiv-thinking-accent), 0.2);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
    #101319;
  padding: 18px;
  box-shadow:
    0 0 0 1px rgba(var(--aiv-thinking-accent), 0.045) inset,
    0 18px 46px -34px rgba(0, 0, 0, 0.95);
  isolation: isolate;
}
.aiv-thinking-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  opacity: 0.35;
  animation: aiv-thinking-grid-drift 10s linear infinite;
}
.aiv-thinking-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(
      105deg,
      transparent 0%,
      rgba(var(--aiv-thinking-secondary), 0.08) 34%,
      rgba(var(--aiv-thinking-accent), 0.13) 50%,
      transparent 68%
    );
  transform: translateX(-70%) skewX(-12deg);
  animation: aiv-thinking-scan 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.aiv-thinking-stage > * {
  position: relative;
  z-index: 1;
}
.aiv-thinking-stage--outline {
  --aiv-thinking-accent: 251, 146, 60;
  --aiv-thinking-accent-strong: #fb923c;
  --aiv-thinking-secondary: 56, 189, 248;
}
.aiv-thinking-stage--asset {
  --aiv-thinking-accent: 45, 212, 191;
  --aiv-thinking-accent-strong: #2dd4bf;
  --aiv-thinking-secondary: 251, 146, 60;
}
.aiv-thinking-stage--storyboard {
  --aiv-thinking-accent: 251, 191, 36;
  --aiv-thinking-accent-strong: #fbbf24;
  --aiv-thinking-secondary: 249, 115, 22;
}
.aiv-thinking-stage__copy {
  min-width: 0;
}
.aiv-thinking-stage__eyebrow {
  display: inline-flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  border: 1px solid rgba(var(--aiv-thinking-accent), 0.28);
  border-radius: 999px;
  background: rgba(var(--aiv-thinking-accent), 0.08);
  padding: 2px 8px;
  color: rgba(var(--aiv-thinking-accent), 0.98);
  font-size: 10.5px;
  line-height: 1.35;
}
.aiv-thinking-stage__title {
  display: block;
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
.aiv-thinking-stage__description {
  display: block;
  margin-top: 4px;
  max-width: 440px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  line-height: 1.65;
}
.aiv-thinking-stage__machine {
  display: grid;
  grid-template-columns: minmax(58px, 0.7fr) minmax(150px, 1.45fr) minmax(64px, 0.85fr);
  gap: 12px;
  align-items: center;
  min-height: 120px;
}
.aiv-thinking-stage__stream,
.aiv-thinking-stage__slate {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
    rgba(4, 6, 10, 0.34);
  box-shadow: 0 0 0 1px rgba(var(--aiv-thinking-accent), 0.05) inset;
}
.aiv-thinking-stage__stream {
  display: grid;
  gap: 8px;
  padding: 13px 12px;
}
.aiv-thinking-stage__stream > span {
  height: 4px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(var(--aiv-thinking-accent), 0.72));
  opacity: 0.34;
  transform: scaleX(0.58);
  transform-origin: left center;
  animation: aiv-thinking-line 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: calc(var(--i) * 0.13s);
  will-change: transform, opacity;
}
.aiv-thinking-stage__stream > span:nth-child(2),
.aiv-thinking-stage__stream > span:nth-child(5) {
  width: 72%;
}
.aiv-thinking-stage__stream > span:nth-child(3),
.aiv-thinking-stage__stream > span:nth-child(7) {
  width: 88%;
}
.aiv-thinking-stage__stream > span:nth-child(4) {
  width: 56%;
}
.aiv-thinking-stage__timeline {
  position: relative;
  min-width: 0;
  padding: 32px 2px 26px;
}
.aiv-thinking-stage__track {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(var(--aiv-thinking-accent), 0.32), rgba(255, 255, 255, 0.08));
  transform: translateY(-50%);
}
.aiv-thinking-stage__runner {
  position: absolute;
  top: -4px;
  left: 0;
  width: 44px;
  height: 10px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(var(--aiv-thinking-secondary), 0.66), rgba(var(--aiv-thinking-accent), 0.88), transparent);
  filter: drop-shadow(0 0 8px rgba(var(--aiv-thinking-accent), 0.32));
  animation: aiv-thinking-runner 2.9s cubic-bezier(0.5, 0, 0.2, 1) infinite;
  will-change: left, transform, opacity;
}
.aiv-thinking-stage__runner--b {
  animation-delay: 1.1s;
  opacity: 0.62;
}
.aiv-thinking-stage__nodes {
  display: grid;
  grid-template-columns: repeat(var(--node-count), minmax(0, 1fr));
  align-items: center;
  gap: 8px;
  position: relative;
}
.aiv-thinking-stage__nodes > span {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 34px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 10.5px;
  line-height: 1;
}
.aiv-thinking-stage__nodes > span::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 50%;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  background: #101319;
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 0 4px rgba(16, 19, 25, 0.86);
  animation: aiv-thinking-node 2.9s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.2s);
  will-change: transform, border-color, box-shadow;
}
.aiv-thinking-stage__nodes > span.is-active {
  color: rgba(255, 255, 255, 0.78);
}
.aiv-thinking-stage__nodes > span.is-done {
  color: rgba(var(--aiv-thinking-accent), 0.72);
}
.aiv-thinking-stage__nodes > span.is-done::before {
  border-color: rgba(var(--aiv-thinking-accent), 0.48);
  background: rgba(var(--aiv-thinking-accent), 0.22);
  box-shadow:
    0 0 0 4px rgba(16, 19, 25, 0.9),
    0 0 12px rgba(var(--aiv-thinking-accent), 0.18);
}
.aiv-thinking-stage__nodes > span.is-active::before {
  border-color: rgba(var(--aiv-thinking-accent), 0.85);
  background: var(--aiv-thinking-accent-strong);
  box-shadow:
    0 0 0 4px rgba(16, 19, 25, 0.9),
    0 0 18px rgba(var(--aiv-thinking-accent), 0.35);
}
.aiv-thinking-stage__nodes em {
  overflow: hidden;
  max-width: 48px;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}
.aiv-thinking-stage__slate {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  padding: 12px;
}
.aiv-thinking-stage__slate > span {
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.085), transparent 46%),
    rgba(var(--aiv-thinking-accent), 0.045);
  opacity: 0.38;
  transform: translateY(0);
  animation: aiv-thinking-slate 2.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: calc(var(--i) * 0.16s);
  will-change: transform, opacity, border-color;
}
.aiv-thinking-stage__progress {
  grid-column: 1 / -1;
  height: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.aiv-thinking-stage__progress > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(var(--aiv-thinking-secondary), 0.8), rgba(var(--aiv-thinking-accent), 0.95));
  box-shadow: 0 0 14px rgba(var(--aiv-thinking-accent), 0.28);
  transition: width 700ms var(--ease-out-quart);
}
.aiv-thinking-stage--compact {
  grid-template-columns: minmax(0, 0.82fr) minmax(260px, 1fr);
  gap: 16px;
  border-radius: 12px;
  padding: 13px;
}
.aiv-thinking-stage--compact .aiv-thinking-stage__machine {
  min-height: 86px;
  grid-template-columns: minmax(46px, 0.58fr) minmax(132px, 1.38fr) minmax(52px, 0.7fr);
  gap: 9px;
}
.aiv-thinking-stage--compact .aiv-thinking-stage__stream {
  gap: 6px;
  padding: 10px;
}
.aiv-thinking-stage--compact .aiv-thinking-stage__slate {
  gap: 5px;
  padding: 9px;
}
.aiv-thinking-stage--compact .aiv-thinking-stage__title {
  margin-top: 7px;
  font-size: 13px;
}
.aiv-thinking-stage--compact .aiv-thinking-stage__description {
  font-size: 11.5px;
  line-height: 1.55;
}
.aiv-thinking-stage--poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(var(--aiv-thinking-accent), 0.1), transparent 44%),
    rgba(6, 8, 12, 0.28);
  padding: 0;
  box-shadow: none;
}
.aiv-thinking-stage--poster .aiv-thinking-stage__machine {
  height: 100%;
  min-height: 0;
  padding: 13% 11%;
}
.aiv-thinking-stage--poster .aiv-thinking-stage__nodes > span {
  padding-top: 28px;
}
.aiv-thinking-stage--poster .aiv-thinking-stage__nodes em {
  display: none;
}
.aiv-thinking-stage--poster .aiv-thinking-stage__slate {
  background: rgba(4, 6, 10, 0.18);
}
.aiv-thinking-stage__director {
  position: relative;
  display: grid;
  grid-template-columns: minmax(84px, 0.88fr) minmax(160px, 1.25fr) minmax(82px, 0.9fr);
  gap: 12px;
  align-items: center;
  min-height: 120px;
}
.aiv-director-board__casting,
.aiv-director-board__scene {
  position: relative;
  min-height: 108px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    rgba(4, 6, 10, 0.36);
  box-shadow: 0 0 0 1px rgba(var(--aiv-thinking-accent), 0.055) inset;
}
.aiv-director-board__beam {
  --director-beam-from: -12deg;
  --director-beam-to: 10deg;
  position: absolute;
  top: -28px;
  bottom: 8px;
  width: 58px;
  background:
    linear-gradient(180deg, rgba(251, 146, 60, 0.18), rgba(45, 212, 191, 0.04) 58%, transparent);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  opacity: 0.58;
  mix-blend-mode: screen;
  transform-origin: 50% 0;
  animation: aiv-director-spotlight 3.4s ease-in-out infinite;
  will-change: transform, opacity;
}
.aiv-director-board__beam--left {
  left: 8px;
  --director-beam-from: -13deg;
  --director-beam-to: 10deg;
  transform: rotate(var(--director-beam-from));
}
.aiv-director-board__beam--right {
  right: 6px;
  --director-beam-from: 14deg;
  --director-beam-to: -9deg;
  animation-delay: 1.1s;
  transform: rotate(var(--director-beam-from));
}
.aiv-director-board__photos {
  position: relative;
  height: 86px;
  margin: 12px 10px 8px;
}
.aiv-director-board__photos > span {
  position: absolute;
  bottom: 4px;
  left: calc(8% + var(--i) * 27%);
  display: grid;
  place-items: center;
  width: 38%;
  max-width: 52px;
  min-width: 34px;
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02)),
    rgba(11, 15, 22, 0.88);
  color: rgba(255, 255, 255, 0.74);
  box-shadow: 0 9px 22px -18px rgba(0, 0, 0, 0.9);
  transform: translateY(2px) rotate(var(--tilt));
  animation: aiv-director-card 3.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: calc(var(--i) * 0.18s);
  will-change: transform, border-color, box-shadow;
}
.aiv-director-board__photos > span:nth-child(1) {
  --tilt: -7deg;
}
.aiv-director-board__photos > span:nth-child(2) {
  --tilt: 1deg;
  z-index: 2;
}
.aiv-director-board__photos > span:nth-child(3) {
  --tilt: 8deg;
}
.aiv-director-board__photos > span.is-picked {
  border-color: rgba(251, 146, 60, 0.48);
  color: #fed7aa;
  box-shadow:
    0 0 0 1px rgba(251, 146, 60, 0.12) inset,
    0 12px 28px -16px rgba(251, 146, 60, 0.46);
}
.aiv-director-board__photos b {
  position: relative;
  z-index: 1;
  font-size: 16px;
  line-height: 1;
}
.aiv-director-board__photos i {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 10px;
  height: 3px;
  border-radius: 999px;
  background: rgba(var(--aiv-thinking-accent), 0.48);
  opacity: 0.62;
}
.aiv-director-board__stamp {
  position: absolute;
  right: 8px;
  top: 8px;
  border: 1px solid rgba(251, 146, 60, 0.42);
  border-radius: 999px;
  background: rgba(251, 146, 60, 0.1);
  padding: 1px 6px;
  color: rgba(255, 237, 213, 0.86);
  font-size: 10px;
  line-height: 1.4;
  transform: rotate(-7deg);
  animation: aiv-director-stamp 3.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform, opacity;
}
.aiv-director-board__choice {
  position: relative;
  min-width: 0;
  padding: 27px 0 22px;
}
.aiv-director-board__track {
  position: absolute;
  left: 7px;
  right: 7px;
  top: 50%;
  height: 2px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(45, 212, 191, 0.42), rgba(251, 146, 60, 0.58), rgba(255, 255, 255, 0.1));
  transform: translateY(-50%);
}
.aiv-director-board__pencil {
  position: absolute;
  top: -6px;
  left: 0;
  width: 42px;
  height: 12px;
  border-radius: 999px 3px 3px 999px;
  background:
    linear-gradient(90deg, rgba(45, 212, 191, 0.12), rgba(251, 146, 60, 0.92) 64%, #fde68a 66%, transparent 70%);
  filter: drop-shadow(0 0 8px rgba(251, 146, 60, 0.3));
  animation: aiv-director-pencil 3.4s cubic-bezier(0.5, 0, 0.2, 1) infinite;
  will-change: left, transform, opacity;
}
.aiv-director-board__nodes.aiv-thinking-stage__nodes > span::before {
  border-radius: 999px;
}
.aiv-director-board__scene {
  display: grid;
  align-content: center;
  gap: 9px;
  padding: 11px;
}
.aiv-director-board__viewfinder {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.aiv-director-board__viewfinder::before,
.aiv-director-board__viewfinder::after {
  content: '';
  position: absolute;
  background: rgba(255, 255, 255, 0.13);
}
.aiv-director-board__viewfinder::before {
  left: 50%;
  top: 4px;
  bottom: 4px;
  width: 1px;
}
.aiv-director-board__viewfinder::after {
  left: 4px;
  right: 4px;
  top: 50%;
  height: 1px;
}
.aiv-director-board__viewfinder > span {
  aspect-ratio: 1.55 / 1;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  background:
    linear-gradient(135deg, rgba(45, 212, 191, 0.18), transparent 48%),
    rgba(255, 255, 255, 0.025);
  animation: aiv-director-frame 3.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: calc(var(--i) * 0.16s);
  will-change: transform, opacity, border-color;
}
.aiv-director-board__scene-tags {
  display: flex;
  justify-content: center;
  gap: 5px;
}
.aiv-director-board__scene-tags > span {
  border: 1px solid rgba(45, 212, 191, 0.22);
  border-radius: 999px;
  background: rgba(45, 212, 191, 0.07);
  padding: 1px 5px;
  color: rgba(204, 251, 241, 0.72);
  font-size: 10px;
}
.aiv-thinking-stage--compact .aiv-thinking-stage__director {
  min-height: 90px;
  grid-template-columns: minmax(72px, 0.78fr) minmax(138px, 1.24fr) minmax(76px, 0.82fr);
  gap: 9px;
}
.aiv-thinking-stage--compact .aiv-director-board__casting,
.aiv-thinking-stage--compact .aiv-director-board__scene {
  min-height: 84px;
  border-radius: 9px;
}
.aiv-thinking-stage--compact .aiv-director-board__photos {
  height: 64px;
  margin: 10px 8px 6px;
}
.aiv-thinking-stage--compact .aiv-director-board__photos > span {
  min-width: 28px;
}
.aiv-thinking-stage--compact .aiv-director-board__photos b {
  font-size: 14px;
}
.aiv-thinking-stage--compact .aiv-director-board__scene {
  gap: 6px;
  padding: 9px;
}
.aiv-thinking-stage--compact .aiv-director-board__choice {
  padding: 23px 0 18px;
}
.aiv-thinking-stage--poster .aiv-thinking-stage__director {
  height: 100%;
  min-height: 0;
  grid-template-columns: 0.94fr 1.08fr 0.92fr;
  gap: 7%;
  padding: 14%;
}
.aiv-thinking-stage--poster .aiv-director-board__casting,
.aiv-thinking-stage--poster .aiv-director-board__scene {
  min-height: 0;
  height: 100%;
}
@keyframes aiv-thinking-grid-drift {
  to { background-position: 0 -26px, -26px 0; }
}
@keyframes aiv-thinking-scan {
  0% { opacity: 0; transform: translateX(-72%) skewX(-12deg); }
  20%, 66% { opacity: 1; }
  100% { opacity: 0; transform: translateX(72%) skewX(-12deg); }
}
@keyframes aiv-thinking-line {
  0%, 100% { opacity: 0.24; transform: scaleX(0.52); }
  36%, 58% { opacity: 0.86; transform: scaleX(1); }
}
@keyframes aiv-thinking-runner {
  0% { left: 0; opacity: 0; transform: translateX(-55%) scaleX(0.72); }
  10%, 88% { opacity: 1; }
  100% { left: 100%; opacity: 0; transform: translateX(-45%) scaleX(0.9); }
}
@keyframes aiv-thinking-node {
  0%, 100% { transform: translate(-50%, -50%) rotate(45deg) scale(0.92); }
  46% { transform: translate(-50%, -50%) rotate(45deg) scale(1.08); }
}
@keyframes aiv-thinking-slate {
  0%, 100% {
    opacity: 0.32;
    transform: translateY(0);
    border-color: rgba(255, 255, 255, 0.08);
  }
  44% {
    opacity: 0.86;
    transform: translateY(-2px);
    border-color: rgba(var(--aiv-thinking-accent), 0.36);
  }
}
@keyframes aiv-director-spotlight {
  0%, 100% { opacity: 0.35; transform: rotate(var(--director-beam-from)) scaleX(0.86); }
  48% { opacity: 0.84; transform: rotate(var(--director-beam-to)) scaleX(1.08); }
}
@keyframes aiv-director-card {
  0%, 100% {
    transform: translateY(4px) rotate(var(--tilt)) scale(0.96);
    border-color: rgba(255, 255, 255, 0.11);
  }
  42%, 64% {
    transform: translateY(-5px) rotate(0deg) scale(1.03);
    border-color: rgba(251, 146, 60, 0.44);
  }
}
@keyframes aiv-director-stamp {
  0%, 34%, 100% { opacity: 0.44; transform: rotate(-7deg) scale(0.9); }
  48%, 62% { opacity: 1; transform: rotate(-7deg) scale(1); }
}
@keyframes aiv-director-pencil {
  0% { left: 0; opacity: 0; transform: translateX(-30%) rotate(-3deg); }
  12%, 84% { opacity: 1; }
  100% { left: 100%; opacity: 0; transform: translateX(-70%) rotate(3deg); }
}
@keyframes aiv-director-frame {
  0%, 100% {
    opacity: 0.4;
    transform: scale(0.96);
    border-color: rgba(255, 255, 255, 0.1);
  }
  45%, 68% {
    opacity: 0.9;
    transform: scale(1);
    border-color: rgba(45, 212, 191, 0.42);
  }
}
@media (max-width: 760px) {
  .aiv-thinking-stage,
  .aiv-thinking-stage--compact {
    grid-template-columns: 1fr;
  }
  .aiv-thinking-stage__machine,
  .aiv-thinking-stage--compact .aiv-thinking-stage__machine {
    grid-template-columns: minmax(44px, 0.55fr) minmax(150px, 1.35fr) minmax(52px, 0.65fr);
  }
  .aiv-thinking-stage__director,
  .aiv-thinking-stage--compact .aiv-thinking-stage__director {
    grid-template-columns: minmax(70px, 0.82fr) minmax(138px, 1.18fr) minmax(72px, 0.82fr);
  }
}

/* aiv-shot-wait — first storyboard wait state.
 * A larger pre-production desk: script reading, cast/location/prop checks, voice prep, and shot cards. */
.aiv-shot-wait {
  position: relative;
  display: grid;
  grid-template-columns: minmax(270px, 0.84fr) minmax(420px, 1.16fr);
  gap: 22px;
  overflow: hidden;
  border: 1px solid rgba(251, 191, 36, 0.2);
  border-radius: 18px;
  background:
    radial-gradient(circle at 76% 16%, rgba(45, 212, 191, 0.14), transparent 30%),
    radial-gradient(circle at 15% 86%, rgba(251, 146, 60, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.014)),
    #101319;
  padding: 24px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.035) inset,
    0 20px 60px -42px rgba(0, 0, 0, 0.98);
  isolation: isolate;
}
.aiv-shot-wait::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  opacity: 0.28;
  animation: aiv-shot-grid 12s linear infinite;
}
.aiv-shot-wait::after {
  content: '';
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, transparent 24%, rgba(251, 191, 36, 0.12) 47%, rgba(45, 212, 191, 0.08) 52%, transparent 70%);
  transform: translateX(-70%) rotate(4deg);
  animation: aiv-shot-scan 4.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.aiv-shot-wait > * {
  position: relative;
  z-index: 1;
}
.aiv-shot-wait__copy {
  align-self: center;
  min-width: 0;
}
.aiv-shot-wait__eyebrow {
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  border: 1px solid rgba(251, 191, 36, 0.32);
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.09);
  padding: 3px 9px;
  color: rgba(253, 230, 138, 0.96);
  font-size: 11px;
  line-height: 1.35;
}
.aiv-shot-wait__copy h3 {
  margin: 12px 0 0;
  max-width: 410px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 20px;
  font-weight: 650;
  line-height: 1.32;
}
.aiv-shot-wait__copy p {
  margin: 8px 0 0;
  max-width: 460px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 12.5px;
  line-height: 1.75;
}
.aiv-shot-wait__now {
  display: grid;
  gap: 4px;
  margin-top: 18px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.14);
  padding: 12px;
}
.aiv-shot-wait__now span {
  color: rgba(45, 212, 191, 0.92);
  font-size: 10.5px;
}
.aiv-shot-wait__now strong {
  color: rgba(255, 255, 255, 0.84);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.55;
}
.aiv-shot-wait__episode {
  margin-top: 10px;
  overflow: hidden;
  max-width: 430px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aiv-shot-wait__studio {
  position: relative;
  min-height: 252px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background:
    radial-gradient(circle at 64% 42%, rgba(251, 191, 36, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.012)),
    rgba(7, 10, 15, 0.42);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.035) inset;
}
.aiv-shot-wait__slate {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.42);
  font-size: 11px;
  letter-spacing: 0;
}
.aiv-shot-wait__slate strong {
  color: rgba(253, 230, 138, 0.78);
  font-size: 12px;
  font-weight: 600;
}
.aiv-shot-wait__script {
  position: absolute;
  left: 18px;
  top: 54px;
  display: grid;
  gap: 8px;
  width: 176px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.01)),
    rgba(8, 12, 18, 0.58);
  padding: 14px;
}
.aiv-shot-wait__script > span {
  height: 4px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.11), rgba(251, 191, 36, 0.48));
  opacity: 0.32;
  transform: scaleX(0.66);
  transform-origin: left center;
  animation: aiv-shot-script 4.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: calc(var(--i) * 0.18s);
  will-change: transform, opacity;
}
.aiv-shot-wait__script > span:nth-child(2),
.aiv-shot-wait__script > span:nth-child(5) {
  width: 76%;
}
.aiv-shot-wait__script > span:nth-child(3) {
  width: 88%;
}
.aiv-shot-wait__script > span:nth-child(4) {
  width: 58%;
}
.aiv-shot-wait__flow {
  position: absolute;
  left: 236px;
  right: 28px;
  top: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.aiv-shot-wait__flow::before {
  content: '';
  position: absolute;
  left: 26px;
  right: 26px;
  top: 13px;
  height: 1px;
  background:
    linear-gradient(90deg, rgba(45, 212, 191, 0.28), rgba(251, 191, 36, 0.3), rgba(255, 255, 255, 0.08));
}
.aiv-shot-wait__flow > span {
  position: relative;
  z-index: 1;
  flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 54px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
  line-height: 1;
}
.aiv-shot-wait__flow > span::before {
  content: '';
  width: 14px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(16, 19, 25, 0.88);
  box-shadow: 0 0 0 5px rgba(16, 19, 25, 0.62);
  animation: aiv-shot-flow-dot 4.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.42s);
}
.aiv-shot-wait__frames {
  position: absolute;
  left: 236px;
  right: 28px;
  bottom: 34px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.aiv-shot-wait__frames > span {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.085);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(45, 212, 191, 0.08), transparent 46%),
    rgba(255, 255, 255, 0.025);
  animation: aiv-shot-frame-calm 4.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: calc(var(--i) * 0.22s);
}
.aiv-shot-wait__frames > span::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  height: 3px;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.24);
}
.aiv-shot-wait__jobs {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.aiv-shot-wait__job {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  padding: 11px;
  animation: aiv-shot-job 3.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.11s);
}
.aiv-shot-wait__job.is-active {
  border-color: rgba(251, 191, 36, 0.34);
  background: rgba(251, 191, 36, 0.065);
}
.aiv-shot-wait__job.is-done {
  border-color: rgba(45, 212, 191, 0.18);
  background: rgba(45, 212, 191, 0.045);
}
.aiv-shot-wait__job-icon {
  display: grid;
  place-items: center;
  width: 32px;
  aspect-ratio: 1;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.54);
}
.aiv-shot-wait__job.is-active .aiv-shot-wait__job-icon {
  color: rgba(253, 230, 138, 0.96);
}
.aiv-shot-wait__job.is-done .aiv-shot-wait__job-icon {
  color: rgba(153, 246, 228, 0.86);
}
.aiv-shot-wait__job div {
  min-width: 0;
}
.aiv-shot-wait__job span:not(.aiv-shot-wait__job-icon) {
  display: block;
  color: rgba(45, 212, 191, 0.76);
  font-size: 10.5px;
  line-height: 1.25;
}
.aiv-shot-wait__job strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aiv-shot-wait__job em {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.43);
  font-size: 11px;
  font-style: normal;
  line-height: 1.45;
}
.aiv-shot-wait__footer {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  color: rgba(255, 255, 255, 0.42);
  font-size: 11px;
}
.aiv-shot-wait__progress {
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}
.aiv-shot-wait__progress > span {
  display: block;
  height: 100%;
  min-width: 8%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(45, 212, 191, 0.9), rgba(251, 191, 36, 0.96));
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.24);
  transition: width 700ms var(--ease-out-quart);
}
.aiv-shot-wait__detail {
  grid-column: 1 / -1;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.16);
  padding: 9px 11px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 11px;
  line-height: 1.55;
}
@keyframes aiv-shot-grid {
  to { background-position: 0 -28px, -28px 0; }
}
@keyframes aiv-shot-scan {
  0% { opacity: 0; transform: translateX(-72%) rotate(4deg); }
  18%, 62% { opacity: 1; }
  100% { opacity: 0; transform: translateX(48%) rotate(4deg); }
}
@keyframes aiv-shot-script {
  0%, 100% { opacity: 0.28; transform: scaleX(0.52); }
  42%, 64% { opacity: 0.86; transform: scaleX(1); }
}
@keyframes aiv-shot-flow-dot {
  0%, 100% {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(16, 19, 25, 0.88);
    transform: scale(0.92);
  }
  48% {
    border-color: rgba(251, 191, 36, 0.48);
    background: rgba(251, 191, 36, 0.24);
    transform: scale(1);
  }
}
@keyframes aiv-shot-frame-calm {
  0%, 100% {
    opacity: 0.42;
    transform: translateY(0);
    border-color: rgba(255, 255, 255, 0.085);
  }
  46%, 66% {
    opacity: 0.84;
    transform: translateY(-2px);
    border-color: rgba(251, 191, 36, 0.24);
  }
}
@keyframes aiv-shot-job {
  0%, 100% { transform: translateY(0); }
  48% { transform: translateY(-2px); }
}
@media (max-width: 980px) {
  .aiv-shot-wait {
    grid-template-columns: 1fr;
  }
  .aiv-shot-wait__jobs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  .aiv-shot-wait {
    padding: 18px;
  }
  .aiv-shot-wait__studio {
    min-height: 286px;
  }
  .aiv-shot-wait__script {
    left: 18px;
    right: 18px;
    width: auto;
  }
  .aiv-shot-wait__flow {
    left: 28px;
    right: 28px;
    top: 148px;
  }
  .aiv-shot-wait__frames {
    left: 18px;
    right: 18px;
    bottom: 24px;
  }
  .aiv-shot-wait__jobs {
    grid-template-columns: 1fr;
  }
}

/* aiv-rg-* — Claude Design rich generation animations (rich gallery v2).
 * Each animation lives inside .aiv-gen-tile (orange breathing frame) and fills
 * the tile via inset:0 absolute positioning. Pure CSS; no JS measurement needed. */

/* ===== Bloom (image #1) — violet/pink/cyan rhythmic 2s metronome.
 *
 * 默认布局完全按 Claude Design 交付参数（% 尺寸、% 定位、~11% blur 比例），
 * 在非正方形（16:9 / 9:16 / 4:3 / 3:2 等）上 cloud 自然变椭圆，重 blur 把
 * 椭圆形态化为漫散色雾，与设计稿一致。
 *
 * 仅在极端比例（aspect > 2:1 panoramic 含 8:1 / aspect < 1:2 tall 含 1:8）
 * 时通过 container @aspect-ratio 查询切到 cqh/cqw 主导的横/纵向铺布局，
 * 否则色雾会被拉成无意义的长条。 */
.aiv-rg-bloom {
  position: absolute;
  inset: 0;
  overflow: hidden;
  container-type: size;
  pointer-events: none;
}
.aiv-rg-bloom__cloud {
  position: absolute;
  border-radius: 50%;
  filter: blur(11cqmin);
  animation: aiv-rg-bloom-beat 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: center;
  will-change: transform, opacity;
}
.aiv-rg-bloom__cloud--1 {
  left: 12%; top: 28%; width: 46%; height: 46%;
  background: #a78bfa; animation-delay: 0s;
}
.aiv-rg-bloom__cloud--2 {
  left: 32%; top: 18%; width: 46%; height: 46%;
  background: #f472b6; animation-delay: 0.4s;
}
.aiv-rg-bloom__cloud--3 {
  left: 50%; top: 32%; width: 46%; height: 46%;
  background: #22d3ee; animation-delay: 0.8s;
}

@container (aspect-ratio > 2/1) {
  .aiv-rg-bloom__cloud {
    width: 70cqh; height: 70cqh;
    filter: blur(10cqh);
    top: 15cqh;  /* 锚定到顶部避免堆在中央 */
  }
  .aiv-rg-bloom__cloud--1 { left: 5cqw; }
  .aiv-rg-bloom__cloud--2 { left: calc(50cqw - 35cqh); }
  .aiv-rg-bloom__cloud--3 { left: calc(95cqw - 70cqh); }
}

@container (aspect-ratio < 1/2) {
  .aiv-rg-bloom__cloud {
    width: 70cqw; height: 70cqw;
    filter: blur(10cqw);
    left: 15cqw;
  }
  .aiv-rg-bloom__cloud--1 { top: 5cqh; }
  .aiv-rg-bloom__cloud--2 { top: calc(50cqh - 35cqw); }
  .aiv-rg-bloom__cloud--3 { top: calc(95cqh - 70cqw); }
}
@keyframes aiv-rg-bloom-beat {
  0%   { transform: scale(0.55); opacity: 0.15; }
  20%  { transform: scale(1.05); opacity: 0.75; }
  60%  { transform: scale(0.85); opacity: 0.35; }
  100% { transform: scale(0.55); opacity: 0.15; }
}
.aiv-rg-bloom__noise {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: overlay;
  opacity: 0.5;
}
.aiv-rg-bloom__sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10%;
  width: 22%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18) 40%,
    rgba(196, 181, 253, 0.5) 50%, rgba(255, 255, 255, 0.18) 60%, transparent);
  filter: blur(6px);
  mix-blend-mode: screen;
  animation: aiv-rg-bloom-sweep 2s linear infinite;
}
@keyframes aiv-rg-bloom-sweep {
  0%   { transform: translateX(0); }
  100% { transform: translateX(550%); }
}
.aiv-rg-bloom__beats {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.aiv-rg-bloom__beats > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  animation: aiv-rg-bloom-tick 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes aiv-rg-bloom-tick {
  0%, 60%, 100% { background: rgba(255, 255, 255, 0.18); transform: scale(1); box-shadow: none; }
  10%, 30%      { background: #c4b5fd; transform: scale(1.6);
                  box-shadow: 0 0 10px #a78bfa, 0 0 16px rgba(167, 139, 250, 0.6); }
}

/* ===== Frame Render (video #1) — 4 cells sequential expose, restrained slate ===== */
.aiv-rg-frames {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 14% 12%;
  background: radial-gradient(120% 80% at 50% 50%, rgba(148, 163, 184, 0.06), transparent 70%);
  animation: aiv-rg-frames-breathe 6s ease-in-out infinite;
  overflow: hidden;
  pointer-events: none;
}
@keyframes aiv-rg-frames-breathe {
  0%, 100% { background-color: transparent; }
  50%      { background-color: rgba(148, 163, 184, 0.025); }
}
.aiv-rg-frames::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 24px);
  animation: aiv-rg-frames-grid 8s linear infinite;
  pointer-events: none;
  opacity: 0.6;
}
@keyframes aiv-rg-frames-grid { to { background-position: 0 -24px; } }
.aiv-rg-frames__strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  position: relative;
  z-index: 1;
}
.aiv-rg-frames__cell {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 7px;
  overflow: hidden;
  animation: aiv-rg-frames-cell 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes aiv-rg-frames-cell {
  0%, 75%, 100% {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
  }
  20%, 30% {
    background: rgba(226, 232, 240, 0.10);
    border-color: rgba(226, 232, 240, 0.45);
    box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.15), 0 6px 18px -8px rgba(226, 232, 240, 0.25);
  }
}
.aiv-rg-frames__cell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.12) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: aiv-rg-frames-sweep 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes aiv-rg-frames-sweep {
  0%, 18%, 32%, 100% { transform: translateX(-100%); }
  25%                { transform: translateX(100%); }
}
.aiv-rg-frames__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 55%;
  width: 100%;
  position: relative;
  z-index: 1;
}
.aiv-rg-frames__bars > span {
  flex: 1;
  background: linear-gradient(180deg, rgba(226, 232, 240, 0.6), rgba(148, 163, 184, 0.3));
  border-radius: 1px;
  animation: aiv-rg-frames-bar 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes aiv-rg-frames-bar {
  0%, 75%, 100% { transform: scaleY(0.35); opacity: 0.4; }
  25%           { transform: scaleY(1); opacity: 0.95; }
}
.aiv-rg-frames__head {
  position: relative;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  z-index: 1;
}
.aiv-rg-frames__head::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 8.33%);
  opacity: 0.5;
}
.aiv-rg-frames__playhead {
  position: absolute;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e2e8f0;
  box-shadow: 0 0 8px rgba(226, 232, 240, 0.5), 0 0 0 3px rgba(226, 232, 240, 0.08);
  animation: aiv-rg-frames-head 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes aiv-rg-frames-head {
  0%   { left: 0%; }
  100% { left: 100%; }
}

/* aiv-cs-card-* — restrained toolbox rows.
 * Wide horizontal cards: slim header (bullet + path + 3-bar pulse) +
 * body (icon · title/desc · per-tool preview · ENTER). Tool variants keep
 * their own restrained accent so the page scans by category without going neon. */
.aiv-cs-card {
  position: relative;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 44%),
    var(--color-bg-surface);
  overflow: hidden;
  transition: border-color var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}
.aiv-cs-card--orange {
  --cs-acc: #d9a066;
  --cs-acc-soft: rgba(217, 160, 102, 0.075);
  --cs-acc-line: rgba(217, 160, 102, 0.20);
  --cs-acc-text: rgba(232, 183, 132, 0.74);
}
.aiv-cs-card--sky {
  --cs-acc: #8db7d4;
  --cs-acc-soft: rgba(141, 183, 212, 0.07);
  --cs-acc-line: rgba(141, 183, 212, 0.18);
  --cs-acc-text: rgba(169, 204, 226, 0.72);
}
.aiv-cs-card--violet {
  --cs-acc: #a8a1d6;
  --cs-acc-soft: rgba(168, 161, 214, 0.07);
  --cs-acc-line: rgba(168, 161, 214, 0.18);
  --cs-acc-text: rgba(194, 188, 230, 0.72);
}
.aiv-cs-card--emerald {
  --cs-acc: #86b9a8;
  --cs-acc-soft: rgba(134, 185, 168, 0.07);
  --cs-acc-line: rgba(134, 185, 168, 0.18);
  --cs-acc-text: rgba(164, 207, 193, 0.72);
}
.aiv-cs-card--rose {
  --cs-acc: #d79a9a;
  --cs-acc-soft: rgba(215, 154, 154, 0.07);
  --cs-acc-line: rgba(215, 154, 154, 0.18);
  --cs-acc-text: rgba(227, 181, 181, 0.72);
}

.aiv-cs-card--live { cursor: pointer; }
.aiv-cs-card--live:hover {
  border-color: color-mix(in srgb, var(--cs-acc) 24%, var(--color-border-ghost));
  background: var(--color-bg-surface-2);
  box-shadow: 0 14px 38px -28px rgba(0, 0, 0, 0.72);
}
.aiv-cs-card--disabled { opacity: 0.55; cursor: not-allowed; }

/* Terminal header row */
.aiv-cs-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.018);
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}
.aiv-cs-card__bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cs-acc);
  box-shadow: 0 0 0 3px var(--cs-acc-soft);
}
.aiv-cs-card__path { color: var(--color-text-secondary); }
.aiv-cs-card__pulse {
  margin-left: auto;
  display: flex;
  gap: 3px;
}
.aiv-cs-card__pulse > span {
  display: inline-block;
  width: 3px;
  height: 10px;
  border-radius: 1px;
  background: var(--cs-acc-line);
  animation: aiv-cs-card-pulse 1.2s ease-in-out infinite;
}
.aiv-cs-card__pulse > span:nth-child(2) { animation-delay: 0.18s; }
.aiv-cs-card__pulse > span:nth-child(3) { animation-delay: 0.36s; }
@keyframes aiv-cs-card-pulse {
  0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* Body grid: icon · title/desc · preview · CTA */
.aiv-cs-card__body {
  display: grid;
  grid-template-columns: 56px 1fr 200px auto;
  align-items: center;
  gap: 18px;
  padding: 18px;
}
.aiv-cs-card__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  color: var(--cs-acc-text);
  background:
    radial-gradient(circle at 30% 25%, var(--cs-acc-soft), transparent 64%),
    rgba(255, 255, 255, 0.026);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.aiv-cs-card__icon > .anticon { font-size: 26px; }
.aiv-cs-card__icon > .anticon > svg { width: 26px; height: 26px; }
.aiv-cs-card__txt { min-width: 0; }
.aiv-cs-card__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}
.aiv-cs-card__desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.aiv-cs-card__preview {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.075);
  overflow: hidden;
  color: color-mix(in srgb, var(--cs-acc) 42%, var(--color-text-muted));
  opacity: 0.76;
}
.aiv-cs-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--color-border-ghost);
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--color-text-muted);
  transition:
    color var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard);
}
.aiv-cs-card--live:hover .aiv-cs-card__cta {
  color: var(--color-text-primary);
  border-color: color-mix(in srgb, var(--cs-acc) 28%, var(--color-border-ghost));
  background: var(--cs-acc-soft);
}

/* Narrow viewport: drop preview, tighten paddings */
@media (max-width: 640px) {
  .aiv-cs-card__body {
    grid-template-columns: 56px 1fr auto;
    gap: 12px;
    padding: 14px;
  }
  .aiv-cs-card__preview { display: none; }
}

/* Per-tool preview animations (color = inherit accent via currentColor) */
.aiv-pv-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 12px;
  height: 100%;
  width: 100%;
}
.aiv-pv-wave > span {
  flex: 1;
  display: inline-block;
  height: 30%;
  min-width: 2px;
  max-width: 4px;
  border-radius: 2px;
  background: currentColor;
  animation: aiv-pv-wave-anim 1.4s ease-in-out infinite;
}
@keyframes aiv-pv-wave-anim {
  0%, 100% { height: 18%; opacity: 0.5; }
  50%      { height: 78%; opacity: 1; }
}

.aiv-pv-voice {
  width: 100%;
  height: 100%;
  padding: 4px 10px;
}
.aiv-pv-voice > svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.4;
  fill: none;
}

.aiv-pv-avatar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 0 12px;
}
.aiv-pv-avatar__face {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 26%, var(--color-border-ghost));
  background:
    radial-gradient(circle at 38% 42%, currentColor 0 2px, transparent 2.4px),
    radial-gradient(circle at 62% 42%, currentColor 0 2px, transparent 2.4px),
    linear-gradient(180deg, color-mix(in srgb, currentColor 14%, transparent), rgba(255,255,255,0.035));
  box-shadow: inset 0 -8px 18px rgba(0,0,0,0.16);
}
.aiv-pv-avatar__bars {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 34px;
}
.aiv-pv-avatar__bars > i {
  width: 4px;
  height: 34%;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.72;
  animation: aiv-pv-avatar-bars 1.25s ease-in-out infinite;
}
.aiv-pv-avatar__bars > i:nth-child(2) { animation-delay: 0.16s; }
.aiv-pv-avatar__bars > i:nth-child(3) { animation-delay: 0.32s; }
@keyframes aiv-pv-avatar-bars {
  0%, 100% { height: 22%; opacity: 0.5; }
  50% { height: 82%; opacity: 1; }
}

.aiv-pv-up {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
}
.aiv-pv-up__lo,
.aiv-pv-up__hi {
  width: 50px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid var(--color-border-ghost);
}
.aiv-pv-up__lo {
  background: repeating-conic-gradient(rgba(255, 255, 255, 0.08) 0% 25%, transparent 0% 50%) 0 0 / 6px 6px;
  filter: blur(0.6px);
}
.aiv-pv-up__hi {
  background: linear-gradient(135deg, color-mix(in srgb, currentColor 18%, transparent), rgba(255, 255, 255, 0.04));
  border-color: color-mix(in srgb, currentColor 22%, var(--color-border-ghost));
  box-shadow: inset 0 0 8px color-mix(in srgb, currentColor 10%, transparent);
}
.aiv-pv-up__arrow { color: currentColor; font-weight: 700; font-size: 18px; }

.aiv-pv-script {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 6px 14px;
  width: 100%;
  height: 100%;
}
.aiv-pv-script > span {
  display: block;
  height: 3px;
  border-radius: 2px;
  opacity: 0.6;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  animation: aiv-pv-script-anim 1.8s ease-in-out infinite;
}
.aiv-pv-script > span:nth-child(2) { animation-delay: 0.15s; }
.aiv-pv-script > span:nth-child(3) { animation-delay: 0.30s; }
.aiv-pv-script > span:nth-child(4) { animation-delay: 0.45s; }
.aiv-pv-script > span:nth-child(5) { animation-delay: 0.60s; }
@keyframes aiv-pv-script-anim {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 1; }
}

.aiv-pv-storyboard {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.aiv-pv-storyboard > span {
  width: 28px;
  height: 38px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
  background: rgba(255, 255, 255, 0.035);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: aiv-pv-storyboard-anim 1.8s ease-in-out infinite;
}
.aiv-pv-storyboard > span:nth-child(2) { animation-delay: 0.14s; }
.aiv-pv-storyboard > span:nth-child(3) { animation-delay: 0.28s; }
.aiv-pv-storyboard i {
  display: block;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(135deg, currentColor, transparent);
  opacity: 0.55;
}
.aiv-pv-storyboard b {
  display: block;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.28;
}
@keyframes aiv-pv-storyboard-anim {
  0%, 100% { transform: translateY(0); opacity: 0.58; }
  50%      { transform: translateY(-3px); opacity: 1; }
}

.aiv-assets-action-menu .ant-dropdown-menu {
  min-width: 192px;
  padding: 6px;
  border: 1px solid var(--color-border-ghost);
  border-radius: 12px;
  background: rgba(24, 27, 34, 0.98);
  box-shadow: 0 18px 46px -24px rgba(0, 0, 0, 0.88);
}

.aiv-assets-action-menu .ant-dropdown-menu-item {
  min-height: 34px;
  padding: 7px 9px;
  border-radius: 8px;
  color: var(--color-text-secondary);
  font-size: 12px;
  transition:
    background var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

.aiv-assets-action-menu .ant-dropdown-menu-item:hover,
.aiv-assets-action-menu .ant-dropdown-menu-item-active {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--color-text-primary) !important;
}

.aiv-assets-action-menu .ant-dropdown-menu-item .anticon {
  color: var(--color-text-subtle);
}

.aiv-assets-action-menu .ant-dropdown-menu-item:hover .anticon {
  color: var(--color-accent-400);
}

.aiv-novel-upload-modal .ant-modal-content {
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--color-border-ghost);
  border-radius: 18px;
  background: var(--color-bg-surface);
  box-shadow: 0 28px 80px -36px rgba(0, 0, 0, 0.9);
}

.aiv-novel-upload-modal .ant-modal-body,
.aiv-novel-upload-modal .ant-modal-footer {
  padding: 0;
}

.aiv-novel-upload-modal .ant-modal-footer {
  margin-top: 0;
  background: rgba(255, 255, 255, 0.018);
}

.aiv-novel-upload-modal .ant-modal-close {
  top: 16px;
  right: 16px;
  border-radius: 10px;
  color: var(--color-text-muted);
  transition:
    background var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

.aiv-novel-upload-modal .ant-modal-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-primary);
}

/* aiv-hud-* — Claude Design "Toolbox HUD" shared bits used by tool inner pages.
 * Only the visual language is borrowed; current pages keep their chat-style layout. */

/* HUD chips on header (badge = mono module name, chip = neutral + green dot) */
.aiv-hud-badge {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--color-accent-400);
  background: rgba(251, 146, 60, 0.08);
  border: 1px solid rgba(251, 146, 60, 0.25);
}
.aiv-hud-chip {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-ghost);
  background: rgba(255, 255, 255, 0.02);
}
.aiv-hud-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.7);
  animation: aiv-hud-dot 1.8s ease-in-out infinite;
}
@keyframes aiv-hud-dot { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

/* Sliding mode tabs (used by Music: 灵感 / 自定义).
 * inline-grid + 1fr columns keep tabs equal width regardless of label length. */
.aiv-musictabs {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-radius: 10px;
  padding: 4px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-ghost);
}
.aiv-musictabs__btn {
  position: relative;
  z-index: 1;
  padding: 6px 14px;
  font-size: 12.5px;
  color: var(--color-text-muted);
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  border: 0;
  transition: color var(--motion-base) var(--ease-standard);
}
.aiv-musictabs__btn:hover:not(.is-on) { color: rgba(255, 255, 255, 0.85); }
.aiv-musictabs__btn.is-on { color: var(--color-text-primary); }
.aiv-musictabs__line {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 6px;
  background: rgba(251, 146, 60, 0.18);
  border: 1px solid rgba(251, 146, 60, 0.4);
  transition: transform var(--motion-emphasis) var(--ease-out-expo);
  pointer-events: none;
}

/* HUD panel — bordered surface with mono caption strip on top */
.aiv-hudpanel {
  position: relative;
  border-radius: 12px;
  border: 1px solid var(--color-border-ghost);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 30%),
    var(--color-bg-surface);
  overflow: hidden;
}
.aiv-hudpanel::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--color-accent-400) 40%, transparent), transparent);
  opacity: 0.6;
}
.aiv-hudpanel__head {
  display: flex;
  justify-content: space-between;
  padding: 8px 14px;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border-ghost);
}
.aiv-hudpanel__head > :first-child { color: var(--color-accent-400); }

/* hudpanel row variant — 4-column field strip with vertical dividers */
.aiv-hudpanel--row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0;
}
.aiv-hudpanel--row > .aiv-fld {
  padding: 12px 14px;
  border-right: 1px solid var(--color-border-ghost);
}
.aiv-hudpanel--row > .aiv-fld:last-child { border-right: 0; }

.aiv-fld {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.aiv-fld__l {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}
.aiv-fld__v {
  font-size: 13px;
  color: var(--color-text-primary);
}

/* HUD shell — two-pane (sidebar + main) container that fills remaining height */
.aiv-tin {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 240px 1fr;
}
.aiv-tin__side {
  border-right: 1px solid var(--color-border-subtle);
  background: rgba(0, 0, 0, 0.18);
  padding: 14px;
  overflow-y: auto;
}
.aiv-tin__main {
  padding: 18px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (max-width: 768px) {
  .aiv-tin {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .aiv-tin__side {
    border-right: 0;
    border-bottom: 1px solid var(--color-border-subtle);
    max-height: 200px;
  }
}

/* Sidebar section: mono caption + horizontal rule, stacked rows below */
.aiv-sidesec { margin-bottom: 14px; }
.aiv-sidesec__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 8px;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
}
.aiv-sidesec__bar {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--color-border-ghost), transparent);
}
.aiv-sidesec__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Compact history row */
.aiv-siderow {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  text-align: left;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid transparent;
  transition: background var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard);
  width: 100%;
  background: transparent;
  cursor: pointer;
}
.aiv-siderow:hover { background: rgba(255, 255, 255, 0.04); }
.aiv-siderow.is-active {
  background: rgba(251, 146, 60, 0.08);
  border-color: rgba(251, 146, 60, 0.3);
}
.aiv-siderow__cover {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background:
    radial-gradient(circle at 30% 25%, rgba(251, 146, 60, 0.6), rgba(251, 146, 60, 0.1) 60%),
    rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border-ghost);
  flex-shrink: 0;
}
.aiv-siderow__t {
  display: block;
  font-size: 12.5px;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aiv-siderow__s {
  display: block;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  color: var(--color-text-muted);
  margin-top: 1px;
}
.aiv-siderow__play {
  color: var(--color-text-muted);
  font-size: 11px;
}

/* Voice library row (TTS sidebar) — 9-bar mini equalizer + name + tag */
.aiv-voicerow {
  display: grid;
  grid-template-columns: 60px 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  text-align: left;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid transparent;
  transition: background var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard);
  width: 100%;
  background: transparent;
  cursor: pointer;
}
.aiv-voicerow:hover { background: rgba(255, 255, 255, 0.04); }
.aiv-voicerow.is-active {
  background: rgba(251, 146, 60, 0.08);
  border-color: rgba(251, 146, 60, 0.3);
}
.aiv-voicerow__viz {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 22px;
}
.aiv-voicerow__viz > span {
  display: inline-block;
  width: 2px;
  height: 30%;
  border-radius: 1px;
  background: var(--color-accent-400);
  animation: aiv-voicerow-viz 1.2s ease-in-out infinite;
}
@keyframes aiv-voicerow-viz {
  0%, 100% { height: 24%; opacity: 0.45; }
  50%      { height: 86%; opacity: 1; }
}
.aiv-voicerow__n {
  display: block;
  font-size: 12.5px;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aiv-voicerow__t {
  display: block;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  color: var(--color-text-muted);
  margin-top: 1px;
}

/* Queue row (Upscale sidebar): name + spec + indeterminate progress bar */
.aiv-queuerow {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--color-border-ghost);
  cursor: pointer;
  transition: background var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard);
}
.aiv-queuerow:hover { background: rgba(255, 255, 255, 0.05); }
.aiv-queuerow.is-active {
  background: rgba(196, 181, 253, 0.08);
  border-color: rgba(196, 181, 253, 0.3);
}
.aiv-queuerow__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 6px;
  gap: 8px;
}
.aiv-queuerow__top > :first-child {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aiv-queuerow__top > :last-child {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}
.aiv-queuerow__bar {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.aiv-queuerow__bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent-400), #fde68a);
  box-shadow: 0 0 8px var(--color-accent-glow);
  border-radius: 999px;
}
.aiv-queuerow__bar-fill--anim {
  width: 35%;
  animation: aiv-queuerow-anim 1.6s ease-in-out infinite;
}
@keyframes aiv-queuerow-anim {
  0%   { transform: translateX(-30%); }
  100% { transform: translateX(220%); }
}

/* Allow musictabs button to be visually disabled (provider unavailable) */
.aiv-musictabs__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Script-shaper: two-column scrgrid (RAW | SHAPED) layout */
.aiv-scrgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  flex: 1;
  min-height: 0;
}
.aiv-scrgrid__src,
.aiv-scrgrid__out {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.aiv-scrgrid__textarea {
  flex: 1;
  min-height: 240px;
  width: 100%;
  resize: none;
  border: 0;
  background: transparent;
  outline: 0;
  color: var(--color-text-primary);
  font-size: 14px;
  line-height: 1.65;
  padding: 14px 16px;
  overflow-y: auto;
}
.aiv-scrgrid__textarea::-moz-placeholder { color: var(--color-text-placeholder); }
.aiv-scrgrid__textarea::placeholder { color: var(--color-text-placeholder); }
.aiv-scrgrid__stats {
  display: flex;
  gap: 14px;
  padding: 8px 14px;
  border-top: 1px solid var(--color-border-ghost);
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  flex-wrap: wrap;
}
.aiv-scrgrid__chapters {
  flex: 1;
  min-height: 0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}
.aiv-scrgrid__placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.65;
}

/* Storyboard breakdown toolbox */
.aiv-video-break {
  flex: 1;
  min-height: 0;
  padding: 18px 22px 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(310px, 22vw, 360px);
  gap: 14px;
  overflow: hidden;
}
.aiv-video-break.is-sidebar-collapsed {
  grid-template-columns: minmax(0, 1fr) 58px;
}
.aiv-video-side {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(24, 27, 34, 0.92), rgba(15, 18, 24, 0.94)),
    var(--color-bg-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 50px -38px rgba(0, 0, 0, 0.88);
  overflow: hidden;
  transition: width var(--motion-emphasis) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard);
}
.aiv-video-side__toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.045);
  transition: color var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard);
}
.aiv-video-side__toggle:hover {
  color: var(--color-text-primary);
  border-color: rgba(251, 146, 60, 0.32);
  background: rgba(251, 146, 60, 0.09);
}
.aiv-video-side__body {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  padding-top: 54px;
  transition: opacity var(--motion-fast) var(--ease-standard),
    transform var(--motion-base) var(--ease-standard);
}
.aiv-video-break.is-sidebar-collapsed .aiv-video-side__body {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(8px);
}
.aiv-video-side__collapsed {
  display: none;
}
.aiv-video-break.is-sidebar-collapsed .aiv-video-side__collapsed {
  position: absolute;
  inset: 58px 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 18px;
}
.aiv-video-side__section {
  min-width: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.028);
  padding: 12px;
}
.aiv-video-side__section--history {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.aiv-video-side__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 650;
}
.aiv-video-side__title span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aiv-video-side__title svg {
  color: var(--color-accent-400);
}
.aiv-video-side__title em {
  margin-left: auto;
  min-width: 22px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--color-text-muted);
  font-style: normal;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 11px;
}
.aiv-video-side__title--video {
  min-height: 32px;
  margin-bottom: 8px;
  gap: 10px;
}
.aiv-video-side__title--video span {
  flex: 1;
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 700;
}
.aiv-video-side__title--video em {
  flex-shrink: 0;
  padding: 0 8px;
  color: rgba(255, 255, 255, 0.56);
  background: transparent;
}
.aiv-video-side__title--video button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: color var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard);
}
.aiv-video-side__title--video button:hover:not(:disabled) {
  color: rgba(248, 113, 113, 0.96);
  border-color: rgba(248, 113, 113, 0.28);
  background: rgba(248, 113, 113, 0.08);
}
.aiv-video-drop {
  min-height: 172px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
  transition: border-color var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard);
}
.aiv-video-drop.is-dragging {
  border-color: rgba(251, 146, 60, 0.55);
  background: rgba(251, 146, 60, 0.08);
}
.aiv-video-drop.has-video {
  min-height: 0;
  background: #020617;
}
.aiv-video-drop.is-disabled {
  opacity: 0.72;
}
.aiv-video-drop.is-disabled,
.aiv-video-drop.is-disabled * {
  cursor: not-allowed;
}
.aiv-video-drop__empty {
  width: 100%;
  min-height: 172px;
  display: grid;
  place-items: center;
  gap: 7px;
  padding: 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.75);
  border: 0;
  background: transparent;
  cursor: pointer;
}
.aiv-video-drop__empty strong {
  font-size: 16px;
  color: var(--color-text-primary);
}
.aiv-video-drop__empty em {
  color: rgba(255, 255, 255, 0.48);
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.55;
}
.aiv-video-drop__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(251, 146, 60, 0.12);
  color: var(--color-accent-400);
  font-size: 20px;
}
.aiv-video-drop__preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #020617;
}
.aiv-video-drop__preview video {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
  background: #020617;
}
.aiv-video-drop__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
}
.aiv-video-drop__meta > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.aiv-video-drop__meta span,
.aiv-storyboard-paper__summary span {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.42);
}
.aiv-video-drop__meta strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--color-text-primary);
}
.aiv-video-drop__meta em {
  color: rgba(255, 255, 255, 0.45);
  font-style: normal;
  font-size: 12px;
}
.aiv-video-drop__meta button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
}
.aiv-video-drop__meta button:hover:not(:disabled) {
  color: rgba(248, 113, 113, 0.96);
  border-color: rgba(248, 113, 113, 0.28);
}
.aiv-video-side__actions {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.aiv-video-side__actions .aiv-actionbar__main,
.aiv-video-side__actions .aiv-actionbar__ghost {
  width: 100%;
}
.aiv-video-side__actions .aiv-actionbar__main {
  min-height: 42px;
  padding: 10px 14px;
}
.aiv-video-side__actions .aiv-actionbar__ghost {
  padding: 10px 14px;
}
.aiv-storyboard-paper {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    linear-gradient(180deg, rgba(24, 27, 34, 0.92), rgba(15, 18, 24, 0.98)),
    var(--color-bg-surface);
  color: var(--color-text-secondary);
  box-shadow:
    0 18px 50px -36px rgba(0, 0, 0, 0.95),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.aiv-storyboard-paper__top {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}
.aiv-storyboard-paper__heading {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--color-text-primary);
}
.aiv-storyboard-paper__heading svg {
  color: var(--color-accent-400);
  font-size: 20px;
}
.aiv-storyboard-paper__heading span,
.aiv-storyboard-paper__heading strong {
  font-size: 18px;
  line-height: 1.3;
}
.aiv-storyboard-paper__heading strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}
.aiv-storyboard-paper__tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
}
.aiv-storyboard-paper__tools button {
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid rgba(251, 146, 60, 0.22);
  border-radius: 8px;
  background: rgba(251, 146, 60, 0.12);
  color: rgba(253, 186, 116, 0.96);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard),
    color var(--motion-base) var(--ease-standard),
    opacity var(--motion-base) var(--ease-standard);
}
.aiv-storyboard-paper__tools button:hover:not(:disabled) {
  border-color: rgba(251, 146, 60, 0.42);
  background: rgba(251, 146, 60, 0.18);
}
.aiv-storyboard-paper__tools button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.aiv-storyboard-paper__tools .aiv-storyboard-paper__tool-secondary {
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
  color: var(--color-text-secondary);
}
.aiv-storyboard-paper__summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 16px 20px 18px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  background:
    linear-gradient(135deg, rgba(251, 146, 60, 0.07), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.032);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.aiv-storyboard-paper__summary span {
  color: var(--color-accent-400);
  white-space: nowrap;
  padding-top: 3px;
}
.aiv-storyboard-paper__summary p {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13.5px;
  line-height: 1.7;
}
.aiv-storyboard-paper__empty {
  flex: 1;
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 42px;
  color: var(--color-text-subtle);
  text-align: center;
  font-size: 14px;
}
.aiv-storyboard-paper__empty svg {
  color: var(--color-accent-400);
  font-size: 22px;
}
.aiv-storyboard-grid {
  min-height: 0;
  overflow-y: auto;
  padding: 0 20px 22px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.aiv-storyboard-card {
  min-width: 0;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.028)),
    rgba(15, 18, 24, 0.82);
  padding: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 14px 32px -28px rgba(0, 0, 0, 0.8);
  transition: border-color var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard),
    transform var(--motion-base) var(--ease-standard);
}
.aiv-storyboard-card:focus-visible,
.aiv-storyboard-card.is-previewing,
.aiv-storyboard-card.is-selected {
  outline: none;
  border-color: rgba(251, 146, 60, 0.34);
  background:
    linear-gradient(180deg, rgba(251, 146, 60, 0.065), rgba(255, 255, 255, 0.03)),
    rgba(15, 18, 24, 0.9);
}
.aiv-storyboard-card.is-selected {
  border-color: rgba(251, 146, 60, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(251, 146, 60, 0.12),
    0 18px 38px -30px rgba(251, 146, 60, 0.55);
}
.aiv-storyboard-card.is-batch-selected {
  border-color: rgba(251, 146, 60, 0.62);
  background:
    linear-gradient(180deg, rgba(251, 146, 60, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(15, 18, 24, 0.92);
}
.aiv-storyboard-card.is-analyzed:not(.is-selected):not(.is-batch-selected) {
  border-color: rgba(34, 197, 94, 0.2);
}
.aiv-storyboard-card.is-analyzing {
  border-color: rgba(251, 146, 60, 0.42);
}
.aiv-storyboard-card.is-previewing {
  transform: translateY(-1px);
}
.aiv-storyboard-card__head {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 12px;
}
.aiv-storyboard-card h3 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 17px;
  font-weight: 700;
}
.aiv-storyboard-card__state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.aiv-storyboard-card__state > span {
  height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.1);
  color: rgba(134, 239, 172, 0.92);
  font-size: 11px;
  font-weight: 650;
}
.aiv-storyboard-card.is-analyzing .aiv-storyboard-card__state > span {
  background: rgba(251, 146, 60, 0.12);
  color: rgba(253, 186, 116, 0.96);
}
.aiv-storyboard-card__check {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-accent-400);
  cursor: pointer;
}
.aiv-storyboard-card__check[aria-pressed='true'] {
  border-color: rgba(251, 146, 60, 0.45);
  background: rgba(251, 146, 60, 0.14);
}
.aiv-storyboard-card__image {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(251, 146, 60, 0.18), rgba(148, 163, 184, 0.12)),
    rgba(255, 255, 255, 0.045);
  display: block;
  margin-bottom: 14px;
}
.aiv-storyboard-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}
.aiv-storyboard-card__image video {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  background: #020617;
}
.aiv-storyboard-card__image span {
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 42px;
  max-width: none;
  margin: 0;
  padding: 4px 8px;
  border-radius: 7px;
  background: rgba(15, 17, 21, 0.78);
  color: var(--color-text-secondary);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aiv-storyboard-card__image .aiv-storyboard-card__placeholder {
  width: auto;
  height: 30px;
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.055), rgba(251, 146, 60, 0.1), rgba(255, 255, 255, 0.055)),
    rgba(15, 17, 21, 0.74);
  background-size: 220% 100%;
  animation: aiv-storyboard-thumb-loading 1.8s var(--ease-standard) infinite;
}
@keyframes aiv-storyboard-thumb-loading {
  0% {
    background-position: 120% 0;
  }
  100% {
    background-position: -120% 0;
  }
}
.aiv-storyboard-card__image time {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  max-width: calc(100% - 16px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 7px;
  border-radius: 7px;
  background: rgba(2, 6, 23, 0.74);
  color: rgba(255, 255, 255, 0.82);
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.aiv-storyboard-card__field {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 8px;
  margin-top: 10px;
  color: var(--color-text-muted);
  font-size: 13.5px;
  line-height: 1.55;
}
.aiv-storyboard-card__field span {
  color: var(--color-text-secondary);
  font-weight: 700;
  white-space: nowrap;
}
.aiv-storyboard-card__field p {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.aiv-storyboard-detail {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 12px;
}
.aiv-storyboard-detail__head {
  display: grid;
  gap: 5px;
}
.aiv-storyboard-detail__head span {
  width: -moz-max-content;
  width: max-content;
  padding: 3px 7px;
  border-radius: 7px;
  background: rgba(251, 146, 60, 0.12);
  color: var(--color-accent-400);
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.aiv-storyboard-detail__head strong {
  color: var(--color-text-primary);
  font-size: 14px;
}
.aiv-storyboard-detail > p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.6;
}
.aiv-storyboard-detail__block {
  display: grid;
  gap: 8px;
}
.aiv-storyboard-detail__block h4 {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 13px;
}
.aiv-storyboard-detail__line {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 8px;
  color: var(--color-text-muted);
  font-size: 12.5px;
  line-height: 1.55;
}
.aiv-storyboard-detail__line time {
  color: rgba(253, 186, 116, 0.9);
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0;
}
.aiv-storyboard-detail__line span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.aiv-storyboard-detail__notes {
  display: grid;
  gap: 7px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--color-text-muted);
  font-size: 12.5px;
  line-height: 1.55;
}
.aiv-storyboard-history {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 给滚动条让点出空间,避免遮住右侧 delete 按钮 */
  padding-right: 4px;
  scrollbar-gutter: stable;
}
.aiv-storyboard-history::-webkit-scrollbar {
  width: 6px;
}
.aiv-storyboard-history::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
}
.aiv-storyboard-history::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}
.aiv-storyboard-history__item {
  position: relative;
  min-width: 0;
  flex-shrink: 0;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.032);
  overflow: hidden;
  transition: border-color var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard);
}
.aiv-storyboard-history__item:hover {
  border-color: rgba(251, 146, 60, 0.24);
  background: rgba(251, 146, 60, 0.055);
}
.aiv-storyboard-history__item.is-disabled {
  opacity: 0.55;
}
.aiv-storyboard-history__item.is-disabled:hover {
  border-color: rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.032);
}
.aiv-storyboard-history__item-main {
  width: 100%;
  display: grid;
  gap: 5px;
  padding: 9px 38px 9px 10px;
  text-align: left;
}
.aiv-storyboard-history__item-main:disabled,
.aiv-storyboard-history__delete:disabled {
  cursor: not-allowed;
}
.aiv-storyboard-history__meta,
.aiv-storyboard-history__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--color-text-subtle);
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
}
.aiv-storyboard-history__meta b {
  color: var(--color-accent-400);
  font-weight: 700;
}
.aiv-storyboard-history__meta i {
  margin-left: auto;
  font-style: normal;
}
.aiv-storyboard-history__item strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 650;
}
.aiv-storyboard-history__video,
.aiv-storyboard-history__summary {
  min-width: 0;
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 11.5px;
  line-height: 1.45;
}
.aiv-storyboard-history__video {
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aiv-storyboard-history__summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.aiv-storyboard-history__delete {
  position: absolute;
  top: 9px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  color: rgba(255, 255, 255, 0.42);
  transition: color var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard);
}
.aiv-storyboard-history__delete:hover:not(:disabled) {
  color: rgba(248, 113, 113, 0.95);
  background: rgba(248, 113, 113, 0.09);
}
.aiv-storyboard-history__empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px dashed rgba(255, 255, 255, 0.09);
  color: var(--color-text-subtle);
  font-size: 12px;
}
@media (max-width: 1280px) {
  .aiv-video-break {
    grid-template-columns: minmax(0, 1fr) 310px;
  }
  .aiv-video-break.is-sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr) 58px;
  }
  .aiv-storyboard-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}
@media (max-width: 960px) {
  .aiv-video-break {
    grid-template-columns: 1fr;
    padding: 12px;
    overflow-y: auto;
  }
  .aiv-video-break.is-sidebar-collapsed {
    grid-template-columns: 1fr;
  }
  .aiv-video-side {
    order: -1;
    min-height: 58px;
  }
  .aiv-video-break.is-sidebar-collapsed .aiv-video-side {
    height: 58px;
  }
  .aiv-video-side__body {
    grid-template-rows: auto auto;
  }
  .aiv-storyboard-paper__top {
    align-items: flex-start;
    flex-direction: column;
  }
  .aiv-storyboard-paper {
    min-height: 520px;
    overflow: visible;
  }
  .aiv-storyboard-grid {
    grid-template-columns: 1fr;
    overflow: visible;
  }
}

/* Storyboard shot detail workbench */
.aiv-shot-workbench {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 280px minmax(380px, 0.86fr) minmax(420px, 1.14fr);
  gap: 14px;
  padding: 18px 22px 22px;
  overflow: hidden;
}
.aiv-shot-rail,
.aiv-shot-stage,
.aiv-shot-inspector,
.aiv-shot-empty {
  min-width: 0;
  min-height: 0;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    linear-gradient(180deg, rgba(24, 27, 34, 0.92), rgba(15, 18, 24, 0.97)),
    var(--color-bg-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 50px -38px rgba(0, 0, 0, 0.88);
}
.aiv-shot-rail {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.aiv-shot-rail__top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}
.aiv-shot-rail__top button {
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.045);
  color: var(--color-text-secondary);
  font-size: 12.5px;
}
.aiv-shot-rail__top span {
  margin-left: auto;
  color: var(--color-text-subtle);
  font-size: 12px;
  white-space: nowrap;
}
.aiv-shot-rail__list {
  min-height: 0;
  overflow-y: auto;
  padding: 10px;
  display: grid;
  gap: 8px;
}
.aiv-shot-rail__item {
  position: relative;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.032);
  overflow: hidden;
  transition: border-color var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard);
}
.aiv-shot-rail__item.is-active {
  border-color: rgba(251, 146, 60, 0.52);
  background: rgba(251, 146, 60, 0.075);
}
.aiv-shot-rail__item.is-analyzed:not(.is-active) {
  border-color: rgba(34, 197, 94, 0.18);
}
.aiv-shot-rail__item.is-failed {
  border-color: rgba(248, 113, 113, 0.25);
}
.aiv-shot-rail__main {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 10px 38px 10px 10px;
  text-align: left;
}
.aiv-shot-rail__index {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  color: var(--color-accent-400);
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
}
.aiv-shot-rail__copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.aiv-shot-rail__copy strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-secondary);
  font-size: 13px;
}
.aiv-shot-rail__copy em {
  color: var(--color-text-subtle);
  font-style: normal;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
}
.aiv-shot-status {
  grid-column: 2;
  width: -moz-max-content;
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
}
.aiv-shot-status.is-done {
  background: rgba(34, 197, 94, 0.1);
  color: rgba(134, 239, 172, 0.95);
}
.aiv-shot-status.is-running {
  background: rgba(251, 146, 60, 0.12);
  color: rgba(253, 186, 116, 0.98);
}
.aiv-shot-status.is-failed {
  background: rgba(248, 113, 113, 0.12);
  color: rgba(252, 165, 165, 0.95);
}
.aiv-shot-rail__analyze {
  position: absolute;
  top: 10px;
  right: 9px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid rgba(251, 146, 60, 0.18);
  background: rgba(251, 146, 60, 0.09);
  color: var(--color-accent-400);
}
.aiv-shot-stage {
  overflow-y: auto;
  padding: 16px;
}
.aiv-shot-stage__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.aiv-shot-stage__header span {
  display: block;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-subtle);
  font-size: 12px;
}
.aiv-shot-stage__header h1 {
  margin: 6px 0 0;
  color: var(--color-text-primary);
  font-size: 20px;
  line-height: 1.35;
}
.aiv-shot-stage__header button,
.aiv-shot-inspector__top button,
.aiv-shot-detail-empty__hero button,
.aiv-shot-empty button {
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
  border-radius: 8px;
  border: 1px solid rgba(251, 146, 60, 0.24);
  background: rgba(251, 146, 60, 0.13);
  color: rgba(253, 186, 116, 0.98);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}
.aiv-shot-stage__header button:disabled,
.aiv-shot-inspector__top button:disabled,
.aiv-shot-detail-empty__hero button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.aiv-shot-video-card {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.034);
  overflow: hidden;
}
.aiv-shot-video-card video,
.aiv-shot-video-card__missing {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
  background: #020617;
}
.aiv-shot-video-card__missing {
  display: grid;
  place-items: center;
  color: var(--color-text-subtle);
}
.aiv-shot-video-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
}
.aiv-shot-video-card__meta span {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.58);
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
}
.aiv-shot-coarse {
  margin-top: 14px;
}
.aiv-shot-section-title {
  display: grid;
  gap: 5px;
  margin-bottom: 10px;
}
.aiv-shot-section-title span {
  color: var(--color-accent-400);
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.aiv-shot-section-title strong {
  color: var(--color-text-primary);
  font-size: 14px;
}
.aiv-shot-coarse__grid,
.aiv-shot-key-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.aiv-shot-info {
  min-width: 0;
  padding: 11px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.032);
}
.aiv-shot-info.is-wide {
  grid-column: 1 / -1;
}
.aiv-shot-info span {
  display: block;
  margin-bottom: 6px;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 700;
}
.aiv-shot-info p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.62;
  overflow-wrap: anywhere;
}
.aiv-shot-inspector {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.aiv-shot-inspector__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}
.aiv-shot-inspector__top span {
  color: var(--color-text-subtle);
  font-size: 12px;
}
.aiv-shot-inspector__top strong {
  display: block;
  margin-top: 4px;
  color: var(--color-text-primary);
  font-size: 16px;
}
.aiv-shot-detail-empty,
.aiv-shot-detail-sections {
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
}
.aiv-shot-detail-empty__hero {
  padding: 18px;
  border-radius: 12px;
  border: 1px solid rgba(251, 146, 60, 0.18);
  background:
    linear-gradient(135deg, rgba(251, 146, 60, 0.1), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.03);
}
.aiv-shot-detail-empty__hero svg {
  color: var(--color-accent-400);
  font-size: 24px;
}
.aiv-shot-detail-empty__hero h2 {
  margin: 12px 0 8px;
  color: var(--color-text-primary);
  font-size: 18px;
}
.aiv-shot-detail-empty__hero p {
  margin: 0 0 14px;
  color: var(--color-text-muted);
  font-size: 13.5px;
  line-height: 1.68;
}
.aiv-shot-detail-empty__grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.aiv-shot-detail-empty__grid div,
.aiv-shot-analysis-section {
  padding: 12px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.032);
}
.aiv-shot-detail-empty__grid strong {
  display: block;
  margin-bottom: 5px;
  color: var(--color-text-secondary);
  font-size: 13px;
}
.aiv-shot-detail-empty__grid span {
  color: var(--color-text-muted);
  font-size: 12.5px;
  line-height: 1.55;
}
.aiv-shot-detail-sections {
  display: grid;
  gap: 12px;
}
.aiv-shot-analysis-section p,
.aiv-shot-analysis-section pre {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 13px;
  line-height: 1.68;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.aiv-shot-timeline,
.aiv-shot-lines {
  display: grid;
  gap: 9px;
}
.aiv-shot-timeline div,
.aiv-shot-lines div {
  padding: 10px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.16);
}
.aiv-shot-timeline time,
.aiv-shot-lines time {
  display: block;
  margin-bottom: 6px;
  color: rgba(253, 186, 116, 0.92);
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
}
.aiv-shot-lines strong {
  display: block;
  margin-bottom: 5px;
  color: var(--color-text-secondary);
  font-size: 13px;
}
.aiv-shot-lines em {
  display: block;
  margin-top: 6px;
  color: var(--color-text-subtle);
  font-style: normal;
  font-size: 12px;
}
.aiv-shot-speakers {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
.aiv-shot-speakers span {
  display: block;
  padding: 9px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--color-text-muted);
  font-size: 12.5px;
  line-height: 1.55;
}
.aiv-shot-speakers strong {
  margin-right: 6px;
  color: var(--color-text-secondary);
}
.aiv-shot-empty {
  flex: 1;
  margin: 18px 22px 22px;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
}
.aiv-shot-empty h2 {
  margin: 0 0 8px;
  color: var(--color-text-primary);
  font-size: 20px;
}
.aiv-shot-empty p {
  margin: 0 0 16px;
  color: var(--color-text-muted);
  font-size: 13px;
}
@media (max-width: 1420px) {
  .aiv-shot-workbench {
    grid-template-columns: 260px minmax(360px, 1fr);
  }
  .aiv-shot-inspector {
    grid-column: 2;
  }
}
@media (max-width: 960px) {
  .aiv-shot-workbench {
    grid-template-columns: 1fr;
    overflow-y: auto;
    padding: 12px;
  }
  .aiv-shot-rail,
  .aiv-shot-stage,
  .aiv-shot-inspector {
    overflow: visible;
  }
  .aiv-shot-rail__list,
  .aiv-shot-detail-empty,
  .aiv-shot-detail-sections {
    overflow: visible;
  }
  .aiv-shot-inspector {
    grid-column: auto;
  }
  .aiv-shot-coarse__grid,
  .aiv-shot-key-values,
  .aiv-shot-detail-empty__grid {
    grid-template-columns: 1fr;
  }
}
.aiv-storybreak {
  display: grid;
  grid-template-columns: minmax(360px, 1.25fr) minmax(280px, 0.75fr);
  gap: 12px;
  min-height: 360px;
}
.aiv-storybreak__input,
.aiv-storybreak__controls,
.aiv-storybreak__output {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.aiv-storybreak__media {
  border-top: 1px solid var(--color-border-ghost);
  padding: 10px 12px;
}
.aiv-storybreak__media-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.aiv-storybreak__media-head > span {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.38);
  text-transform: uppercase;
}
.aiv-storybreak__media-head > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--color-border-ghost);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  cursor: pointer;
}
.aiv-storybreak__media-head > button:hover:not(:disabled) {
  border-color: rgba(110, 231, 183, 0.35);
  background: rgba(110, 231, 183, 0.055);
  color: var(--color-text-primary);
}
.aiv-storybreak__media-head > button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.aiv-storybreak__media-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.aiv-storybreak__media-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 5px 6px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.028);
}
.aiv-storybreak__media-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10.5px;
  color: rgba(255, 255, 255, 0.86);
}
.aiv-storybreak__media-kind.is-image {
  background: rgba(96, 165, 250, 0.18);
  color: rgba(191, 219, 254, 0.95);
}
.aiv-storybreak__media-kind.is-video {
  background: rgba(251, 146, 60, 0.18);
  color: rgba(254, 215, 170, 0.95);
}
.aiv-storybreak__media-kind.is-audio {
  background: rgba(110, 231, 183, 0.18);
  color: rgba(209, 250, 229, 0.95);
}
.aiv-storybreak__media-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
}
.aiv-storybreak__media-size {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
}
.aiv-storybreak__media-chip > button {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.46);
  cursor: pointer;
}
.aiv-storybreak__media-chip > button:hover {
  color: rgba(248, 113, 113, 0.95);
  background: rgba(248, 113, 113, 0.08);
}
.aiv-storybreak__media-input,
.aiv-storybreak__style-input {
  width: 100%;
  resize: none;
  outline: 0;
  border: 1px solid var(--color-border-ghost);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--color-text-primary);
  font-size: 12.5px;
  line-height: 1.55;
}
.aiv-storybreak__media-input {
  min-height: 72px;
  padding: 9px 10px;
}
.aiv-storybreak__style-input {
  min-height: 78px;
  padding: 9px 10px;
}
.aiv-storybreak__media-input::-moz-placeholder, .aiv-storybreak__style-input::-moz-placeholder {
  color: var(--color-text-placeholder);
}
.aiv-storybreak__media-input::placeholder,
.aiv-storybreak__style-input::placeholder {
  color: var(--color-text-placeholder);
}
.aiv-storybreak__control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
}
.aiv-storybreak__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.aiv-storybreak__field > span {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.38);
  text-transform: uppercase;
}
.aiv-storybreak__field:last-child {
  grid-column: 1 / -1;
}
.aiv-storybreak__sample {
  align-self: flex-start;
  margin: 0 12px 12px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--color-border-ghost);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  cursor: pointer;
}
.aiv-storybreak__sample:hover {
  border-color: var(--color-border-strong);
  background: rgba(255, 255, 255, 0.055);
}
.aiv-storybreak__output {
  flex: 1;
  min-height: 420px;
}
.aiv-storybreak__shots {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
  padding: 12px;
  overflow-y: auto;
}
.aiv-storybreak__summary {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid var(--color-border-ghost);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}
.aiv-storybreak__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.aiv-storybreak__desc {
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: 12.5px;
  line-height: 1.55;
}
.aiv-storybreak__export {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.aiv-storybreak__export > button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--color-border-ghost);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
}
.aiv-storybreak__export > button:hover {
  color: var(--color-text-primary);
  border-color: rgba(110, 231, 183, 0.35);
}
.aiv-storybreak__shot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 12px;
}
.aiv-shotbreak-card {
  border-radius: 8px;
  border: 1px solid var(--color-border-ghost);
  background: rgba(255, 255, 255, 0.025);
  padding: 12px;
  transition: border-color var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard);
}
.aiv-shotbreak-card:hover,
.aiv-shotbreak-card.is-active {
  border-color: rgba(110, 231, 183, 0.36);
  background: rgba(110, 231, 183, 0.045);
}
.aiv-shotbreak-card__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.aiv-shotbreak-card__head > span,
.aiv-shotbreak-card__head > em {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.42);
  font-style: normal;
  white-space: nowrap;
}
.aiv-shotbreak-card__head > strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  color: var(--color-text-primary);
}
.aiv-shotbreak-card__preview {
  height: 112px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(135deg, rgba(110, 231, 183, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  display: flex;
  align-items: flex-end;
  padding: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}
.aiv-shotbreak-card__preview > span {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.26);
  padding: 3px 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.78);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aiv-shotbreak-card__field {
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 10px;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.55;
}
.aiv-shotbreak-card__field > span {
  color: rgba(255, 255, 255, 0.86);
  font-weight: 600;
  white-space: nowrap;
}
.aiv-shotbreak-card__field > p {
  color: var(--color-text-muted);
  margin: 0;
  overflow-wrap: anywhere;
}
@media (max-width: 1280px) {
  .aiv-storybreak__shot-grid {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }
}
@media (max-width: 1024px) {
  .aiv-storybreak {
    grid-template-columns: 1fr;
  }
  .aiv-storybreak__shot-grid {
    grid-template-columns: 1fr;
  }
}

.aiv-chapcard {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--color-border-ghost);
  background: rgba(255, 255, 255, 0.025);
  transition: border-color var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard);
}
.aiv-chapcard:hover {
  border-color: rgba(110, 231, 183, 0.35);
  background: rgba(110, 231, 183, 0.04);
}
.aiv-chapcard__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.aiv-chapcard__num {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--color-accent-400);
  flex-shrink: 0;
}
.aiv-chapcard__title {
  font-size: 13px;
  color: var(--color-text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aiv-chapcard__excerpt {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
}
.aiv-chapcard__bar {
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.aiv-chapcard__bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent-400), transparent);
}

/* Chapter row variant of siderow (mono number + title only) */
.aiv-siderow--chapter {
  grid-template-columns: auto 1fr;
}
.aiv-siderow__num {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--color-accent-400);
}

/* aiv-tagchip--mono — mono variant used by voice tag pills, SSML chips, etc */
.aiv-tagchip--mono {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
}

/* ============================================================
   Voice picker (current voice card in main) + voice library modal
   ============================================================ */

.aiv-vpicker {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
}
.aiv-vpicker__avatar {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 8px 20px -10px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  flex-shrink: 0;
}
.aiv-vpicker__avatar > img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.aiv-vpicker__info { min-width: 0; }
.aiv-vpicker__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.aiv-vpicker__brand {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-ghost);
  background: rgba(255, 255, 255, 0.03);
}
.aiv-vpicker__desc {
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin-top: 4px;
  line-height: 1.5;
}
.aiv-vpicker__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.aiv-vpicker__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.aiv-vpicker__change,
.aiv-vpicker__preview {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 8px;
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--motion-base) var(--ease-standard);
}
.aiv-vpicker__change {
  color: var(--color-accent-400);
  border: 1px solid rgba(251, 146, 60, 0.35);
  background: rgba(251, 146, 60, 0.08);
}
.aiv-vpicker__change:hover {
  background: rgba(251, 146, 60, 0.16);
  border-color: rgba(251, 146, 60, 0.55);
}
.aiv-vpicker__preview {
  color: rgba(147, 197, 253, 0.95);
  border: 1px solid rgba(96, 165, 250, 0.28);
  background: rgba(59, 130, 246, 0.1);
}
.aiv-vpicker__preview:hover {
  color: var(--color-text-primary);
  border-color: rgba(147, 197, 253, 0.48);
  background: rgba(59, 130, 246, 0.16);
}
.aiv-vpicker__preview.is-playing {
  color: var(--color-accent-400);
  border-color: rgba(251, 146, 60, 0.45);
  background: rgba(251, 146, 60, 0.12);
}
.aiv-vpicker__preview:disabled {
  color: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.025);
  cursor: not-allowed;
}

.aiv-ttsentry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.aiv-ttsentry > button {
  min-width: 0;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--color-border-ghost);
  background: rgba(255, 255, 255, 0.025);
  color: var(--color-text-muted);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard),
    color var(--motion-base) var(--ease-standard);
}
.aiv-ttsentry > button:hover {
  border-color: var(--color-border-strong);
  background: rgba(255, 255, 255, 0.045);
  color: var(--color-text-primary);
}
.aiv-ttsentry > button.is-on {
  border-color: rgba(251, 146, 60, 0.45);
  background: rgba(251, 146, 60, 0.08);
  color: var(--color-text-primary);
}
.aiv-ttsentry span {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aiv-ttsentry small {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.42);
}

.aiv-libraryentry__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
}
.aiv-libraryentry__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.aiv-libraryentry__desc {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.55;
}
.aiv-libraryentry__body > button {
  flex-shrink: 0;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(251, 146, 60, 0.35);
  color: var(--color-accent-400);
  background: rgba(251, 146, 60, 0.08);
  cursor: pointer;
}
.aiv-libraryentry__body > button:hover {
  background: rgba(251, 146, 60, 0.16);
}

.aiv-workshop__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
.aiv-workshop__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.aiv-workshop__grid--profile {
  grid-template-columns: minmax(0, 1fr) 132px;
  align-items: end;
}
.aiv-workshop label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.aiv-workshop label > span,
.aiv-workshop__avatarField > span {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.36);
  text-transform: uppercase;
}
.aiv-workshop input,
.aiv-workshop textarea {
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--color-border-ghost);
  background: rgba(0, 0, 0, 0.22);
  color: var(--color-text-primary);
  outline: 0;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
}
.aiv-workshop textarea {
  resize: vertical;
  min-height: 84px;
}
.aiv-workshop input:focus,
.aiv-workshop textarea:focus {
  border-color: rgba(251, 146, 60, 0.5);
}
.aiv-workshop input::-moz-placeholder, .aiv-workshop textarea::-moz-placeholder {
  color: var(--color-text-placeholder);
}
.aiv-workshop input::placeholder,
.aiv-workshop textarea::placeholder {
  color: var(--color-text-placeholder);
}
.aiv-workshop__avatarField {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.aiv-workshop__avatarDrop {
  width: 100%;
  height: 44px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.035);
  font-size: 12px;
  cursor: pointer;
  transition: all var(--motion-base) var(--ease-standard);
}
.aiv-workshop__avatarDrop:hover {
  color: rgba(255, 255, 255, 0.72);
  border-color: rgba(251, 146, 60, 0.45);
  background: rgba(251, 146, 60, 0.08);
}
.aiv-workshop__avatarDrop:disabled {
  cursor: wait;
  opacity: 0.65;
}
.aiv-workshop__avatarDrop > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.aiv-workshop__actions {
  display: flex;
  justify-content: flex-start;
  padding-top: 2px;
}
.aiv-workshop__actions > button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 16px;
  border-radius: 9px;
  border: 1px solid rgba(251, 146, 60, 0.35);
  color: #1a0a02;
  background: linear-gradient(180deg, var(--color-accent-400), var(--color-accent-500));
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.aiv-workshop__actions > button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

@media (max-width: 720px) {
  .aiv-ttsentry,
  .aiv-workshop__grid {
    grid-template-columns: 1fr;
  }
  .aiv-libraryentry__body {
    align-items: stretch;
    flex-direction: column;
  }
  .aiv-libraryentry__body > button {
    width: 100%;
  }
}

/* Modal: AntD Modal hosts the panel; we style the body via these classes */
.aiv-vmodal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border-ghost);
  background: linear-gradient(180deg, rgba(251, 146, 60, 0.05), transparent 60%);
  position: relative;
}
.aiv-vmodal__head::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(251, 146, 60, 0.4), transparent);
}
.aiv-vmodal__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.aiv-vmodal__sub {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 4px;
  text-transform: uppercase;
}
.aiv-vmodal__close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--color-border-ghost);
  background: rgba(255, 255, 255, 0.02);
  color: var(--color-text-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all var(--motion-base) var(--ease-standard);
}
.aiv-vmodal__close:hover {
  color: var(--color-text-primary);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--color-border-strong);
}

.aiv-vmodal__filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 20px 14px;
  border-bottom: 1px solid var(--color-border-ghost);
  background: rgba(0, 0, 0, 0.18);
}
.aiv-vfilt {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 26px;
}
.aiv-vfilt__l {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
}
.aiv-vfilt__input {
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-ghost);
  font-size: 12.5px;
  outline: 0;
  transition: border-color var(--motion-base) var(--ease-standard);
}
.aiv-vfilt__input:focus { border-color: rgba(251, 146, 60, 0.5); }
.aiv-vfilt__opts { display: flex; flex-wrap: wrap; gap: 4px; }
.aiv-vfilt__opt {
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 6px;
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid var(--color-border-ghost);
  cursor: pointer;
  transition: all var(--motion-base) var(--ease-standard);
}
.aiv-vfilt__opt:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.aiv-vfilt__opt.is-on {
  color: var(--color-accent-400);
  background: rgba(251, 146, 60, 0.10);
  border-color: rgba(251, 146, 60, 0.45);
}

.aiv-vmodal__grid {
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
  padding: 14px 20px 20px;
  max-height: 60vh;
}
.aiv-vempty {
  grid-column: 1 / -1;
  padding: 60px 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
}

.aiv-vcard {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--color-border-ghost);
  background: rgba(255, 255, 255, 0.02);
  transition: all var(--motion-base) var(--ease-standard);
}
.aiv-vcard:hover {
  border-color: var(--color-border-strong);
  background: rgba(255, 255, 255, 0.04);
}
.aiv-vcard.is-picked {
  border-color: rgba(251, 146, 60, 0.5);
  background: rgba(251, 146, 60, 0.06);
}
.aiv-vcard.is-deleting {
  opacity: 0.5;
  pointer-events: none;
}
/* 自定义音色 / 克隆音色专属的删除按钮，紧跟「选用」按钮下方排列。
   不用 hover-only —— 用户应当一眼能识别「哪些音色是自己加的」。
   样式上保持弱化（ghost、小字、暗灰），不抢「选用」主操作的注意力。 */
.aiv-vcard__deleteBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
  padding: 4px 8px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11.5px;
  line-height: 1;
  cursor: pointer;
  transition: all var(--motion-base) var(--ease-standard);
}
.aiv-vcard__deleteBtn:hover {
  color: #ff7875;
  border-color: rgba(255, 120, 117, 0.32);
  background: rgba(255, 120, 117, 0.08);
}
.aiv-vcard__deleteBtn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.aiv-vcard__deleteBtn > .anticon {
  font-size: 11px;
}

.aiv-vcard__avatar {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  cursor: pointer;
  overflow: hidden;
  font-size: 20px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: transform var(--motion-base) var(--ease-standard);
}
.aiv-vcard__avatar:hover { transform: scale(1.04); }
.aiv-vcard__avatar:hover .aiv-vcard__icon { opacity: 1; }
.aiv-vcard__avatar.is-playing .aiv-vcard__initial { opacity: 0.25; }
.aiv-vcard__avatar.is-playing .aiv-vcard__icon { opacity: 1; }
.aiv-vcard__avatar > img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.aiv-vcard__initial { transition: opacity var(--motion-base) var(--ease-standard); }
.aiv-vcard__icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  opacity: 0;
  transition: opacity var(--motion-base) var(--ease-standard);
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}
.aiv-vcard__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 16px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  padding: 0 6px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5));
}
.aiv-vcard__wave > span {
  flex: 1;
  max-width: 2px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 1px;
  animation: aiv-vcard-wave 0.9s ease-in-out infinite;
}
@keyframes aiv-vcard-wave {
  0%, 100% { height: 20%; opacity: 0.6; }
  50%      { height: 95%; opacity: 1; }
}

.aiv-vcard__body { min-width: 0; }
.aiv-vcard__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.aiv-vcard__brand {
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-ghost);
  background: rgba(255, 255, 255, 0.025);
}
.aiv-vcard__desc {
  font-size: 11.5px;
  color: var(--color-text-muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aiv-vcard__meta {
  display: flex;
  gap: 5px;
  margin-top: 4px;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.35);
}

.aiv-vcard__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}

.aiv-vcard__choose {
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
  border: 1px solid var(--color-border-ghost);
  cursor: pointer;
  transition: all var(--motion-base) var(--ease-standard);
}
.aiv-vcard__choose:hover {
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
  background: rgba(255, 255, 255, 0.04);
}
.aiv-vcard__choose.is-picked {
  color: var(--color-accent-400);
  background: rgba(251, 146, 60, 0.12);
  border-color: rgba(251, 146, 60, 0.45);
}

.aiv-vcard__previewBtn {
  min-width: 50px;
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 11.5px;
  color: rgba(147, 197, 253, 0.95);
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(96, 165, 250, 0.28);
  cursor: pointer;
  transition: all var(--motion-base) var(--ease-standard);
}
.aiv-vcard__previewBtn:hover {
  color: var(--color-text-primary);
  border-color: rgba(147, 197, 253, 0.48);
  background: rgba(59, 130, 246, 0.16);
}
.aiv-vcard__previewBtn.is-playing {
  color: var(--color-accent-400);
  background: rgba(251, 146, 60, 0.12);
  border-color: rgba(251, 146, 60, 0.45);
}
.aiv-vcard__previewBtn:disabled {
  color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.025);
  border-color: rgba(255, 255, 255, 0.06);
  cursor: not-allowed;
}

/* Tag chips (style picker / SSML) */
.aiv-tagrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px 14px;
}
.aiv-tagchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid color-mix(in srgb, var(--color-accent-400) 25%, var(--color-border-ghost));
  color: color-mix(in srgb, var(--color-accent-400) 75%, white);
  background: rgba(251, 146, 60, 0.06);
  transition: all var(--motion-base) var(--ease-standard);
}
.aiv-tagchip > button {
  font-size: 14px;
  line-height: 1;
  opacity: 0.6;
  cursor: pointer;
  color: inherit;
  background: none;
  border: 0;
}
.aiv-tagchip--add {
  color: var(--color-text-muted);
  border-style: dashed;
  cursor: pointer;
  background: transparent;
}

/* Action bar — main orange button with shine + ghost secondary */
.aiv-actionbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}
.aiv-actionbar__main {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  background: linear-gradient(180deg, var(--color-accent-400), var(--color-accent-500));
  color: #1a0a02;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 8px 24px -8px var(--color-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}
.aiv-actionbar__main:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 14px 36px -10px var(--color-accent-glow),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.aiv-actionbar__main:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  filter: saturate(0.6);
}
.aiv-actionbar__main-shine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -50%;
  width: 40%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-18deg);
  animation: aiv-actionbar-shine 2.6s var(--ease-standard) infinite;
  pointer-events: none;
}
@keyframes aiv-actionbar-shine {
  0%   { transform: translateX(0) skewX(-18deg); }
  100% { transform: translateX(360%) skewX(-18deg); }
}
.aiv-actionbar__ghost {
  padding: 12px 18px;
  border-radius: 10px;
  border: 1px solid var(--color-border-ghost);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12.5px;
  background: transparent;
  cursor: pointer;
  transition: color var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard);
}
.aiv-actionbar__ghost:hover:not(:disabled) {
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
  background: rgba(255, 255, 255, 0.04);
}
.aiv-actionbar__ghost:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
  .aiv-generation-card,
  .aiv-generation-card::before,
  .aiv-generation-card::after,
  .aiv-generation-surface::before,
  .aiv-generation-surface::after,
  .aiv-generation-orb,
  .aiv-video-generation-frame,
  .aiv-video-generation-frame::after,
  .aiv-video-generation-beam,
  .aiv-first-frame-card--generating,
  .aiv-first-frame-wave::before,
  .aiv-first-frame-wave::after,
  .aiv-gen-tile::after,
  .aiv-gen-dots__dot,
  .aiv-thinking-stage::before,
  .aiv-thinking-stage::after,
  .aiv-thinking-stage__stream > span,
  .aiv-thinking-stage__runner,
  .aiv-thinking-stage__nodes > span::before,
  .aiv-thinking-stage__slate > span,
  .aiv-director-board__beam,
  .aiv-director-board__photos > span,
  .aiv-director-board__stamp,
  .aiv-director-board__pencil,
  .aiv-director-board__viewfinder > span,
  .aiv-shot-wait::before,
  .aiv-shot-wait::after,
  .aiv-shot-wait__script > span,
  .aiv-shot-wait__flow > span::before,
  .aiv-shot-wait__frames > span,
  .aiv-shot-wait__job,
  .aiv-cs-card__pulse > span,
  .aiv-pv-wave > span,
  .aiv-pv-avatar__bars > i,
  .aiv-pv-script > span,
  .aiv-pv-storyboard > span,
  .aiv-hud-dot,
  .aiv-actionbar__main-shine,
  .aiv-voicerow__viz > span,
  .aiv-queuerow__bar-fill--anim,
  .aiv-rg-bloom__cloud,
  .aiv-rg-bloom__sweep,
  .aiv-rg-bloom__beats > span,
  .aiv-rg-frames,
  .aiv-rg-frames::before,
  .aiv-rg-frames__cell,
  .aiv-rg-frames__cell::after,
  .aiv-rg-frames__bars > span,
  .aiv-rg-frames__playhead,
  .aiv-vcard__wave > span {
    animation: none;
  }
}

/* ============================================================
 * 2026-05-22 Motion layer
 * 配套 apps/web/src/components/ui/motion.ts。CSS-first 实现，未引入 framer。
 * 详见 docs/ui-mcp-abundant-peach.md §1.4 + docs/home-entry-normalize-spec-2026-05-22.md §3.4
 * ============================================================ */

/* 章节 / 镜头切换的右侧面板交叉淡入。duration: 180ms（base）。 */
@keyframes aiv-panel-crossfade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.aiv-panel-crossfade {
  animation: aiv-panel-crossfade 180ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* AI 处理中统一脉动（accent.glow）。取代旧 cyan/teal first-frame-card-breathe。 */
@keyframes aiv-generating-pulse {
  0%, 100% {
    border-color: rgba(251, 146, 60, 0.32);
    box-shadow:
      0 0 0 1px rgba(251, 146, 60, 0.18) inset,
      0 0 22px rgba(255, 120, 50, 0.18);
  }
  50% {
    border-color: rgba(251, 146, 60, 0.55);
    box-shadow:
      0 0 0 1px rgba(251, 146, 60, 0.32) inset,
      0 0 34px rgba(255, 120, 50, 0.32);
  }
}
.aiv-generating-pulse {
  animation: aiv-generating-pulse 1800ms ease-in-out infinite;
}

/* reduced-motion 短路：所有 motion class 降为静态终态 */
@media (prefers-reduced-motion: reduce) {
  .aiv-fade-up,
  .aiv-pop,
  .aiv-panel-crossfade,
  .aiv-generating-pulse,
  .aiv-progress-shimmer {
    animation: none !important;
  }
  .aiv-fade-up,
  .aiv-pop,
  .aiv-panel-crossfade {
    opacity: 1 !important;
    transform: none !important;
  }
}
.placeholder\:text-text-placeholder::-moz-placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.placeholder\:text-text-placeholder::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.placeholder\:text-text-subtle::-moz-placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.placeholder\:text-text-subtle::placeholder {
  color: rgba(255, 255, 255, 0.35);
}
.first\:border-t-0:first-child {
  border-top-width: 0px;
}
.first\:pt-0:first-child {
  padding-top: 0px;
}
.focus-within\:border-border-accent:focus-within {
  border-color: rgba(251, 146, 60, 0.55);
}
.focus-within\:border-danger-500:focus-within {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}
.focus-within\:border-orange-300\/35:focus-within {
  border-color: rgb(253 186 116 / 0.35);
}
.focus-within\:bg-white\/\[0\.07\]:focus-within {
  background-color: rgb(255 255 255 / 0.07);
}
.focus-within\:shadow-\[0_0_0_3px_rgba\(103\2c 232\2c 249\2c 0\.08\)\]:focus-within {
  --tw-shadow: 0 0 0 3px rgba(103,232,249,0.08);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus-within\:ring-2:focus-within {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-within\:ring-\[\#8be8ef\]\/20:focus-within {
  --tw-ring-color: rgb(139 232 239 / 0.2);
}
.focus-within\:ring-border-accent\/35:focus-within {
  --tw-ring-color: rgba(251, 146, 60, 0.35);
}
.focus-within\:ring-danger-500\/30:focus-within {
  --tw-ring-color: rgb(248 113 113 / 0.3);
}
.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-\[\#4a6a94\]:hover {
  --tw-border-opacity: 1;
  border-color: rgb(74 106 148 / var(--tw-border-opacity, 1));
}
.hover\:border-\[\#67e8f9\]\/35:hover {
  border-color: rgb(103 232 249 / 0.35);
}
.hover\:border-\[\#76dfea\]\/35:hover {
  border-color: rgb(118 223 234 / 0.35);
}
.hover\:border-accent-300\/80:hover {
  border-color: rgb(253 186 116 / 0.8);
}
.hover\:border-accent-400\/50:hover {
  border-color: rgb(251 146 60 / 0.5);
}
.hover\:border-blue-300\/60:hover {
  border-color: rgb(147 197 253 / 0.6);
}
.hover\:border-blue-400\/60:hover {
  border-color: rgb(96 165 250 / 0.6);
}
.hover\:border-border-accent:hover {
  border-color: rgba(251, 146, 60, 0.55);
}
.hover\:border-border-ghost:hover {
  border-color: rgba(255, 255, 255, 0.1);
}
.hover\:border-border-strong:hover {
  --tw-border-opacity: 1;
  border-color: rgb(58 61 68 / var(--tw-border-opacity, 1));
}
.hover\:border-danger-500\/55:hover {
  border-color: rgb(248 113 113 / 0.55);
}
.hover\:border-orange-300\/80:hover {
  border-color: rgb(253 186 116 / 0.8);
}
.hover\:border-red-300\/50:hover {
  border-color: rgb(252 165 165 / 0.5);
}
.hover\:border-white\/20:hover {
  border-color: rgb(255 255 255 / 0.2);
}
.hover\:border-white\/25:hover {
  border-color: rgb(255 255 255 / 0.25);
}
.hover\:border-white\/30:hover {
  border-color: rgb(255 255 255 / 0.3);
}
.hover\:border-white\/35:hover {
  border-color: rgb(255 255 255 / 0.35);
}
.hover\:border-white\/45:hover {
  border-color: rgb(255 255 255 / 0.45);
}
.hover\:border-white\/\[0\.18\]:hover {
  border-color: rgb(255 255 255 / 0.18);
}
.hover\:border-white\/\[0\.19\]:hover {
  border-color: rgb(255 255 255 / 0.19);
}
.hover\:border-white\/\[0\.3\]:hover {
  border-color: rgb(255 255 255 / 0.3);
}
.hover\:bg-accent-400:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(251 146 60 / var(--tw-bg-opacity, 1));
}
.hover\:bg-accent-500\/\[0\.08\]:hover {
  background-color: rgb(249 115 22 / 0.08);
}
.hover\:bg-accent-500\/\[0\.1\]:hover {
  background-color: rgb(249 115 22 / 0.1);
}
.hover\:bg-bg-surface-2:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(24 27 34 / var(--tw-bg-opacity, 1));
}
.hover\:bg-bg-surface-3:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(27 29 34 / var(--tw-bg-opacity, 1));
}
.hover\:bg-black:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.hover\:bg-orange-500\/\[0\.08\]:hover {
  background-color: rgb(249 115 22 / 0.08);
}
.hover\:bg-white\/5:hover {
  background-color: rgb(255 255 255 / 0.05);
}
.hover\:bg-white\/85:hover {
  background-color: rgb(255 255 255 / 0.85);
}
.hover\:bg-white\/95:hover {
  background-color: rgb(255 255 255 / 0.95);
}
.hover\:bg-white\/\[0\.035\]:hover {
  background-color: rgb(255 255 255 / 0.035);
}
.hover\:bg-white\/\[0\.03\]:hover {
  background-color: rgb(255 255 255 / 0.03);
}
.hover\:bg-white\/\[0\.045\]:hover {
  background-color: rgb(255 255 255 / 0.045);
}
.hover\:bg-white\/\[0\.04\]:hover {
  background-color: rgb(255 255 255 / 0.04);
}
.hover\:bg-white\/\[0\.05\]:hover {
  background-color: rgb(255 255 255 / 0.05);
}
.hover\:bg-white\/\[0\.065\]:hover {
  background-color: rgb(255 255 255 / 0.065);
}
.hover\:bg-white\/\[0\.06\]:hover {
  background-color: rgb(255 255 255 / 0.06);
}
.hover\:bg-white\/\[0\.07\]:hover {
  background-color: rgb(255 255 255 / 0.07);
}
.hover\:bg-white\/\[0\.08\]:hover {
  background-color: rgb(255 255 255 / 0.08);
}
.hover\:bg-white\/\[0\.15\]:hover {
  background-color: rgb(255 255 255 / 0.15);
}
.hover\:text-\[\#9fd0ff\]:hover {
  --tw-text-opacity: 1;
  color: rgb(159 208 255 / var(--tw-text-opacity, 1));
}
.hover\:text-\[\#c8d9ec\]:hover {
  --tw-text-opacity: 1;
  color: rgb(200 217 236 / var(--tw-text-opacity, 1));
}
.hover\:text-accent-100:hover {
  --tw-text-opacity: 1;
  color: rgb(255 237 213 / var(--tw-text-opacity, 1));
}
.hover\:text-accent-200:hover {
  --tw-text-opacity: 1;
  color: rgb(254 215 170 / var(--tw-text-opacity, 1));
}
.hover\:text-danger-500:hover {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.hover\:text-orange-100:hover {
  --tw-text-opacity: 1;
  color: rgb(255 237 213 / var(--tw-text-opacity, 1));
}
.hover\:text-red-300:hover {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.hover\:text-text-primary:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:text-text-secondary:hover {
  color: rgba(255, 255, 255, 0.85);
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:text-white\/70:hover {
  color: rgb(255 255 255 / 0.7);
}
.hover\:text-white\/80:hover {
  color: rgb(255 255 255 / 0.8);
}
.hover\:text-white\/85:hover {
  color: rgb(255 255 255 / 0.85);
}
.hover\:text-white\/90:hover {
  color: rgb(255 255 255 / 0.9);
}
.hover\:text-white\/95:hover {
  color: rgb(255 255 255 / 0.95);
}
.hover\:opacity-90:hover {
  opacity: 0.9;
}
.hover\:shadow-\[0_18px_46px_-28px_rgba\(0\2c 0\2c 0\2c 0\.95\)\]:hover {
  --tw-shadow: 0 18px 46px -28px rgba(0,0,0,0.95);
  --tw-shadow-colored: 0 18px 46px -28px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-\[0_22px_54px_-30px_rgba\(0\2c 0\2c 0\2c 0\.95\)\]:hover {
  --tw-shadow: 0 22px 54px -30px rgba(0,0,0,0.95);
  --tw-shadow-colored: 0 22px 54px -30px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-elev-2:hover {
  --tw-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.7);
  --tw-shadow-colored: 0 10px 30px -18px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:ring-border-strong:hover {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(58 61 68 / var(--tw-ring-opacity, 1));
}
.focus\:border-border-accent:focus {
  border-color: rgba(251, 146, 60, 0.55);
}
.focus\:border-danger-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(248 113 113 / var(--tw-border-opacity, 1));
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-border-accent\/35:focus {
  --tw-ring-color: rgba(251, 146, 60, 0.35);
}
.focus\:ring-border-accent\/45:focus {
  --tw-ring-color: rgba(251, 146, 60, 0.45);
}
.focus\:ring-danger-500\/30:focus {
  --tw-ring-color: rgb(248 113 113 / 0.3);
}
.focus-visible\:bg-white\/\[0\.07\]:focus-visible {
  background-color: rgb(255 255 255 / 0.07);
}
.focus-visible\:bg-white\/\[0\.1\]:focus-visible {
  background-color: rgb(255 255 255 / 0.1);
}
.focus-visible\:text-white:focus-visible {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.focus-visible\:opacity-100:focus-visible {
  opacity: 1;
}
.focus-visible\:shadow-\[0_0_0_3px_rgba\(103\2c 232\2c 249\2c 0\.1\)\]:focus-visible {
  --tw-shadow: 0 0 0 3px rgba(103,232,249,0.1);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus-visible\:shadow-\[0_0_0_3px_rgba\(129\2c 140\2c 248\2c 0\.1\)\]:focus-visible {
  --tw-shadow: 0 0 0 3px rgba(129,140,248,0.1);
  --tw-shadow-colored: 0 0 0 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-border-accent:focus-visible {
  --tw-ring-color: rgba(251, 146, 60, 0.55);
}
.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-bg-base:focus-visible {
  --tw-ring-offset-color: #0f1115;
}
.active\:bg-accent-600:active {
  --tw-bg-opacity: 1;
  background-color: rgb(234 88 12 / var(--tw-bg-opacity, 1));
}
.disabled\:cursor-default:disabled {
  cursor: default;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:bg-white\/10:disabled {
  background-color: rgb(255 255 255 / 0.1);
}
.disabled\:bg-white\/\[0\.08\]:disabled {
  background-color: rgb(255 255 255 / 0.08);
}
.disabled\:text-text-disabled:disabled {
  color: rgba(255, 255, 255, 0.25);
}
.disabled\:text-white\/30:disabled {
  color: rgb(255 255 255 / 0.3);
}
.disabled\:text-white\/35:disabled {
  color: rgb(255 255 255 / 0.35);
}
.disabled\:opacity-40:disabled {
  opacity: 0.4;
}
.disabled\:opacity-45:disabled {
  opacity: 0.45;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.disabled\:opacity-60:disabled {
  opacity: 0.6;
}
.disabled\:shadow-none:disabled {
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.disabled\:hover\:border-border-ghost:hover:disabled {
  border-color: rgba(255, 255, 255, 0.1);
}
.disabled\:hover\:bg-bg-surface-2:hover:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(24 27 34 / var(--tw-bg-opacity, 1));
}
.disabled\:hover\:text-text-muted:hover:disabled {
  --tw-text-opacity: 1;
  color: rgb(186 186 186 / var(--tw-text-opacity, 1));
}
.group:focus-within .group-focus-within\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:translate-y-0 {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-\[1\.035\] {
  --tw-scale-x: 1.035;
  --tw-scale-y: 1.035;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:scale-\[1\.03\] {
  --tw-scale-x: 1.03;
  --tw-scale-y: 1.03;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:border-\[\#67e8f9\]\/35 {
  border-color: rgb(103 232 249 / 0.35);
}
.group:hover .group-hover\:border-\[\#67e8f9\]\/40 {
  border-color: rgb(103 232 249 / 0.4);
}
.group:hover .group-hover\:border-border-strong {
  --tw-border-opacity: 1;
  border-color: rgb(58 61 68 / var(--tw-border-opacity, 1));
}
.group:hover .group-hover\:bg-text-muted {
  --tw-bg-opacity: 1;
  background-color: rgb(186 186 186 / var(--tw-bg-opacity, 1));
}
.group:hover .group-hover\:bg-white\/50 {
  background-color: rgb(255 255 255 / 0.5);
}
.group:hover .group-hover\:bg-white\/\[0\.1\] {
  background-color: rgb(255 255 255 / 0.1);
}
.group:hover .group-hover\:text-\[\#67e8f9\] {
  --tw-text-opacity: 1;
  color: rgb(103 232 249 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-\[\#8fb3dc\] {
  --tw-text-opacity: 1;
  color: rgb(143 179 220 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-\[\#9fd0ff\] {
  --tw-text-opacity: 1;
  color: rgb(159 208 255 / var(--tw-text-opacity, 1));
}
.group:hover .group-hover\:text-text-primary {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.group\/tile:hover .group-hover\/tile\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
.group:hover .group-hover\:opacity-70 {
  opacity: 0.7;
}
.group:hover .group-hover\:shadow-elev-2 {
  --tw-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.7);
  --tw-shadow-colored: 0 10px 30px -18px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.aria-disabled\:cursor-not-allowed[aria-disabled="true"] {
  cursor: not-allowed;
}
.aria-disabled\:opacity-45[aria-disabled="true"] {
  opacity: 0.45;
}
@media (min-width: 640px) {
  .sm\:block {
    display: block;
  }
  .sm\:inline {
    display: inline;
  }
  .sm\:w-\[190px\] {
    width: 190px;
  }
  .sm\:w-\[360px\] {
    width: 360px;
  }
  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sm\:flex-row {
    flex-direction: row;
  }
  .sm\:items-end {
    align-items: flex-end;
  }
  .sm\:justify-between {
    justify-content: space-between;
  }
  .sm\:p-2\.5 {
    padding: 0.625rem;
  }
  .sm\:p-4 {
    padding: 1rem;
  }
  .sm\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  .sm\:py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .sm\:pr-4 {
    padding-right: 1rem;
  }
  .sm\:text-\[38px\] {
    font-size: 38px;
  }
}
@media (min-width: 768px) {
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:flex-row {
    flex-direction: row;
  }
  .lg\:items-center {
    align-items: center;
  }
  .lg\:justify-between {
    justify-content: space-between;
  }
}
@media (min-width: 1280px) {
  .xl\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.\[\&\:\:-webkit-search-cancel-button\]\:hidden::-webkit-search-cancel-button {
  display: none;
}