@charset "UTF-8";.univer-relative {
  position: relative;
}

.univer-my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.univer-mb-2 {
  margin-bottom: .5rem;
}

.univer-mb-3 {
  margin-bottom: .75rem;
}

.univer-ml-1\.5 {
  margin-left: .375rem;
}

.univer-ml-2 {
  margin-left: .5rem;
}

.univer-ml-3 {
  margin-left: .75rem;
}

.univer-mt-4 {
  margin-top: 1rem;
}

.univer-mt-5 {
  margin-top: 1.25rem;
}

.univer-box-border {
  box-sizing: border-box;
}

.univer-flex {
  display: flex;
}

.univer-grid {
  display: grid;
}

.univer-h-7 {
  height: 1.75rem;
}

.univer-max-h-\[310px\] {
  max-height: 310px;
}

.univer-w-\[--radix-popper-anchor-width\] {
  width: var(--radix-popper-anchor-width);
}

.univer-w-full {
  width: 100%;
}

.univer-max-w-\[220px\] {
  max-width: 220px;
}

.univer-cursor-pointer {
  cursor: pointer;
}

.univer-select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.univer-list-none {
  list-style-type: none;
}

.univer-grid-flow-col {
  grid-auto-flow: column;
}

.univer-grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.univer-items-center {
  align-items: center;
}

.univer-justify-end {
  justify-content: flex-end;
}

.univer-justify-center {
  justify-content: center;
}

.univer-justify-between {
  justify-content: space-between;
}

.univer-gap-1 {
  gap: .25rem;
}

.univer-gap-2 {
  gap: .5rem;
}

.univer-overflow-hidden {
  overflow: hidden;
}

.univer-overflow-y-auto {
  overflow-y: auto;
}

.univer-overflow-x-hidden {
  overflow-x: hidden;
}

.univer-truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.univer-rounded {
  border-radius: .25rem;
}

.univer-rounded-lg {
  border-radius: .5rem;
}

.univer-rounded-md {
  border-radius: .375rem;
}

.univer-border {
  border-width: 1px;
}

.univer-bg-white {
  background-color: var(--univer-white);
}

.univer-p-1 {
  padding: .25rem;
}

.univer-px-2 {
  padding-left: .5rem;
  padding-right: .5rem;
}

.univer-py-1\.5 {
  padding-top: .375rem;
  padding-bottom: .375rem;
}

.univer-text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.univer-text-sm {
  font-size: .875rem;
  line-height: 1.25rem;
}

.univer-text-xs {
  font-size: .75rem;
  line-height: 1rem;
}

.univer-text-gray-700 {
  color: var(--univer-gray-700);
}

.univer-text-gray-900 {
  color: var(--univer-gray-900);
}

.univer-text-primary-500 {
  color: var(--univer-primary-500);
}

.univer-shadow-lg {
  --univer-tw-shadow: 0px 4px 6px 0px #1e284d0d, 0px 10px 15px -3px #1e284d1a;
  --univer-tw-shadow-colored: 0px 4px 6px 0px var(--univer-tw-shadow-color), 0px 10px 15px -3px var(--univer-tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 4px 6px #1e284d0d, 0 10px 15px -3px #1e284d1a;
  box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow);
}

.univer-transition-all {
  transition-property: all;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.univer-transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.hover\:univer-bg-gray-100:hover {
  background-color: var(--univer-gray-100);
}

.hover\:univer-text-red-500:hover {
  color: var(--univer-red-500);
}

.disabled\:univer-cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:univer-divide-opacity-30:disabled > :not([hidden]) ~ :not([hidden]) {
  --univer-tw-divide-opacity: .3;
}

.disabled\:univer-text-gray-800:disabled {
  color: var(--univer-gray-800);
}

.dark\:\!univer-text-white:where(.univer-dark, .univer-dark *) {
  color: var(--univer-white) !important;
}

.dark\:hover\:\!univer-bg-gray-700:hover:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-700) !important;
}
.univer-absolute {
  position: absolute;
}

.univer-relative {
  position: relative;
}

.-univer-bottom-0\.5 {
  bottom: -.125rem;
}

.-univer-right-0\.5 {
  right: -.125rem;
}

.univer-mx-1 {
  margin-left: .25rem;
  margin-right: .25rem;
}

.univer-mb-1 {
  margin-bottom: .25rem;
}

.univer-mb-2 {
  margin-bottom: .5rem;
}

.univer-ml-1 {
  margin-left: .25rem;
}

.univer-mt-2 {
  margin-top: .5rem;
}

.univer-mt-4 {
  margin-top: 1rem;
}

.univer-box-border {
  box-sizing: border-box;
}

.univer-block {
  display: block;
}

.univer-inline-block {
  display: inline-block;
}

.univer-flex {
  display: flex;
}

.univer-inline-flex {
  display: inline-flex;
}

.univer-grid {
  display: grid;
}

.univer-hidden {
  display: none;
}

.univer-size-3 {
  width: .75rem;
  height: .75rem;
}

.univer-size-6 {
  width: 1.5rem;
  height: 1.5rem;
}

.univer-size-full {
  width: 100%;
  height: 100%;
}

.univer-h-4 {
  height: 1rem;
}

.univer-h-5 {
  height: 1.25rem;
}

.univer-h-7 {
  height: 1.75rem;
}

.univer-h-8 {
  height: 2rem;
}

.univer-h-\[300px\] {
  height: 300px;
}

.univer-h-full {
  height: 100%;
}

.univer-max-h-\[500px\] {
  max-height: 500px;
}

.univer-min-h-\[300px\] {
  min-height: 300px;
}

.univer-w-\[400px\] {
  width: 400px;
}

.univer-w-full {
  width: 100%;
}

.univer-flex-1 {
  flex: 1;
}

.univer-flex-shrink {
  flex-shrink: 1;
}

.univer-flex-shrink-0 {
  flex-shrink: 0;
}

.univer-flex-grow {
  flex-grow: 1;
}

.univer-flex-grow-0 {
  flex-grow: 0;
}

.univer-cursor-pointer {
  cursor: pointer;
}

.univer-grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.univer-flex-col {
  flex-direction: column;
}

.univer-flex-nowrap {
  flex-wrap: nowrap;
}

.univer-items-center {
  align-items: center;
}

.univer-justify-start {
  justify-content: flex-start;
}

.univer-justify-center {
  justify-content: center;
}

.univer-justify-between {
  justify-content: space-between;
}

.univer-gap-1 {
  gap: .25rem;
}

.univer-gap-2 {
  gap: .5rem;
}

.univer-gap-4 {
  gap: 1rem;
}

.univer-overflow-auto {
  overflow: auto;
}

.univer-overflow-hidden {
  overflow: hidden;
}

.univer-truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.univer-whitespace-nowrap {
  white-space: nowrap;
}

.univer-rounded-full {
  border-radius: 9999px;
}

.univer-rounded-lg {
  border-radius: .5rem;
}

.univer-rounded-md {
  border-radius: .375rem;
}

.univer-border {
  border-width: 1px;
}

.univer-border-solid {
  border-style: solid;
}

.univer-border-\[rgba\(13\,13\,13\,0\.06\)\] {
  border-color: #0d0d0d0f;
}

.univer-border-transparent {
  border-color: #0000;
}

.univer-bg-gray-300 {
  background-color: var(--univer-gray-300);
}

.univer-bg-white {
  background-color: var(--univer-white);
}

.univer-p-0\.5 {
  padding: .125rem;
}

.univer-p-2 {
  padding: .5rem;
}

.univer-p-4 {
  padding: 1rem;
}

.univer-px-1\.5 {
  padding-left: .375rem;
  padding-right: .375rem;
}

.univer-px-2 {
  padding-left: .5rem;
  padding-right: .5rem;
}

.univer-py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.univer-py-0\.5 {
  padding-top: .125rem;
  padding-bottom: .125rem;
}

.univer-py-2\.5 {
  padding-top: .625rem;
  padding-bottom: .625rem;
}

.univer-pl-5 {
  padding-left: 1.25rem;
}

.univer-pr-0\.5 {
  padding-right: .125rem;
}

.univer-pr-2 {
  padding-right: .5rem;
}

.univer-pt-2 {
  padding-top: .5rem;
}

.univer-text-sm {
  font-size: .875rem;
  line-height: 1.25rem;
}

.univer-text-xs {
  font-size: .75rem;
  line-height: 1rem;
}

.univer-font-bold {
  font-weight: 700;
}

.univer-text-\[\#418F1F\] {
  --univer-tw-text-opacity: 1;
  color: rgba(65, 143, 31, var(--univer-tw-text-opacity, 1));
}

.univer-text-gray-400 {
  color: var(--univer-gray-400);
}

.univer-text-gray-500 {
  color: var(--univer-gray-500);
}

.univer-text-gray-900 {
  color: var(--univer-gray-900);
}

.univer-text-primary-500 {
  color: var(--univer-primary-500);
}

.univer-shadow-lg {
  --univer-tw-shadow: 0px 4px 6px 0px #1e284d0d, 0px 10px 15px -3px #1e284d1a;
  --univer-tw-shadow-colored: 0px 4px 6px 0px var(--univer-tw-shadow-color), 0px 10px 15px -3px var(--univer-tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 4px 6px #1e284d0d, 0 10px 15px -3px #1e284d1a;
  box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow);
}

.univer-transition-shadow {
  transition-property: box-shadow;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.hover\:univer-bg-gray-50:hover {
  background-color: var(--univer-gray-50);
}

.hover\:univer-ring-2:hover {
  --univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);
  --univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(2px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);
  box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), var(--univer-tw-shadow, 0 0 #0000);
}

.hover\:univer-ring-offset-2:hover {
  --univer-tw-ring-offset-width: 2px;
}

.hover\:univer-ring-offset-white:hover {
  --univer-tw-ring-offset-color: var(--univer-white);
}

.dark\:\!univer-border-\[rgba\(255\,255\,255\,0\.06\)\]:where(.univer-dark, .univer-dark *) {
  border-color: #ffffff0f !important;
}

.dark\:\!univer-border-gray-600:where(.univer-dark, .univer-dark *) {
  border-color: var(--univer-gray-600) !important;
}

.dark\:\!univer-bg-gray-700:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-700) !important;
}

.dark\:\!univer-text-gray-200:where(.univer-dark, .univer-dark *) {
  color: var(--univer-gray-200) !important;
}

.dark\:\!univer-text-gray-500:where(.univer-dark, .univer-dark *) {
  color: var(--univer-gray-500) !important;
}

.dark\:\!univer-text-white:where(.univer-dark, .univer-dark *) {
  color: var(--univer-white) !important;
}

.dark\:hover\:\!univer-bg-gray-900:hover:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-900) !important;
}

.\[\&\:hover_a\]\:univer-inline-block:hover a {
  display: inline-block;
}
*, :before, :after, ::backdrop {
  --univer-tw-border-spacing-x: 0;
  --univer-tw-border-spacing-y: 0;
  --univer-tw-translate-x: 0;
  --univer-tw-translate-y: 0;
  --univer-tw-rotate: 0;
  --univer-tw-skew-x: 0;
  --univer-tw-skew-y: 0;
  --univer-tw-scale-x: 1;
  --univer-tw-scale-y: 1;
  --univer-tw-pan-x:  ;
  --univer-tw-pan-y:  ;
  --univer-tw-pinch-zoom:  ;
  --univer-tw-scroll-snap-strictness: proximity;
  --univer-tw-gradient-from-position:  ;
  --univer-tw-gradient-via-position:  ;
  --univer-tw-gradient-to-position:  ;
  --univer-tw-ordinal:  ;
  --univer-tw-slashed-zero:  ;
  --univer-tw-numeric-figure:  ;
  --univer-tw-numeric-spacing:  ;
  --univer-tw-numeric-fraction:  ;
  --univer-tw-ring-inset:  ;
  --univer-tw-ring-offset-width: 0px;
  --univer-tw-ring-offset-color: #fff;
  --univer-tw-ring-color: #93c5fd80;
  --univer-tw-ring-offset-shadow: 0 0 #0000;
  --univer-tw-ring-shadow: 0 0 #0000;
  --univer-tw-shadow: 0 0 #0000;
  --univer-tw-shadow-colored: 0 0 #0000;
  --univer-tw-blur:  ;
  --univer-tw-brightness:  ;
  --univer-tw-contrast:  ;
  --univer-tw-grayscale:  ;
  --univer-tw-hue-rotate:  ;
  --univer-tw-invert:  ;
  --univer-tw-saturate:  ;
  --univer-tw-sepia:  ;
  --univer-tw-drop-shadow:  ;
  --univer-tw-backdrop-blur:  ;
  --univer-tw-backdrop-brightness:  ;
  --univer-tw-backdrop-contrast:  ;
  --univer-tw-backdrop-grayscale:  ;
  --univer-tw-backdrop-hue-rotate:  ;
  --univer-tw-backdrop-invert:  ;
  --univer-tw-backdrop-opacity:  ;
  --univer-tw-backdrop-saturate:  ;
  --univer-tw-backdrop-sepia:  ;
  --univer-tw-contain-size:  ;
  --univer-tw-contain-layout:  ;
  --univer-tw-contain-paint:  ;
  --univer-tw-contain-style:  
;
}

* {
  scrollbar-color: initial;
  scrollbar-width: initial;
}

.univer-sr-only {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.univer-pointer-events-none {
  pointer-events: none;
}

.univer-pointer-events-auto {
  pointer-events: auto;
}

.univer-fixed {
  position: fixed;
}

.univer-absolute {
  position: absolute;
}

.univer-relative {
  position: relative;
}

.univer-inset-0 {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.univer-inset-x-0 {
  left: 0;
  right: 0;
}

.univer-bottom-0 {
  bottom: 0;
}

.univer-bottom-0\.5 {
  bottom: .125rem;
}

.univer-bottom-6 {
  bottom: 1.5rem;
}

.univer-left-0 {
  left: 0;
}

.univer-left-0\.5 {
  left: .125rem;
}

.univer-left-1\.5 {
  left: .375rem;
}

.univer-left-1\/2 {
  left: 50%;
}

.univer-left-2 {
  left: .5rem;
}

.univer-left-\[-16px\] {
  left: -16px;
}

.univer-right-0 {
  right: 0;
}

.univer-right-2 {
  right: .5rem;
}

.univer-right-4 {
  right: 1rem;
}

.univer-right-px {
  right: 1px;
}

.univer-top-0 {
  top: 0;
}

.univer-top-1\/2 {
  top: 50%;
}

.univer-top-4 {
  top: 1rem;
}

.univer-top-px {
  top: 1px;
}

.univer-z-0 {
  z-index: 0;
}

.univer-z-10 {
  z-index: 10;
}

.univer-z-\[1080\] {
  z-index: 1080;
}

.univer-z-\[1081\] {
  z-index: 1081;
}

.univer-m-0 {
  margin: 0;
}

.-univer-mx-1 {
  margin-left: -.25rem;
  margin-right: -.25rem;
}

.univer-mx-1 {
  margin-left: .25rem;
  margin-right: .25rem;
}

.univer-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.univer-my-0 {
  margin-top: 0;
  margin-bottom: 0;
}

.univer-my-1 {
  margin-top: .25rem;
  margin-bottom: .25rem;
}

.univer-mb-0 {
  margin-bottom: 0;
}

.univer-mb-1 {
  margin-bottom: .25rem;
}

.univer-mb-2 {
  margin-bottom: .5rem;
}

.univer-mb-3 {
  margin-bottom: .75rem;
}

.univer-mb-4 {
  margin-bottom: 1rem;
}

.univer-ml-1 {
  margin-left: .25rem;
}

.univer-ml-auto {
  margin-left: auto;
}

.univer-mt-1 {
  margin-top: .25rem;
}

.univer-mt-2 {
  margin-top: .5rem;
}

.univer-mt-4 {
  margin-top: 1rem;
}

.univer-mt-6 {
  margin-top: 1.5rem;
}

.univer-box-border {
  box-sizing: border-box;
}

.univer-block {
  display: block;
}

.univer-inline-block {
  display: inline-block;
}

.univer-flex {
  display: flex;
}

.univer-inline-flex {
  display: inline-flex;
}

.univer-grid {
  display: grid;
}

.\!univer-hidden {
  display: none !important;
}

.univer-hidden {
  display: none;
}

.univer-size-0 {
  width: 0;
  height: 0;
}

.univer-size-2 {
  width: .5rem;
  height: .5rem;
}

.univer-size-2\.5 {
  width: .625rem;
  height: .625rem;
}

.univer-size-3 {
  width: .75rem;
  height: .75rem;
}

.univer-size-3\.5 {
  width: .875rem;
  height: .875rem;
}

.univer-size-4 {
  width: 1rem;
  height: 1rem;
}

.univer-size-5 {
  width: 1.25rem;
  height: 1.25rem;
}

.univer-size-6 {
  width: 1.5rem;
  height: 1.5rem;
}

.univer-size-7 {
  width: 1.75rem;
  height: 1.75rem;
}

.univer-size-9 {
  width: 2.25rem;
  height: 2.25rem;
}

.univer-size-full {
  width: 100%;
  height: 100%;
}

.univer-h-0\.5 {
  height: .125rem;
}

.univer-h-1\/2 {
  height: 50%;
}

.univer-h-10 {
  height: 2.5rem;
}

.univer-h-12 {
  height: 3rem;
}

.univer-h-2 {
  height: .5rem;
}

.univer-h-32 {
  height: 8rem;
}

.univer-h-4 {
  height: 1rem;
}

.univer-h-48 {
  height: 12rem;
}

.univer-h-6 {
  height: 1.5rem;
}

.univer-h-7 {
  height: 1.75rem;
}

.univer-h-8 {
  height: 2rem;
}

.univer-h-\[150px\] {
  height: 150px;
}

.univer-h-\[calc\(100\%-2px\)\] {
  height: calc(100% - 2px);
}

.univer-h-full {
  height: 100%;
}

.univer-h-px {
  height: 1px;
}

.univer-max-h-0 {
  max-height: 0;
}

.univer-max-h-80 {
  max-height: 20rem;
}

.univer-max-h-\[--radix-popper-available-height\] {
  max-height: var(--radix-popper-available-height);
}

.univer-max-h-\[40vh\] {
  max-height: 40vh;
}

.univer-max-h-full {
  max-height: 100%;
}

.univer-max-h-screen {
  max-height: 100vh;
}

.univer-min-h-0 {
  min-height: 0;
}

.univer-min-h-3\.5 {
  min-height: .875rem;
}

.univer-min-h-\[520px\] {
  min-height: 520px;
}

.\!univer-w-fit {
  width: -moz-fit-content !important;
  width: fit-content !important;
}

.univer-w-2\.5 {
  width: .625rem;
}

.univer-w-5 {
  width: 1.25rem;
}

.univer-w-64 {
  width: 16rem;
}

.univer-w-7 {
  width: 1.75rem;
}

.univer-w-72 {
  width: 18rem;
}

.univer-w-80 {
  width: 20rem;
}

.univer-w-96 {
  width: 24rem;
}

.univer-w-\[--radix-popper-anchor-width\] {
  width: var(--radix-popper-anchor-width);
}

.univer-w-\[calc\(100\%-16px\)\] {
  width: calc(100% - 16px);
}

.univer-w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.univer-w-full {
  width: 100%;
}

.univer-min-w-36 {
  min-width: 9rem;
}

.univer-min-w-\[320px\] {
  min-width: 320px;
}

.univer-max-w-2xl {
  max-width: 42rem;
}

.univer-max-w-32 {
  max-width: 8rem;
}

.univer-max-w-5xl {
  max-width: 64rem;
}

.univer-max-w-\[520px\] {
  max-width: 520px;
}

.univer-max-w-\[60vw\] {
  max-width: 60vw;
}

.univer-max-w-full {
  max-width: 100%;
}

.univer-max-w-lg {
  max-width: 32rem;
}

.univer-max-w-sm {
  max-width: 24rem;
}

.univer-max-w-xs {
  max-width: 20rem;
}

.univer-flex-1 {
  flex: 1;
}

.univer-flex-shrink-0 {
  flex-shrink: 0;
}

.univer-shrink {
  flex-shrink: 1;
}

.univer-shrink-0 {
  flex-shrink: 0;
}

.univer-origin-\[--radix-hover-card-content-transform-origin\] {
  transform-origin: var(--radix-hover-card-content-transform-origin);
}

.-univer-translate-x-1\/2 {
  --univer-tw-translate-x: -50%;
  transform: translate(-50%, var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
}

.-univer-translate-y-1\/2, .univer--translate-y-1\/2 {
  --univer-tw-translate-y: -50%;
  transform: translate(var(--univer-tw-translate-x), -50%) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
}

.univer-translate-x-3 {
  --univer-tw-translate-x: .75rem;
  transform: translate(.75rem, var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
}

.-univer-rotate-90 {
  --univer-tw-rotate: -90deg;
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(-90deg) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
}

.univer-rotate-0 {
  --univer-tw-rotate: 0deg;
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(0deg) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
}

.univer-rotate-180 {
  --univer-tw-rotate: 180deg;
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(180deg) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
}

.univer-rotate-45 {
  --univer-tw-rotate: 45deg;
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(45deg) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
}

.univer-rotate-\[-90deg\] {
  --univer-tw-rotate: -90deg;
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(-90deg) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
}

.\!univer-animate-none {
  animation: none !important;
}

@keyframes univer-spin {
  to {
    transform: rotate(360deg);
  }
}

.univer-animate-spin {
  animation: 1s linear infinite univer-spin;
}

.univer-cursor-crosshair {
  cursor: crosshair;
}

.univer-cursor-default {
  cursor: default;
}

.univer-cursor-grabbing {
  cursor: grabbing;
}

.univer-cursor-not-allowed {
  cursor: not-allowed;
}

.univer-cursor-pointer {
  cursor: pointer;
}

.univer-select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.univer-resize {
  resize: both;
}

.univer-list-none {
  list-style-type: none;
}

.univer-appearance-none {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.univer-grid-flow-row {
  grid-auto-flow: row;
}

.univer-grid-flow-col {
  grid-auto-flow: column;
}

.univer-grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.univer-grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.univer-flex-col {
  flex-direction: column;
}

.univer-flex-col-reverse {
  flex-direction: column-reverse;
}

.univer-flex-wrap {
  flex-wrap: wrap;
}

.univer-content-center {
  align-content: center;
}

.univer-items-end {
  align-items: flex-end;
}

.univer-items-center {
  align-items: center;
}

.univer-justify-end {
  justify-content: flex-end;
}

.univer-justify-center {
  justify-content: center;
}

.univer-justify-between {
  justify-content: space-between;
}

.univer-gap-0\.5 {
  gap: .125rem;
}

.univer-gap-1 {
  gap: .25rem;
}

.univer-gap-1\.5 {
  gap: .375rem;
}

.univer-gap-2 {
  gap: .5rem;
}

.univer-gap-2\.5 {
  gap: .625rem;
}

.univer-gap-3 {
  gap: .75rem;
}

.univer-gap-4 {
  gap: 1rem;
}

.univer-space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --univer-tw-space-y-reverse: 0;
  margin-top: calc(.375rem * (1 - var(--univer-tw-space-y-reverse)));
  margin-top: .375rem;
  margin-top: calc(.375rem * calc(1 - var(--univer-tw-space-y-reverse)));
  margin-bottom: 0;
  margin-bottom: calc(.375rem * var(--univer-tw-space-y-reverse));
}

.univer-space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --univer-tw-space-y-reverse: 0;
  margin-top: calc(.5rem * (1 - var(--univer-tw-space-y-reverse)));
  margin-top: .5rem;
  margin-top: calc(.5rem * calc(1 - var(--univer-tw-space-y-reverse)));
  margin-bottom: 0;
  margin-bottom: calc(.5rem * var(--univer-tw-space-y-reverse));
}

.univer-divide-x > :not([hidden]) ~ :not([hidden]) {
  --univer-tw-divide-x-reverse: 0;
  border-right-width: 0;
  border-right-width: calc(1px * var(--univer-tw-divide-x-reverse));
  border-left-width: calc(1px * (1 - var(--univer-tw-divide-x-reverse)));
  border-left-width: 1px;
  border-left-width: calc(1px * calc(1 - var(--univer-tw-divide-x-reverse)));
}

.univer-divide-x-0 > :not([hidden]) ~ :not([hidden]) {
  --univer-tw-divide-x-reverse: 0;
  border-right-width: 0;
  border-right-width: calc(0px * var(--univer-tw-divide-x-reverse));
  border-left-width: calc(0px * (1 - var(--univer-tw-divide-x-reverse)));
  border-left-width: 0;
  border-left-width: calc(0px * calc(1 - var(--univer-tw-divide-x-reverse)));
}

.univer-divide-y > :not([hidden]) ~ :not([hidden]) {
  --univer-tw-divide-y-reverse: 0;
  border-top-width: calc(1px * (1 - var(--univer-tw-divide-y-reverse)));
  border-top-width: 1px;
  border-top-width: calc(1px * calc(1 - var(--univer-tw-divide-y-reverse)));
  border-bottom-width: 0;
  border-bottom-width: calc(1px * var(--univer-tw-divide-y-reverse));
}

.univer-divide-y-0 > :not([hidden]) ~ :not([hidden]) {
  --univer-tw-divide-y-reverse: 0;
  border-top-width: calc(0px * (1 - var(--univer-tw-divide-y-reverse)));
  border-top-width: 0;
  border-top-width: calc(0px * calc(1 - var(--univer-tw-divide-y-reverse)));
  border-bottom-width: 0;
  border-bottom-width: calc(0px * var(--univer-tw-divide-y-reverse));
}

.univer-divide-solid > :not([hidden]) ~ :not([hidden]) {
  border-style: solid;
}

.univer-divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--univer-gray-200);
}

.univer-overflow-auto {
  overflow: auto;
}

.univer-overflow-hidden {
  overflow: hidden;
}

.univer-overflow-y-auto {
  overflow-y: auto;
}

.univer-truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.univer-text-ellipsis {
  text-overflow: ellipsis;
}

.univer-whitespace-nowrap {
  white-space: nowrap;
}

.univer-text-balance {
  text-wrap: balance;
}

.univer-break-words {
  word-wrap: break-word;
}

.univer-rounded {
  border-radius: .25rem;
}

.univer-rounded-2xl {
  border-radius: 1rem;
}

.univer-rounded-3xl {
  border-radius: 1.5rem;
}

.univer-rounded-full {
  border-radius: 9999px;
}

.univer-rounded-lg {
  border-radius: .5rem;
}

.univer-rounded-md {
  border-radius: .375rem;
}

.univer-rounded-sm {
  border-radius: .125rem;
}

.\!univer-rounded-b-none {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.\!univer-rounded-l-none {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.\!univer-rounded-r-none {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.\!univer-rounded-t-none {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.univer-rounded-r-md {
  border-top-right-radius: .375rem;
  border-bottom-right-radius: .375rem;
}

.univer-border {
  border-width: 1px;
}

.univer-border-2 {
  border-width: 2px;
}

.\!univer-border-l-0 {
  border-left-width: 0 !important;
}

.\!univer-border-t-0 {
  border-top-width: 0 !important;
}

.univer-border-b {
  border-bottom-width: 1px;
}

.univer-border-b-0 {
  border-bottom-width: 0;
}

.univer-border-l {
  border-left-width: 1px;
}

.univer-border-l-0 {
  border-left-width: 0;
}

.univer-border-r {
  border-right-width: 1px;
}

.univer-border-r-0 {
  border-right-width: 0;
}

.univer-border-t {
  border-top-width: 1px;
}

.univer-border-t-0 {
  border-top-width: 0;
}

.univer-border-solid {
  border-style: solid;
}

.univer-border-dashed {
  border-style: dashed;
}

.univer-border-none {
  border-style: none;
}

.\!univer-border-gray-200 {
  border-color: var(--univer-gray-200) !important;
}

.univer-border-gray-100 {
  border-color: var(--univer-gray-100);
}

.univer-border-gray-200 {
  border-color: var(--univer-gray-200);
}

.univer-border-gray-300 {
  border-color: var(--univer-gray-300);
}

.univer-border-primary-200 {
  border-color: var(--univer-primary-200);
}

.univer-border-primary-300 {
  border-color: var(--univer-primary-300);
}

.univer-border-primary-600 {
  border-color: var(--univer-primary-600);
}

.univer-border-red-500 {
  border-color: var(--univer-red-500);
}

.univer-border-transparent {
  border-color: #0000;
}

.univer-border-white {
  border-color: var(--univer-white);
}

.\!univer-bg-gray-500 {
  background-color: var(--univer-gray-500) !important;
}

.\!univer-bg-gray-600 {
  background-color: var(--univer-gray-600) !important;
}

.\!univer-bg-primary-600 {
  background-color: var(--univer-primary-600) !important;
}

.univer-bg-\[rgba\(0\,0\,0\,0\.8\)\] {
  background-color: #000c;
}

.univer-bg-gray-100 {
  background-color: var(--univer-gray-100);
}

.univer-bg-gray-200 {
  background-color: var(--univer-gray-200);
}

.univer-bg-gray-300 {
  background-color: var(--univer-gray-300);
}

.univer-bg-gray-50 {
  background-color: var(--univer-gray-50);
}

.univer-bg-gray-700 {
  background-color: var(--univer-gray-700);
}

.univer-bg-gray-800 {
  background-color: var(--univer-gray-800);
}

.univer-bg-gray-900 {
  background-color: var(--univer-gray-900);
}

.univer-bg-primary-500 {
  background-color: var(--univer-primary-500);
}

.univer-bg-primary-600 {
  background-color: var(--univer-primary-600);
}

.univer-bg-red-500 {
  background-color: var(--univer-red-500);
}

.univer-bg-sky-100\/70 {
  background-color: #e0f2feb3;
}

.univer-bg-slate-100\/80 {
  background-color: #f1f5f9cc;
}

.univer-bg-slate-900\/90 {
  background-color: #0f172ae6;
}

.univer-bg-transparent {
  background-color: #0000;
}

.univer-bg-white {
  background-color: var(--univer-white);
}

.univer-bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--univer-tw-gradient-stops));
}

.univer-from-slate-100 {
  --univer-tw-gradient-from: #f1f5f9 var(--univer-tw-gradient-from-position);
  --univer-tw-gradient-to: #f1f5f900 var(--univer-tw-gradient-to-position);
  --univer-tw-gradient-stops: var(--univer-tw-gradient-from), var(--univer-tw-gradient-to);
}

.univer-via-cyan-50 {
  --univer-tw-gradient-to: #ecfeff00  var(--univer-tw-gradient-to-position);
  --univer-tw-gradient-stops: var(--univer-tw-gradient-from), #ecfeff var(--univer-tw-gradient-via-position), var(--univer-tw-gradient-to);
}

.univer-to-blue-100 {
  --univer-tw-gradient-to: var(--univer-blue-100) var(--univer-tw-gradient-to-position);
}

.univer-fill-current {
  fill: currentColor;
}

.\!univer-p-2\.5 {
  padding: .625rem !important;
}

.univer-p-0 {
  padding: 0;
}

.univer-p-1 {
  padding: .25rem;
}

.univer-p-1\.5 {
  padding: .375rem;
}

.univer-p-2 {
  padding: .5rem;
}

.univer-p-4 {
  padding: 1rem;
}

.univer-p-6 {
  padding: 1.5rem;
}

.univer-p-8 {
  padding: 2rem;
}

.univer-px-1 {
  padding-left: .25rem;
  padding-right: .25rem;
}

.univer-px-1\.5 {
  padding-left: .375rem;
  padding-right: .375rem;
}

.univer-px-2 {
  padding-left: .5rem;
  padding-right: .5rem;
}

.univer-px-2\.5 {
  padding-left: .625rem;
  padding-right: .625rem;
}

.univer-px-3 {
  padding-left: .75rem;
  padding-right: .75rem;
}

.univer-px-3\.5 {
  padding-left: .875rem;
  padding-right: .875rem;
}

.univer-px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.univer-px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.univer-px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.univer-py-0\.5 {
  padding-top: .125rem;
  padding-bottom: .125rem;
}

.univer-py-1 {
  padding-top: .25rem;
  padding-bottom: .25rem;
}

.univer-py-1\.5 {
  padding-top: .375rem;
  padding-bottom: .375rem;
}

.univer-py-2 {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.univer-py-3 {
  padding-top: .75rem;
  padding-bottom: .75rem;
}

.\!univer-pl-4 {
  padding-left: 1rem !important;
}

.univer-pl-2 {
  padding-left: .5rem;
}

.univer-pl-6 {
  padding-left: 1.5rem;
}

.univer-pl-8 {
  padding-left: 2rem;
}

.univer-pr-2 {
  padding-right: .5rem;
}

.univer-pr-32 {
  padding-right: 8rem;
}

.univer-pr-8 {
  padding-right: 2rem;
}

.univer-pt-4 {
  padding-top: 1rem;
}

.univer-text-left {
  text-align: left;
}

.univer-text-center {
  text-align: center;
}

.univer-align-middle {
  vertical-align: middle;
}

.univer-font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
}

.univer-font-sans {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

.univer-text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.univer-text-\[13px\] {
  font-size: 13px;
}

.univer-text-\[8px\] {
  font-size: 8px;
}

.univer-text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.univer-text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.univer-text-sm {
  font-size: .875rem;
  line-height: 1.25rem;
}

.univer-text-sm\/8 {
  font-size: .875rem;
  line-height: 2rem;
}

.univer-text-xs {
  font-size: .75rem;
  line-height: 1rem;
}

.univer-text-xs\/6 {
  font-size: .75rem;
  line-height: 1.5rem;
}

.univer-font-bold {
  font-weight: 700;
}

.univer-font-medium {
  font-weight: 500;
}

.univer-font-semibold {
  font-weight: 600;
}

.univer-uppercase {
  text-transform: uppercase;
}

.univer-leading-5 {
  line-height: 1.25rem;
}

.univer-leading-6 {
  line-height: 1.5rem;
}

.univer-leading-7 {
  line-height: 1.75rem;
}

.univer-leading-9 {
  line-height: 2.25rem;
}

.univer-leading-none {
  line-height: 1;
}

.univer-leading-normal {
  line-height: 1.5;
}

.univer-tracking-tight {
  letter-spacing: -.025em;
}

.univer-tracking-wide {
  letter-spacing: .025em;
}

.univer-tracking-widest {
  letter-spacing: .1em;
}

.\!univer-text-gray-400 {
  color: var(--univer-gray-400) !important;
}

.\!univer-text-primary-500 {
  color: var(--univer-primary-500) !important;
}

.\!univer-text-white {
  color: var(--univer-white) !important;
}

.univer-text-amber-500 {
  --univer-tw-text-opacity: 1;
  color: rgba(245, 158, 11, var(--univer-tw-text-opacity, 1));
}

.univer-text-current {
  color: currentColor;
}

.univer-text-cyan-700 {
  --univer-tw-text-opacity: 1;
  color: rgba(14, 116, 144, var(--univer-tw-text-opacity, 1));
}

.univer-text-gray-400 {
  color: var(--univer-gray-400);
}

.univer-text-gray-500 {
  color: var(--univer-gray-500);
}

.univer-text-gray-600 {
  color: var(--univer-gray-600);
}

.univer-text-gray-700 {
  color: var(--univer-gray-700);
}

.univer-text-gray-800 {
  color: var(--univer-gray-800);
}

.univer-text-gray-900 {
  color: var(--univer-gray-900);
}

.univer-text-green-500 {
  color: var(--univer-green-500);
}

.univer-text-primary-500 {
  color: var(--univer-primary-500);
}

.univer-text-primary-600 {
  color: var(--univer-primary-600);
}

.univer-text-red-500 {
  color: var(--univer-red-500);
}

.univer-text-sky-500 {
  --univer-tw-text-opacity: 1;
  color: rgba(14, 165, 233, var(--univer-tw-text-opacity, 1));
}

.univer-text-sky-700 {
  --univer-tw-text-opacity: 1;
  color: rgba(3, 105, 161, var(--univer-tw-text-opacity, 1));
}

.univer-text-sky-900 {
  --univer-tw-text-opacity: 1;
  color: rgba(12, 74, 110, var(--univer-tw-text-opacity, 1));
}

.univer-text-slate-500 {
  --univer-tw-text-opacity: 1;
  color: rgba(100, 116, 139, var(--univer-tw-text-opacity, 1));
}

.univer-text-slate-600 {
  --univer-tw-text-opacity: 1;
  color: rgba(71, 85, 105, var(--univer-tw-text-opacity, 1));
}

.univer-text-slate-700 {
  --univer-tw-text-opacity: 1;
  color: rgba(51, 65, 85, var(--univer-tw-text-opacity, 1));
}

.univer-text-slate-800 {
  --univer-tw-text-opacity: 1;
  color: rgba(30, 41, 59, var(--univer-tw-text-opacity, 1));
}

.univer-text-violet-500 {
  --univer-tw-text-opacity: 1;
  color: rgba(139, 92, 246, var(--univer-tw-text-opacity, 1));
}

.univer-text-white {
  color: var(--univer-white);
}

.univer-underline-offset-4 {
  text-underline-offset: 4px;
}

.univer-opacity-0 {
  opacity: 0;
}

.univer-opacity-40 {
  opacity: .4;
}

.univer-opacity-50 {
  opacity: .5;
}

.univer-opacity-60 {
  opacity: .6;
}

.univer-opacity-80 {
  opacity: .8;
}

.univer-shadow {
  --univer-tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
  --univer-tw-shadow-colored: 0 1px 3px 0 var(--univer-tw-shadow-color), 0 1px 2px -1px var(--univer-tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 3px #0000001a, 0 1px 2px -1px #0000001a;
  box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow);
}

.univer-shadow-\[0_30px_60px_-35px_rgba\(15\,23\,42\,0\.55\)\] {
  --univer-tw-shadow: 0 30px 60px -35px #0f172a8c;
  --univer-tw-shadow-colored: 0 30px 60px -35px var(--univer-tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 30px 60px -35px #0f172a8c;
  box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow);
}

.univer-shadow-inner {
  --univer-tw-shadow: inset 0 2px 4px 0 #0000000d;
  --univer-tw-shadow-colored: inset 0 2px 4px 0 var(--univer-tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, inset 0 2px 4px #0000000d;
  box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow);
}

.univer-shadow-lg {
  --univer-tw-shadow: 0px 4px 6px 0px #1e284d0d, 0px 10px 15px -3px #1e284d1a;
  --univer-tw-shadow-colored: 0px 4px 6px 0px var(--univer-tw-shadow-color), 0px 10px 15px -3px var(--univer-tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 4px 6px #1e284d0d, 0 10px 15px -3px #1e284d1a;
  box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow);
}

.univer-shadow-md {
  --univer-tw-shadow: 0px 1px 6px -2px #1e284d14, 0px 2px 6px -1px #1e284d1a;
  --univer-tw-shadow-colored: 0px 1px 6px -2px var(--univer-tw-shadow-color), 0px 2px 6px -1px var(--univer-tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 6px -2px #1e284d14, 0 2px 6px -1px #1e284d1a;
  box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow);
}

.univer-shadow-sm {
  --univer-tw-shadow: 0px 1px 2px 0px #1e284d14;
  --univer-tw-shadow-colored: 0px 1px 2px 0px var(--univer-tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px #1e284d14;
  box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow);
}

.univer-outline-none {
  outline-offset: 2px;
  outline: 2px solid #0000;
}

.univer-ring-2 {
  --univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);
  --univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(2px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);
  box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), var(--univer-tw-shadow, 0 0 #0000);
}

.\!univer-ring-primary-900 {
  --univer-tw-ring-color: var(--univer-primary-900) !important;
}

.univer-ring-primary-50 {
  --univer-tw-ring-color: var(--univer-primary-50);
}

.univer-ring-primary-500 {
  --univer-tw-ring-color: var(--univer-primary-500);
}

.univer-ring-white {
  --univer-tw-ring-color: var(--univer-white);
}

.univer-ring-offset-2 {
  --univer-tw-ring-offset-width: 2px;
}

.\!univer-ring-offset-gray-600 {
  --univer-tw-ring-offset-color: var(--univer-gray-600) !important;
}

.univer-ring-offset-white {
  --univer-tw-ring-offset-color: var(--univer-white);
}

.univer-drop-shadow-sm {
  --univer-tw-drop-shadow: drop-shadow(0 1px 1px #0000000d);
  filter: var(--univer-tw-blur) var(--univer-tw-brightness) var(--univer-tw-contrast) var(--univer-tw-grayscale) var(--univer-tw-hue-rotate) var(--univer-tw-invert) var(--univer-tw-saturate) var(--univer-tw-sepia) var(--univer-tw-drop-shadow);
}

.univer-backdrop-blur-xl {
  --univer-tw-backdrop-blur: blur(24px);
  backdrop-filter: var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia);
}

.univer-transition-\[color\,box-shadow\] {
  transition-property: color, box-shadow;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.univer-transition-\[max-height\,opacity\] {
  transition-property: max-height, opacity;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.univer-transition-all {
  transition-property: all;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.univer-transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.univer-transition-opacity {
  transition-property: opacity;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.univer-transition-shadow {
  transition-property: box-shadow;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.univer-transition-transform {
  transition-property: transform;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.univer-duration-150 {
  transition-duration: .15s;
}

.univer-duration-200 {
  transition-duration: .2s;
}

.univer-duration-300 {
  transition-duration: .3s;
}

.univer-duration-500 {
  transition-duration: .5s;
}

.univer-duration-75 {
  transition-duration: 75ms;
}

.univer-ease-in-out {
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.univer-ease-out {
  transition-timing-function: cubic-bezier(0, 0, .2, 1);
}

.univer-will-change-transform {
  will-change: transform;
}

.univer-scrollbar-thin::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track);
  border-radius: var(--scrollbar-track-radius);
}

.univer-scrollbar-thin::-webkit-scrollbar-track:hover {
  background-color: var(--scrollbar-track-hover, var(--scrollbar-track));
}

.univer-scrollbar-thin::-webkit-scrollbar-track:active {
  background-color: var(--scrollbar-track-active, var(--scrollbar-track-hover, var(--scrollbar-track)));
}

.univer-scrollbar-thin::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: var(--scrollbar-thumb-radius);
}

.univer-scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover, var(--scrollbar-thumb));
}

.univer-scrollbar-thin::-webkit-scrollbar-thumb:active {
  background-color: var(--scrollbar-thumb-active, var(--scrollbar-thumb-hover, var(--scrollbar-thumb)));
}

.univer-scrollbar-thin::-webkit-scrollbar-corner {
  background-color: var(--scrollbar-corner);
  border-radius: var(--scrollbar-corner-radius);
}

.univer-scrollbar-thin::-webkit-scrollbar-corner:hover {
  background-color: var(--scrollbar-corner-hover, var(--scrollbar-corner));
}

.univer-scrollbar-thin::-webkit-scrollbar-corner:active {
  background-color: var(--scrollbar-corner-active, var(--scrollbar-corner-hover, var(--scrollbar-corner)));
}

.univer-scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: initial initial;
  scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
}

.univer-scrollbar-thin::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  display: block;
}

.univer-scrollbar-track-gray-50 {
  --scrollbar-track: var(--univer-gray-50) !important;
}

.univer-scrollbar-thumb-gray-300 {
  --scrollbar-thumb: var(--univer-gray-300) !important;
}

@keyframes enter {
  from {
    opacity: 1;
    opacity: var(--univer-tw-enter-opacity, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0);
    transform: translate3d(var(--univer-tw-enter-translate-x, 0), var(--univer-tw-enter-translate-y, 0), 0) scale3d(var(--univer-tw-enter-scale, 1), var(--univer-tw-enter-scale, 1), var(--univer-tw-enter-scale, 1)) rotate(var(--univer-tw-enter-rotate, 0));
  }
}

@keyframes exit {
  to {
    opacity: 1;
    opacity: var(--univer-tw-exit-opacity, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0);
    transform: translate3d(var(--univer-tw-exit-translate-x, 0), var(--univer-tw-exit-translate-y, 0), 0) scale3d(var(--univer-tw-exit-scale, 1), var(--univer-tw-exit-scale, 1), var(--univer-tw-exit-scale, 1)) rotate(var(--univer-tw-exit-rotate, 0));
  }
}

.univer-animate-in {
  --univer-tw-enter-opacity: initial;
  --univer-tw-enter-scale: initial;
  --univer-tw-enter-rotate: initial;
  --univer-tw-enter-translate-x: initial;
  --univer-tw-enter-translate-y: initial;
  animation-name: enter;
  animation-duration: .15s;
}

.univer-animate-out {
  --univer-tw-exit-opacity: initial;
  --univer-tw-exit-scale: initial;
  --univer-tw-exit-rotate: initial;
  --univer-tw-exit-translate-x: initial;
  --univer-tw-exit-translate-y: initial;
  animation-name: exit;
  animation-duration: .15s;
}

.univer-fade-in, .univer-fade-in-0 {
  --univer-tw-enter-opacity: 0;
}

.univer-fade-out {
  --univer-tw-exit-opacity: 0;
}

.univer-zoom-in-95 {
  --univer-tw-enter-scale: .95;
}

.univer-duration-150 {
  animation-duration: .15s;
}

.univer-duration-200 {
  animation-duration: .2s;
}

.univer-duration-300 {
  animation-duration: .3s;
}

.univer-duration-500 {
  animation-duration: .5s;
}

.univer-duration-75 {
  animation-duration: 75ms;
}

.univer-ease-in-out {
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.univer-ease-out {
  animation-timing-function: cubic-bezier(0, 0, .2, 1);
}

.placeholder\:univer-text-gray-200::-moz-placeholder {
  color: var(--univer-gray-200);
}

.placeholder\:univer-text-gray-200::placeholder {
  color: var(--univer-gray-200);
}

.placeholder\:univer-text-gray-400::-moz-placeholder {
  color: var(--univer-gray-400);
}

.placeholder\:univer-text-gray-400::placeholder {
  color: var(--univer-gray-400);
}

.before\:univer-absolute:before {
  content: var(--univer-tw-content);
  position: absolute;
}

.before\:univer-top-1\/2:before {
  content: var(--univer-tw-content);
  top: 50%;
}

.before\:univer-block:before {
  content: var(--univer-tw-content);
  display: block;
}

.before\:univer-h-px:before {
  content: var(--univer-tw-content);
  height: 1px;
}

.before\:univer-w-full:before {
  content: var(--univer-tw-content);
  width: 100%;
}

.before\:-univer-translate-y-1\/2:before {
  content: var(--univer-tw-content);
  --univer-tw-translate-y: -50%;
  transform: translate(var(--univer-tw-translate-x), -50%) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
}

.before\:univer-bg-gray-200:before {
  content: var(--univer-tw-content);
  background-color: var(--univer-gray-200);
}

.before\:univer-content-\[\"\"\]:before {
  --univer-tw-content: "";
  content: "";
  content: var(--univer-tw-content);
}

.last\:univer-mb-0:last-child {
  margin-bottom: 0;
}

.data-\[disabled\]\:univer-pointer-events-none[data-disabled] {
  pointer-events: none;
}

.data-\[orientation\=horizontal\]\:univer-h-px[data-orientation="horizontal"] {
  height: 1px;
}

.data-\[orientation\=vertical\]\:univer-h-full[data-orientation="vertical"] {
  height: 100%;
}

.data-\[orientation\=horizontal\]\:univer-w-full[data-orientation="horizontal"] {
  width: 100%;
}

.data-\[orientation\=vertical\]\:univer-w-px[data-orientation="vertical"] {
  width: 1px;
}

.data-\[state\=open\]\:univer-bg-gray-100[data-state="open"] {
  background-color: var(--univer-gray-100);
}

.data-\[disabled\]\:univer-opacity-50[data-disabled] {
  opacity: .5;
}

.data-\[state\=open\]\:univer-animate-in[data-state="open"] {
  --univer-tw-enter-opacity: initial;
  --univer-tw-enter-scale: initial;
  --univer-tw-enter-rotate: initial;
  --univer-tw-enter-translate-x: initial;
  --univer-tw-enter-translate-y: initial;
  animation-name: enter;
  animation-duration: .15s;
}

.data-\[state\=closed\]\:univer-animate-out[data-state="closed"] {
  --univer-tw-exit-opacity: initial;
  --univer-tw-exit-scale: initial;
  --univer-tw-exit-rotate: initial;
  --univer-tw-exit-translate-x: initial;
  --univer-tw-exit-translate-y: initial;
  animation-name: exit;
  animation-duration: .15s;
}

.data-\[state\=closed\]\:univer-fade-out-0[data-state="closed"] {
  --univer-tw-exit-opacity: 0;
}

.data-\[state\=open\]\:univer-fade-in-0[data-state="open"] {
  --univer-tw-enter-opacity: 0;
}

.data-\[state\=closed\]\:univer-zoom-out-95[data-state="closed"] {
  --univer-tw-exit-scale: .95;
}

.data-\[state\=open\]\:univer-zoom-in-95[data-state="open"] {
  --univer-tw-enter-scale: .95;
}

.data-\[side\=bottom\]\:univer-slide-in-from-top-2[data-side="bottom"] {
  --univer-tw-enter-translate-y: -.5rem;
}

.data-\[side\=left\]\:univer-slide-in-from-right-2[data-side="left"] {
  --univer-tw-enter-translate-x: .5rem;
}

.data-\[side\=right\]\:univer-slide-in-from-left-2[data-side="right"] {
  --univer-tw-enter-translate-x: -.5rem;
}

.data-\[side\=top\]\:univer-slide-in-from-bottom-2[data-side="top"] {
  --univer-tw-enter-translate-y: .5rem;
}

.data-\[state\=closed\]\:univer-slide-out-to-left-1\/2[data-state="closed"] {
  --univer-tw-exit-translate-x: -50%;
}

.data-\[state\=closed\]\:univer-slide-out-to-top-\[48\%\][data-state="closed"] {
  --univer-tw-exit-translate-y: -48%;
}

.data-\[state\=open\]\:univer-slide-in-from-left-1\/2[data-state="open"] {
  --univer-tw-enter-translate-x: -50%;
}

.data-\[state\=open\]\:univer-slide-in-from-top-\[48\%\][data-state="open"] {
  --univer-tw-enter-translate-y: -48%;
}

.hover\:univer-border-primary-600:hover {
  border-color: var(--univer-primary-600);
}

.hover\:univer-border-red-400:hover {
  border-color: var(--univer-red-400);
}

.hover\:univer-border-transparent:hover {
  border-color: #0000;
}

.hover\:univer-bg-gray-100:hover {
  background-color: var(--univer-gray-100);
}

.hover\:univer-bg-gray-200:hover {
  background-color: var(--univer-gray-200);
}

.hover\:univer-bg-gray-50:hover {
  background-color: var(--univer-gray-50);
}

.hover\:univer-bg-primary-500:hover {
  background-color: var(--univer-primary-500);
}

.hover\:univer-bg-red-400:hover {
  background-color: var(--univer-red-400);
}

.hover\:univer-text-gray-500:hover {
  color: var(--univer-gray-500);
}

.hover\:univer-text-gray-900:hover {
  color: var(--univer-gray-900);
}

.hover\:univer-text-primary-500:hover {
  color: var(--univer-primary-500);
}

.hover\:univer-text-white:hover {
  color: var(--univer-white);
}

.hover\:univer-underline:hover {
  text-decoration-line: underline;
}

.hover\:univer-opacity-100:hover {
  opacity: 1;
}

.hover\:univer-opacity-70:hover {
  opacity: .7;
}

.hover\:univer-opacity-80:hover {
  opacity: .8;
}

.focus\:univer-border-primary-500:focus {
  border-color: var(--univer-primary-500);
}

.focus\:univer-border-primary-600:focus {
  border-color: var(--univer-primary-600);
}

.focus\:univer-bg-gray-100:focus {
  background-color: var(--univer-gray-100);
}

.focus\:univer-outline-none:focus {
  outline-offset: 2px;
  outline: 2px solid #0000;
}

.focus\:univer-ring-2:focus {
  --univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);
  --univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(2px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);
  box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), var(--univer-tw-shadow, 0 0 #0000);
}

.focus\:univer-ring-primary-50:focus {
  --univer-tw-ring-color: var(--univer-primary-50);
}

.active\:univer-border-red-600:active {
  border-color: var(--univer-red-600);
}

.active\:univer-bg-gray-200:active {
  background-color: var(--univer-gray-200);
}

.active\:univer-bg-primary-700:active {
  background-color: var(--univer-primary-700);
}

.active\:univer-bg-red-600:active {
  background-color: var(--univer-red-600);
}

.active\:univer-text-primary-700:active {
  color: var(--univer-primary-700);
}

.disabled\:univer-pointer-events-none:disabled {
  pointer-events: none;
}

.disabled\:univer-cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:univer-opacity-50:disabled {
  opacity: .5;
}

@media (min-width: 640px) {
  .sm\:\!univer-flex-row {
    flex-direction: row !important;
  }

  .sm\:\!univer-justify-end {
    justify-content: flex-end !important;
  }

  .sm\:\!univer-space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --univer-tw-space-x-reverse: 0 !important;
    margin-right: 0 !important;
    margin-right: calc(.5rem * var(--univer-tw-space-x-reverse)) !important;
    margin-left: calc(.5rem * (1 - var(--univer-tw-space-x-reverse))) !important;
    margin-left: .5rem !important;
    margin-left: calc(.5rem * calc(1 - var(--univer-tw-space-x-reverse))) !important;
  }

  .sm\:\!univer-rounded-lg {
    border-radius: .5rem !important;
  }

  .sm\:\!univer-text-left {
    text-align: left !important;
  }
}

@media (min-width: 768px) {
  .md\:univer-grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dark\:\!univer-divide-gray-600:where(.univer-dark, .univer-dark *) > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--univer-gray-600) !important;
}

.dark\:\!univer-border-gray-500:where(.univer-dark, .univer-dark *) {
  border-color: var(--univer-gray-500) !important;
}

.dark\:\!univer-border-gray-600:where(.univer-dark, .univer-dark *) {
  border-color: var(--univer-gray-600) !important;
}

.dark\:\!univer-border-gray-700:where(.univer-dark, .univer-dark *) {
  border-color: var(--univer-gray-700) !important;
}

.dark\:\!univer-border-primary-700:where(.univer-dark, .univer-dark *) {
  border-color: var(--univer-primary-700) !important;
}

.dark\:\!univer-bg-gray-100:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-100) !important;
}

.dark\:\!univer-bg-gray-500:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-500) !important;
}

.dark\:\!univer-bg-gray-600:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-600) !important;
}

.dark\:\!univer-bg-gray-700:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-700) !important;
}

.dark\:\!univer-bg-gray-800:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-800) !important;
}

.dark\:\!univer-bg-gray-900:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-900) !important;
}

.dark\:\!univer-bg-primary-600:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-primary-600) !important;
}

.dark\:\!univer-text-gray-100:where(.univer-dark, .univer-dark *) {
  color: var(--univer-gray-100) !important;
}

.dark\:\!univer-text-gray-200:where(.univer-dark, .univer-dark *) {
  color: var(--univer-gray-200) !important;
}

.dark\:\!univer-text-gray-300:where(.univer-dark, .univer-dark *) {
  color: var(--univer-gray-300) !important;
}

.dark\:\!univer-text-gray-400:where(.univer-dark, .univer-dark *) {
  color: var(--univer-gray-400) !important;
}

.dark\:\!univer-text-gray-500:where(.univer-dark, .univer-dark *) {
  color: var(--univer-gray-500) !important;
}

.dark\:\!univer-text-gray-900:where(.univer-dark, .univer-dark *) {
  color: var(--univer-gray-900) !important;
}

.dark\:\!univer-text-primary-500:where(.univer-dark, .univer-dark *) {
  color: var(--univer-primary-500) !important;
}

.dark\:\!univer-text-sky-400:where(.univer-dark, .univer-dark *) {
  --univer-tw-text-opacity: 1 !important;
  color: rgba(56, 189, 248, var(--univer-tw-text-opacity, 1)) !important;
}

.dark\:\!univer-text-white:where(.univer-dark, .univer-dark *) {
  color: var(--univer-white) !important;
}

.dark\:\!univer-ring-primary-600:where(.univer-dark, .univer-dark *) {
  --univer-tw-ring-color: var(--univer-primary-600) !important;
}

.dark\:\!univer-ring-primary-900:where(.univer-dark, .univer-dark *) {
  --univer-tw-ring-color: var(--univer-primary-900) !important;
}

.dark\:\!univer-ring-offset-gray-600:where(.univer-dark, .univer-dark *) {
  --univer-tw-ring-offset-color: var(--univer-gray-600) !important;
}

.dark\:\!univer-scrollbar-track-gray-900:where(.univer-dark, .univer-dark *) {
  --scrollbar-track: var(--univer-gray-900) !important;
}

.dark\:\!univer-scrollbar-thumb-gray-700:where(.univer-dark, .univer-dark *) {
  --scrollbar-thumb: var(--univer-gray-700) !important;
}

.dark\:before\:\!univer-bg-gray-600:where(.univer-dark, .univer-dark *):before {
  content: var(--univer-tw-content);
  background-color: var(--univer-gray-600) !important;
}

.dark\:data-\[state\=open\]\:\!univer-bg-gray-600[data-state="open"]:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-600) !important;
}

.dark\:hover\:\!univer-bg-gray-600:hover:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-600) !important;
}

.dark\:hover\:\!univer-bg-gray-700:hover:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-700) !important;
}

.dark\:hover\:\!univer-text-white:hover:where(.univer-dark, .univer-dark *) {
  color: var(--univer-white) !important;
}

.dark\:focus\:\!univer-border-primary-500:focus:where(.univer-dark, .univer-dark *) {
  border-color: var(--univer-primary-500) !important;
}

.dark\:focus\:\!univer-bg-gray-600:focus:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-600) !important;
}

.dark\:focus\:\!univer-ring-primary-900:focus:where(.univer-dark, .univer-dark *) {
  --univer-tw-ring-color: var(--univer-primary-900) !important;
}

.dark\:focus-visible\:\!univer-border-gray-600:focus-visible:where(.univer-dark, .univer-dark *) {
  border-color: var(--univer-gray-600) !important;
}

.dark\:active\:\!univer-bg-gray-600:active:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-600) !important;
}

.dark\:active\:\!univer-bg-gray-700:active:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-700) !important;
}

.\[\&\:\:-webkit-calendar-picker-indicator\]\:univer-hidden::-webkit-calendar-picker-indicator {
  display: none;
}

.\[\&\:\:-webkit-calendar-picker-indicator\]\:univer-appearance-none::-webkit-calendar-picker-indicator {
  -webkit-appearance: none;
  appearance: none;
}

.\[\&\>input\]\:univer-w-11 > input {
  width: 2.75rem;
}

.\[\&\>input\]\:univer-border-gray-200 > input {
  border-color: var(--univer-gray-200);
}

.\[\&\>input\]\:focus\:univer-border-primary-500:focus > input {
  border-color: var(--univer-primary-500);
}

.dark\:\[\&\>input\]\:\!univer-border-gray-600 > input:where(.univer-dark, .univer-dark *) {
  border-color: var(--univer-gray-600) !important;
}

.dark\:\[\&\>input\]\:\!univer-text-white > input:where(.univer-dark, .univer-dark *) {
  color: var(--univer-white) !important;
}

.\[\&\>svg\]\:univer-block > svg {
  display: block;
}

.\[\&\>svg\]\:univer-size-4 > svg {
  width: 1rem;
  height: 1rem;
}

.\[\&\>svg\]\:univer-shrink-0 > svg {
  flex-shrink: 0;
}

.\[\&\>ul\:not\(\:last-child\)\]\:univer-border-0 > ul:not(:last-child) {
  border-width: 0;
}

.\[\&\>ul\:not\(\:last-child\)\]\:univer-border-r > ul:not(:last-child) {
  border-right-width: 1px;
}

.\[\&\>ul\:not\(\:last-child\)\]\:univer-border-solid > ul:not(:last-child) {
  border-style: solid;
}

.\[\&\>ul\:not\(\:last-child\)\]\:univer-border-r-gray-200 > ul:not(:last-child) {
  border-right-color: var(--univer-gray-200);
}

.\[\&_\[data-description\]\]\:univer-text-sm [data-description] {
  font-size: .875rem;
  line-height: 1.25rem;
}

.\[\&_\[data-description\]\]\:univer-text-gray-200 [data-description] {
  color: var(--univer-gray-200);
}

.\[\&_\[data-description\]\]\:univer-text-gray-600 [data-description] {
  color: var(--univer-gray-600);
}

.\[\&_\[data-icon\]\>svg\]\:univer-relative [data-icon] > svg {
  position: relative;
}

.\[\&_\[data-icon\]\>svg\]\:univer-top-1 [data-icon] > svg {
  top: .25rem;
}

.\[\&_\[data-icon\]\]\:univer-self-baseline [data-icon] {
  align-self: baseline;
}

.\[\&_\[data-icon\]\]\:univer-text-amber-500 [data-icon] {
  --univer-tw-text-opacity: 1;
  color: rgba(245, 158, 11, var(--univer-tw-text-opacity, 1));
}

.\[\&_\[data-icon\]\]\:univer-text-green-500 [data-icon] {
  color: var(--univer-green-500);
}

.\[\&_\[data-icon\]\]\:univer-text-primary-600 [data-icon] {
  color: var(--univer-primary-600);
}

.\[\&_\[data-icon\]\]\:univer-text-red-500 [data-icon] {
  color: var(--univer-red-500);
}

.\[\&_\[data-icon\]\]\:univer-text-sky-500 [data-icon] {
  --univer-tw-text-opacity: 1;
  color: rgba(14, 165, 233, var(--univer-tw-text-opacity, 1));
}

.\[\&_\[data-icon\]\]\:univer-text-violet-500 [data-icon] {
  --univer-tw-text-opacity: 1;
  color: rgba(139, 92, 246, var(--univer-tw-text-opacity, 1));
}

.\[\&_\[data-icon\]\]\:univer-text-yellow-500 [data-icon] {
  color: var(--univer-yellow-500);
}

.\[\&_\[data-sonner-toast\]\]\:univer-rounded-2xl [data-sonner-toast] {
  border-radius: 1rem;
}

.\[\&_\[data-sonner-toast\]\]\:univer-border [data-sonner-toast] {
  border-width: 1px;
}

.\[\&_\[data-sonner-toast\]\]\:univer-border-solid [data-sonner-toast] {
  border-style: solid;
}

.\[\&_\[data-sonner-toast\]\]\:univer-border-gray-200 [data-sonner-toast] {
  border-color: var(--univer-gray-200);
}

.\[\&_\[data-sonner-toast\]\]\:univer-shadow-\[0_16px_40px_-20px_rgba\(15\,23\,42\,0\.55\)\] [data-sonner-toast] {
  --univer-tw-shadow: 0 16px 40px -20px #0f172a8c;
  --univer-tw-shadow-colored: 0 16px 40px -20px var(--univer-tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 16px 40px -20px #0f172a8c;
  box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow);
}

.\[\&_\[data-sonner-toast\]\]\:univer-shadow-md [data-sonner-toast] {
  --univer-tw-shadow: 0px 1px 6px -2px #1e284d14, 0px 2px 6px -1px #1e284d1a;
  --univer-tw-shadow-colored: 0px 1px 6px -2px var(--univer-tw-shadow-color), 0px 2px 6px -1px var(--univer-tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 6px -2px #1e284d14, 0 2px 6px -1px #1e284d1a;
  box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow);
}

.\[\&_\[data-sonner-toast\]\]\:univer-backdrop-blur-sm [data-sonner-toast] {
  --univer-tw-backdrop-blur: blur(4px);
  backdrop-filter: var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia);
}

.dark\:\[\&_\[data-sonner-toast\]\]\:\!univer-border-gray-600 [data-sonner-toast]:where(.univer-dark, .univer-dark *) {
  border-color: var(--univer-gray-600) !important;
}

.\[\&_\[data-title\]\]\:univer-text-sm [data-title] {
  font-size: .875rem;
  line-height: 1.25rem;
}

.\[\&_\[data-title\]\]\:univer-text-gray-900 [data-title] {
  color: var(--univer-gray-900);
}

.\[\&_\[data-u-comp\=form-layout\]\]\:univer-max-w-\[calc\(50\%-8px\)\] [data-u-comp="form-layout"] {
  max-width: calc(50% - 8px);
}

.\[\&_\[data-u-comp\=form-layout\]\]\:univer-shrink [data-u-comp="form-layout"] {
  flex-shrink: 1;
}

.\[\&_\[data-u-comp\=form-layout\]\]\:univer-grow [data-u-comp="form-layout"] {
  flex-grow: 1;
}

.\[\&_\[data-u-comp\=input\]\]\:univer-w-full [data-u-comp="input"] {
  width: 100%;
}

.\[\&_\[data-u-comp\=input\]\]\:univer-border-red-500 [data-u-comp="input"] {
  border-color: var(--univer-red-500);
}

.\[\&_\[data-u-comp\=pager-left-arrow\]\:hover\]\:\!univer-bg-gray-600 [data-u-comp="pager-left-arrow"]:hover, .\[\&_\[data-u-comp\=pager-right-arrow\]\:hover\]\:\!univer-bg-gray-600 [data-u-comp="pager-right-arrow"]:hover {
  background-color: var(--univer-gray-600) !important;
}

.\[\&_\[data-u-comp\=select\]\]\:univer-w-full [data-u-comp="select"] {
  width: 100%;
}

.\[\&_\[data-u-comp\=select\]\]\:univer-border-red-500 [data-u-comp="select"] {
  border-color: var(--univer-red-500);
}

.\[\&_input\]\:univer-box-border input {
  box-sizing: border-box;
}

.\[\&_input\]\:univer-flex input {
  display: flex;
}

.\[\&_input\]\:univer-h-7 input {
  height: 1.75rem;
}

.\[\&_input\]\:univer-items-center input {
  align-items: center;
}

.\[\&_input\]\:univer-rounded input {
  border-radius: .25rem;
}

.\[\&_input\]\:univer-border input {
  border-width: 1px;
}

.\[\&_input\]\:univer-border-solid input {
  border-style: solid;
}

.\[\&_input\]\:univer-border-gray-200 input {
  border-color: var(--univer-gray-200);
}

.\[\&_input\]\:univer-border-gray-600 input {
  border-color: var(--univer-gray-600);
}

.\[\&_input\]\:univer-bg-transparent input {
  background-color: #0000;
}

.\[\&_input\]\:univer-px-1\.5 input {
  padding-left: .375rem;
  padding-right: .375rem;
}

.\[\&_input\]\:univer-text-sm input {
  font-size: .875rem;
  line-height: 1.25rem;
}

.\[\&_input\]\:univer-text-gray-700 input {
  color: var(--univer-gray-700);
}

.\[\&_input\]\:univer-text-white input {
  color: var(--univer-white);
}

.\[\&_input\]\:univer-outline-none input {
  outline-offset: 2px;
  outline: 2px solid #0000;
}

.\[\&_svg\]\:univer-pointer-events-none svg {
  pointer-events: none;
}

.\[\&_svg\]\:univer-size-4 svg {
  width: 1rem;
  height: 1rem;
}

.\[\&_svg\]\:univer-shrink-0 svg {
  flex-shrink: 0;
}
.univer-popup {
  z-index: 1070;
  --univer-tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
  --univer-tw-shadow-colored: 0 1px 3px 0 var(--univer-tw-shadow-color), 0 1px 2px -1px var(--univer-tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 3px #0000001a, 0 1px 2px -1px #0000001a;
  box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow);
  border-radius: 6px;
  position: fixed;
  top: -9999px;
  left: -9999px;
  overflow: hidden;
}

.univer-popup-enter {
  transform-origin: 0 0;
  opacity: 0;
  animation-duration: .15s;
  animation-timing-function: cubic-bezier(.08, .82, .17, 1);
  animation-play-state: paused;
  animation-fill-mode: both;
}

.univer-popup-enter-active {
  animation-name: popup-slide-up-in;
  animation-play-state: running;
}

.univer-popup-exit {
  transform-origin: 0 0;
  opacity: 1;
  animation-name: popup-slide-up-out;
  animation-duration: .15s;
  animation-timing-function: cubic-bezier(.6, .04, .98, .34);
  animation-play-state: running;
  animation-fill-mode: both;
}

.univer-popup-exit-active {
  display: none;
}

@keyframes popup-slide-up-in {
  0% {
    transform-origin: 0 0;
    opacity: 0;
    transform: scaleY(0);
  }

  100% {
    transform-origin: 0 0;
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes popup-slide-up-out {
  0% {
    transform-origin: 0 0;
    opacity: 1;
    transform: scaleY(1);
  }

  100% {
    transform-origin: 0 0;
    opacity: 0;
    transform: scaleY(0);
  }
}

.univer-popup-mask {
  z-index: 1060;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.univer-pointer-events-none {
  pointer-events: none;
}

.univer-pointer-events-auto {
  pointer-events: auto;
}

.univer-invisible {
  visibility: hidden;
}

.univer-fixed {
  position: fixed;
}

.univer-absolute {
  position: absolute;
}

.univer-relative {
  position: relative;
}

.univer-sticky {
  position: sticky;
}

.univer-inset-0 {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.-univer-left-\[99999\] {
  left: -99999px;
}

.-univer-top-\[99999\] {
  top: -99999px;
}

.univer-bottom-0 {
  bottom: 0;
}

.univer-left-0 {
  left: 0;
}

.univer-left-1 {
  left: .25rem;
}

.univer-left-1\/2 {
  left: 50%;
}

.univer-left-\[-9999px\] {
  left: -9999px;
}

.univer-right-0 {
  right: 0;
}

.univer-right-2 {
  right: .5rem;
}

.univer-top-0 {
  top: 0;
}

.univer-top-0\.5 {
  top: .125rem;
}

.univer-top-1\/2 {
  top: 50%;
}

.univer-top-\[-9999px\] {
  top: -9999px;
}

.univer-top-\[calc\(50\%-6px\)\] {
  top: calc(50% - 6px);
}

.univer-z-10 {
  z-index: 10;
}

.univer-z-\[-1\] {
  z-index: -1;
}

.univer-z-\[100\] {
  z-index: 100;
}

.univer-z-\[1020\] {
  z-index: 1020;
}

.univer-z-\[1080\] {
  z-index: 1080;
}

.univer-z-\[1\] {
  z-index: 1;
}

.univer-m-0 {
  margin: 0;
}

.univer-mx-2 {
  margin-left: .5rem;
  margin-right: .5rem;
}

.univer-mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.univer-mb-0 {
  margin-bottom: 0;
}

.univer-mr-2 {
  margin-right: .5rem;
}

.univer-mt-2 {
  margin-top: .5rem;
}

.univer-mt-6 {
  margin-top: 1.5rem;
}

.univer-box-border {
  box-sizing: border-box;
}

.univer-line-clamp-2 {
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.univer-block {
  display: block;
}

.univer-flex {
  display: flex;
}

.univer-inline-flex {
  display: inline-flex;
}

.univer-grid {
  display: grid;
}

.univer-hidden {
  display: none;
}

.univer-size-0\.5 {
  width: .125rem;
  height: .125rem;
}

.univer-size-12 {
  width: 3rem;
  height: 3rem;
}

.univer-size-3 {
  width: .75rem;
  height: .75rem;
}

.univer-size-3\.5 {
  width: .875rem;
  height: .875rem;
}

.univer-size-4 {
  width: 1rem;
  height: 1rem;
}

.univer-size-6 {
  width: 1.5rem;
  height: 1.5rem;
}

.univer-size-7 {
  width: 1.75rem;
  height: 1.75rem;
}

.univer-size-8 {
  width: 2rem;
  height: 2rem;
}

.univer-size-9 {
  width: 2.25rem;
  height: 2.25rem;
}

.univer-size-full {
  width: 100%;
  height: 100%;
}

.univer-h-0 {
  height: 0;
}

.univer-h-0\.5 {
  height: .125rem;
}

.univer-h-1 {
  height: .25rem;
}

.univer-h-1\.5 {
  height: .375rem;
}

.univer-h-10 {
  height: 2.5rem;
}

.univer-h-6 {
  height: 1.5rem;
}

.univer-h-7 {
  height: 1.75rem;
}

.univer-h-8 {
  height: 2rem;
}

.univer-h-9 {
  height: 2.25rem;
}

.univer-h-full {
  height: 100%;
}

.univer-max-h-\[80vh\] {
  max-height: 80vh;
}

.univer-max-h-\[min\(72vh\,560px\)\] {
  max-height: min(72vh, 560px);
}

.univer-min-h-0 {
  min-height: 0;
}

.univer-min-h-8 {
  min-height: 2rem;
}

.univer-min-h-\[560px\] {
  min-height: 560px;
}

.univer-min-h-\[56px\] {
  min-height: 56px;
}

.univer-min-h-full {
  min-height: 100%;
}

.univer-w-0 {
  width: 0;
}

.univer-w-10 {
  width: 2.5rem;
}

.univer-w-24 {
  width: 6rem;
}

.univer-w-32 {
  width: 8rem;
}

.univer-w-40 {
  width: 10rem;
}

.univer-w-5 {
  width: 1.25rem;
}

.univer-w-7 {
  width: 1.75rem;
}

.univer-w-8 {
  width: 2rem;
}

.univer-w-96 {
  width: 24rem;
}

.univer-w-full {
  width: 100%;
}

.univer-w-max {
  width: -moz-max-content;
  width: max-content;
}

.univer-w-screen {
  width: 100vw;
}

.univer-min-w-0 {
  min-width: 0;
}

.univer-min-w-52 {
  min-width: 13rem;
}

.univer-min-w-6 {
  min-width: 1.5rem;
}

.univer-min-w-min {
  min-width: -moz-min-content;
  min-width: min-content;
}

.univer-max-w-3xl {
  max-width: 48rem;
}

.univer-max-w-5xl {
  max-width: 64rem;
}

.univer-max-w-96 {
  max-width: 24rem;
}

.univer-max-w-\[--radix-popper-available-width\] {
  max-width: var(--radix-popper-available-width);
}

.univer-max-w-\[32\%\] {
  max-width: 32%;
}

.univer-max-w-\[560px\] {
  max-width: 560px;
}

.univer-max-w-\[calc\(100vw-16px\)\] {
  max-width: calc(100vw - 16px);
}

.univer-max-w-full {
  max-width: 100%;
}

.univer-flex-1 {
  flex: 1;
}

.univer-flex-shrink-0, .univer-shrink-0 {
  flex-shrink: 0;
}

.univer-origin-center {
  transform-origin: center;
}

.-univer-translate-x-1\/2 {
  --univer-tw-translate-x: -50%;
  transform: translate(-50%, var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
}

.-univer-translate-y-1\/2 {
  --univer-tw-translate-y: -50%;
  transform: translate(var(--univer-tw-translate-x), -50%) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
}

.univer-translate-x-0 {
  --univer-tw-translate-x: 0px;
  transform: translate(0px, var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
}

.univer-translate-x-full {
  --univer-tw-translate-x: 100%;
  transform: translate(100%, var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
}

.univer-rotate-180 {
  --univer-tw-rotate: 180deg;
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(180deg) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
}

.univer-cursor-default {
  cursor: default;
}

.univer-cursor-not-allowed {
  cursor: not-allowed;
}

.univer-cursor-pointer {
  cursor: pointer;
}

.univer-select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.univer-list-none {
  list-style-type: none;
}

.univer-appearance-none {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.univer-grid-flow-col {
  grid-auto-flow: column;
}

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

.univer-grid-cols-\[1fr\] {
  grid-template-columns: 1fr;
}

.univer-grid-cols-\[22px_minmax\(0\,1fr\)_22px\] {
  grid-template-columns: 22px minmax(0, 1fr) 22px;
}

.univer-grid-cols-\[28px_minmax\(0\,1fr\)_auto\] {
  grid-template-columns: 28px minmax(0, 1fr) auto;
}

.univer-grid-cols-\[32px_minmax\(0\,1fr\)_32px\] {
  grid-template-columns: 32px minmax(0, 1fr) 32px;
}

.univer-grid-cols-\[auto\,1fr\] {
  grid-template-columns: auto 1fr;
}

.univer-grid-cols-\[auto_1fr_auto\] {
  grid-template-columns: auto 1fr auto;
}

.univer-grid-cols-none {
  grid-template-columns: none;
}

.univer-grid-rows-\[100\%\] {
  grid-template-rows: 100%;
}

.univer-grid-rows-\[auto_1fr\] {
  grid-template-rows: auto 1fr;
}

.univer-grid-rows-\[auto_1fr_auto\] {
  grid-template-rows: auto 1fr auto;
}

.univer-flex-col {
  flex-direction: column;
}

.univer-flex-wrap {
  flex-wrap: wrap;
}

.univer-items-end {
  align-items: flex-end;
}

.univer-items-center {
  align-items: center;
}

.univer-justify-center {
  justify-content: center;
}

.univer-justify-between {
  justify-content: space-between;
}

.univer-gap-0\.5 {
  gap: .125rem;
}

.univer-gap-1 {
  gap: .25rem;
}

.univer-gap-1\.5 {
  gap: .375rem;
}

.univer-gap-2 {
  gap: .5rem;
}

.univer-gap-2\.5 {
  gap: .625rem;
}

.univer-gap-3 {
  gap: .75rem;
}

.univer-gap-6 {
  gap: 1.5rem;
}

.univer-overflow-hidden {
  overflow: hidden;
}

.univer-overflow-x-auto {
  overflow-x: auto;
}

.univer-overflow-y-auto {
  overflow-y: auto;
}

.univer-overscroll-contain {
  overscroll-behavior: contain;
}

.univer-scroll-smooth {
  scroll-behavior: smooth;
}

.univer-truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.univer-whitespace-nowrap {
  white-space: nowrap;
}

.univer-break-words {
  word-wrap: break-word;
}

.\!univer-rounded-full {
  border-radius: 9999px !important;
}

.\!univer-rounded-xl {
  border-radius: .75rem !important;
}

.univer-rounded {
  border-radius: .25rem;
}

.univer-rounded-2xl {
  border-radius: 1rem;
}

.univer-rounded-3xl {
  border-radius: 1.5rem;
}

.univer-rounded-full {
  border-radius: 9999px;
}

.univer-rounded-lg {
  border-radius: .5rem;
}

.univer-rounded-md {
  border-radius: .375rem;
}

.univer-rounded-sm {
  border-radius: .125rem;
}

.univer-rounded-xl {
  border-radius: .75rem;
}

.univer-rounded-l {
  border-top-left-radius: .25rem;
  border-bottom-left-radius: .25rem;
}

.univer-rounded-r {
  border-top-right-radius: .25rem;
  border-bottom-right-radius: .25rem;
}

.univer-rounded-t-\[28px\] {
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
}

.univer-border {
  border-width: 1px;
}

.univer-border-0 {
  border-width: 0;
}

.univer-border-b {
  border-bottom-width: 1px;
}

.univer-border-solid {
  border-style: solid;
}

.univer-border-none {
  border-style: none;
}

.univer-border-gray-200 {
  border-color: var(--univer-gray-200);
}

.\!univer-bg-gray-200 {
  background-color: var(--univer-gray-200) !important;
}

.\!univer-bg-gray-500 {
  background-color: var(--univer-gray-500) !important;
}

.\!univer-bg-gray-900 {
  background-color: var(--univer-gray-900) !important;
}

.univer-bg-\[rgba\(15\,23\,42\,0\.32\)\] {
  background-color: #0f172a52;
}

.univer-bg-gray-100 {
  background-color: var(--univer-gray-100);
}

.univer-bg-gray-200 {
  background-color: var(--univer-gray-200);
}

.univer-bg-gray-300 {
  background-color: var(--univer-gray-300);
}

.univer-bg-gray-400 {
  background-color: var(--univer-gray-400);
}

.univer-bg-gray-50 {
  background-color: var(--univer-gray-50);
}

.univer-bg-gray-700 {
  background-color: var(--univer-gray-700);
}

.univer-bg-primary-50 {
  background-color: var(--univer-primary-50);
}

.univer-bg-primary-600 {
  background-color: var(--univer-primary-600);
}

.univer-bg-transparent {
  background-color: #0000;
}

.univer-bg-white {
  background-color: var(--univer-white);
}

.univer-bg-gradient-to-tr {
  background-image: linear-gradient(to top right, var(--univer-tw-gradient-stops));
}

.univer-from-slate-950 {
  --univer-tw-gradient-from: #020617 var(--univer-tw-gradient-from-position);
  --univer-tw-gradient-to: #02061700 var(--univer-tw-gradient-to-position);
  --univer-tw-gradient-stops: var(--univer-tw-gradient-from), var(--univer-tw-gradient-to);
}

.univer-via-blue-950 {
  --univer-tw-gradient-to: #17255400  var(--univer-tw-gradient-to-position);
  --univer-tw-gradient-stops: var(--univer-tw-gradient-from), #172554 var(--univer-tw-gradient-via-position), var(--univer-tw-gradient-to);
}

.univer-to-cyan-900 {
  --univer-tw-gradient-to: #164e63 var(--univer-tw-gradient-to-position);
}

.univer-p-0 {
  padding: 0;
}

.univer-p-1 {
  padding: .25rem;
}

.univer-p-2 {
  padding: .5rem;
}

.univer-p-4 {
  padding: 1rem;
}

.univer-p-8 {
  padding: 2rem;
}

.univer-px-0 {
  padding-left: 0;
  padding-right: 0;
}

.univer-px-0\.5 {
  padding-left: .125rem;
  padding-right: .125rem;
}

.univer-px-1 {
  padding-left: .25rem;
  padding-right: .25rem;
}

.univer-px-1\.5 {
  padding-left: .375rem;
  padding-right: .375rem;
}

.univer-px-2 {
  padding-left: .5rem;
  padding-right: .5rem;
}

.univer-px-3 {
  padding-left: .75rem;
  padding-right: .75rem;
}

.univer-px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.univer-py-0\.5 {
  padding-top: .125rem;
  padding-bottom: .125rem;
}

.univer-py-1 {
  padding-top: .25rem;
  padding-bottom: .25rem;
}

.univer-py-1\.5 {
  padding-top: .375rem;
  padding-bottom: .375rem;
}

.univer-py-3 {
  padding-top: .75rem;
  padding-bottom: .75rem;
}

.univer-pb-1 {
  padding-bottom: .25rem;
}

.univer-pb-2 {
  padding-bottom: .5rem;
}

.univer-pb-3 {
  padding-bottom: .75rem;
}

.univer-pl-2 {
  padding-left: .5rem;
}

.univer-pl-3 {
  padding-left: .75rem;
}

.univer-pl-4 {
  padding-left: 1rem;
}

.univer-pl-6 {
  padding-left: 1.5rem;
}

.univer-pr-1\.5 {
  padding-right: .375rem;
}

.univer-pr-2 {
  padding-right: .5rem;
}

.univer-pr-5 {
  padding-right: 1.25rem;
}

.univer-pt-1 {
  padding-top: .25rem;
}

.univer-pt-3 {
  padding-top: .75rem;
}

.univer-text-left {
  text-align: left;
}

.univer-text-center {
  text-align: center;
}

.univer-text-right {
  text-align: right;
}

.univer-font-sans {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

.univer-text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.univer-text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.univer-text-sm {
  font-size: .875rem;
  line-height: 1.25rem;
}

.univer-text-xs {
  font-size: .75rem;
  line-height: 1rem;
}

.univer-font-bold {
  font-weight: 700;
}

.univer-font-medium {
  font-weight: 500;
}

.univer-font-semibold {
  font-weight: 600;
}

.univer-uppercase {
  text-transform: uppercase;
}

.univer-leading-4 {
  line-height: 1rem;
}

.univer-leading-6 {
  line-height: 1.5rem;
}

.univer-leading-none {
  line-height: 1;
}

.univer-tracking-\[0\.08em\] {
  letter-spacing: .08em;
}

.univer-tracking-tight {
  letter-spacing: -.025em;
}

.\!univer-text-gray-600 {
  color: var(--univer-gray-600) !important;
}

.\!univer-text-white {
  color: var(--univer-white) !important;
}

.univer-text-current {
  color: currentColor;
}

.univer-text-gray-200 {
  color: var(--univer-gray-200);
}

.univer-text-gray-300 {
  color: var(--univer-gray-300);
}

.univer-text-gray-400 {
  color: var(--univer-gray-400);
}

.univer-text-gray-500 {
  color: var(--univer-gray-500);
}

.univer-text-gray-600 {
  color: var(--univer-gray-600);
}

.univer-text-gray-700 {
  color: var(--univer-gray-700);
}

.univer-text-gray-800 {
  color: var(--univer-gray-800);
}

.univer-text-gray-900 {
  color: var(--univer-gray-900);
}

.univer-text-primary-600 {
  color: var(--univer-primary-600);
}

.univer-text-primary-700 {
  color: var(--univer-primary-700);
}

.univer-text-slate-200 {
  --univer-tw-text-opacity: 1;
  color: rgba(226, 232, 240, var(--univer-tw-text-opacity, 1));
}

.univer-text-white {
  color: var(--univer-white);
}

.univer-underline {
  text-decoration-line: underline;
}

.univer-opacity-0 {
  opacity: 0;
}

.univer-opacity-30 {
  opacity: .3;
}

.univer-opacity-40 {
  opacity: .4;
}

.univer-opacity-60 {
  opacity: .6;
}

.univer-shadow {
  --univer-tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
  --univer-tw-shadow-colored: 0 1px 3px 0 var(--univer-tw-shadow-color), 0 1px 2px -1px var(--univer-tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 3px #0000001a, 0 1px 2px -1px #0000001a;
  box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow);
}

.univer-shadow-\[0_-16px_48px_rgba\(15\,23\,42\,0\.18\)\] {
  --univer-tw-shadow: 0 -16px 48px #0f172a2e;
  --univer-tw-shadow-colored: 0 -16px 48px var(--univer-tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 -16px 48px #0f172a2e;
  box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow);
}

.univer-shadow-md {
  --univer-tw-shadow: 0px 1px 6px -2px #1e284d14, 0px 2px 6px -1px #1e284d1a;
  --univer-tw-shadow-colored: 0px 1px 6px -2px var(--univer-tw-shadow-color), 0px 2px 6px -1px var(--univer-tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 6px -2px #1e284d14, 0 2px 6px -1px #1e284d1a;
  box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow);
}

.univer-shadow-sm {
  --univer-tw-shadow: 0px 1px 2px 0px #1e284d14;
  --univer-tw-shadow-colored: 0px 1px 2px 0px var(--univer-tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px #1e284d14;
  box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow);
}

.univer-outline-none {
  outline-offset: 2px;
  outline: 2px solid #0000;
}

.univer-ring-0 {
  --univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);
  --univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(0px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);
  box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), var(--univer-tw-shadow, 0 0 #0000);
}

.univer-ring-1 {
  --univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);
  --univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(1px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);
  box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), var(--univer-tw-shadow, 0 0 #0000);
}

.univer-ring-primary-600 {
  --univer-tw-ring-color: var(--univer-primary-600);
}

.univer-backdrop-blur-\[2px\] {
  --univer-tw-backdrop-blur: blur(2px);
  backdrop-filter: var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia);
}

.univer-backdrop-blur-xl {
  --univer-tw-backdrop-blur: blur(24px);
  backdrop-filter: var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia);
}

.univer-transition-\[width\] {
  transition-property: width;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.univer-transition-all {
  transition-property: all;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.univer-transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

@keyframes enter {
  from {
    opacity: 1;
    opacity: var(--univer-tw-enter-opacity, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0);
    transform: translate3d(var(--univer-tw-enter-translate-x, 0), var(--univer-tw-enter-translate-y, 0), 0) scale3d(var(--univer-tw-enter-scale, 1), var(--univer-tw-enter-scale, 1), var(--univer-tw-enter-scale, 1)) rotate(var(--univer-tw-enter-rotate, 0));
  }
}

@keyframes exit {
  to {
    opacity: 1;
    opacity: var(--univer-tw-exit-opacity, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0);
    transform: translate3d(var(--univer-tw-exit-translate-x, 0), var(--univer-tw-exit-translate-y, 0), 0) scale3d(var(--univer-tw-exit-scale, 1), var(--univer-tw-exit-scale, 1), var(--univer-tw-exit-scale, 1)) rotate(var(--univer-tw-exit-rotate, 0));
  }
}

.univer-animate-in {
  --univer-tw-enter-opacity: initial;
  --univer-tw-enter-scale: initial;
  --univer-tw-enter-rotate: initial;
  --univer-tw-enter-translate-x: initial;
  --univer-tw-enter-translate-y: initial;
  animation-name: enter;
  animation-duration: .15s;
}

.univer-fade-in {
  --univer-tw-enter-opacity: 0;
}

.univer-fade-in-70 {
  --univer-tw-enter-opacity: .7;
}

.last\:univer-border-b-0:last-child {
  border-bottom-width: 0;
}

.hover\:univer-bg-gray-100:hover {
  background-color: var(--univer-gray-100);
}

.hover\:univer-bg-gray-200:hover {
  background-color: var(--univer-gray-200);
}

.hover\:univer-bg-gray-50:hover {
  background-color: var(--univer-gray-50);
}

.hover\:univer-bg-transparent:hover {
  background-color: #0000;
}

.hover\:univer-opacity-50:hover {
  opacity: .5;
}

.focus\:univer-bg-white:focus {
  background-color: var(--univer-white);
}

.focus\:univer-outline-none:focus {
  outline-offset: 2px;
  outline: 2px solid #0000;
}

.focus-visible\:univer-ring-2:focus-visible {
  --univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);
  --univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(2px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);
  box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), var(--univer-tw-shadow, 0 0 #0000);
}

.focus-visible\:univer-ring-primary-600:focus-visible {
  --univer-tw-ring-color: var(--univer-primary-600);
}

.focus-visible\:univer-ring-offset-0:focus-visible {
  --univer-tw-ring-offset-width: 0px;
}

.active\:univer-bg-gray-200:active {
  background-color: var(--univer-gray-200);
}

.enabled\:hover\:univer-bg-gray-50:hover:enabled {
  background-color: var(--univer-gray-50);
}

.enabled\:active\:univer-bg-gray-100:active:enabled {
  background-color: var(--univer-gray-100);
}

.disabled\:univer-cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:univer-text-gray-300:disabled {
  color: var(--univer-gray-300);
}

.disabled\:univer-opacity-40:disabled {
  opacity: .4;
}

.disabled\:hover\:univer-bg-transparent:hover:disabled {
  background-color: #0000;
}

@media (min-width: 640px) {
  .sm\:\!univer-block {
    display: block !important;
  }
}

.rtl\:univer-pl-1\.5:where([dir="rtl"], [dir="rtl"] *) {
  padding-left: .375rem;
}

.rtl\:univer-pr-0:where([dir="rtl"], [dir="rtl"] *) {
  padding-right: 0;
}

.rtl\:univer-pr-2:where([dir="rtl"], [dir="rtl"] *) {
  padding-right: .5rem;
}

.dark\:\!univer-border-gray-600:where(.univer-dark, .univer-dark *) {
  border-color: var(--univer-gray-600) !important;
}

.dark\:\!univer-bg-gray-200:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-200) !important;
}

.dark\:\!univer-bg-gray-500:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-500) !important;
}

.dark\:\!univer-bg-gray-600:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-600) !important;
}

.dark\:\!univer-bg-gray-700:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-700) !important;
}

.dark\:\!univer-bg-gray-800:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-800) !important;
}

.dark\:\!univer-bg-gray-900:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-900) !important;
}

.dark\:\!univer-bg-primary-400:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-primary-400) !important;
}

.dark\:\!univer-bg-primary-900:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-primary-900) !important;
}

.dark\:\!univer-text-gray-100:where(.univer-dark, .univer-dark *) {
  color: var(--univer-gray-100) !important;
}

.dark\:\!univer-text-gray-200:where(.univer-dark, .univer-dark *) {
  color: var(--univer-gray-200) !important;
}

.dark\:\!univer-text-gray-300:where(.univer-dark, .univer-dark *) {
  color: var(--univer-gray-300) !important;
}

.dark\:\!univer-text-gray-400:where(.univer-dark, .univer-dark *) {
  color: var(--univer-gray-400) !important;
}

.dark\:\!univer-text-gray-500:where(.univer-dark, .univer-dark *) {
  color: var(--univer-gray-500) !important;
}

.dark\:\!univer-text-gray-600:where(.univer-dark, .univer-dark *) {
  color: var(--univer-gray-600) !important;
}

.dark\:\!univer-text-gray-800:where(.univer-dark, .univer-dark *) {
  color: var(--univer-gray-800) !important;
}

.dark\:\!univer-text-primary-100:where(.univer-dark, .univer-dark *) {
  color: var(--univer-primary-100) !important;
}

.dark\:\!univer-text-primary-300:where(.univer-dark, .univer-dark *) {
  color: var(--univer-primary-300) !important;
}

.dark\:\!univer-text-primary-400:where(.univer-dark, .univer-dark *) {
  color: var(--univer-primary-400) !important;
}

.dark\:\!univer-text-white:where(.univer-dark, .univer-dark *) {
  color: var(--univer-white) !important;
}

.dark\:hover\:\!univer-bg-gray-600:hover:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-600) !important;
}

.dark\:hover\:\!univer-bg-gray-700:hover:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-700) !important;
}

.dark\:hover\:\!univer-bg-gray-900:hover:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-900) !important;
}

.dark\:hover\:\!univer-bg-transparent:hover:where(.univer-dark, .univer-dark *) {
  background-color: #0000 !important;
}

.dark\:active\:\!univer-bg-gray-600:active:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-600) !important;
}

.dark\:disabled\:\!univer-text-gray-600:disabled:where(.univer-dark, .univer-dark *) {
  color: var(--univer-gray-600) !important;
}

.\[\&\:\:-webkit-scrollbar\]\:univer-hidden::-webkit-scrollbar {
  display: none;
}

.\[\&\>\*\]\:univer-m-0 > * {
  margin: 0;
}

.\[\&\>\*\]\:univer-inline-flex > * {
  display: inline-flex;
}

.\[\&\>\*\]\:univer-h-6 > * {
  height: 1.5rem;
}

.\[\&\>\*\]\:univer-min-h-7 > * {
  min-height: 1.75rem;
}

.\[\&\>\*\]\:univer-min-w-7 > * {
  min-width: 1.75rem;
}

.\[\&\>\*\]\:univer-appearance-none > * {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.\[\&\>\*\]\:univer-items-center > * {
  align-items: center;
}

.\[\&\>\*\]\:univer-justify-center > * {
  justify-content: center;
}

.\[\&\>\*\]\:univer-rounded > * {
  border-radius: .25rem;
}

.\[\&\>\*\]\:univer-rounded-md > * {
  border-radius: .375rem;
}

.\[\&\>\*\]\:univer-border-0 > * {
  border-width: 0;
}

.\[\&\>\*\]\:univer-px-1 > * {
  padding-left: .25rem;
  padding-right: .25rem;
}

.\[\&\>\*\]\:univer-px-1\.5 > * {
  padding-left: .375rem;
  padding-right: .375rem;
}

.\[\&\>\*\]\:univer-leading-none > * {
  line-height: 1;
}

.\[\&\>\*\]\:univer-outline-none > * {
  outline-offset: 2px;
  outline: 2px solid #0000;
}

.\[\&\>\*\]\:univer-transition-colors > * {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.hover\:\[\&\>\*\]\:univer-bg-gray-100 > :hover {
  background-color: var(--univer-gray-100);
}

.\[\&\>span\]\:univer-truncate > span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.\[\&\>span\]\:univer-text-sm > span {
  font-size: .875rem;
  line-height: 1.25rem;
}

.\[\&\>span\]\:univer-font-medium > span {
  font-weight: 500;
}

.\[\&\>svg\]\:univer-shrink-0 > svg {
  flex-shrink: 0;
}

.\[\&\>svg\]\:univer-text-lg > svg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.\[\&\>svg\]\:univer-text-gray-700 > svg {
  color: var(--univer-gray-700);
}

.\[\&_\*\]\:univer-box-border * {
  box-sizing: border-box;
}

.\[\&_\.univer-custom-label\]\:univer-text-sm .univer-custom-label {
  font-size: .875rem;
  line-height: 1.25rem;
}

.\[\&_\.univer-custom-label\]\:univer-leading-none .univer-custom-label {
  line-height: 1;
}

.\[\&_\.univer-toolbar-button-selector-main\]\:\!univer-h-8 .univer-toolbar-button-selector-main {
  height: 2rem !important;
}

.\[\&_\.univer-toolbar-button-selector-main\]\:\!univer-rounded-none .univer-toolbar-button-selector-main {
  border-radius: 0 !important;
}

.\[\&_\.univer-toolbar-button-selector-main\]\:\!univer-rounded-l-md .univer-toolbar-button-selector-main {
  border-top-left-radius: .375rem !important;
  border-bottom-left-radius: .375rem !important;
}

.\[\&_\.univer-toolbar-button-selector-main\]\:\!univer-px-1\.5 .univer-toolbar-button-selector-main {
  padding-left: .375rem !important;
  padding-right: .375rem !important;
}

.\[\&_\.univer-toolbar-button-selector-root\]\:\!univer-h-8 .univer-toolbar-button-selector-root {
  height: 2rem !important;
}

.\[\&_\.univer-toolbar-button-selector-root\]\:univer-overflow-hidden .univer-toolbar-button-selector-root {
  overflow: hidden;
}

.\[\&_\.univer-toolbar-button-selector-root\]\:\!univer-rounded-md .univer-toolbar-button-selector-root {
  border-radius: .375rem !important;
}

.\[\&_\.univer-toolbar-button-selector-root\]\:\!univer-pr-0 .univer-toolbar-button-selector-root {
  padding-right: 0 !important;
}

.\[\&_\.univer-toolbar-button-selector-trigger\]\:\!univer-static .univer-toolbar-button-selector-trigger {
  position: static !important;
}

.\[\&_\.univer-toolbar-button-selector-trigger\]\:\!univer-h-8 .univer-toolbar-button-selector-trigger {
  height: 2rem !important;
}

.\[\&_\.univer-toolbar-button-selector-trigger\]\:\!univer-w-6 .univer-toolbar-button-selector-trigger {
  width: 1.5rem !important;
}

.\[\&_\.univer-toolbar-button-selector-trigger\]\:\!univer-rounded-none .univer-toolbar-button-selector-trigger {
  border-radius: 0 !important;
}

.\[\&_\.univer-toolbar-button-selector-trigger\]\:\!univer-rounded-r-md .univer-toolbar-button-selector-trigger {
  border-top-right-radius: .375rem !important;
  border-bottom-right-radius: .375rem !important;
}

.\[\&_\.univer-toolbar-selector-root\]\:\!univer-h-8 .univer-toolbar-selector-root {
  height: 2rem !important;
}

.\[\&_\.univer-toolbar-selector-root\]\:\!univer-gap-1 .univer-toolbar-selector-root {
  gap: .25rem !important;
}

.\[\&_\.univer-toolbar-selector-root\]\:\!univer-rounded-md .univer-toolbar-selector-root {
  border-radius: .375rem !important;
}

.\[\&_\.univer-toolbar-selector-root\]\:\!univer-px-1\.5 .univer-toolbar-selector-root {
  padding-left: .375rem !important;
  padding-right: .375rem !important;
}

.\[\&_\.univer-toolbar-selector-trigger\]\:\!univer-pl-0\.5 .univer-toolbar-selector-trigger {
  padding-left: .125rem !important;
}

.\[\&_\.univer-tooltip\]\:univer-inline-flex .univer-tooltip {
  display: inline-flex;
}

.\[\&_\.univer-tooltip\]\:univer-h-full .univer-tooltip {
  height: 100%;
}

.\[\&_\.univer-tooltip\]\:univer-items-center .univer-tooltip {
  align-items: center;
}

.\[\&_\[data-u-command\]\]\:\!univer-h-8 [data-u-command] {
  height: 2rem !important;
}

.\[\&_\[data-u-command\]\]\:\!univer-min-h-8 [data-u-command] {
  min-height: 2rem !important;
}

.\[\&_\[data-u-command\]\]\:\!univer-rounded-md [data-u-command] {
  border-radius: .375rem !important;
}

.\[\&_\[data-u-command\]\]\:\!univer-px-1\.5 [data-u-command] {
  padding-left: .375rem !important;
  padding-right: .375rem !important;
}

.\[\&_button\]\:\!univer-m-0 button {
  margin: 0 !important;
}

.\[\&_button\]\:\!univer-h-8 button {
  height: 2rem !important;
}

.\[\&_button\]\:\!univer-min-w-8 button {
  min-width: 2rem !important;
}

.\[\&_button\]\:\!univer-appearance-none button {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
       appearance: none !important;
}

.\[\&_button\]\:\!univer-rounded-md button {
  border-radius: .375rem !important;
}

.\[\&_button\]\:\!univer-border-0 button {
  border-width: 0 !important;
}

.\[\&_button\]\:\!univer-bg-transparent button {
  background-color: #0000 !important;
}

.\[\&_button\]\:\!univer-p-0 button {
  padding: 0 !important;
}

.\[\&_button\]\:\!univer-px-1\.5 button {
  padding-left: .375rem !important;
  padding-right: .375rem !important;
}

.\[\&_button\]\:\!univer-leading-none button {
  line-height: 1 !important;
}

.\[\&_button\]\:\!univer-outline-none button {
  outline-offset: 2px !important;
  outline: 2px solid #0000 !important;
}

.\[\&_input\:focus\]\:\!univer-ring-0 input:focus {
  --univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color) !important;
  --univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(0px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color) !important;
  box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), 0 0 #0000 !important;
  box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), var(--univer-tw-shadow, 0 0 #0000) !important;
}

.\[\&_input\]\:\!univer-m-0 input {
  margin: 0 !important;
}

.\[\&_input\]\:univer-h-6 input {
  height: 1.5rem;
}

.\[\&_input\]\:univer-w-7 input {
  width: 1.75rem;
}

.\[\&_input\]\:\!univer-appearance-none input {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
       appearance: none !important;
}

.\[\&_input\]\:\!univer-border-0 input {
  border-width: 0 !important;
}

.\[\&_input\]\:univer-border-none input {
  border-style: none;
}

.\[\&_input\]\:\!univer-bg-transparent input {
  background-color: #0000 !important;
}

.\[\&_input\]\:\!univer-p-0 input {
  padding: 0 !important;
}

.\[\&_input\]\:univer-p-0 input {
  padding: 0;
}

.\[\&_input\]\:univer-text-sm input {
  font-size: .875rem;
  line-height: 1.25rem;
}

.\[\&_input\]\:\!univer-leading-none input {
  line-height: 1 !important;
}

.\[\&_input\]\:\!univer-outline-none input {
  outline-offset: 2px !important;
  outline: 2px solid #0000 !important;
}
.univer-absolute {
  position: absolute;
}

.univer-relative {
  position: relative;
}

.univer-bottom-0 {
  bottom: 0;
}

.univer-left-0 {
  left: 0;
}

.univer-left-5 {
  left: 1.25rem;
}

.univer-left-\[5px\] {
  left: 5px;
}

.univer-top-0 {
  top: 0;
}

.univer-top-4 {
  top: 1rem;
}

.univer-top-\[5px\] {
  top: 5px;
}

.univer-z-\[100\] {
  z-index: 100;
}

.univer-mb-1 {
  margin-bottom: .25rem;
}

.univer-mb-2 {
  margin-bottom: .5rem;
}

.univer-mr-1 {
  margin-right: .25rem;
}

.univer-mt-1\.5 {
  margin-top: .375rem;
}

.univer-mt-12 {
  margin-top: 3rem;
}

.univer-mt-3 {
  margin-top: .75rem;
}

.univer-mt-4 {
  margin-top: 1rem;
}

.univer-box-border {
  box-sizing: border-box;
}

.univer-block {
  display: block;
}

.univer-flex {
  display: flex;
}

.univer-inline-flex {
  display: inline-flex;
}

.univer-grid {
  display: grid;
}

.univer-size-3 {
  width: .75rem;
  height: .75rem;
}

.univer-size-4 {
  width: 1rem;
  height: 1rem;
}

.univer-size-8 {
  width: 2rem;
  height: 2rem;
}

.univer-size-full {
  width: 100%;
  height: 100%;
}

.univer-h-20 {
  height: 5rem;
}

.univer-h-7 {
  height: 1.75rem;
}

.univer-h-8 {
  height: 2rem;
}

.univer-h-\[24px\] {
  height: 24px;
}

.univer-w-28 {
  width: 7rem;
}

.univer-w-4\/5 {
  width: 80%;
}

.univer-w-\[0px\] {
  width: 0;
}

.univer-w-\[162px\] {
  width: 162px;
}

.univer-w-\[212px\] {
  width: 212px;
}

.univer-w-\[72px\] {
  width: 72px;
}

.univer-w-full {
  width: 100%;
}

.univer-min-w-\[180px\] {
  min-width: 180px;
}

.univer-flex-1 {
  flex: 1;
}

.univer-flex-shrink-0 {
  flex-shrink: 0;
}

.univer-cursor-pointer {
  cursor: pointer;
}

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

.univer-flex-col {
  flex-direction: column;
}

.univer-flex-nowrap {
  flex-wrap: nowrap;
}

.univer-items-center {
  align-items: center;
}

.univer-justify-end {
  justify-content: flex-end;
}

.univer-justify-center {
  justify-content: center;
}

.univer-justify-between {
  justify-content: space-between;
}

.univer-justify-around {
  justify-content: space-around;
}

.univer-gap-1 {
  gap: .25rem;
}

.univer-gap-1\.5 {
  gap: .375rem;
}

.univer-gap-2 {
  gap: .5rem;
}

.univer-gap-2\.5 {
  gap: .625rem;
}

.univer-gap-4 {
  gap: 1rem;
}

.univer-overflow-hidden {
  overflow: hidden;
}

.univer-overflow-y-auto {
  overflow-y: auto;
}

.univer-overflow-x-hidden {
  overflow-x: hidden;
}

.univer-truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.univer-rounded {
  border-radius: .25rem;
}

.univer-rounded-full {
  border-radius: 9999px;
}

.univer-rounded-md {
  border-radius: .375rem;
}

.univer-rounded-r-2xl {
  border-top-right-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

.univer-border-primary-500 {
  border-color: var(--univer-primary-500);
}

.\!univer-bg-gray-700 {
  background-color: var(--univer-gray-700) !important;
}

.\!univer-bg-gray-900 {
  background-color: var(--univer-gray-900) !important;
}

.univer-bg-gray-100 {
  background-color: var(--univer-gray-100);
}

.univer-bg-white {
  background-color: var(--univer-white);
}

.univer-bg-none {
  background-image: none;
}

.univer-p-1 {
  padding: .25rem;
}

.univer-p-1\.5 {
  padding: .375rem;
}

.univer-px-2 {
  padding-left: .5rem;
  padding-right: .5rem;
}

.univer-px-2\.5 {
  padding-left: .625rem;
  padding-right: .625rem;
}

.univer-px-3 {
  padding-left: .75rem;
  padding-right: .75rem;
}

.univer-px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.univer-px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.univer-py-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.univer-py-1 {
  padding-top: .25rem;
  padding-bottom: .25rem;
}

.univer-py-1\.5 {
  padding-top: .375rem;
  padding-bottom: .375rem;
}

.univer-pb-0\.5 {
  padding-bottom: .125rem;
}

.univer-pb-4 {
  padding-bottom: 1rem;
}

.univer-pl-1\.5 {
  padding-left: .375rem;
}

.univer-pr-1 {
  padding-right: .25rem;
}

.univer-pr-2 {
  padding-right: .5rem;
}

.univer-pt-1\.5 {
  padding-top: .375rem;
}

.univer-pt-14 {
  padding-top: 3.5rem;
}

.univer-text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.univer-text-sm {
  font-size: .875rem;
  line-height: 1.25rem;
}

.univer-text-xs {
  font-size: .75rem;
  line-height: 1rem;
}

.univer-font-\[500\], .univer-font-medium {
  font-weight: 500;
}

.univer-font-semibold {
  font-weight: 600;
}

.univer-leading-\[24px\] {
  line-height: 24px;
}

.\!univer-text-gray-200 {
  color: var(--univer-gray-200) !important;
}

.\!univer-text-gray-400 {
  color: var(--univer-gray-400) !important;
}

.univer-text-gray-400 {
  color: var(--univer-gray-400);
}

.univer-text-gray-500 {
  color: var(--univer-gray-500);
}

.univer-text-gray-600 {
  color: var(--univer-gray-600);
}

.univer-text-gray-800 {
  color: var(--univer-gray-800);
}

.univer-text-gray-900 {
  color: var(--univer-gray-900);
}

.univer-shadow {
  --univer-tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
  --univer-tw-shadow-colored: 0 1px 3px 0 var(--univer-tw-shadow-color), 0 1px 2px -1px var(--univer-tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 3px #0000001a, 0 1px 2px -1px #0000001a;
  box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow);
}

.univer-shadow-sm {
  --univer-tw-shadow: 0px 1px 2px 0px #1e284d14;
  --univer-tw-shadow-colored: 0px 1px 2px 0px var(--univer-tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px #1e284d14;
  box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow);
}

.univer-backdrop-blur-\[10px\] {
  --univer-tw-backdrop-blur: blur(10px);
  backdrop-filter: var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia);
}

.univer-transition-all {
  transition-property: all;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.univer-duration-300 {
  transition-duration: .3s;
}

.hover\:univer-border-primary-500:hover {
  border-color: var(--univer-primary-500);
}

.hover\:univer-bg-gray-100:hover {
  background-color: var(--univer-gray-100);
}

.dark\:\!univer-border-gray-700:where(.univer-dark, .univer-dark *) {
  border-color: var(--univer-gray-700) !important;
}

.dark\:\!univer-bg-gray-600:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-600) !important;
}

.dark\:\!univer-bg-gray-700:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-700) !important;
}

.dark\:\!univer-bg-gray-900:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-900) !important;
}

.dark\:\!univer-text-gray-200:where(.univer-dark, .univer-dark *) {
  color: var(--univer-gray-200) !important;
}

.dark\:\!univer-text-gray-400:where(.univer-dark, .univer-dark *) {
  color: var(--univer-gray-400) !important;
}

.dark\:\!univer-text-white:where(.univer-dark, .univer-dark *) {
  color: var(--univer-white) !important;
}

.dark\:hover\:\!univer-bg-gray-600:hover:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-600) !important;
}
.univer-pointer-events-none {
  pointer-events: none;
}

.univer-absolute {
  position: absolute;
}

.univer-relative {
  position: relative;
}

.univer-inset-0 {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.-univer-bottom-0\.5 {
  bottom: -.125rem;
}

.-univer-left-0\.5 {
  left: -.125rem;
}

.-univer-right-0\.5 {
  right: -.125rem;
}

.-univer-top-0\.5 {
  top: -.125rem;
}

.univer-left-0 {
  left: 0;
}

.univer-left-1 {
  left: .25rem;
}

.univer-left-3 {
  left: .75rem;
}

.univer-right-0 {
  right: 0;
}

.univer-right-5 {
  right: 1.25rem;
}

.univer-top-0 {
  top: 0;
}

.univer-top-0\.5 {
  top: .125rem;
}

.univer-top-1\/2 {
  top: 50%;
}

.univer-z-10 {
  z-index: 10;
}

.univer-z-\[1001\] {
  z-index: 1001;
}

.univer-z-\[100\] {
  z-index: 100;
}

.univer-m-0 {
  margin: 0;
}

.univer-mx-1 {
  margin-left: .25rem;
  margin-right: .25rem;
}

.univer-my-1 {
  margin-top: .25rem;
  margin-bottom: .25rem;
}

.univer-my-1\.5 {
  margin-top: .375rem;
  margin-bottom: .375rem;
}

.univer-my-2 {
  margin-top: .5rem;
  margin-bottom: .5rem;
}

.univer-mb-1\.5 {
  margin-bottom: .375rem;
}

.univer-mb-2 {
  margin-bottom: .5rem;
}

.univer-mb-3 {
  margin-bottom: .75rem;
}

.univer-mb-4 {
  margin-bottom: 1rem;
}

.univer-ml-1 {
  margin-left: .25rem;
}

.univer-ml-1\.5 {
  margin-left: .375rem;
}

.univer-ml-3 {
  margin-left: .75rem;
}

.univer-ml-6 {
  margin-left: 1.5rem;
}

.univer-ml-px {
  margin-left: 1px;
}

.univer-mr-1\.5 {
  margin-right: .375rem;
}

.univer-mr-2 {
  margin-right: .5rem;
}

.univer-mr-5 {
  margin-right: 1.25rem;
}

.univer-mt-1 {
  margin-top: .25rem;
}

.univer-mt-2 {
  margin-top: .5rem;
}

.univer-mt-3 {
  margin-top: .75rem;
}

.univer-mt-4 {
  margin-top: 1rem;
}

.univer-mt-auto {
  margin-top: auto;
}

.univer-box-border {
  box-sizing: border-box;
}

.univer-block {
  display: block;
}

.univer-flex {
  display: flex;
}

.univer-inline-flex {
  display: inline-flex;
}

.univer-grid {
  display: grid;
}

.univer-hidden {
  display: none;
}

.univer-size-0 {
  width: 0;
  height: 0;
}

.univer-size-10 {
  width: 2.5rem;
  height: 2.5rem;
}

.univer-size-4 {
  width: 1rem;
  height: 1rem;
}

.univer-size-6 {
  width: 1.5rem;
  height: 1.5rem;
}

.univer-size-full {
  width: 100%;
  height: 100%;
}

.univer-h-0\.5 {
  height: .125rem;
}

.univer-h-1 {
  height: .25rem;
}

.univer-h-10 {
  height: 2.5rem;
}

.univer-h-20 {
  height: 5rem;
}

.univer-h-4 {
  height: 1rem;
}

.univer-h-5 {
  height: 1.25rem;
}

.univer-h-6 {
  height: 1.5rem;
}

.univer-h-60 {
  height: 15rem;
}

.univer-h-7 {
  height: 1.75rem;
}

.univer-h-8 {
  height: 2rem;
}

.univer-h-9 {
  height: 2.25rem;
}

.univer-h-\[270px\] {
  height: 270px;
}

.univer-h-\[30px\] {
  height: 30px;
}

.univer-h-\[calc\(100\%-16px\)\] {
  height: calc(100% - 16px);
}

.univer-h-\[calc\(100\%-8px\)\] {
  height: calc(100% - 8px);
}

.univer-h-full {
  height: 100%;
}

.univer-h-px {
  height: 1px;
}

.univer-max-h-52 {
  max-height: 13rem;
}

.univer-max-h-\[100px\] {
  max-height: 100px;
}

.univer-max-h-\[360px\] {
  max-height: 360px;
}

.\!univer-w-\[90px\] {
  width: 90px !important;
}

.univer-w-16 {
  width: 4rem;
}

.univer-w-20 {
  width: 5rem;
}

.univer-w-24 {
  width: 6rem;
}

.univer-w-5 {
  width: 1.25rem;
}

.univer-w-6 {
  width: 1.5rem;
}

.univer-w-60 {
  width: 15rem;
}

.univer-w-\[100px\] {
  width: 100px;
}

.univer-w-\[130px\] {
  width: 130px;
}

.univer-w-\[156px\] {
  width: 156px;
}

.univer-w-\[300px\] {
  width: 300px;
}

.univer-w-\[50\%\] {
  width: 50%;
}

.univer-w-fit {
  width: -moz-fit-content;
  width: fit-content;
}

.univer-w-full {
  width: 100%;
}

.univer-min-w-0 {
  min-width: 0;
}

.univer-max-w-32 {
  max-width: 8rem;
}

.univer-max-w-36 {
  max-width: 9rem;
}

.univer-max-w-64 {
  max-width: 16rem;
}

.univer-max-w-\[190px\] {
  max-width: 190px;
}

.univer-max-w-\[200px\] {
  max-width: 200px;
}

.univer-max-w-\[calc\(100\%-112px\)\] {
  max-width: calc(100% - 112px);
}

.univer-max-w-fit {
  max-width: -moz-fit-content;
  max-width: fit-content;
}

.univer-max-w-lg {
  max-width: 32rem;
}

.univer-flex-1 {
  flex: 1;
}

.univer-flex-shrink-0, .univer-shrink-0 {
  flex-shrink: 0;
}

.univer-flex-grow {
  flex-grow: 1;
}

.univer-flex-grow-0 {
  flex-grow: 0;
}

.-univer-translate-y-1\/2 {
  --univer-tw-translate-y: -50%;
  transform: translate(var(--univer-tw-translate-x), -50%) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
}

.univer-rotate-180 {
  --univer-tw-rotate: 180deg;
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(180deg) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
}

@keyframes univer-spin {
  to {
    transform: rotate(360deg);
  }
}

.univer-animate-spin {
  animation: 1s linear infinite univer-spin;
}

.univer-cursor-default {
  cursor: default;
}

.univer-cursor-not-allowed {
  cursor: not-allowed;
}

.univer-cursor-pointer {
  cursor: pointer;
}

.univer-select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.univer-list-none {
  list-style-type: none;
}

.univer-appearance-none {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
}

.univer-grid-flow-col {
  grid-auto-flow: column;
}

.univer-grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.univer-grid-cols-\[1fr\,auto\,auto\,auto\] {
  grid-template-columns: 1fr auto auto auto;
}

.univer-flex-row {
  flex-direction: row;
}

.univer-flex-row-reverse {
  flex-direction: row-reverse;
}

.univer-flex-col {
  flex-direction: column;
}

.univer-flex-nowrap {
  flex-wrap: nowrap;
}

.univer-items-center {
  align-items: center;
}

.univer-justify-end {
  justify-content: flex-end;
}

.univer-justify-center {
  justify-content: center;
}

.univer-justify-between {
  justify-content: space-between;
}

.univer-gap-1 {
  gap: .25rem;
}

.univer-gap-2 {
  gap: .5rem;
}

.univer-gap-7 {
  gap: 1.75rem;
}

.univer-gap-x-2 {
  -moz-column-gap: .5rem;
  column-gap: .5rem;
}

.univer-space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --univer-tw-space-y-reverse: 0;
  margin-top: calc(.5rem * (1 - var(--univer-tw-space-y-reverse)));
  margin-top: .5rem;
  margin-top: calc(.5rem * calc(1 - var(--univer-tw-space-y-reverse)));
  margin-bottom: 0;
  margin-bottom: calc(.5rem * var(--univer-tw-space-y-reverse));
}

.univer-divide-x-0 > :not([hidden]) ~ :not([hidden]) {
  --univer-tw-divide-x-reverse: 0;
  border-right-width: 0;
  border-right-width: calc(0px * var(--univer-tw-divide-x-reverse));
  border-left-width: calc(0px * (1 - var(--univer-tw-divide-x-reverse)));
  border-left-width: 0;
  border-left-width: calc(0px * calc(1 - var(--univer-tw-divide-x-reverse)));
}

.univer-divide-y > :not([hidden]) ~ :not([hidden]) {
  --univer-tw-divide-y-reverse: 0;
  border-top-width: calc(1px * (1 - var(--univer-tw-divide-y-reverse)));
  border-top-width: 1px;
  border-top-width: calc(1px * calc(1 - var(--univer-tw-divide-y-reverse)));
  border-bottom-width: 0;
  border-bottom-width: calc(1px * var(--univer-tw-divide-y-reverse));
}

.univer-divide-solid > :not([hidden]) ~ :not([hidden]) {
  border-style: solid;
}

.univer-divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--univer-gray-200);
}

.univer-justify-self-center {
  justify-self: center;
}

.univer-overflow-hidden {
  overflow: hidden;
}

.univer-overflow-x-auto {
  overflow-x: auto;
}

.univer-overflow-y-auto {
  overflow-y: auto;
}

.univer-overflow-y-hidden {
  overflow-y: hidden;
}

.univer-truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.univer-whitespace-nowrap {
  white-space: nowrap;
}

.univer-break-words {
  word-wrap: break-word;
}

.univer-rounded {
  border-radius: .25rem;
}

.univer-rounded-full {
  border-radius: 9999px;
}

.univer-rounded-lg {
  border-radius: .5rem;
}

.univer-rounded-md {
  border-radius: .375rem;
}

.univer-rounded-sm {
  border-radius: .125rem;
}

.univer-border {
  border-width: 1px;
}

.univer-border-2 {
  border-width: 2px;
}

.univer-border-4 {
  border-width: 4px;
}

.univer-border-b {
  border-bottom-width: 1px;
}

.univer-border-solid {
  border-style: solid;
}

.univer-border-none {
  border-style: none;
}

.univer-border-\[rgba\(13\,13\,13\,0\.12\)\] {
  border-color: #0d0d0d1f;
}

.univer-border-gray-100 {
  border-color: var(--univer-gray-100);
}

.univer-border-gray-200 {
  border-color: var(--univer-gray-200);
}

.univer-border-transparent {
  border-color: #0000;
}

.univer-border-r-gray-200 {
  border-right-color: var(--univer-gray-200);
}

.univer-border-t-primary-500 {
  border-top-color: var(--univer-primary-500);
}

.\!univer-bg-gray-600 {
  background-color: var(--univer-gray-600) !important;
}

.\!univer-bg-gray-700 {
  background-color: var(--univer-gray-700) !important;
}

.\!univer-bg-gray-800 {
  background-color: var(--univer-gray-800) !important;
}

.\!univer-bg-gray-900 {
  background-color: var(--univer-gray-900) !important;
}

.univer-bg-blue-500 {
  background-color: var(--univer-blue-500);
}

.univer-bg-blue-600 {
  background-color: var(--univer-blue-600);
}

.univer-bg-gray-100 {
  background-color: var(--univer-gray-100);
}

.univer-bg-gray-200 {
  background-color: var(--univer-gray-200);
}

.univer-bg-transparent {
  background-color: #0000;
}

.univer-bg-white {
  background-color: var(--univer-white);
}

.univer-bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--univer-tw-gradient-stops));
}

.univer-from-gray-50 {
  --univer-tw-gradient-from: var(--univer-gray-50) var(--univer-tw-gradient-from-position);
  --univer-tw-gradient-to: #fff0 var(--univer-tw-gradient-to-position);
  --univer-tw-gradient-stops: var(--univer-tw-gradient-from), var(--univer-tw-gradient-to);
}

.univer-to-gray-100 {
  --univer-tw-gradient-to: var(--univer-gray-100) var(--univer-tw-gradient-to-position);
}

.univer-fill-gray-900 {
  fill: var(--univer-gray-900);
}

.univer-fill-primary-600 {
  fill: var(--univer-primary-600);
}

.univer-p-0 {
  padding: 0;
}

.univer-p-1 {
  padding: .25rem;
}

.univer-p-1\.5 {
  padding: .375rem;
}

.univer-p-2 {
  padding: .5rem;
}

.univer-p-3 {
  padding: .75rem;
}

.univer-p-4 {
  padding: 1rem;
}

.univer-px-1 {
  padding-left: .25rem;
  padding-right: .25rem;
}

.univer-px-1\.5 {
  padding-left: .375rem;
  padding-right: .375rem;
}

.univer-px-2 {
  padding-left: .5rem;
  padding-right: .5rem;
}

.univer-px-3\.5 {
  padding-left: .875rem;
  padding-right: .875rem;
}

.univer-px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.univer-py-0\.5 {
  padding-top: .125rem;
  padding-bottom: .125rem;
}

.univer-py-1 {
  padding-top: .25rem;
  padding-bottom: .25rem;
}

.univer-py-1\.5 {
  padding-top: .375rem;
  padding-bottom: .375rem;
}

.univer-py-2 {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.univer-py-3 {
  padding-top: .75rem;
  padding-bottom: .75rem;
}

.univer-py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.univer-pb-1 {
  padding-bottom: .25rem;
}

.univer-pl-1\.5 {
  padding-left: .375rem;
}

.univer-pl-3 {
  padding-left: .75rem;
}

.univer-pl-6 {
  padding-left: 1.5rem;
}

.univer-pr-5 {
  padding-right: 1.25rem;
}

.univer-pt-1 {
  padding-top: .25rem;
}

.univer-pt-2 {
  padding-top: .5rem;
}

.univer-text-center {
  text-align: center;
}

.univer-text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.univer-text-sm {
  font-size: .875rem;
  line-height: 1.25rem;
}

.univer-text-xs {
  font-size: .75rem;
  line-height: 1rem;
}

.univer-font-bold {
  font-weight: 700;
}

.univer-font-medium {
  font-weight: 500;
}

.univer-font-semibold {
  font-weight: 600;
}

.univer-leading-5 {
  line-height: 1.25rem;
}

.univer-leading-6 {
  line-height: 1.5rem;
}

.univer-leading-7 {
  line-height: 1.75rem;
}

.\!univer-text-blue-400 {
  color: var(--univer-blue-400) !important;
}

.\!univer-text-gray-700 {
  color: var(--univer-gray-700) !important;
}

.\!univer-text-white {
  color: var(--univer-white) !important;
}

.univer-text-blue-500 {
  color: var(--univer-blue-500);
}

.univer-text-blue-600 {
  color: var(--univer-blue-600);
}

.univer-text-gray-200 {
  color: var(--univer-gray-200);
}

.univer-text-gray-300 {
  color: var(--univer-gray-300);
}

.univer-text-gray-400 {
  color: var(--univer-gray-400);
}

.univer-text-gray-500 {
  color: var(--univer-gray-500);
}

.univer-text-gray-600 {
  color: var(--univer-gray-600);
}

.univer-text-gray-700 {
  color: var(--univer-gray-700);
}

.univer-text-gray-900 {
  color: var(--univer-gray-900);
}

.univer-text-green-600 {
  color: var(--univer-green-600);
}

.univer-text-primary-500 {
  color: var(--univer-primary-500);
}

.univer-text-primary-600 {
  color: var(--univer-primary-600);
}

.univer-text-primary-700 {
  color: var(--univer-primary-700);
}

.univer-text-red-500 {
  color: var(--univer-red-500);
}

.univer-text-red-600 {
  color: var(--univer-red-600);
}

.univer-text-white {
  color: var(--univer-white);
}

.univer-text-yellow-500 {
  color: var(--univer-yellow-500);
}

.univer-shadow {
  --univer-tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
  --univer-tw-shadow-colored: 0 1px 3px 0 var(--univer-tw-shadow-color), 0 1px 2px -1px var(--univer-tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 3px #0000001a, 0 1px 2px -1px #0000001a;
  box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow);
}

.univer-shadow-lg {
  --univer-tw-shadow: 0px 4px 6px 0px #1e284d0d, 0px 10px 15px -3px #1e284d1a;
  --univer-tw-shadow-colored: 0px 4px 6px 0px var(--univer-tw-shadow-color), 0px 10px 15px -3px var(--univer-tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 4px 6px #1e284d0d, 0 10px 15px -3px #1e284d1a;
  box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow);
}

.univer-outline-none {
  outline-offset: 2px;
  outline: 2px solid #0000;
}

.univer-blur-sm {
  --univer-tw-blur: blur(4px);
  filter: var(--univer-tw-blur) var(--univer-tw-brightness) var(--univer-tw-contrast) var(--univer-tw-grayscale) var(--univer-tw-hue-rotate) var(--univer-tw-invert) var(--univer-tw-saturate) var(--univer-tw-sepia) var(--univer-tw-drop-shadow);
}

.univer-backdrop-blur {
  --univer-tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia);
}

.univer-transition-\[colors\,box-shadow\] {
  transition-property: colors, box-shadow;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.univer-transition-\[height\] {
  transition-property: height;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.univer-transition-all {
  transition-property: all;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.univer-transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.univer-duration-200 {
  transition-duration: .2s;
}

.univer-ease-linear {
  transition-timing-function: linear;
}

.after\:univer-absolute:after {
  content: var(--univer-tw-content);
  position: absolute;
}

.after\:univer-right-0:after {
  content: var(--univer-tw-content);
  right: 0;
}

.after\:univer-top-1\/2:after {
  content: var(--univer-tw-content);
  top: 50%;
}

.after\:univer-block:after {
  content: var(--univer-tw-content);
  display: block;
}

.after\:univer-h-4:after {
  content: var(--univer-tw-content);
  height: 1rem;
}

.after\:univer-w-px:after {
  content: var(--univer-tw-content);
  width: 1px;
}

.after\:-univer-translate-y-1\/2:after {
  content: var(--univer-tw-content);
  --univer-tw-translate-y: -50%;
  transform: translate(var(--univer-tw-translate-x), -50%) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
}

.after\:univer-bg-gray-200:after {
  content: var(--univer-tw-content);
  background-color: var(--univer-gray-200);
}

.after\:univer-content-\[\"\"\]:after {
  --univer-tw-content: "";
  content: "";
  content: var(--univer-tw-content);
}

.last\:univer-mb-0:last-child {
  margin-bottom: 0;
}

.univer-group:hover .group-hover\:univer-flex {
  display: flex;
}

.hover\:univer-border-primary-600:hover {
  border-color: var(--univer-primary-600);
}

.hover\:univer-bg-gray-100:hover {
  background-color: var(--univer-gray-100);
}

.hover\:univer-bg-gray-200:hover {
  background-color: var(--univer-gray-200);
}

.hover\:univer-bg-gray-50:hover {
  background-color: var(--univer-gray-50);
}

.hover\:univer-bg-transparent:hover {
  background-color: #0000;
}

.focus\:univer-border-primary-500:focus {
  border-color: var(--univer-primary-500);
}

.focus\:univer-outline-none:focus {
  outline-offset: 2px;
  outline: 2px solid #0000;
}

.focus-visible\:univer-ring-2:focus-visible {
  --univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);
  --univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(2px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);
  box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), var(--univer-tw-shadow, 0 0 #0000);
}

.focus-visible\:univer-ring-primary-500:focus-visible {
  --univer-tw-ring-color: var(--univer-primary-500);
}

.active\:univer-bg-gray-100:active {
  background-color: var(--univer-gray-100);
}

.dark\:\!univer-divide-gray-600:where(.univer-dark, .univer-dark *) > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--univer-gray-600) !important;
}

.dark\:\!univer-border-gray-700:where(.univer-dark, .univer-dark *) {
  border-color: var(--univer-gray-700) !important;
}

.dark\:\!univer-border-r-gray-700:where(.univer-dark, .univer-dark *) {
  border-right-color: var(--univer-gray-700) !important;
}

.dark\:\!univer-bg-black:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-black) !important;
}

.dark\:\!univer-bg-blue-400:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-blue-400) !important;
}

.dark\:\!univer-bg-gray-600:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-600) !important;
}

.dark\:\!univer-bg-gray-700:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-700) !important;
}

.dark\:\!univer-bg-gray-800:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-800) !important;
}

.dark\:\!univer-bg-gray-900:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-900) !important;
}

.dark\:\!univer-from-gray-800:where(.univer-dark, .univer-dark *) {
  --univer-tw-gradient-from: var(--univer-gray-800) var(--univer-tw-gradient-from-position) !important;
  --univer-tw-gradient-to: #fff0 var(--univer-tw-gradient-to-position) !important;
  --univer-tw-gradient-stops: var(--univer-tw-gradient-from), var(--univer-tw-gradient-to) !important;
}

.dark\:\!univer-to-gray-900:where(.univer-dark, .univer-dark *) {
  --univer-tw-gradient-to: var(--univer-gray-900) var(--univer-tw-gradient-to-position) !important;
}

.dark\:\!univer-fill-white:where(.univer-dark, .univer-dark *) {
  fill: var(--univer-white) !important;
}

.dark\:\!univer-text-blue-400:where(.univer-dark, .univer-dark *) {
  color: var(--univer-blue-400) !important;
}

.dark\:\!univer-text-gray-200:where(.univer-dark, .univer-dark *) {
  color: var(--univer-gray-200) !important;
}

.dark\:\!univer-text-gray-300:where(.univer-dark, .univer-dark *) {
  color: var(--univer-gray-300) !important;
}

.dark\:\!univer-text-gray-700:where(.univer-dark, .univer-dark *) {
  color: var(--univer-gray-700) !important;
}

.dark\:\!univer-text-green-400:where(.univer-dark, .univer-dark *) {
  color: var(--univer-green-400) !important;
}

.dark\:\!univer-text-red-400:where(.univer-dark, .univer-dark *) {
  color: var(--univer-red-400) !important;
}

.dark\:\!univer-text-white:where(.univer-dark, .univer-dark *) {
  color: var(--univer-white) !important;
}

.dark\:hover\:\!univer-bg-gray-600:hover:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-600) !important;
}

.dark\:hover\:\!univer-bg-gray-700:hover:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-700) !important;
}

.dark\:hover\:\!univer-bg-gray-800:hover:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-800) !important;
}

.\[\&\>div\:first-child\]\:univer-px-2\.5 > div:first-child {
  padding-left: .625rem;
  padding-right: .625rem;
}

.\[\&\>div\]\:univer-h-5 > div {
  height: 1.25rem;
}

.\[\&\>div\]\:univer-ring-transparent > div {
  --univer-tw-ring-color: transparent;
}

.\[\&_canvas\]\:univer-absolute canvas {
  position: absolute;
}
.univer-absolute {
  position: absolute;
}

.univer-relative {
  position: relative;
}

.univer-left-1\.5 {
  left: .375rem;
}

.univer-top-1\/2 {
  top: 50%;
}

.univer-z-\[15\] {
  z-index: 15;
}

.univer-m-0 {
  margin: 0;
}

.-univer-mx-6 {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}

.univer-mx-0 {
  margin-left: 0;
  margin-right: 0;
}

.univer-my-1 {
  margin-top: .25rem;
  margin-bottom: .25rem;
}

.univer-my-2 {
  margin-top: .5rem;
  margin-bottom: .5rem;
}

.univer-mb-0 {
  margin-bottom: 0;
}

.univer-mb-2 {
  margin-bottom: .5rem;
}

.univer-mb-5 {
  margin-bottom: 1.25rem;
}

.univer-ml-2 {
  margin-left: .5rem;
}

.univer-ml-4 {
  margin-left: 1rem;
}

.univer-mr-0 {
  margin-right: 0;
}

.univer-mt-0 {
  margin-top: 0;
}

.univer-mt-1 {
  margin-top: .25rem;
}

.univer-mt-2 {
  margin-top: .5rem;
}

.univer-mt-3 {
  margin-top: .75rem;
}

.univer-box-border {
  box-sizing: border-box;
}

.univer-block {
  display: block;
}

.univer-flex {
  display: flex;
}

.univer-inline-flex {
  display: inline-flex;
}

.univer-size-6 {
  width: 1.5rem;
  height: 1.5rem;
}

.univer-size-full {
  width: 100%;
  height: 100%;
}

.univer-h-\[18px\] {
  height: 18px;
}

.univer-h-\[364px\] {
  height: 364px;
}

.univer-h-full {
  height: 100%;
}

.univer-max-h-60 {
  max-height: 15rem;
}

.univer-max-h-72 {
  max-height: 18rem;
}

.univer-max-h-\[350px\] {
  max-height: 350px;
}

.univer-max-h-\[400px\] {
  max-height: 400px;
}

.univer-w-\[250px\] {
  width: 250px;
}

.univer-w-full {
  width: 100%;
}

.univer-flex-1 {
  flex: 1;
}

.-univer-translate-y-1\/2 {
  --univer-tw-translate-y: -50%;
  transform: translate(var(--univer-tw-translate-x), -50%) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
}

.univer-cursor-pointer {
  cursor: pointer;
}

.univer-select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.univer-list-none {
  list-style-type: none;
}

.univer-flex-col {
  flex-direction: column;
}

.univer-items-center {
  align-items: center;
}

.univer-justify-end {
  justify-content: flex-end;
}

.univer-justify-center {
  justify-content: center;
}

.univer-justify-between {
  justify-content: space-between;
}

.univer-justify-around {
  justify-content: space-around;
}

.univer-gap-2 {
  gap: .5rem;
}

.univer-gap-4 {
  gap: 1rem;
}

.univer-overflow-visible {
  overflow: visible;
}

.univer-overflow-y-auto {
  overflow-y: auto;
}

.univer-truncate {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.univer-whitespace-nowrap {
  white-space: nowrap;
}

.univer-whitespace-pre-wrap {
  white-space: pre-wrap;
}

.univer-break-words {
  word-wrap: break-word;
}

.univer-break-all {
  word-break: break-all;
}

.univer-rounded {
  border-radius: .25rem;
}

.univer-rounded-lg {
  border-radius: .5rem;
}

.univer-rounded-none {
  border-radius: 0;
}

.univer-rounded-l {
  border-top-left-radius: .25rem;
  border-bottom-left-radius: .25rem;
}

.univer-border {
  border-width: 1px;
}

.univer-border-r-0 {
  border-right-width: 0;
}

.univer-border-gray-600 {
  border-color: var(--univer-gray-600);
}

.univer-border-primary-600 {
  border-color: var(--univer-primary-600);
}

.\!univer-bg-gray-600 {
  background-color: var(--univer-gray-600) !important;
}

.univer-bg-gray-200 {
  background-color: var(--univer-gray-200);
}

.univer-bg-primary-600 {
  background-color: var(--univer-primary-600);
}

.univer-bg-transparent {
  background-color: #0000;
}

.univer-bg-white {
  background-color: var(--univer-white);
}

.univer-p-0 {
  padding: 0;
}

.univer-p-0\.5 {
  padding: .125rem;
}

.univer-p-2 {
  padding: .5rem;
}

.univer-p-3 {
  padding: .75rem;
}

.univer-px-2 {
  padding-left: .5rem;
  padding-right: .5rem;
}

.univer-px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.univer-px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.univer-px-7 {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.univer-py-1 {
  padding-top: .25rem;
  padding-bottom: .25rem;
}

.univer-py-2 {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.univer-py-3 {
  padding-top: .75rem;
  padding-bottom: .75rem;
}

.univer-pb-3 {
  padding-bottom: .75rem;
}

.univer-pt-0 {
  padding-top: 0;
}

.univer-text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}

.univer-text-sm {
  font-size: .875rem;
  line-height: 1.25rem;
}

.univer-text-xs {
  font-size: .75rem;
  line-height: 1rem;
}

.univer-font-bold {
  font-weight: 700;
}

.univer-font-medium {
  font-weight: 500;
}

.univer-leading-5 {
  line-height: 1.25rem;
}

.univer-leading-\[13px\] {
  line-height: 13px;
}

.univer-text-gray-400 {
  color: var(--univer-gray-400);
}

.univer-text-gray-500 {
  color: var(--univer-gray-500);
}

.univer-text-gray-600 {
  color: var(--univer-gray-600);
}

.univer-text-gray-900 {
  color: var(--univer-gray-900);
}

.univer-text-primary-500 {
  color: var(--univer-primary-500);
}

.univer-text-primary-600 {
  color: var(--univer-primary-600);
}

.univer-text-red-500 {
  color: var(--univer-red-500);
}

.univer-text-white {
  color: var(--univer-white);
}

.univer-shadow-md {
  --univer-tw-shadow: 0px 1px 6px -2px #1e284d14, 0px 2px 6px -1px #1e284d1a;
  --univer-tw-shadow-colored: 0px 1px 6px -2px var(--univer-tw-shadow-color), 0px 2px 6px -1px var(--univer-tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 6px -2px #1e284d14, 0 2px 6px -1px #1e284d1a;
  box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow);
}

.univer-outline-none {
  outline-offset: 2px;
  outline: 2px solid #0000;
}

.univer-ring-1 {
  --univer-tw-ring-offset-shadow: var(--univer-tw-ring-inset) 0 0 0 var(--univer-tw-ring-offset-width) var(--univer-tw-ring-offset-color);
  --univer-tw-ring-shadow: var(--univer-tw-ring-inset) 0 0 0 calc(1px + var(--univer-tw-ring-offset-width)) var(--univer-tw-ring-color);
  box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), var(--univer-tw-shadow, 0 0 #0000);
}

.univer-ring-primary-500 {
  --univer-tw-ring-color: var(--univer-primary-500);
}

.univer-ring-red-500 {
  --univer-tw-ring-color: var(--univer-red-500);
}

.univer-transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-duration: .15s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.hover\:univer-bg-gray-200:hover {
  background-color: var(--univer-gray-200);
}

.hover\:univer-bg-gray-300:hover {
  background-color: var(--univer-gray-300);
}

.dark\:\!univer-bg-gray-600:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-600) !important;
}

.dark\:\!univer-bg-gray-900:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-900) !important;
}

.dark\:\!univer-text-gray-200:where(.univer-dark, .univer-dark *) {
  color: var(--univer-gray-200) !important;
}

.dark\:\!univer-text-gray-300:where(.univer-dark, .univer-dark *) {
  color: var(--univer-gray-300) !important;
}

.dark\:\!univer-text-white:where(.univer-dark, .univer-dark *) {
  color: var(--univer-white) !important;
}

.dark\:hover\:\!univer-bg-gray-600:hover:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-600) !important;
}
.univer-mb-5 {
  margin-bottom: 1.25rem;
}

.univer-mr-3 {
  margin-right: .75rem;
}

.univer-mt-2 {
  margin-top: .5rem;
}

.univer-mt-3 {
  margin-top: .75rem;
}

.univer-mt-3\.5 {
  margin-top: .875rem;
}

.univer-mt-4 {
  margin-top: 1rem;
}

.univer-flex {
  display: flex;
}

.univer-grid {
  display: grid;
}

.univer-h-7 {
  height: 1.75rem;
}

.univer-h-full {
  height: 100%;
}

.univer-max-h-\[400px\] {
  max-height: 400px;
}

.univer-w-32 {
  width: 8rem;
}

.univer-w-36 {
  width: 9rem;
}

.univer-w-4 {
  width: 1rem;
}

.univer-w-\[340px\] {
  width: 340px;
}

.univer-w-full {
  width: 100%;
}

.univer-cursor-default {
  cursor: default;
}

.univer-cursor-pointer {
  cursor: pointer;
}

.univer-flex-col {
  flex-direction: column;
}

.univer-items-center {
  align-items: center;
}

.univer-justify-end {
  justify-content: flex-end;
}

.univer-justify-between {
  justify-content: space-between;
}

.univer-gap-1 {
  gap: .25rem;
}

.univer-gap-1\.5 {
  gap: .375rem;
}

.univer-gap-6 {
  gap: 1.5rem;
}

.univer-overflow-auto {
  overflow: auto;
}

.univer-overflow-y-auto {
  overflow-y: auto;
}

.univer-rounded {
  border-radius: .25rem;
}

.univer-rounded-lg {
  border-radius: .5rem;
}

.univer-p-1\.5 {
  padding: .375rem;
}

.univer-p-2 {
  padding: .5rem;
}

.univer-px-2 {
  padding-left: .5rem;
  padding-right: .5rem;
}

.univer-py-1\.5 {
  padding-top: .375rem;
  padding-bottom: .375rem;
}

.univer-pb-5 {
  padding-bottom: 1.25rem;
}

.univer-text-sm, .univer-text-sm\/5 {
  font-size: .875rem;
  line-height: 1.25rem;
}

.univer-text-xs {
  font-size: .75rem;
  line-height: 1rem;
}

.univer-text-gray-400 {
  color: var(--univer-gray-400);
}

.univer-text-gray-500 {
  color: var(--univer-gray-500);
}

.univer-text-gray-600 {
  color: var(--univer-gray-600);
}

.univer-text-primary-600 {
  color: var(--univer-primary-600);
}

.hover\:univer-bg-gray-100:hover {
  background-color: var(--univer-gray-100);
}

.dark\:\!univer-text-gray-200:where(.univer-dark, .univer-dark *) {
  color: var(--univer-gray-200) !important;
}

.dark\:\!univer-text-gray-400:where(.univer-dark, .univer-dark *) {
  color: var(--univer-gray-400) !important;
}

.dark\:hover\:\!univer-bg-gray-700:hover:where(.univer-dark, .univer-dark *) {
  background-color: var(--univer-gray-700) !important;
}
/*
 * SheetBot + Univer：Ribbon 外观微调（在 Univer 主题 CSS 之后加载）
 * -------------------------------------------------------------------------- */

/* ============================================================
 * Ribbon 工具栏：永久深色锁定
 *
 * 仅锁定 header[data-u-comp="headerbar"]（Ribbon 按钮区）。
 * 公式栏（formula-bar）不做强制覆盖：Univer 用 Canvas 渲染公式内
 * 文本，CSS color 对 Canvas 无效；强制背景而不能改文字色会导致黑底
 * 黑字。让公式栏跟随当前 darkMode 自然渲染（深色主题→浅字，浅色主
 * 题→深字），两种状态都可读。
 *
 * 原理：CSS 自定义属性在元素范围内可覆盖 :root 继承值；
 *       JS（forceToolbarAlwaysDark）在 Univer Steady 后为 headerbar
 *       元素补加 .univer-dark，激活深色工具类。
 * ============================================================ */
header[data-u-comp="headerbar"] {
  --univer-white:        #FFFFFF;
  --univer-black:        #000000;
  --univer-gray-50:      #F9FAFB;
  --univer-gray-100:     #EEEFF1;
  --univer-gray-200:     #E3E5EA;
  --univer-gray-300:     #A8B0BD;
  --univer-gray-400:     #7D8698;
  --univer-gray-500:     #4E5565;
  --univer-gray-600:     #31363F;
  --univer-gray-700:     #272A2F;
  --univer-gray-800:     #1F2124;
  --univer-gray-900:     #1B1C1F;
  --univer-primary-50:   #F3F5FF;
  --univer-primary-100:  #E9EDFF;
  --univer-primary-200:  #D2DAFA;
  --univer-primary-300:  #BAC6F8;
  --univer-primary-400:  #6280F9;
  --univer-primary-500:  #466AF7;
  --univer-primary-600:  #2C53F1;
  --univer-primary-700:  #143EE3;
  --univer-primary-800:  #083AD1;
  --univer-primary-900:  #1033BF;
}

/* 字体族/字号选择器：硬约束最大宽度，与下拉菜单视觉等宽 */
.univer-toolbar-button-selector-root,
.univer-toolbar-selector-root {
  max-width: 3.5rem !important;
  overflow: hidden !important;
}

/* --------------------------------------------------------------------------
 * 顶栏「保存」：与 Univer Ribbon 内图标按钮（h-8 / rounded-md）视觉对齐
 * -------------------------------------------------------------------------- */
html.sheetbot-univer-ribbon-embed
  .header-action-bar.univer-ribbon-embed
  > button.header-univer-toolbar-icon-btn {
  box-sizing: border-box;
  height: 32px;
  width: 32px;
  min-width: 32px;
  padding: 0;
  gap: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary, rgba(255, 255, 255, 0.78));
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

html.sheetbot-univer-ribbon-embed
  .header-action-bar.univer-ribbon-embed
  > button.header-univer-toolbar-icon-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary, rgba(255, 255, 255, 0.92));
}

html.sheetbot-univer-ribbon-embed
  .header-action-bar.univer-ribbon-embed
  > button.header-univer-toolbar-icon-btn:disabled,
html.sheetbot-univer-ribbon-embed
  .header-action-bar.univer-ribbon-embed
  > button.header-univer-toolbar-icon-btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
 * 左上角交汇补丁：已废弃（2026-04-01）
 *
 * DOM overlay（box-shadow/border）的抗锯齿与 Canvas ctx.stroke() 使用不同
 * 的亚像素对齐算法，导致两者在任何缩放倍率下都无法像素一致。
 * Univer 引擎内部的 RowHeaderLayout / ColumnHeaderLayout 统一使用
 * setLineWidthByPrecision(1) + FIX_ONE_PIXEL_BLUR_OFFSET 绘制 1px 分隔线，
 * 与网格线线宽一致，无需额外 DOM 补丁。
 * -------------------------------------------------------------------------- */
.ProseMirror {
  position: relative;
  word-wrap: break-word;
  white-space: pre-wrap;
  white-space: break-spaces;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0; /* the above doesn't seem to work in Edge */
}

.ProseMirror pre {
  white-space: pre-wrap;
}

.ProseMirror li {
  position: relative;
}

.ProseMirror-hideselection *::-moz-selection { background: transparent; }

.ProseMirror-hideselection *::selection { background: transparent; }
.ProseMirror-hideselection *::-moz-selection { background: transparent; }
.ProseMirror-hideselection { caret-color: transparent; }

/* See https://github.com/ProseMirror/prosemirror/issues/1421#issuecomment-1759320191 */
.ProseMirror [draggable][contenteditable=false] { -webkit-user-select: text; -moz-user-select: text; user-select: text }

.ProseMirror-selectednode {
  outline: 2px solid #8cf;
}

/* Make sure li selections wrap around markers */

li.ProseMirror-selectednode {
  outline: none;
}

li.ProseMirror-selectednode:after {
  content: "";
  position: absolute;
  left: -32px;
  right: -2px; top: -2px; bottom: -2px;
  border: 2px solid #8cf;
  pointer-events: none;
}

/* Protect against generic img rules */

img.ProseMirror-separator {
  display: inline !important;
  border: none !important;
  margin: 0 !important;
}
/*!
 * animate.css - https://animate.style/
 * Version - 4.1.1
 * Licensed under the MIT license - http://opensource.org/licenses/MIT
 *
 * Copyright (c) 2020 Animate.css
 */
:root {
  --animate-duration: 1s;
  --animate-delay: 1s;
  --animate-repeat: 1;
}
.animate__animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-duration: var(--animate-duration);
  animation-duration: var(--animate-duration);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animate__animated.animate__infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.animate__animated.animate__repeat-1 {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: var(--animate-repeat);
  animation-iteration-count: var(--animate-repeat);
}
.animate__animated.animate__repeat-2 {
  -webkit-animation-iteration-count: calc(1 * 2);
  animation-iteration-count: calc(1 * 2);
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 2);
  animation-iteration-count: calc(var(--animate-repeat) * 2);
}
.animate__animated.animate__repeat-3 {
  -webkit-animation-iteration-count: calc(1 * 3);
  animation-iteration-count: calc(1 * 3);
  -webkit-animation-iteration-count: calc(var(--animate-repeat) * 3);
  animation-iteration-count: calc(var(--animate-repeat) * 3);
}
.animate__animated.animate__delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-delay: var(--animate-delay);
  animation-delay: var(--animate-delay);
}
.animate__animated.animate__delay-2s {
  -webkit-animation-delay: calc(1s * 2);
  animation-delay: calc(1s * 2);
  -webkit-animation-delay: calc(var(--animate-delay) * 2);
  animation-delay: calc(var(--animate-delay) * 2);
}
.animate__animated.animate__delay-3s {
  -webkit-animation-delay: calc(1s * 3);
  animation-delay: calc(1s * 3);
  -webkit-animation-delay: calc(var(--animate-delay) * 3);
  animation-delay: calc(var(--animate-delay) * 3);
}
.animate__animated.animate__delay-4s {
  -webkit-animation-delay: calc(1s * 4);
  animation-delay: calc(1s * 4);
  -webkit-animation-delay: calc(var(--animate-delay) * 4);
  animation-delay: calc(var(--animate-delay) * 4);
}
.animate__animated.animate__delay-5s {
  -webkit-animation-delay: calc(1s * 5);
  animation-delay: calc(1s * 5);
  -webkit-animation-delay: calc(var(--animate-delay) * 5);
  animation-delay: calc(var(--animate-delay) * 5);
}
.animate__animated.animate__faster {
  -webkit-animation-duration: calc(1s / 2);
  animation-duration: calc(1s / 2);
  -webkit-animation-duration: calc(var(--animate-duration) / 2);
  animation-duration: calc(var(--animate-duration) / 2);
}
.animate__animated.animate__fast {
  -webkit-animation-duration: calc(1s * 0.8);
  animation-duration: calc(1s * 0.8);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.8);
  animation-duration: calc(var(--animate-duration) * 0.8);
}
.animate__animated.animate__slow {
  -webkit-animation-duration: calc(1s * 2);
  animation-duration: calc(1s * 2);
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
}
.animate__animated.animate__slower {
  -webkit-animation-duration: calc(1s * 3);
  animation-duration: calc(1s * 3);
  -webkit-animation-duration: calc(var(--animate-duration) * 3);
  animation-duration: calc(var(--animate-duration) * 3);
}
@media print, (prefers-reduced-motion: reduce) {
  .animate__animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }

  .animate__animated[class*='Out'] {
    opacity: 0;
  }
}
/* Attention seekers  */
@-webkit-keyframes bounce {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
@keyframes bounce {
  from,
  20%,
  53%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}
.animate__bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@-webkit-keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}
@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}
.animate__flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
@-webkit-keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes rubberBand {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
}
@-webkit-keyframes shakeX {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@keyframes shakeX {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
.animate__shakeX {
  -webkit-animation-name: shakeX;
  animation-name: shakeX;
}
@-webkit-keyframes shakeY {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}
@keyframes shakeY {
  from,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(0, 10px, 0);
    transform: translate3d(0, 10px, 0);
  }
}
.animate__shakeY {
  -webkit-animation-name: shakeY;
  animation-name: shakeY;
}
@-webkit-keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes headShake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  6.5% {
    -webkit-transform: translateX(-6px) rotateY(-9deg);
    transform: translateX(-6px) rotateY(-9deg);
  }

  18.5% {
    -webkit-transform: translateX(5px) rotateY(7deg);
    transform: translateX(5px) rotateY(7deg);
  }

  31.5% {
    -webkit-transform: translateX(-3px) rotateY(-5deg);
    transform: translateX(-3px) rotateY(-5deg);
  }

  43.5% {
    -webkit-transform: translateX(2px) rotateY(3deg);
    transform: translateX(2px) rotateY(3deg);
  }

  50% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.animate__headShake {
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: headShake;
  animation-name: headShake;
}
@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
.animate__swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}
@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }

  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }

  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }

  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }

  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}
@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  22.2% {
    -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }

  33.3% {
    -webkit-transform: skewX(6.25deg) skewY(6.25deg);
    transform: skewX(6.25deg) skewY(6.25deg);
  }

  44.4% {
    -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }

  55.5% {
    -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }

  66.6% {
    -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }

  77.7% {
    -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }

  88.8% {
    -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}
.animate__jello {
  -webkit-animation-name: jello;
  animation-name: jello;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.animate__heartBeat {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  -webkit-animation-duration: calc(1s * 1.3);
  animation-duration: calc(1s * 1.3);
  -webkit-animation-duration: calc(var(--animate-duration) * 1.3);
  animation-duration: calc(var(--animate-duration) * 1.3);
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
/* Back entrances */
@-webkit-keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInDown {
  0% {
    -webkit-transform: translateY(-1200px) scale(0.7);
    transform: translateY(-1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInDown {
  -webkit-animation-name: backInDown;
  animation-name: backInDown;
}
@-webkit-keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInLeft {
  0% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInLeft {
  -webkit-animation-name: backInLeft;
  animation-name: backInLeft;
}
@-webkit-keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInRight {
  0% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInRight {
  -webkit-animation-name: backInRight;
  animation-name: backInRight;
}
@-webkit-keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes backInUp {
  0% {
    -webkit-transform: translateY(1200px) scale(0.7);
    transform: translateY(1200px) scale(0.7);
    opacity: 0.7;
  }

  80% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animate__backInUp {
  -webkit-animation-name: backInUp;
  animation-name: backInUp;
}
/* Back exits */
@-webkit-keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutDown {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(700px) scale(0.7);
    transform: translateY(700px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutDown {
  -webkit-animation-name: backOutDown;
  animation-name: backOutDown;
}
@-webkit-keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutLeft {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(-2000px) scale(0.7);
    transform: translateX(-2000px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutLeft {
  -webkit-animation-name: backOutLeft;
  animation-name: backOutLeft;
}
@-webkit-keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutRight {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateX(0px) scale(0.7);
    transform: translateX(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateX(2000px) scale(0.7);
    transform: translateX(2000px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutRight {
  -webkit-animation-name: backOutRight;
  animation-name: backOutRight;
}
@-webkit-keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}
@keyframes backOutUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }

  20% {
    -webkit-transform: translateY(0px) scale(0.7);
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    -webkit-transform: translateY(-700px) scale(0.7);
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }
}
.animate__backOutUp {
  -webkit-animation-name: backOutUp;
  animation-name: backOutUp;
}
/* Bouncing entrances  */
@-webkit-keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.animate__bounceIn {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}
@-webkit-keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -3000px, 0) scaleY(3);
    transform: translate3d(0, -3000px, 0) scaleY(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0) scaleY(0.9);
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.95);
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, 5px, 0) scaleY(0.985);
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}
@-webkit-keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0) scaleX(3);
    transform: translate3d(-3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0) scaleX(1);
    transform: translate3d(25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(-10px, 0, 0) scaleX(0.98);
    transform: translate3d(-10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(5px, 0, 0) scaleX(0.995);
    transform: translate3d(5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}
@-webkit-keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(3000px, 0, 0) scaleX(3);
    transform: translate3d(3000px, 0, 0) scaleX(3);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(-25px, 0, 0) scaleX(1);
    transform: translate3d(-25px, 0, 0) scaleX(1);
  }

  75% {
    -webkit-transform: translate3d(10px, 0, 0) scaleX(0.98);
    transform: translate3d(10px, 0, 0) scaleX(0.98);
  }

  90% {
    -webkit-transform: translate3d(-5px, 0, 0) scaleX(0.995);
    transform: translate3d(-5px, 0, 0) scaleX(0.995);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}
@-webkit-keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3000px, 0) scaleY(5);
    transform: translate3d(0, 3000px, 0) scaleY(5);
  }

  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  75% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.95);
    transform: translate3d(0, 10px, 0) scaleY(0.95);
  }

  90% {
    -webkit-transform: translate3d(0, -5px, 0) scaleY(0.985);
    transform: translate3d(0, -5px, 0) scaleY(0.985);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}
/* Bouncing exits  */
@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
@keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  50%,
  55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}
.animate__bounceOut {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}
@-webkit-keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
@keyframes bounceOutDown {
  20% {
    -webkit-transform: translate3d(0, 10px, 0) scaleY(0.985);
    transform: translate3d(0, 10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, -20px, 0) scaleY(0.9);
    transform: translate3d(0, -20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0) scaleY(3);
    transform: translate3d(0, 2000px, 0) scaleY(3);
  }
}
.animate__bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}
@-webkit-keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}
@keyframes bounceOutLeft {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(20px, 0, 0) scaleX(0.9);
    transform: translate3d(20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0) scaleX(2);
    transform: translate3d(-2000px, 0, 0) scaleX(2);
  }
}
.animate__bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}
@-webkit-keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}
@keyframes bounceOutRight {
  20% {
    opacity: 1;
    -webkit-transform: translate3d(-20px, 0, 0) scaleX(0.9);
    transform: translate3d(-20px, 0, 0) scaleX(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0) scaleX(2);
    transform: translate3d(2000px, 0, 0) scaleX(2);
  }
}
.animate__bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}
@-webkit-keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}
@keyframes bounceOutUp {
  20% {
    -webkit-transform: translate3d(0, -10px, 0) scaleY(0.985);
    transform: translate3d(0, -10px, 0) scaleY(0.985);
  }

  40%,
  45% {
    opacity: 1;
    -webkit-transform: translate3d(0, 20px, 0) scaleY(0.9);
    transform: translate3d(0, 20px, 0) scaleY(0.9);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0) scaleY(3);
    transform: translate3d(0, -2000px, 0) scaleY(3);
  }
}
.animate__bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}
/* Fading entrances  */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.animate__fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDownBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeftBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
@-webkit-keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRightBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@-webkit-keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUpBig {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}
@-webkit-keyframes fadeInTopLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInTopLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInTopLeft {
  -webkit-animation-name: fadeInTopLeft;
  animation-name: fadeInTopLeft;
}
@-webkit-keyframes fadeInTopRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInTopRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInTopRight {
  -webkit-animation-name: fadeInTopRight;
  animation-name: fadeInTopRight;
}
@-webkit-keyframes fadeInBottomLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInBottomLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInBottomLeft {
  -webkit-animation-name: fadeInBottomLeft;
  animation-name: fadeInBottomLeft;
}
@-webkit-keyframes fadeInBottomRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInBottomRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__fadeInBottomRight {
  -webkit-animation-name: fadeInBottomRight;
  animation-name: fadeInBottomRight;
}
/* Fading exits */
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
.animate__fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}
@-webkit-keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes fadeOutDown {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.animate__fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}
@-webkit-keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
@keyframes fadeOutDownBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0);
  }
}
.animate__fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}
@-webkit-keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}
@-webkit-keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
@keyframes fadeOutLeftBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0);
  }
}
.animate__fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}
@-webkit-keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes fadeOutRight {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}
@-webkit-keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
@keyframes fadeOutRightBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0);
  }
}
.animate__fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}
@-webkit-keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes fadeOutUp {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.animate__fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}
@-webkit-keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
@keyframes fadeOutUpBig {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0);
  }
}
.animate__fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}
@-webkit-keyframes fadeOutTopLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}
@keyframes fadeOutTopLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -100%, 0);
    transform: translate3d(-100%, -100%, 0);
  }
}
.animate__fadeOutTopLeft {
  -webkit-animation-name: fadeOutTopLeft;
  animation-name: fadeOutTopLeft;
}
@-webkit-keyframes fadeOutTopRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}
@keyframes fadeOutTopRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, -100%, 0);
    transform: translate3d(100%, -100%, 0);
  }
}
.animate__fadeOutTopRight {
  -webkit-animation-name: fadeOutTopRight;
  animation-name: fadeOutTopRight;
}
@-webkit-keyframes fadeOutBottomRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}
@keyframes fadeOutBottomRight {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 100%, 0);
    transform: translate3d(100%, 100%, 0);
  }
}
.animate__fadeOutBottomRight {
  -webkit-animation-name: fadeOutBottomRight;
  animation-name: fadeOutBottomRight;
}
@-webkit-keyframes fadeOutBottomLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}
@keyframes fadeOutBottomLeft {
  from {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }
}
.animate__fadeOutBottomLeft {
  -webkit-animation-name: fadeOutBottomLeft;
  animation-name: fadeOutBottomLeft;
}
/* Flippers */
@-webkit-keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
@keyframes flip {
  from {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, -360deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }

  50% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  80% {
    -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}
.animate__animated.animate__flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}
@-webkit-keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInX {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.animate__flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}
@-webkit-keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
@keyframes flipInY {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  }

  to {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }
}
.animate__flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}
@-webkit-keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutX {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}
.animate__flipOutX {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}
@-webkit-keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
@keyframes flipOutY {
  from {
    -webkit-transform: perspective(400px);
    transform: perspective(400px);
  }

  30% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;
  }

  to {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;
  }
}
.animate__flipOutY {
  -webkit-animation-duration: calc(1s * 0.75);
  animation-duration: calc(1s * 0.75);
  -webkit-animation-duration: calc(var(--animate-duration) * 0.75);
  animation-duration: calc(var(--animate-duration) * 0.75);
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}
/* Lightspeed */
@-webkit-keyframes lightSpeedInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lightSpeedInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(20deg);
    transform: skewX(20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-5deg);
    transform: skewX(-5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__lightSpeedInRight {
  -webkit-animation-name: lightSpeedInRight;
  animation-name: lightSpeedInRight;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes lightSpeedInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg);
    transform: translate3d(-100%, 0, 0) skewX(30deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: skewX(-20deg);
    transform: skewX(-20deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(5deg);
    transform: skewX(5deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__lightSpeedInLeft {
  -webkit-animation-name: lightSpeedInLeft;
  animation-name: lightSpeedInLeft;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}
@-webkit-keyframes lightSpeedOutRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
    transform: translate3d(100%, 0, 0) skewX(30deg);
    opacity: 0;
  }
}
.animate__lightSpeedOutRight {
  -webkit-animation-name: lightSpeedOutRight;
  animation-name: lightSpeedOutRight;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}
@-webkit-keyframes lightSpeedOutLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}
@keyframes lightSpeedOutLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg);
    transform: translate3d(-100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
}
.animate__lightSpeedOutLeft {
  -webkit-animation-name: lightSpeedOutLeft;
  animation-name: lightSpeedOutLeft;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}
/* Rotating entrances */
@-webkit-keyframes rotateIn {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateIn {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes rotateInDownLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateInDownRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInDownRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
@-webkit-keyframes rotateInUpLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpLeft {
  from {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateInUpRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes rotateInUpRight {
  from {
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.animate__rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
/* Rotating exits */
@-webkit-keyframes rotateOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
@keyframes rotateOut {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;
  }
}
.animate__rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
  -webkit-transform-origin: center;
  transform-origin: center;
}
@-webkit-keyframes rotateOutDownLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;
  }
}
.animate__rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateOutDownRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutDownRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.animate__rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
@-webkit-keyframes rotateOutUpLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpLeft {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;
  }
}
.animate__rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
  -webkit-transform-origin: left bottom;
  transform-origin: left bottom;
}
@-webkit-keyframes rotateOutUpRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
@keyframes rotateOutUpRight {
  from {
    opacity: 1;
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;
  }
}
.animate__rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
  -webkit-transform-origin: right bottom;
  transform-origin: right bottom;
}
/* Specials */
@-webkit-keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
@keyframes hinge {
  0% {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20%,
  60% {
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
    transform: rotate3d(0, 0, 1, 80deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40%,
  80% {
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
    transform: rotate3d(0, 0, 1, 60deg);
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  to {
    -webkit-transform: translate3d(0, 700px, 0);
    transform: translate3d(0, 700px, 0);
    opacity: 0;
  }
}
.animate__hinge {
  -webkit-animation-duration: calc(1s * 2);
  animation-duration: calc(1s * 2);
  -webkit-animation-duration: calc(var(--animate-duration) * 2);
  animation-duration: calc(var(--animate-duration) * 2);
  -webkit-animation-name: hinge;
  animation-name: hinge;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}
@-webkit-keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes jackInTheBox {
  from {
    opacity: 0;
    -webkit-transform: scale(0.1) rotate(30deg);
    transform: scale(0.1) rotate(30deg);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
  }

  50% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }

  70% {
    -webkit-transform: rotate(3deg);
    transform: rotate(3deg);
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.animate__jackInTheBox {
  -webkit-animation-name: jackInTheBox;
  animation-name: jackInTheBox;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes rollIn {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
@keyframes rollOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
  }
}
.animate__rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}
/* Zooming entrances */
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}
.animate__zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}
@-webkit-keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInDown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
}
@-webkit-keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInLeft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInLeft {
  -webkit-animation-name: zoomInLeft;
  animation-name: zoomInLeft;
}
@-webkit-keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInRight {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInRight {
  -webkit-animation-name: zoomInRight;
  animation-name: zoomInRight;
}
@-webkit-keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomInUp {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomInUp {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomInUp;
}
/* Zooming exits */
@-webkit-keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}
.animate__zoomOut {
  -webkit-animation-name: zoomOut;
  animation-name: zoomOut;
}
@-webkit-keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutDown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomOutDown {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOutDown;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
@-webkit-keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
  }
}
.animate__zoomOutLeft {
  -webkit-animation-name: zoomOutLeft;
  animation-name: zoomOutLeft;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}
@-webkit-keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
@keyframes zoomOutRight {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
  }
}
.animate__zoomOutRight {
  -webkit-animation-name: zoomOutRight;
  animation-name: zoomOutRight;
  -webkit-transform-origin: right center;
  transform-origin: right center;
}
@-webkit-keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
@keyframes zoomOutUp {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}
.animate__zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
}
/* Sliding entrances */
@-webkit-keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInDown {
  from {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}
@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}
@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}
@-webkit-keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.animate__slideInUp {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
}
/* Sliding exits */
@-webkit-keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
@keyframes slideOutDown {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.animate__slideOutDown {
  -webkit-animation-name: slideOutDown;
  animation-name: slideOutDown;
}
@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}
.animate__slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}
@-webkit-keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes slideOutRight {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }
}
.animate__slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}
@-webkit-keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
@keyframes slideOutUp {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}
.animate__slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}
.ProseMirror, .ProseMirror-static {
  outline: 0;
  border: 0;
  font-size: 16px;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}
.ProseMirror:not(.ProseMirror-static), .ProseMirror-static:not(.ProseMirror-static) {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.ProseMirror ::-moz-selection, .ProseMirror-static ::-moz-selection {
  background-color: rgba(33, 115, 70, 0.25);
  color: inherit;
}
.ProseMirror ::selection, .ProseMirror-static ::selection {
  background-color: rgba(33, 115, 70, 0.25);
  color: inherit;
}
.ProseMirror p, .ProseMirror-static p {
  margin: 0;
  margin-top: var(--paragraphSpace);
}
.ProseMirror p:first-child, .ProseMirror-static p:first-child {
  margin-top: 0;
}
.ProseMirror ul, .ProseMirror ol, .ProseMirror li, .ProseMirror-static ul, .ProseMirror-static ol, .ProseMirror-static li {
  margin: 0;
  margin-top: var(--paragraphSpace);
}
.ProseMirror ul, .ProseMirror-static ul {
  list-style-type: disc;
  padding-inline-start: 1.25em;
}
.ProseMirror ul li, .ProseMirror-static ul li {
  list-style-type: inherit;
  padding: 0.125em 0;
}
.ProseMirror ol, .ProseMirror-static ol {
  list-style-type: decimal;
  padding-inline-start: 1.25em;
}
.ProseMirror ol li, .ProseMirror-static ol li {
  list-style-type: inherit;
  padding: 0.125em 0;
}
.ProseMirror code, .ProseMirror-static code {
  background-color: #f1f1f1;
  padding: 2px 6px;
  margin: 0 1px;
  border-radius: 4px;
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
}
.ProseMirror sup, .ProseMirror-static sup {
  vertical-align: super;
  font-size: smaller;
}
.ProseMirror sub, .ProseMirror-static sub {
  vertical-align: sub;
  font-size: smaller;
}
.ProseMirror blockquote, .ProseMirror-static blockquote {
  overflow: hidden;
  padding: 0 1.2em;
  margin: 0.6em 0;
  font-style: italic;
  border-left: 4px solid #e0e0e0;
}
.ProseMirror [data-indent="1"], .ProseMirror-static [data-indent="1"] {
  padding-left: 1em;
}
.ProseMirror [data-indent="2"], .ProseMirror-static [data-indent="2"] {
  padding-left: 2em;
}
.ProseMirror [data-indent="3"], .ProseMirror-static [data-indent="3"] {
  padding-left: 3em;
}
.ProseMirror [data-indent="4"], .ProseMirror-static [data-indent="4"] {
  padding-left: 4em;
}
.ProseMirror [data-indent="5"], .ProseMirror-static [data-indent="5"] {
  padding-left: 5em;
}
.ProseMirror [data-indent="6"], .ProseMirror-static [data-indent="6"] {
  padding-left: 6em;
}
.ProseMirror [data-indent="7"], .ProseMirror-static [data-indent="7"] {
  padding-left: 7em;
}
.ProseMirror [data-indent="8"], .ProseMirror-static [data-indent="8"] {
  padding-left: 8em;
}

.ProseMirror-selectednode {
  outline: none !important;
}html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
  box-sizing: border-box;
}

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

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  color: #E5E5E5;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

ol,
ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: "";
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  text-decoration: none;
  color: #217346;
}

img {
  vertical-align: middle;
  border-style: none;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

mark.active {
  background-color: #ff9632;
}

input,
button,
select,
optgroup,
textarea {
  color: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

textarea {
  overflow: auto;
  resize: vertical;
}

a,
area,
button,
[role=button],
input:not([type=range]),
label,
select,
summary,
textarea {
  touch-action: manipulation;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #e1e1e1;
  border-radius: 3px;
}

.i-icon {
  display: inline-block;
  color: inherit;
  font-style: normal;
  line-height: 0;
  outline: 0;
  text-align: center;
  text-transform: none;
  vertical-align: -0.125em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}@font-face {
  font-display: swap;
  font-family: "SourceHanSans";
  src: url("/assets/SourceHanSans-yquDYLED.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "SourceHanSerif";
  src: url("/assets/SourceHanSerif-BepnSM6I.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "WenDingPLSongTi";
  src: url("/assets/WenDingPLSongTi-BGRqPW57.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "AlibabaPuHuiTi";
  src: url("/assets/AlibabaPuHuiTi-DmhZZWZO.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "ZhuQueFangSong";
  src: url("/assets/ZhuQueFangSong-DEfOC7qi.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "LXGWWenKai";
  src: url("/assets/LXGWWenKai-DZFs0NHN.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "WenDingPLKaiTi";
  src: url("/assets/WenDingPLKaiTi-B5NXxUeg.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "DeYiHei";
  src: url("/assets/DeYiHei-Cv0cLOfB.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "MiSans";
  src: url("/assets/MiSans-AGu9P6z3.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "CangerXiaowanzi";
  src: url("/assets/CangerXiaowanzi-DMeiPcG1.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "YousheTitleBlack";
  src: url("/assets/YousheTitleBlack-DvsoQD-n.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "FengguangMingrui";
  src: url("/assets/FengguangMingrui-ksNOhX5g.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "ShetuModernSquare";
  src: url("/assets/ShetuModernSquare-FPQ-Yk8S.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "ZcoolHappy";
  src: url("/assets/ZcoolHappy-Bl-VMWXg.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "ZizhiQuXiMai";
  src: url("/assets/ZizhiQuXiMai-Cm-DfYJC.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "SucaiJishiKangkang";
  src: url("/assets/SucaiJishiKangkang-DybiDsGh.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "SucaiJishiCoolSquare";
  src: url("/assets/SucaiJishiCoolSquare-D6FYeh6_.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "TuniuRounded";
  src: url("/assets/TuniuRounded-Cg3Uf6es.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "RuiziZhenyan";
  src: url("/assets/RuiziZhenyan-BHKInSJR.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "SourceSerif4";
  src: url("/assets/SourceSerif4-nkebc21r.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Inter";
  src: url("/assets/Inter-mPxYz03W.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "JetBrainsMono";
  src: url("/assets/JetBrainsMono-C-u5EIjh.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Literata";
  src: url("/assets/Literata-CrC8m5OH.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Roboto";
  src: url("/assets/Roboto-BNUFlTq1.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "OpenSans";
  src: url("/assets/OpenSans-C2SykmB3.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Montserrat";
  src: url("/assets/Montserrat-DdZsScEH.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "SourceSansPro";
  src: url("/assets/SourceSansPro-OwcItNbO.woff2") format("woff2");
}
@font-face {
  font-display: swap;
  font-family: "Merriweather";
  src: url("/assets/Merriweather-CrotrNh2.woff2") format("woff2");
}.pptist-wrapper {
  background-color: #1E1E1E;
  color: #E5E5E5;
}
.pptist-wrapper .thumbnails,
.pptist-wrapper .toolbar,
.pptist-wrapper .canvas-tool,
.pptist-wrapper .remark,
.pptist-wrapper .remark-editor,
.pptist-wrapper .layout-content-left,
.pptist-wrapper .layout-content-right,
.pptist-wrapper .center-top,
.pptist-wrapper .center-bottom {
  background-color: #252525 !important;
  color: #E5E5E5 !important;
  border-color: #333333 !important;
}
.pptist-wrapper .toolbar .content,
.pptist-wrapper .thumbnails .thumbnail-list,
.pptist-wrapper .canvas-tool .left-handler,
.pptist-wrapper .canvas-tool .more {
  color: #E5E5E5 !important;
}
.pptist-wrapper .canvas-tool .insert-handler-item,
.pptist-wrapper .canvas-tool .group-btn-main,
.pptist-wrapper .canvas-tool .arrow,
.pptist-wrapper .canvas-tool .handler-item,
.pptist-wrapper .canvas-tool .text,
.pptist-wrapper .canvas-tool .icon {
  color: #e9edf2 !important;
}
.pptist-wrapper .canvas-tool .insert-handler-item:not(.group-btn):hover,
.pptist-wrapper .canvas-tool .insert-handler-item.active,
.pptist-wrapper .canvas-tool .insert-handler-item.group-btn:hover,
.pptist-wrapper .canvas-tool .insert-handler-item.group-btn.active,
.pptist-wrapper .canvas-tool .group-btn-main:hover,
.pptist-wrapper .canvas-tool .arrow:hover,
.pptist-wrapper .canvas-tool .left-handler .handler-item.active,
.pptist-wrapper .canvas-tool .left-handler .handler-item:not(.disable):hover,
.pptist-wrapper .canvas-tool .right-handler .handler-item:not(.disable):hover {
  background: #363F4C !important;
  color: #ffffff !important;
}
.pptist-wrapper .canvas-tool .insert-handler-item.group-btn:hover .icon,
.pptist-wrapper .canvas-tool .group-btn-main:hover .icon,
.pptist-wrapper .canvas-tool .arrow:hover .icon {
  color: #ffffff !important;
}
.pptist-wrapper .canvas-tool .handler-item.disable {
  color: #8f99a6 !important;
  opacity: 0.65 !important;
}
.pptist-wrapper .canvas-tool .presentation-actions .presentation-action-item {
  background: transparent !important;
  border: none !important;
  color: #E5E5E5 !important;
}
.pptist-wrapper .canvas-tool .presentation-actions .presentation-action-item:hover:not(:disabled) {
  background: #363F4C !important;
  color: #ffffff !important;
}
.pptist-wrapper .canvas-tool .presentation-actions .presentation-action-item:disabled {
  opacity: 0.45 !important;
  color: #8f99a6 !important;
}
.pptist-wrapper .layout-content-left {
  background-color: #252525;
  border-right: 1px solid #333333;
}
.pptist-wrapper .center-top {
  background-color: #252525;
  border-bottom: 1px solid #333333;
}
.pptist-wrapper .layout-content-right {
  background-color: #252525;
  border-left: 1px solid #333333;
}
.pptist-wrapper .center-bottom {
  background-color: #252525;
  border-top: 1px solid #333333;
}
.pptist-wrapper .center-body {
  background-color: #2A2A2A;
}
.pptist-wrapper .label,
.pptist-wrapper .text,
.pptist-wrapper .name,
.pptist-wrapper .title,
.pptist-wrapper .sub-title,
.pptist-wrapper .tab,
.pptist-wrapper .menu-item,
.pptist-wrapper .btn,
.pptist-wrapper .content,
.pptist-wrapper .tip {
  color: #E5E5E5 !important;
}
.pptist-wrapper .panel,
.pptist-wrapper .moveable-panel,
.pptist-wrapper .modal-mask .modal-body {
  background-color: #252525;
  border-color: #333333;
  color: #E5E5E5;
}
.pptist-wrapper .ppt-button.default {
  background-color: #2A2A2A;
  border-color: #333333;
  color: #E5E5E5;
}
.pptist-wrapper .ppt-button.default:hover {
  background-color: #333333;
  border-color: #217346;
}
.pptist-wrapper .ppt-button.primary {
  background-color: #217346;
  border-color: #217346;
  color: #fff;
}
.pptist-wrapper .ppt-button.primary:hover {
  background-color: #2A9058;
}
.pptist-wrapper .ppt-input,
.pptist-wrapper .ppt-textarea {
  background: #2A2A2A !important;
  border-color: #333333 !important;
  color: #E5E5E5 !important;
}
.pptist-wrapper .ppt-input:focus,
.pptist-wrapper .ppt-textarea:focus {
  border-color: #217346;
}
.pptist-wrapper .ppt-input::-moz-placeholder, .pptist-wrapper .ppt-textarea::-moz-placeholder {
  color: #808080;
}
.pptist-wrapper .ppt-input::placeholder,
.pptist-wrapper .ppt-textarea::placeholder {
  color: #808080;
}
.pptist-wrapper .ppt-select {
  background: #2A2A2A !important;
  border-color: #333333 !important;
  color: #E5E5E5 !important;
}
.pptist-wrapper .ppt-select .options {
  background-color: #252525;
  border-color: #333333;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.pptist-wrapper .ppt-select .options .option {
  color: #E5E5E5;
}
.pptist-wrapper .ppt-select .options .option:hover {
  background-color: #333333;
}
.pptist-wrapper .ppt-select .options .option.active {
  background-color: #217346;
  color: #fff;
}
.pptist-wrapper .tabs .tab {
  color: #B3B3B3;
  border-bottom-color: transparent;
}
.pptist-wrapper .tabs .tab.active {
  color: #217346;
  border-bottom-color: #217346;
}
.pptist-wrapper .tabs .tab:hover {
  color: #E5E5E5;
}
.pptist-wrapper .layout-content-right .tabs.card {
  height: 40px !important;
  display: flex !important;
  align-items: stretch !important;
  overflow: hidden !important;
  padding: 0 !important;
  background: #f3f3f3 !important;
  border-top: 1px solid #dddddd !important;
  border-bottom: 1px solid #dddddd !important;
}
.pptist-wrapper .layout-content-right .tabs.card .tab {
  flex: 1 1 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  position: relative !important;
  min-width: 0 !important;
  padding: 0 8px !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: #222222 !important;
  background: #f3f3f3 !important;
  border-bottom: 1px solid #dddddd !important;
  border-left: 1px solid #dddddd !important;
}
.pptist-wrapper .layout-content-right .tabs.card .tab:first-child {
  border-left: none !important;
}
.pptist-wrapper .layout-content-right .tabs.card .tab + .tab::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: #d7d7d7;
}
.pptist-wrapper .layout-content-right .tabs.card .tab.active {
  background: #ffffff !important;
  color: #111111 !important;
  border-bottom: 1px solid #ffffff !important;
}
.pptist-wrapper .layout-content-right .tabs.card .tab:not(.active):hover {
  color: #111111 !important;
  background: #ececec !important;
}
.pptist-wrapper .layout-content-right .content,
.pptist-wrapper .layout-content-right .content * {
  color: #E5E5E5 !important;
}
.pptist-wrapper .layout-content-right input,
.pptist-wrapper .layout-content-right textarea,
.pptist-wrapper .layout-content-right select,
.pptist-wrapper .layout-content-right .input,
.pptist-wrapper .layout-content-right .select,
.pptist-wrapper .layout-content-right .handler,
.pptist-wrapper .layout-content-right .unit-handler,
.pptist-wrapper .layout-content-right .color-picker-item {
  background: #2A2A2A !important;
  border-color: #333333 !important;
  color: #E5E5E5 !important;
}
.pptist-wrapper .layout-content-right .input,
.pptist-wrapper .layout-content-right .number-input,
.pptist-wrapper .layout-content-right .select,
.pptist-wrapper .layout-content-right .textarea {
  background: #2F343C !important;
  border: 1px solid #4A5160 !important;
  color: #F2F5F8 !important;
}
.pptist-wrapper .layout-content-right .input input,
.pptist-wrapper .layout-content-right .number-input input,
.pptist-wrapper .layout-content-right .textarea {
  background: transparent !important;
  color: #F2F5F8 !important;
}
.pptist-wrapper .layout-content-right .input input::-moz-placeholder, .pptist-wrapper .layout-content-right .number-input input::-moz-placeholder, .pptist-wrapper .layout-content-right .textarea::-moz-placeholder {
  color: #C4CBD5 !important;
}
.pptist-wrapper .layout-content-right .input input::placeholder,
.pptist-wrapper .layout-content-right .number-input input::placeholder,
.pptist-wrapper .layout-content-right .textarea::placeholder {
  color: #C4CBD5 !important;
}
.pptist-wrapper .layout-content-right .number-input {
  padding: 0 !important;
}
.pptist-wrapper .layout-content-right .number-input .input-wrap {
  padding-left: 0 !important;
}
.pptist-wrapper .layout-content-right .number-input .prefix,
.pptist-wrapper .layout-content-right .number-input .suffix,
.pptist-wrapper .layout-content-right .input .prefix,
.pptist-wrapper .layout-content-right .input .suffix {
  background: #3B4250 !important;
  color: #F2F5F8 !important;
  padding: 0 8px !important;
}
.pptist-wrapper .layout-content-right .number-input .prefix + .input-wrap,
.pptist-wrapper .layout-content-right .input .prefix + input {
  border-left: 1px solid #4A5160 !important;
}
.pptist-wrapper .layout-content-right .number-input .handlers {
  background: #2F343C !important;
  color: #C4CBD5 !important;
  opacity: 1 !important;
}
.pptist-wrapper .layout-content-right .number-input .handlers .handler {
  border-left: 1px solid #4A5160 !important;
}
.pptist-wrapper .layout-content-right .number-input .handlers .handler + .handler {
  border-top: 1px solid #4A5160 !important;
}
.pptist-wrapper .layout-content-right .select .selector,
.pptist-wrapper .layout-content-right .select .icon {
  color: #F2F5F8 !important;
}
.pptist-wrapper .layout-content-right .select .icon,
.pptist-wrapper .layout-content-right .color-btn-icon {
  color: #C4CBD5 !important;
}
.pptist-wrapper .layout-content-right .button.default,
.pptist-wrapper .layout-content-right .button.checkbox,
.pptist-wrapper .layout-content-right .button.radio {
  background: #2F343C !important;
  border: 1px solid #4A5160 !important;
  color: #F2F5F8 !important;
}
.pptist-wrapper .layout-content-right .button.default:hover,
.pptist-wrapper .layout-content-right .button.checkbox:hover,
.pptist-wrapper .layout-content-right .button.radio:hover {
  border-color: #217346 !important;
  color: #ffffff !important;
}
.pptist-wrapper .layout-content-right .button.primary {
  background: #217346 !important;
  border-color: #217346 !important;
  color: #ffffff !important;
}
.pptist-wrapper .layout-content-right .button.disabled,
.pptist-wrapper .layout-content-right .input.disabled,
.pptist-wrapper .layout-content-right .number-input.disabled,
.pptist-wrapper .layout-content-right .select.disabled,
.pptist-wrapper .layout-content-right .textarea.disabled {
  background: #3A3F46 !important;
  border-color: #4A5160 !important;
  color: #A0A8B3 !important;
  opacity: 1 !important;
}
.pptist-wrapper .layout-content-right .text-btn {
  background: #2F343C !important;
  border: 1px solid #4A5160 !important;
  color: #F2F5F8 !important;
  border-radius: 6px !important;
}
.pptist-wrapper .layout-content-right .text-btn:hover {
  border-color: #217346 !important;
  color: #ffffff !important;
  background: #36404d !important;
}
.pptist-wrapper .layout-content-right .icon-btn {
  color: #C4CBD5 !important;
}
.pptist-wrapper .layout-content-right .slider .bar {
  background-color: #3A4048 !important;
}
.pptist-wrapper .layout-content-right .slider .track {
  background-color: #217346 !important;
}
.pptist-wrapper .layout-content-right .slider .thumb {
  background-color: #ffffff !important;
  outline: 2px solid #217346 !important;
}
.pptist-wrapper .layout-content-right .options {
  background: #2B3038 !important;
  border: 1px solid #4A5160 !important;
}
.pptist-wrapper .layout-content-right .option {
  color: #F2F5F8 !important;
}
.pptist-wrapper .layout-content-right .option.selected {
  color: #ffffff !important;
  background: rgba(33, 115, 70, 0.25) !important;
}
.pptist-wrapper .layout-content-right .checkbox {
  color: #e9edf2 !important;
}
.pptist-wrapper .layout-content-right .checkbox .checkbox-input {
  background: #2f3640 !important;
  border-color: #4a5160 !important;
}
.pptist-wrapper .layout-content-right .checkbox .checkbox-label {
  color: #e9edf2 !important;
  font-weight: 500 !important;
}
.pptist-wrapper .layout-content-right .checkbox.checked .checkbox-label {
  color: #ffffff !important;
}
.pptist-wrapper .layout-content-right .checkbox.disabled .checkbox-label {
  color: #b2bbc7 !important;
}
.pptist-wrapper ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: transparent;
}
.pptist-wrapper ::-webkit-scrollbar-thumb {
  background-color: #3A3A3A;
  border-radius: 3px;
}
.pptist-wrapper ::-webkit-scrollbar-thumb:hover {
  background-color: #545454;
}
.pptist-wrapper ::-webkit-scrollbar-track {
  background-color: #252525;
}
.pptist-wrapper .contextmenu {
  background-color: #252525;
  border: 1px solid #333333;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.pptist-wrapper .contextmenu .menu-item {
  color: #E5E5E5;
}
.pptist-wrapper .contextmenu .menu-item:hover {
  background-color: #333333;
}
.pptist-wrapper .contextmenu .menu-item.divider {
  border-bottom-color: #333333;
}
.pptist-wrapper .popover-content {
  background-color: #252525;
  border-color: #333333;
  color: #E5E5E5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.pptist-wrapper .tooltip-content {
  background-color: #333333;
  color: #E5E5E5;
}
.pptist-wrapper .modal-mask .modal-body {
  background-color: #252525;
  color: #E5E5E5;
}
.pptist-wrapper .modal-mask .modal-body .modal-close {
  color: #B3B3B3;
}
.pptist-wrapper .modal-mask .modal-body .modal-close:hover {
  color: #E5E5E5;
}
.pptist-wrapper .divider {
  background-color: #333333;
}
.pptist-wrapper .thumbnail-item {
  border-color: transparent;
}
.pptist-wrapper .thumbnail-item.active {
  border-color: #217346;
}
.pptist-wrapper .thumbnail-item:hover {
  border-color: #2A9058;
}
.pptist-wrapper a {
  color: #217346;
}
.pptist-wrapper a:hover {
  color: #2A9058;
}
.pptist-wrapper .ppt-switch {
  background-color: #333333;
}
.pptist-wrapper .ppt-switch.active {
  background-color: #217346;
}
.pptist-wrapper .ppt-checkbox .checkbox-box {
  border-color: #333333;
  background-color: #2A2A2A;
}
.pptist-wrapper .ppt-checkbox .checkbox-box.checked {
  background-color: #217346;
  border-color: #217346;
}
.pptist-wrapper .ppt-checkbox .checkbox-label {
  color: #E5E5E5;
}
.pptist-wrapper .ppt-slider .slider-track {
  background-color: #333333;
}
.pptist-wrapper .ppt-slider .slider-fill {
  background-color: #217346;
}
.pptist-wrapper .ppt-slider .slider-thumb {
  background-color: #217346;
  border-color: #217346;
}
.pptist-wrapper .color-picker {
  background-color: #252525;
  border-color: #333333;
}
.pptist-wrapper .i-icon {
  color: inherit;
}

.tippy-box[data-theme~=popover] .popover-content {
  background: #252a31 !important;
  border: 1px solid #404854 !important;
  color: #e9edf2 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45) !important;
}

.tippy-box[data-theme~=popover] .popover-content .tabs {
  border-bottom: 1px solid #404854 !important;
}

.tippy-box[data-theme~=popover] .popover-content .tabs .tab {
  color: #c7cfd9 !important;
  background: transparent !important;
}

.tippy-box[data-theme~=popover] .popover-content .tabs .tab.active {
  color: #e9edf2 !important;
  border-bottom: 2px solid #217346 !important;
}

.tippy-box[data-theme~=popover] .element-animation-panel .animation-pool {
  background: #252a31 !important;
  color: #e9edf2 !important;
}

.tippy-box[data-theme~=popover] .element-animation-panel .type-title {
  color: #f4f7fb !important;
  border-left-width: 4px !important;
  border-left-style: solid !important;
  background: #353d48 !important;
}

.tippy-box[data-theme~=popover] .element-animation-panel .animation-box {
  background: #2f3640 !important;
  color: #f4f7fb !important;
  border: 1px solid #4a5160 !important;
}

.tippy-box[data-theme~=popover] .element-animation-panel .animation-box:hover {
  border-color: #217346 !important;
  background: #384350 !important;
}

.tippy-box[data-theme~=popover] .options {
  background: #252a31 !important;
  border: 1px solid #404854 !important;
}

.tippy-box[data-theme~=popover] .option {
  color: #e9edf2 !important;
}

.tippy-box[data-theme~=popover] .option:hover:not(.disabled):not(.selected) {
  background: #323a45 !important;
}

.tippy-box[data-theme~=popover] .option.selected {
  color: #ffffff !important;
  background: rgba(33, 115, 70, 0.3) !important;
}

.modal .modal-content {
  background: #252a31 !important;
  border: 1px solid #404854 !important;
  color: #e9edf2 !important;
}

.modal .modal-content .close-btn {
  color: #c7cfd9 !important;
}

.modal .modal-content .close-btn:hover {
  color: #ffffff !important;
}

.tippy-box[data-theme~=popover] .popover-menu-item {
  color: #e9edf2 !important;
}

.tippy-box[data-theme~=popover] .popover-menu-item:hover {
  background: #323a45 !important;
}

.modal .modal-content .input,
.modal .modal-content .number-input,
.modal .modal-content .select,
.modal .modal-content .textarea {
  background: #2f3640 !important;
  border: 1px solid #4a5160 !important;
  color: #eef2f7 !important;
}

.modal .modal-content .input input,
.modal .modal-content .number-input input,
.modal .modal-content .textarea {
  background: transparent !important;
  color: #eef2f7 !important;
}

.modal .modal-content .input input::-moz-placeholder, .modal .modal-content .number-input input::-moz-placeholder, .modal .modal-content .textarea::-moz-placeholder {
  color: #b7c0cc !important;
}

.modal .modal-content .input input::placeholder,
.modal .modal-content .number-input input::placeholder,
.modal .modal-content .textarea::placeholder {
  color: #b7c0cc !important;
}

.modal .modal-content .button.default,
.modal .modal-content .button.checkbox,
.modal .modal-content .button.radio {
  background: #2f3640 !important;
  border: 1px solid #4a5160 !important;
  color: #eef2f7 !important;
}

.modal .modal-content .button.primary {
  background: #217346 !important;
  border-color: #217346 !important;
  color: #ffffff !important;
}

.modal .modal-content .button.disabled,
.modal .modal-content .input.disabled,
.modal .modal-content .number-input.disabled,
.modal .modal-content .select.disabled,
.modal .modal-content .textarea.disabled {
  background: #3a3f46 !important;
  border-color: #4a5160 !important;
  color: #a0a8b3 !important;
  opacity: 1 !important;
}

.modal .modal-content .checkbox {
  color: #e9edf2 !important;
}

.modal .modal-content .checkbox .checkbox-input {
  background: #2f3640 !important;
  border-color: #4a5160 !important;
}

.modal .modal-content .checkbox .checkbox-label {
  color: #e9edf2 !important;
}

.modal .modal-content .checkbox.disabled .checkbox-label {
  color: #b2bbc7 !important;
}

.pptist-wrapper .moveable-panel {
  background: #252a31 !important;
  border: 1px solid #404854 !important;
  color: #e9edf2 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45) !important;
}

.pptist-wrapper .moveable-panel .header {
  border-bottom: 1px solid #404854 !important;
  color: #e9edf2 !important;
}

.pptist-wrapper .moveable-panel .title,
.pptist-wrapper .moveable-panel .close-btn {
  color: #d8dee7 !important;
}

.pptist-wrapper .moveable-panel .content {
  color: #e9edf2 !important;
}

.pptist-wrapper .symbol-panel .emoji-type {
  color: #c9d1dc !important;
}

.pptist-wrapper .symbol-panel .emoji-type.active {
  color: #ffffff !important;
  background: rgba(33, 115, 70, 0.28) !important;
}

.pptist-wrapper .symbol-panel .symbol-group + .symbol-group {
  border-top: 1px solid #3e4652 !important;
}

.pptist-wrapper .symbol-panel .symbol-item {
  border-color: #4a5160 !important;
}

.pptist-wrapper .symbol-panel .symbol-item .symbol {
  background: #2f3640 !important;
  color: #eef2f7 !important;
}

.pptist-wrapper .symbol-panel .close-btn {
  color: #c9d1dc !important;
}

.pptist-wrapper .symbol-panel .close-btn:hover,
.pptist-wrapper .symbol-panel .symbol-item:hover {
  color: #ffffff !important;
  border-color: #217346 !important;
}

.pptist-wrapper .latex-editor .preview,
.pptist-wrapper .latex-editor .right,
.pptist-wrapper .latex-editor .formula-item-content {
  background: #2a313a !important;
  border-color: #404854 !important;
  color: #e9edf2 !important;
}

.pptist-wrapper .latex-editor .placeholder,
.pptist-wrapper .latex-editor .formula-title {
  color: #d5dce6 !important;
}

.pptist-wrapper .latex-editor .symbol-item:hover {
  background: #353f4b !important;
}

.pptist-wrapper .latex-editor .footer .btn.button.default {
  background: #2f3640 !important;
  border-color: #4a5160 !important;
  color: #e9edf2 !important;
}

.modal .modal-content .latex-editor,
.modal .modal-content .latex-editor * {
  color: #e9edf2 !important;
}

.modal .modal-content .latex-editor .right,
.modal .modal-content .latex-editor .preview,
.modal .modal-content .latex-editor .formula-item-content {
  background: #2a313a !important;
  border: 1px solid #404854 !important;
}

.modal .modal-content .latex-editor .placeholder {
  color: #b7c0cc !important;
}

.modal .modal-content .latex-editor .tabs.card {
  background: #232830 !important;
  border-bottom: 1px solid #404854 !important;
}

.modal .modal-content .latex-editor .tabs.card .tab {
  background: #2a313a !important;
  color: #c8d0db !important;
  border-left: 1px solid #404854 !important;
  border-bottom: 1px solid #404854 !important;
}

.modal .modal-content .latex-editor .tabs.card .tab:first-child {
  border-left: none !important;
}

.modal .modal-content .latex-editor .tabs.card .tab.active {
  background: #1f242c !important;
  color: #ffffff !important;
  border-bottom: 2px solid #217346 !important;
}

.modal .modal-content .latex-editor .tabs:not(.card) {
  border-bottom: 1px solid #404854 !important;
}

.modal .modal-content .latex-editor .tabs:not(.card) .tab {
  color: #c8d0db !important;
}

.modal .modal-content .latex-editor .tabs:not(.card) .tab.active {
  color: #ffffff !important;
  border-bottom-color: #217346 !important;
}

.modal .modal-content .latex-editor .symbol-item:hover {
  background: #353f4b !important;
  border-radius: 4px !important;
}

.modal .modal-content .latex-editor .preview-content {
  background: #232830 !important;
}

.pptist-wrapper .rich-text-base .list-wrap {
  color: #d5dce6 !important;
}

.pptist-wrapper .rich-text-base .list {
  background: #2f3640 !important;
  border: 1px solid #4a5160 !important;
}

.pptist-wrapper .rich-text-base .list-item span {
  background: #aeb7c3 !important;
}

.pptist-wrapper .chart-data-editor .editor-content,
.pptist-wrapper .chart-data-editor table td,
.pptist-wrapper .chart-data-editor .col-header,
.pptist-wrapper .chart-data-editor .row-header,
.pptist-wrapper .chart-data-editor .all-header {
  border-color: #4a5160 !important;
}

.pptist-wrapper .chart-data-editor .editor-content {
  background: #252a31 !important;
}

.pptist-wrapper .chart-data-editor .item {
  color: #e9edf2 !important;
}

.pptist-wrapper .chart-data-editor table td.head {
  background: rgba(33, 115, 70, 0.22) !important;
}

.pptist-wrapper .chart-data-editor .col-header,
.pptist-wrapper .chart-data-editor .row-header,
.pptist-wrapper .chart-data-editor .all-header {
  background: #2f3640 !important;
}

.pptist-wrapper .chart-data-editor .col-key,
.pptist-wrapper .chart-data-editor .row-key,
.pptist-wrapper .chart-data-editor .left,
.pptist-wrapper .chart-data-editor .change {
  color: #d5dce6 !important;
}

.modal .modal-content .chart-data-editor,
.modal .modal-content .chart-data-editor * {
  color: #e7ecf2 !important;
}

.modal .modal-content .chart-data-editor .editor-content {
  background: #252a31 !important;
  border-right: 1px solid #4a5160 !important;
  border-bottom: 1px solid #4a5160 !important;
}

.modal .modal-content .chart-data-editor .col-header,
.modal .modal-content .chart-data-editor .row-header,
.modal .modal-content .chart-data-editor .all-header {
  background: #2f3640 !important;
  border-color: #4a5160 !important;
}

.modal .modal-content .chart-data-editor table td {
  border-color: #4a5160 !important;
}

.modal .modal-content .chart-data-editor table td.head {
  background: rgba(33, 115, 70, 0.22) !important;
}

.modal .modal-content .chart-data-editor .item {
  color: #eef2f7 !important;
}

.modal .modal-content .chart-data-editor .change {
  color: #c8d0db !important;
}

.modal .modal-content .export-pptx-dialog .configs .title {
  color: #e9edf2 !important;
}

.modal .modal-content .export-pptx-dialog .configs .title::after {
  color: #c2c9d3 !important;
}

.modal .modal-content .export-pptx-dialog .configs .tip {
  color: #c2c9d3 !important;
}

.modal .modal-content .export-pptx-dialog .radio-button {
  color: #edf2f8 !important;
}

.modal .modal-content .export-img-dialog .configs .title,
.modal .modal-content .export-pdf-dialog .configs .title {
  color: #e9edf2 !important;
}

.modal .modal-content .export-img-dialog .configs .title::after {
  color: #c2c9d3 !important;
}

.modal .modal-content .export-img-dialog .configs .tip,
.modal .modal-content .export-pdf-dialog .configs .tip {
  color: #c2c9d3 !important;
}

.modal .modal-content .export-img-dialog .radio-button,
.modal .modal-content .export-pdf-dialog .radio-button,
.modal .modal-content .export-pdf-dialog .select .selector,
.modal .modal-content .export-pdf-dialog .select .icon {
  color: #edf2f8 !important;
}.menu-content[data-v-2e4a84f5] {
  width: 180px;
  padding: 5px 0;
  background: #fff;
  border: 1px solid #333333;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  list-style: none;
  margin: 0;
}
.menu-item[data-v-2e4a84f5] {
  padding: 0 20px;
  color: #333;
  font-size: 12px;
  transition: all 0.1s;
  white-space: nowrap;
  height: 30px;
  line-height: 30px;
  background-color: #fff;
  cursor: pointer;
}
.menu-item:not(.disable):hover > .menu-item-content > .sub-menu[data-v-2e4a84f5] {
  display: block;
}
.menu-item:not(.disable):hover > .has-children.has-handler[data-v-2e4a84f5]::after {
  transform: scale(1);
}
.menu-item[data-v-2e4a84f5]:hover:not(.disable) {
  background-color: rgba(33, 115, 70, 0.15);
}
.menu-item.divider[data-v-2e4a84f5] {
  height: 1px;
  overflow: hidden;
  margin: 5px;
  background-color: #e5e5e5;
  line-height: 0;
  padding: 0;
}
.menu-item.disable[data-v-2e4a84f5] {
  color: #b1b1b1;
  cursor: no-drop;
}
.menu-item-content[data-v-2e4a84f5] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.menu-item-content.has-children[data-v-2e4a84f5]::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-width: 1px;
  border-style: solid;
  border-color: #666 #666 transparent transparent;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.menu-item-content.has-children.has-handler[data-v-2e4a84f5]::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.3);
  position: absolute;
  right: 18px;
  top: 3px;
  transform: scale(0);
  transition: transform 0.1s;
}
.menu-item-content .sub-text[data-v-2e4a84f5] {
  color: #666;
  opacity: 0.6;
}
.menu-item-content .sub-menu[data-v-2e4a84f5] {
  width: 120px;
  position: absolute;
  display: none;
  left: 112%;
  top: -6px;
}.contextmenu-mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9998;
}
.contextmenu {
  position: fixed;
  z-index: 9999;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}.tippy-box[data-theme~=tooltip] {
  background-color: #262626;
  color: #fff;
  border-radius: 4px;
  padding: 8px;
  font-size: 12px;
  line-height: 1.5;
}
.tippy-box[data-theme~=tooltip] .tippy-arrow {
  width: 12px;
  height: 12px;
  color: #262626;
}
.tippy-box[data-theme~=tooltip] .tippy-arrow::before {
  content: "";
  position: absolute;
  border-color: transparent;
  border-style: solid;
}
.tippy-box[data-theme~=tooltip][data-placement^=top] > .tippy-arrow {
  bottom: 0;
}
.tippy-box[data-theme~=tooltip][data-placement^=top] > .tippy-arrow::before {
  bottom: -5px;
  left: 0;
  border-width: 6px 6px 0;
  border-top-color: initial;
  transform-origin: center top;
}
.tippy-box[data-theme~=tooltip][data-placement^=bottom] > .tippy-arrow {
  top: 0;
}
.tippy-box[data-theme~=tooltip][data-placement^=bottom] > .tippy-arrow::before {
  top: -5px;
  left: 0;
  border-width: 0 6px 6px;
  border-bottom-color: initial;
  transform-origin: center bottom;
}
.tippy-box[data-theme~=tooltip][data-placement^=left] > .tippy-arrow {
  right: 0;
}
.tippy-box[data-theme~=tooltip][data-placement^=left] > .tippy-arrow::before {
  border-width: 6px 0 6px 6px;
  border-left-color: initial;
  right: -5px;
  transform-origin: center left;
}
.tippy-box[data-theme~=tooltip][data-placement^=right] > .tippy-arrow {
  left: 0;
}
.tippy-box[data-theme~=tooltip][data-placement^=right] > .tippy-arrow::before {
  left: -5px;
  border-width: 6px 6px 6px 0;
  border-right-color: initial;
  transform-origin: center right;
}.directive-loading-overlay {
  overflow: hidden;
  z-index: 99;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.directive-loading-overlay::before {
  content: "";
  width: 24px;
  height: 24px;
  border: 2px solid #217346;
  border-top-color: transparent;
  border-radius: 50%;
  animation: directive-loading 0.8s linear infinite;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -12px;
  margin-top: -12px;
  z-index: 1;
}
.directive-loading-overlay.has-text::before {
  margin-top: -30px;
}
.directive-loading-overlay::after {
  content: var(--directive-loading-text, "");
  padding-top: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  background-color: rgba(255, 255, 255, 0.75);
  color: #217346;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

@keyframes directive-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}.message[data-v-479aa344] {
  max-width: 600px;
}
.message + .message[data-v-479aa344] {
  margin-top: 15px;
}
.message-container[data-v-479aa344] {
  min-width: 50px;
  display: flex;
  align-items: center;
  padding: 10px;
  font-size: 13px;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.15);
  background: #fff;
  pointer-events: all;
  position: relative;
}
.message-container .icons[data-v-479aa344] {
  display: flex;
  align-items: center;
  margin-right: 10px;
}
.message-container .icons .loading-icon[data-v-479aa344] {
  animation: loading-icon-spin-479aa344 1s linear infinite;
}
.message-container .title[data-v-479aa344] {
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.message-container .content[data-v-479aa344] {
  width: 100%;
}
.message-container .description[data-v-479aa344] {
  line-height: 1.5;
  color: #E5E5E5;
}
.message-container .title + .description[data-v-479aa344] {
  margin-top: 5px;
}
.message-container .control[data-v-479aa344] {
  position: relative;
  height: 100%;
  margin-left: 10px;
}
.message-container .close-btn[data-v-479aa344] {
  font-size: 15px;
  color: #666;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.message-container .close-btn[data-v-479aa344]:hover {
  color: #217346;
}
.message-fade-enter-active[data-v-479aa344] {
  animation: message-fade-in-down-479aa344 0.3s;
}
.message-fade-leave-active[data-v-479aa344] {
  animation: message-fade-out-479aa344 0.3s;
}
@keyframes message-fade-in-down-479aa344 {
0% {
    opacity: 0;
    transform: translateY(-20px);
}
100% {
    opacity: 1;
    transform: translateY(0);
}
}
@keyframes message-fade-out-479aa344 {
0% {
    opacity: 1;
    margin-top: 0;
}
100% {
    opacity: 0;
    margin-top: -45px;
}
}
@keyframes loading-icon-spin-479aa344 {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}svg[data-v-28d15da0] {
  overflow: visible;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}svg[data-v-4473f475] {
  overflow: visible;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}svg[data-v-b19eeb72] {
  overflow: visible;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}.image-clip-handler[data-v-90f7712c] {
  width: 100%;
  height: 100%;
  position: relative;
}
.image-clip-handler .bottom-img[data-v-90f7712c] {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}
.image-clip-handler img[data-v-90f7712c] {
  width: 100%;
  height: 100%;
}
.image-clip-handler .top-image-content[data-v-90f7712c] {
  position: absolute;
  overflow: hidden;
}
.image-clip-handler .top-image-content img[data-v-90f7712c] {
  position: absolute;
}
.operate[data-v-90f7712c] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  cursor: move;
}
.clip-point[data-v-90f7712c] {
  position: absolute;
  width: 16px;
  height: 16px;
}
.clip-point svg[data-v-90f7712c] {
  overflow: visible;
}
.clip-point.left-top[data-v-90f7712c] {
  left: 0;
  top: 0;
}
.clip-point.right-top[data-v-90f7712c] {
  left: 100%;
  top: 0;
  transform: rotate(90deg);
  transform-origin: 0 0;
}
.clip-point.left-bottom[data-v-90f7712c] {
  left: 0;
  top: 100%;
  transform: rotate(-90deg);
  transform-origin: 0 0;
}
.clip-point.right-bottom[data-v-90f7712c] {
  left: 100%;
  top: 100%;
  transform: rotate(180deg);
  transform-origin: 0 0;
}
.clip-point.top[data-v-90f7712c] {
  left: 50%;
  top: 0;
  margin-left: -8px;
}
.clip-point.bottom[data-v-90f7712c] {
  left: 50%;
  bottom: 0;
  margin-left: -8px;
  transform: rotate(180deg);
}
.clip-point.left[data-v-90f7712c] {
  left: 0;
  top: 50%;
  margin-top: -8px;
  transform: rotate(-90deg);
}
.clip-point.right[data-v-90f7712c] {
  right: 0;
  top: 50%;
  margin-top: -8px;
  transform: rotate(90deg);
}
.clip-point.left-top.rotate-0[data-v-90f7712c], .clip-point.right-bottom.rotate-0[data-v-90f7712c], .clip-point.left.rotate-45[data-v-90f7712c], .clip-point.right.rotate-45[data-v-90f7712c], .clip-point.left-bottom.rotate-90[data-v-90f7712c], .clip-point.right-top.rotate-90[data-v-90f7712c], .clip-point.top.rotate-135[data-v-90f7712c], .clip-point.bottom.rotate-135[data-v-90f7712c] {
  cursor: nwse-resize;
}
.clip-point.top.rotate-0[data-v-90f7712c], .clip-point.bottom.rotate-0[data-v-90f7712c], .clip-point.left-top.rotate-45[data-v-90f7712c], .clip-point.right-bottom.rotate-45[data-v-90f7712c], .clip-point.left.rotate-90[data-v-90f7712c], .clip-point.right.rotate-90[data-v-90f7712c], .clip-point.left-bottom.rotate-135[data-v-90f7712c], .clip-point.right-top.rotate-135[data-v-90f7712c] {
  cursor: ns-resize;
}
.clip-point.left-bottom.rotate-0[data-v-90f7712c], .clip-point.right-top.rotate-0[data-v-90f7712c], .clip-point.top.rotate-45[data-v-90f7712c], .clip-point.bottom.rotate-45[data-v-90f7712c], .clip-point.left-top.rotate-90[data-v-90f7712c], .clip-point.right-bottom.rotate-90[data-v-90f7712c], .clip-point.left.rotate-135[data-v-90f7712c], .clip-point.right.rotate-135[data-v-90f7712c] {
  cursor: nesw-resize;
}
.clip-point.left.rotate-0[data-v-90f7712c], .clip-point.right.rotate-0[data-v-90f7712c], .clip-point.left-bottom.rotate-45[data-v-90f7712c], .clip-point.right-top.rotate-45[data-v-90f7712c], .clip-point.top.rotate-90[data-v-90f7712c], .clip-point.bottom.rotate-90[data-v-90f7712c], .clip-point.left-top.rotate-135[data-v-90f7712c], .clip-point.right-bottom.rotate-135[data-v-90f7712c] {
  cursor: ew-resize;
}.editable-element-image[data-v-e0ab52a7] {
  position: absolute;
}
.editable-element-image.lock .element-content[data-v-e0ab52a7] {
  cursor: default;
}
.rotate-wrapper[data-v-e0ab52a7] {
  width: 100%;
  height: 100%;
}
.element-content[data-v-e0ab52a7] {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: move;
}
.element-content .image-content[data-v-e0ab52a7] {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.element-content img[data-v-e0ab52a7] {
  position: absolute;
}
.color-mask[data-v-e0ab52a7] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}svg[data-v-9486c7d9] {
  overflow: visible;
  position: absolute;
  top: 0;
  left: 0;
}.prosemirror-editor[data-v-ed88f3a5] {
  cursor: text;
}
.prosemirror-editor.format-painter[data-v-ed88f3a5] {
  cursor: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTcuMzUuMDEybC0uMDY2Ljk5OGE1LjI3MSA1LjI3MSAwIDAwLTEuMTg0LjA2IDMuOCAzLjggMCAwMC0uOTMzLjQ3MmMtLjQ0LjM1Ni0uNzgzLjgxMS0uOTk4IDEuMzI0bC4wMTgtLjAzNnY1LjEyaDEuMDR2Ljk4aC0xLjA0bC0uMDAyIDQuMTVjLjE4Ny40MjYuNDYuODEuNzkxIDEuMTE3bC4xNzUuMTUyYy4yOTMuMjA4LjYxNS4zNzMuODkuNDcyLjQxLjA4Mi44My4xMTIgMS4yNDkuMDlsLjA1Ny45OTlhNi4wNjMgNi4wNjMgMCAwMS0xLjU4OC0uMTI5IDQuODM2IDQuODM2IDAgMDEtMS4yNS0uNjQ3IDQuNDYzIDQuNDYzIDAgMDEtLjgzOC0uODgzYy0uMjI0LjMzMi0uNS42NDItLjgyNC45MjdhNC4xMSA0LjExIDAgMDEtMS4zMDUuNjMzQTYuMTI2IDYuMTI2IDAgMDEwIDE1LjkwOWwuMDY4LS45OTdjLjQyNC4wMjYuODUtLjAwMSAxLjIxNy0uMDcuMzM2LS4wOTkuNjUxLS4yNTQuODk0LS40My40My0uMzguNzY1LS44NDcuOTgyLTEuMzY4bC0uMDA1LjAxNFY4LjkzSDIuMTE1di0uOThoMS4wNFYyLjg2MmEzLjc3IDMuNzcgMCAwMC0uNzc0LTEuMTY3bC0uMTY1LS4xNTZhMy4wNjQgMy4wNjQgMCAwMC0uODgtLjQ0OEE1LjA2MiA1LjA2MiAwIDAwLjA2NyAxLjAxTDAgLjAxMmE2LjE0IDYuMTQgMCAwMTEuNTkyLjExYy40NTMuMTM1Ljg3Ny4zNDUgMS4yOS42NS4zLjI2NS41NjUuNTY0Ljc4Ny44OS4yMzMtLjMzMS41Mi0uNjM0Ljg1My0uOTA0YTQuODM1IDQuODM1IDAgMDExLjMtLjY0OEE2LjE1NSA2LjE1NSAwIDAxNy4zNS4wMTJ6IiBmaWxsPSIjMEQwRDBEIi8+PHBhdGggZD0iTTE3LjM1IDE0LjVsNC41LTQuNS02LTZjLTIgMi0zIDItNS41IDIuNS40IDMuMiA0LjgzMyA2LjY2NyA3IDh6bTQuNTg4LTQuNDkzYS4zLjMgMCAwMC40MjQgMGwuNjgtLjY4YTEuNSAxLjUgMCAwMDAtMi4xMjJMMjEuNjkgNS44NTNsMi4wMjUtMS41ODNhMS42MjkgMS42MjkgMCAxMC0yLjI3OS0yLjI5NmwtMS42MDMgMi4wMjItMS4zNTctMS4zNTdhMS41IDEuNSAwIDAwLTIuMTIxIDBsLS42OC42OGEuMy4zIDAgMDAwIC40MjVsNi4yNjMgNi4yNjN6IiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTE1Ljg5MiAzLjk2MnMtMS4wMyAxLjIwMi0yLjQ5NCAxLjg5Yy0xLjAwNi40NzQtMi4xOC41ODYtMi43MzQuNjI3LS4yLjAxNS0uMzQ0LjIxLS4yNzYuMzk5LjI5Mi44MiAxLjExMiAyLjggMi42NTggNC4zNDYgMi4xMjYgMi4xMjcgMy42NTggMi45NjggNC4xNDIgMy4yMDMuMS4wNDguMjE0LjAzLjI5OC0uMDQyLjM4Ni0uMzI1IDEuNS0xLjI3NyAyLjIxLTEuOTg2Ljg5Mi0uODg5IDIuMTg3LTIuNDQ3IDIuMTg3LTIuNDQ3bS40NzkuMDU1YS4zLjMgMCAwMS0uNDI0IDBsLTYuMjY0LTYuMjYzYS4zLjMgMCAwMTAtLjQyNWwuNjgtLjY4YTEuNSAxLjUgMCAwMTIuMTIyIDBsMS4zNTcgMS4zNTcgMS42MDMtMi4wMjJhMS42MjkgMS42MjkgMCAxMTIuMjggMi4yOTZMMjEuNjkgNS44NTNsMS4zNTIgMS4zNTJhMS41IDEuNSAwIDAxMCAyLjEyMmwtLjY4LjY4eiIgc3Ryb2tlPSIjMzMzIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PC9zdmc+) 2 5, default !important;
}.editable-element-text[data-v-2ae3e662] {
  position: absolute;
}
.editable-element-text.lock .element-content[data-v-2ae3e662] {
  cursor: default;
}
.rotate-wrapper[data-v-2ae3e662] {
  width: 100%;
  height: 100%;
}
.element-content[data-v-2ae3e662] {
  position: relative;
  padding: 10px;
  line-height: 1.5;
  word-break: break-word;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  cursor: move;
}
.element-content .text[data-v-2ae3e662] {
  position: relative;
}
.element-content[data-v-2ae3e662] a {
  cursor: text;
}
.drag-handler[data-v-2ae3e662] {
  height: 10px;
  position: absolute;
  left: 0;
  right: 0;
}
.drag-handler.top[data-v-2ae3e662] {
  top: 0;
}
.drag-handler.bottom[data-v-2ae3e662] {
  bottom: 0;
}.editable-element-shape[data-v-a7f0af1b] {
  position: absolute;
  pointer-events: none;
  background-size: contain;
}
.editable-element-shape.lock .element-content[data-v-a7f0af1b] {
  cursor: default;
}
.editable-element-shape.format-painter .element-content[data-v-a7f0af1b] {
  cursor: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQiIGhlaWdodD0iMTYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIuNzUgMTMuNzY0VjEuNDIxYS4zLjMgMCAwMS40NDgtLjI2bDEwLjkxIDYuMTk3YS4zLjMgMCAwMS0uMTE2LjU1OWwtNC4xOTYuNDQyIDIuNTgyIDQuNDcyYS4zLjMgMCAwMS0uMTEuNDFsLTMuMTg0IDEuODM4YS4zLjMgMCAwMS0uNDEtLjExbC0yLjU4MS00LjQ3Mi0yLjgxIDMuNDU2YS4zLjMgMCAwMS0uNTMzLS4xODl6IiBmaWxsPSIjZmZmIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48cGF0aCBkPSJNMjYgMTQuNWw0LjUtNC41LTYtNmMtMiAyLTMgMi01LjUgMi41LjQgMy4yIDQuODMzIDYuNjY3IDcgOHptNC41ODgtNC40OTRhLjMuMyAwIDAwLjQyNCAwbC42OC0uNjhhMS41IDEuNSAwIDAwMC0yLjEyMUwzMC4zNCA1Ljg1MmwyLjAyNi0xLjU4MmExLjYyOSAxLjYyOSAwIDEwLTIuMjgtMi4yOTZsLTEuNjAzIDIuMDIxLTEuMzU3LTEuMzU2YTEuNSAxLjUgMCAwMC0yLjEyIDBsLS42ODEuNjhhLjMuMyAwIDAwMCAuNDI0bDYuMjYzIDYuMjYzeiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik0yNC41NDMgMy45NjFzLTEuMDMgMS4yMDItMi40OTQgMS44OTFjLTEuMDA2LjQ3NC0yLjE4MS41ODUtMi43MzQuNjI3LS4yLjAxNC0uMzQ0LjIwOS0uMjc3LjM5OC4yOTMuODIgMS4xMTIgMi44MDEgMi42NTggNC4zNDcgMi4xMjYgMi4xMjYgMy42NTkgMi45NjggNC4xNDIgMy4yMDIuMS4wNDguMjE1LjAzLjI5OS0uMDQxLjM4NS0uMzI2IDEuNS0xLjI3NyAyLjIxLTEuOTg2Ljg5MS0uODkgMi4xODYtMi40NDggMi4xODYtMi40NDhtLjQ4LjA1NWEuMy4zIDAgMDEtLjQyNSAwbC02LjI2My02LjI2M2EuMy4zIDAgMDEwLS40MjRsLjY4LS42OGExLjUgMS41IDAgMDEyLjEyMiAwbDEuMzU2IDEuMzU2IDEuNjA0LTIuMDIxYTEuNjI5IDEuNjI5IDAgMTEyLjI3OSAyLjI5NkwzMC4zNCA1Ljg1MmwxLjM1MyAxLjM1M2ExLjUgMS41IDAgMDEwIDIuMTIxbC0uNjguNjh6IiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz48L3N2Zz4=) 2 5, default !important;
}
.rotate-wrapper[data-v-a7f0af1b] {
  width: 100%;
  height: 100%;
}
.element-content[data-v-a7f0af1b] {
  width: 100%;
  height: 100%;
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  cursor: move;
}
.element-content svg[data-v-a7f0af1b] {
  transform-origin: 0 0;
  overflow: visible;
  display: block;
}
.element-content .shape-path[data-v-a7f0af1b] {
  pointer-events: all;
}
.shape-text[data-v-a7f0af1b] {
  display: flex;
  flex-direction: column;
  padding: 10px;
  line-height: 1.5;
  word-break: break-word;
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.shape-text.editable[data-v-a7f0af1b] {
  pointer-events: all;
}
.shape-text.top[data-v-a7f0af1b] {
  justify-content: flex-start;
}
.shape-text.middle[data-v-a7f0af1b] {
  justify-content: center;
}
.shape-text.bottom[data-v-a7f0af1b] {
  justify-content: flex-end;
}.editable-element-shape[data-v-b634dd7b] {
  position: absolute;
  pointer-events: none;
}
.editable-element-shape.lock .line-path[data-v-b634dd7b], .editable-element-shape.lock .line-point[data-v-b634dd7b] {
  cursor: default;
}
.element-content[data-v-b634dd7b] {
  width: 100%;
  height: 100%;
  position: relative;
}
.element-content svg[data-v-b634dd7b] {
  transform-origin: 0 0;
  overflow: visible;
}
.line-path[data-v-b634dd7b], .line-point[data-v-b634dd7b] {
  pointer-events: all;
  cursor: move;
}.chart[data-v-4c3e91c7] {
  width: 100%;
  height: 100%;
}.editable-element-chart[data-v-0cd53acf] {
  position: absolute;
}
.editable-element-chart.lock .element-content[data-v-0cd53acf] {
  cursor: default;
}
.rotate-wrapper[data-v-0cd53acf] {
  width: 100%;
  height: 100%;
}
.element-content[data-v-0cd53acf] {
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: move;
}.custom-textarea[data-v-b2a48145] {
  border: 0;
  outline: 0;
  -webkit-user-modify: read-write-plaintext-only;
}.editable-table[data-v-19fb8f73] {
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
table[data-v-19fb8f73] {
  width: 100%;
  position: relative;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
  word-wrap: break-word;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  --themeColor: $themeColor;
  --subThemeColor1: $themeColor;
  --subThemeColor2: $themeColor;
}
table.theme[data-v-19fb8f73] {
  background-color: #fff;
}
table.theme tr:nth-child(2n) .cell[data-v-19fb8f73] {
  background-color: var(--subThemeColor1);
}
table.theme tr:nth-child(2n+1) .cell[data-v-19fb8f73] {
  background-color: var(--subThemeColor2);
}
table.theme.row-header tr:first-child .cell[data-v-19fb8f73] {
  background-color: var(--themeColor);
}
table.theme.row-footer tr:last-child .cell[data-v-19fb8f73] {
  background-color: var(--themeColor);
}
table.theme.col-header tr .cell[data-v-19fb8f73]:first-child {
  background-color: var(--themeColor);
}
table.theme.col-footer tr .cell[data-v-19fb8f73]:last-child {
  background-color: var(--themeColor);
}
table .cell[data-v-19fb8f73] {
  position: relative;
  white-space: normal;
  word-wrap: break-word;
  vertical-align: middle;
  font-size: 14px;
  background-clip: padding-box;
  cursor: default;
}
table .cell.selected[data-v-19fb8f73]::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(102, 102, 102, 0.4);
}
table .cell-text[data-v-19fb8f73] {
  padding: 5px;
  line-height: 1.5;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: text;
}
table .cell-text.active[data-v-19fb8f73] {
  -webkit-user-select: text;
     -moz-user-select: text;
          user-select: text;
}
.drag-line[data-v-19fb8f73] {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: #217346;
  margin-left: -1px;
  opacity: 0;
  z-index: 2;
  cursor: col-resize;
}.editable-element-table[data-v-f795fd96] {
  position: absolute;
}
.editable-element-table.lock .element-content[data-v-f795fd96] {
  cursor: default;
}
.rotate-wrapper[data-v-f795fd96] {
  width: 100%;
  height: 100%;
}
.element-content[data-v-f795fd96] {
  width: 100%;
  height: 100%;
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  cursor: move;
}
.table-mask[data-v-f795fd96] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.2s;
}
.table-mask .mask-tip[data-v-f795fd96] {
  position: absolute;
  top: 5px;
  left: 5px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 6px 12px;
  font-size: 12px;
  transform-origin: 0 0;
}
.table-mask[data-v-f795fd96]:hover:not(.lock) {
  opacity: 0.9;
}.editable-element-latex[data-v-4aaeda5a] {
  position: absolute;
}
.editable-element-latex.lock .element-content[data-v-4aaeda5a] {
  cursor: default;
}
.rotate-wrapper[data-v-4aaeda5a] {
  width: 100%;
  height: 100%;
}
.element-content[data-v-4aaeda5a] {
  width: 100%;
  height: 100%;
  position: relative;
  cursor: move;
}
.element-content svg[data-v-4aaeda5a] {
  transform-origin: 0 0;
  overflow: visible;
}.video-player[data-v-a17fbbcd] {
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  line-height: 1;
  transform-origin: 0 0;
}
.video-player.hide-controller[data-v-a17fbbcd] {
  cursor: none;
}
.video-player.hide-controller .controller-mask[data-v-a17fbbcd] {
  opacity: 0;
  transform: translateY(100%);
}
.video-player.hide-controller .controller[data-v-a17fbbcd] {
  opacity: 0;
  transform: translateY(100%);
}
.video-wrap[data-v-a17fbbcd] {
  width: 100%;
  height: 100%;
  position: relative;
  background: #000;
  font-size: 0;
}
.video-wrap .bg-canvas[data-v-a17fbbcd] {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transform: scale(1.1);
  filter: blur(25px) brightness(0.7);
}
.video-wrap .video[data-v-a17fbbcd] {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}
.video-wrap .load-error[data-v-a17fbbcd] {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 3;
  font-size: 15px;
  color: #fff;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.controller-mask[data-v-a17fbbcd] {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
  height: 98px;
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 1000;
  transition: all 0.3s ease;
}
.controller[data-v-a17fbbcd] {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 41px;
  padding: 0 20px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all 0.3s ease;
}
.controller .bar-wrap[data-v-a17fbbcd] {
  padding: 5px 0;
  cursor: pointer;
  position: absolute;
  bottom: 33px;
  width: calc(100% - 40px);
  height: 3px;
}
.controller .bar-wrap:hover .bar .played .thumb[data-v-a17fbbcd] {
  transform: scale(1);
}
.controller .bar-wrap .bar-time[data-v-a17fbbcd] {
  position: absolute;
  left: 0;
  top: -20px;
  border-radius: 4px;
  padding: 5px 7px;
  background-color: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 12px;
  text-align: center;
  opacity: 1;
  transition: opacity 0.1s ease-in-out;
  word-wrap: normal;
  word-break: normal;
  z-index: 2;
  pointer-events: none;
}
.controller .bar-wrap .bar-time.hidden[data-v-a17fbbcd] {
  opacity: 0;
}
.controller .bar-wrap .bar[data-v-a17fbbcd] {
  position: relative;
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
}
.controller .bar-wrap .bar .loaded[data-v-a17fbbcd] {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.4);
  height: 3px;
  transition: all 0.5s ease;
  will-change: width;
}
.controller .bar-wrap .bar .played[data-v-a17fbbcd] {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  height: 3px;
  will-change: width;
  background-color: #fff;
}
.controller .bar-wrap .bar .played .thumb[data-v-a17fbbcd] {
  position: absolute;
  top: 0;
  right: 5px;
  margin-top: -4px;
  margin-right: -10px;
  height: 11px;
  width: 11px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  transform: scale(0);
  background-color: #fff;
}
.controller .icons[data-v-a17fbbcd] {
  height: 38px;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
}
.controller .icons.icons-right[data-v-a17fbbcd] {
  right: 15px;
}
.controller .icons .time[data-v-a17fbbcd] {
  line-height: 38px;
  color: #eee;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  vertical-align: middle;
  font-size: 13px;
  cursor: default;
}
.controller .icons .icon[data-v-a17fbbcd] {
  width: 40px;
  height: 100%;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 20px;
}
.controller .icons .icon.play-icon[data-v-a17fbbcd] {
  font-size: 26px;
}
.controller .icons .icon .icon-content[data-v-a17fbbcd] {
  transition: all 0.2s ease-in-out;
  opacity: 0.8;
  color: #fff;
}
.controller .icons .icon.loop-icon[data-v-a17fbbcd] {
  font-size: 12px;
}
.controller .icons .icon.loop-icon .icon-content[data-v-a17fbbcd] {
  opacity: 0.5;
}
.controller .icons .icon.speed-icon[data-v-a17fbbcd] {
  font-size: 12px;
  position: relative;
}
.controller .icons .icon .speed-menu[data-v-a17fbbcd] {
  width: 70px;
  position: absolute;
  bottom: 30px;
  left: -23px;
  background-color: #22211b;
  padding: 5px 0;
  color: #ddd;
}
.controller .icons .icon .speed-menu .speed-menu-item[data-v-a17fbbcd] {
  padding: 8px 0;
  text-align: center;
}
.controller .icons .icon .speed-menu .speed-menu-item[data-v-a17fbbcd]:hover {
  background-color: #393833;
  color: #fff;
}
.controller .icons .icon .speed-menu .speed-menu-item.active[data-v-a17fbbcd] {
  font-weight: 700;
  color: #fff;
}
.controller .icons .icon.active .icon-content[data-v-a17fbbcd] {
  opacity: 1;
}
.controller .icons .icon:hover .icon-content[data-v-a17fbbcd] {
  opacity: 1;
}
.controller .icons .volume[data-v-a17fbbcd] {
  height: 100%;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.controller .icons .volume:hover .volume-bar-wrap .volume-bar[data-v-a17fbbcd] {
  width: 45px;
}
.controller .icons .volume:hover .volume-bar-wrap .volume-bar .volume-bar-inner .thumb[data-v-a17fbbcd] {
  transform: scale(1);
}
.controller .icons .volume.volume-active .volume-bar-wrap .volume-bar[data-v-a17fbbcd] {
  width: 45px;
}
.controller .icons .volume.volume-active .volume-bar-wrap .volume-bar .volume-bar-inner .thumb[data-v-a17fbbcd] {
  transform: scale(1);
}
.controller .icons .volume-bar-wrap[data-v-a17fbbcd] {
  display: inline-block;
  margin: 0 15px 0 -5px;
  vertical-align: middle;
  height: 100%;
}
.controller .icons .volume-bar[data-v-a17fbbcd] {
  position: relative;
  top: 17px;
  width: 0;
  height: 3px;
  background: #aaa;
  transition: all 0.3s ease-in-out;
}
.controller .icons .volume-bar .volume-bar-inner[data-v-a17fbbcd] {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  transition: all 0.1s ease;
  will-change: width;
  background-color: #fff;
}
.controller .icons .volume-bar .volume-bar-inner .thumb[data-v-a17fbbcd] {
  position: absolute;
  top: 0;
  right: 5px;
  margin-top: -4px;
  margin-right: -10px;
  height: 11px;
  width: 11px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  transform: scale(0);
  background-color: #fff;
}
.controller .icons .loop[data-v-a17fbbcd] {
  display: inline-block;
  height: 100%;
}
.bezel[data-v-a17fbbcd] {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  font-size: 22px;
  color: #fff;
  pointer-events: none;
  z-index: 3;
}
.bezel .bezel-icon[data-v-a17fbbcd] {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -26px 0 0 -26px;
  height: 52px;
  width: 52px;
  padding: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  font-size: 40px;
}
.bezel .bezel-icon.bezel-transition[data-v-a17fbbcd] {
  animation: bezel-hide-a17fbbcd 0.5s linear;
}
@keyframes bezel-hide-a17fbbcd {
from {
    opacity: 1;
    transform: scale(1);
}
to {
    opacity: 0;
    transform: scale(2);
}
}.editable-element-video[data-v-10d81700] {
  position: absolute;
}
.editable-element-video.lock .handler-border[data-v-10d81700] {
  cursor: default;
}
.rotate-wrapper[data-v-10d81700] {
  width: 100%;
  height: 100%;
}
.element-content[data-v-10d81700] {
  width: 100%;
  height: 100%;
  position: relative;
}
.handler-border[data-v-10d81700] {
  position: absolute;
  cursor: move;
}
.handler-border.t[data-v-10d81700] {
  width: 100%;
  height: 20px;
  top: 0;
  left: 0;
}
.handler-border.b[data-v-10d81700] {
  width: 100%;
  height: 5px;
  bottom: 0;
  left: 0;
}
.handler-border.l[data-v-10d81700] {
  width: 10px;
  height: 100%;
  left: 0;
  top: 0;
}
.handler-border.r[data-v-10d81700] {
  width: 10px;
  height: 100%;
  right: 0;
  top: 0;
}.audio-player[data-v-e1c37a27] {
  width: 280px;
  height: 50px;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  line-height: 1;
  transform-origin: 0 0;
  background: #000;
}
.controller[data-v-e1c37a27] {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 41px;
  padding: 0 20px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: all 0.3s ease;
}
.controller .bar-wrap[data-v-e1c37a27] {
  padding: 5px 0;
  cursor: pointer;
  position: absolute;
  bottom: 35px;
  width: calc(100% - 40px);
  height: 3px;
}
.controller .bar-wrap:hover .bar .played .thumb[data-v-e1c37a27] {
  transform: scale(1);
}
.controller .bar-wrap .bar-time[data-v-e1c37a27] {
  position: absolute;
  left: 0;
  top: -20px;
  border-radius: 4px;
  padding: 5px 7px;
  background-color: rgba(0, 0, 0, 0.62);
  color: #fff;
  font-size: 12px;
  text-align: center;
  opacity: 1;
  transition: opacity 0.1s ease-in-out;
  word-wrap: normal;
  word-break: normal;
  z-index: 2;
  pointer-events: none;
}
.controller .bar-wrap .bar-time.hidden[data-v-e1c37a27] {
  opacity: 0;
}
.controller .bar-wrap .bar[data-v-e1c37a27] {
  position: relative;
  height: 3px;
  width: 100%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
}
.controller .bar-wrap .bar .loaded[data-v-e1c37a27] {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.4);
  height: 3px;
  transition: all 0.5s ease;
  will-change: width;
}
.controller .bar-wrap .bar .played[data-v-e1c37a27] {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  height: 3px;
  will-change: width;
  background-color: #fff;
}
.controller .bar-wrap .bar .played .thumb[data-v-e1c37a27] {
  position: absolute;
  top: 0;
  right: 5px;
  margin-top: -4px;
  margin-right: -10px;
  height: 11px;
  width: 11px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  transform: scale(0);
  background-color: #fff;
}
.controller .icons[data-v-e1c37a27] {
  height: 38px;
  position: absolute;
  bottom: 0;
  left: 14px;
  display: flex;
  align-items: center;
}
.controller .icons .icon[data-v-e1c37a27] {
  width: 36px;
  height: 100%;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 20px;
}
.controller .icons .icon.play-icon[data-v-e1c37a27] {
  font-size: 26px;
}
.controller .icons .icon .icon-content[data-v-e1c37a27] {
  transition: all 0.2s ease-in-out;
  opacity: 0.8;
  color: #fff;
}
.controller .icons .icon.active .icon-content[data-v-e1c37a27] {
  opacity: 1;
}
.controller .icons .icon:hover .icon-content[data-v-e1c37a27] {
  opacity: 1;
}
.controller .icons .volume[data-v-e1c37a27] {
  height: 100%;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.controller .icons .volume:hover .volume-bar-wrap .volume-bar[data-v-e1c37a27] {
  width: 45px;
}
.controller .icons .volume:hover .volume-bar-wrap .volume-bar .volume-bar-inner .thumb[data-v-e1c37a27] {
  transform: scale(1);
}
.controller .icons .volume.volume-active .volume-bar-wrap .volume-bar[data-v-e1c37a27] {
  width: 45px;
}
.controller .icons .volume.volume-active .volume-bar-wrap .volume-bar .volume-bar-inner .thumb[data-v-e1c37a27] {
  transform: scale(1);
}
.controller .icons .volume-bar-wrap[data-v-e1c37a27] {
  display: inline-block;
  margin: 0 15px 0 -5px;
  vertical-align: middle;
  height: 100%;
}
.controller .icons .volume-bar[data-v-e1c37a27] {
  position: relative;
  top: 17px;
  width: 0;
  height: 3px;
  background: #aaa;
  transition: all 0.3s ease-in-out;
}
.controller .icons .volume-bar .volume-bar-inner[data-v-e1c37a27] {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 100%;
  transition: all 0.1s ease;
  will-change: width;
  background-color: #fff;
}
.controller .icons .volume-bar .volume-bar-inner .thumb[data-v-e1c37a27] {
  position: absolute;
  top: 0;
  right: 5px;
  margin-top: -4px;
  margin-right: -10px;
  height: 11px;
  width: 11px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  transform: scale(0);
  background-color: #fff;
}
.controller .time[data-v-e1c37a27] {
  height: 38px;
  position: absolute;
  right: 20px;
  bottom: 0;
  display: flex;
  align-items: center;
  line-height: 38px;
  color: #eee;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  vertical-align: middle;
  font-size: 13px;
  cursor: default;
}
.controller .time .ptime[data-v-e1c37a27] {
  margin-right: 2px;
}
.controller .time .dtime[data-v-e1c37a27] {
  margin-left: 2px;
}.editable-element-audio[data-v-86700b93] {
  position: absolute;
}
.editable-element-audio.lock .audio-icon[data-v-86700b93] {
  cursor: default;
}
.rotate-wrapper[data-v-86700b93] {
  width: 100%;
  height: 100%;
}
.element-content[data-v-86700b93] {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.audio-icon[data-v-86700b93] {
  cursor: move;
}
.audio-player[data-v-86700b93] {
  position: absolute;
}.mouse-selection[data-v-967e2ee6] {
  position: absolute;
  background-color: rgba(33, 115, 70, 0.1);
  border: 1px solid #217346;
  z-index: 200;
}
.mouse-selection.quadrant-1[data-v-967e2ee6] {
  transform-origin: 50% 0;
  transform: rotate(180deg);
}
.mouse-selection.quadrant-2[data-v-967e2ee6] {
  transform-origin: 0 0;
  transform: rotate(180deg);
}
.mouse-selection.quadrant-3[data-v-967e2ee6] {
  transform-origin: 0 50%;
  transform: rotate(180deg);
}
.mouse-selection.quadrant-4[data-v-967e2ee6] {
  transform-origin: 0 0;
  transform: rotate(0deg);
}.grid-lines[data-v-581946d6] {
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 999;
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}.viewport-background[data-v-cfbce5ed] {
  width: 100%;
  height: 100%;
  background-position: center;
  position: absolute;
}.alignment-line[data-v-c16f82ee] {
  position: absolute;
  z-index: 100;
}
.alignment-line .line[data-v-c16f82ee] {
  width: 0;
  height: 0;
  border: 0 dashed #217346;
}
.alignment-line .line.vertical[data-v-c16f82ee] {
  transform: translateY(-0.5px);
  border-left-width: 1px;
}
.alignment-line .line.horizontal[data-v-c16f82ee] {
  transform: translateX(-0.5px);
  border-top-width: 1px;
}.ruler[data-v-84342fe2] {
  font-size: 12px;
}
.h[data-v-84342fe2] {
  position: absolute;
  background-color: #fff;
  border: 1px solid #333333;
  height: 20px;
  top: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
}
.h .range[data-v-84342fe2] {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: rgba(33, 115, 70, 0.1);
}
.h .ruler-marker-100[data-v-84342fe2] {
  height: 100%;
  line-height: 20px;
  text-align: right;
  flex-shrink: 0;
  padding-right: 5px;
  position: relative;
}
.h .ruler-marker-100.hide span[data-v-84342fe2] {
  display: none;
}
.h .ruler-marker-100.omit[data-v-84342fe2]::before {
  display: none;
}
.h .ruler-marker-100[data-v-84342fe2]:not(:last-child)::after {
  content: "";
  width: 0.1px;
  height: 12px;
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: #999;
}
.h .ruler-marker-100[data-v-84342fe2]::before {
  content: "";
  width: 0.1px;
  height: 8px;
  position: absolute;
  right: 50%;
  bottom: 0;
  background-color: #999;
}
.v[data-v-84342fe2] {
  position: absolute;
  background-color: #fff;
  border: 1px solid #333333;
  width: 20px;
  left: 5px;
  overflow: hidden;
}
.v .range[data-v-84342fe2] {
  position: absolute;
  left: 0;
  right: 0;
  background-color: rgba(33, 115, 70, 0.1);
}
.v .ruler-marker-100[data-v-84342fe2] {
  width: 100%;
  line-height: 20px;
  text-align: right;
  padding-bottom: 5px;
  position: relative;
  writing-mode: vertical-rl;
}
.v .ruler-marker-100.hide span[data-v-84342fe2] {
  display: none;
}
.v .ruler-marker-100.omit[data-v-84342fe2]::before {
  display: none;
}
.v .ruler-marker-100[data-v-84342fe2]:not(:last-child)::after {
  content: "";
  height: 0.1px;
  width: 12px;
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #999;
}
.v .ruler-marker-100[data-v-84342fe2]::before {
  content: "";
  height: 0.1px;
  width: 8px;
  position: absolute;
  bottom: 50%;
  right: 0;
  background-color: #999;
}.element-create-selection[data-v-b527b79f] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  cursor: crosshair;
}
.element-create-selection svg[data-v-b527b79f] {
  overflow: visible;
}
.selection[data-v-b527b79f] {
  position: absolute;
  opacity: 0.8;
}
.selection[data-v-b527b79f]:not(.line) {
  border: 1px solid #217346;
}.shape-create-canvas[data-v-837796db] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  cursor: crosshair;
}
.shape-create-canvas svg[data-v-837796db] {
  width: 100%;
  height: 100%;
  overflow: visible;
}.resize-handler[data-v-ed50a95f] {
  position: absolute;
  width: 10px;
  height: 10px;
  left: 0;
  top: 0;
  margin: -5px 0 0 -5px;
  border: 1px solid #217346;
  background-color: #fff;
  border-radius: 1px;
  cursor: pointer;
}
.resize-handler.left-top.rotate-0[data-v-ed50a95f], .resize-handler.right-bottom.rotate-0[data-v-ed50a95f], .resize-handler.left.rotate-45[data-v-ed50a95f], .resize-handler.right.rotate-45[data-v-ed50a95f], .resize-handler.left-bottom.rotate-90[data-v-ed50a95f], .resize-handler.right-top.rotate-90[data-v-ed50a95f], .resize-handler.top.rotate-135[data-v-ed50a95f], .resize-handler.bottom.rotate-135[data-v-ed50a95f] {
  cursor: nwse-resize;
}
.resize-handler.top.rotate-0[data-v-ed50a95f], .resize-handler.bottom.rotate-0[data-v-ed50a95f], .resize-handler.left-top.rotate-45[data-v-ed50a95f], .resize-handler.right-bottom.rotate-45[data-v-ed50a95f], .resize-handler.left.rotate-90[data-v-ed50a95f], .resize-handler.right.rotate-90[data-v-ed50a95f], .resize-handler.left-bottom.rotate-135[data-v-ed50a95f], .resize-handler.right-top.rotate-135[data-v-ed50a95f] {
  cursor: ns-resize;
}
.resize-handler.left-bottom.rotate-0[data-v-ed50a95f], .resize-handler.right-top.rotate-0[data-v-ed50a95f], .resize-handler.top.rotate-45[data-v-ed50a95f], .resize-handler.bottom.rotate-45[data-v-ed50a95f], .resize-handler.left-top.rotate-90[data-v-ed50a95f], .resize-handler.right-bottom.rotate-90[data-v-ed50a95f], .resize-handler.left.rotate-135[data-v-ed50a95f], .resize-handler.right.rotate-135[data-v-ed50a95f] {
  cursor: nesw-resize;
}
.resize-handler.left.rotate-0[data-v-ed50a95f], .resize-handler.right.rotate-0[data-v-ed50a95f], .resize-handler.left-bottom.rotate-45[data-v-ed50a95f], .resize-handler.right-top.rotate-45[data-v-ed50a95f], .resize-handler.top.rotate-90[data-v-ed50a95f], .resize-handler.bottom.rotate-90[data-v-ed50a95f], .resize-handler.left-top.rotate-135[data-v-ed50a95f], .resize-handler.right-bottom.rotate-135[data-v-ed50a95f] {
  cursor: ew-resize;
}.border-line[data-v-c7f52251] {
  border: 0 dashed #217346;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.border-line.top[data-v-c7f52251] {
  border-top-width: 1px;
}
.border-line.bottom[data-v-c7f52251] {
  border-bottom-width: 1px;
}
.border-line.left[data-v-c7f52251] {
  border-left-width: 1px;
}
.border-line.right[data-v-c7f52251] {
  border-right-width: 1px;
}
.border-line.wide[data-v-c7f52251]::before {
  content: "";
  position: absolute;
  background: transparent;
  cursor: move;
}
.border-line.wide.top[data-v-c7f52251]::before {
  top: -8px;
  left: -8px;
  width: calc(100% + 16px);
  height: 16px;
}
.border-line.wide.bottom[data-v-c7f52251]::before {
  bottom: -8px;
  left: -8px;
  width: calc(100% + 16px);
  height: 16px;
}
.border-line.wide.left[data-v-c7f52251]::before {
  top: -8px;
  left: -8px;
  width: 16px;
  height: calc(100% + 16px);
}
.border-line.wide.right[data-v-c7f52251]::before {
  top: -8px;
  right: -8px;
  width: 16px;
  height: calc(100% + 16px);
}.multi-select-operate[data-v-fed16971] {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 101;
}.rotate-handler[data-v-b3116f0f] {
  position: absolute;
  width: 10px;
  height: 10px;
  top: -25px;
  margin-left: -5px;
  border: 1px solid #217346;
  background-color: #fff;
  border-radius: 1px;
  cursor: grab;
}
.rotate-handler[data-v-b3116f0f]:active {
  cursor: grabbing;
}.image-element-operate.cliping[data-v-b05fc7c2] {
  visibility: hidden;
}.operate-keypoint-handler[data-v-5b55e12c] {
  position: absolute;
  width: 10px;
  height: 10px;
  left: 0;
  top: 0;
  margin: -5px 0 0 -5px;
  border: 1px solid #217346;
  background-color: #ffe873;
  border-radius: 1px;
}svg[data-v-a2882c11] {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  transform-origin: 0 0;
}
.anchor-line[data-v-a2882c11] {
  stroke-width: 1px;
  stroke-dasharray: 5 5;
  opacity: 0.5;
}.divider.horizontal[data-v-f9844423] {
  width: 100%;
  margin: 24px 0;
  border-block-start: 1px solid rgba(5, 5, 5, 0.06);
}
.divider.vertical[data-v-f9844423] {
  position: relative;
  height: 1em;
  display: inline-block;
  margin: 0 8px;
  border-inline-start: 1px solid rgba(5, 5, 5, 0.06);
}.link-handler[data-v-30ad90e4] {
  height: 30px;
  position: absolute;
  left: 0;
  font-size: 12px;
  padding: 0 10px;
  background-color: #fff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  color: #217346;
}
.link[data-v-30ad90e4] {
  max-width: 300px;
  margin-right: 20px;
  word-break: keep-all;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.btns[data-v-30ad90e4] {
  display: flex;
  align-items: center;
}
.btns .btn[data-v-30ad90e4] {
  word-break: keep-all;
  cursor: pointer;
}.operate[data-v-4c2acad4] {
  position: absolute;
  z-index: 100;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.operate.multi-select[data-v-4c2acad4] {
  opacity: 0.2;
}
.animation-index[data-v-4c2acad4] {
  position: absolute;
  top: 0;
  left: -24px;
  font-size: 12px;
}
.animation-index .index-item[data-v-4c2acad4] {
  width: 18px;
  height: 18px;
  background-color: #fff;
  color: #217346;
  border: 1px solid #217346;
  display: flex;
  justify-content: center;
  align-items: center;
}
.animation-index .index-item + .index-item[data-v-4c2acad4] {
  margin-top: 5px;
}.base-element-image[data-v-89d72bda] {
  position: absolute;
}
.rotate-wrapper[data-v-89d72bda] {
  width: 100%;
  height: 100%;
}
.element-content[data-v-89d72bda] {
  width: 100%;
  height: 100%;
  position: relative;
}
.element-content .image-content[data-v-89d72bda] {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.element-content img[data-v-89d72bda] {
  position: absolute;
}
.color-mask[data-v-89d72bda] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}.base-element-text[data-v-1c4db746] {
  position: absolute;
}
.rotate-wrapper[data-v-1c4db746] {
  width: 100%;
  height: 100%;
}
.element-content[data-v-1c4db746] {
  position: relative;
  padding: 10px;
  line-height: 1.5;
  word-break: break-word;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.element-content .text[data-v-1c4db746] {
  position: relative;
}
.element-content .text.thumbnail[data-v-1c4db746] {
  pointer-events: none;
}.base-element-shape[data-v-15a43a50] {
  position: absolute;
}
.rotate-wrapper[data-v-15a43a50] {
  width: 100%;
  height: 100%;
}
.element-content[data-v-15a43a50] {
  width: 100%;
  height: 100%;
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.element-content svg[data-v-15a43a50] {
  transform-origin: 0 0;
  overflow: visible;
  display: block;
}
.shape-text[data-v-15a43a50] {
  display: flex;
  flex-direction: column;
  padding: 10px;
  line-height: 1.5;
  word-break: break-word;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.shape-text.top[data-v-15a43a50] {
  justify-content: flex-start;
}
.shape-text.middle[data-v-15a43a50] {
  justify-content: center;
}
.shape-text.bottom[data-v-15a43a50] {
  justify-content: flex-end;
}.base-element-line[data-v-f82e46dd] {
  position: absolute;
}
.element-content[data-v-f82e46dd] {
  width: 100%;
  height: 100%;
  position: relative;
}
.element-content svg[data-v-f82e46dd] {
  transform-origin: 0 0;
  overflow: visible;
}.base-element-chart[data-v-ff041a14] {
  position: absolute;
}
.base-element-chart.is-thumbnail[data-v-ff041a14] {
  pointer-events: none;
}
.rotate-wrapper[data-v-ff041a14] {
  width: 100%;
  height: 100%;
}
.element-content[data-v-ff041a14] {
  width: 100%;
  height: 100%;
}.static-table[data-v-5aa1512a] {
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
table[data-v-5aa1512a] {
  width: 100%;
  position: relative;
  table-layout: fixed;
  border-collapse: collapse;
  border-spacing: 0;
  border: 0;
  word-wrap: break-word;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  --themeColor: $themeColor;
  --subThemeColor1: $themeColor;
  --subThemeColor2: $themeColor;
}
table.theme[data-v-5aa1512a] {
  background-color: var(--tableBgColor);
}
table.theme tr:nth-child(2n) .cell[data-v-5aa1512a] {
  background-color: var(--subThemeColor1);
}
table.theme tr:nth-child(2n+1) .cell[data-v-5aa1512a] {
  background-color: var(--subThemeColor2);
}
table.theme.row-header tr:first-child .cell[data-v-5aa1512a] {
  background-color: var(--themeColor);
}
table.theme.row-footer tr:last-child .cell[data-v-5aa1512a] {
  background-color: var(--themeColor);
}
table.theme.col-header tr .cell[data-v-5aa1512a]:first-child {
  background-color: var(--themeColor);
}
table.theme.col-footer tr .cell[data-v-5aa1512a]:last-child {
  background-color: var(--themeColor);
}
table .cell[data-v-5aa1512a] {
  position: relative;
  white-space: normal;
  word-wrap: break-word;
  vertical-align: middle;
  background-clip: padding-box;
}
table .cell-text[data-v-5aa1512a] {
  padding: 5px;
  line-height: 1.5;
}.base-element-table[data-v-9ccfeada] {
  position: absolute;
}
.rotate-wrapper[data-v-9ccfeada] {
  width: 100%;
  height: 100%;
}
.element-content[data-v-9ccfeada] {
  width: 100%;
  height: 100%;
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}.base-element-latex[data-v-0ce2a3e6] {
  position: absolute;
}
.rotate-wrapper[data-v-0ce2a3e6] {
  width: 100%;
  height: 100%;
}
.element-content[data-v-0ce2a3e6] {
  width: 100%;
  height: 100%;
  position: relative;
}
.element-content svg[data-v-0ce2a3e6] {
  transform-origin: 0 0;
  overflow: visible;
}.base-element-video[data-v-27c693ca] {
  position: absolute;
}
.rotate-wrapper[data-v-27c693ca] {
  width: 100%;
  height: 100%;
}
.element-content[data-v-27c693ca] {
  width: 100%;
  height: 100%;
  background-color: #000;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon[data-v-27c693ca] {
  font-size: 140px;
  color: #aaa;
}.base-element-audio[data-v-7ba2f8e2] {
  position: absolute;
}
.rotate-wrapper[data-v-7ba2f8e2] {
  width: 100%;
  height: 100%;
}
.element-content[data-v-7ba2f8e2] {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.audio-icon[data-v-7ba2f8e2] {
  cursor: move;
}.thumbnail-slide[data-v-e4d918c0] {
  background-color: #fff;
  overflow: hidden;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.elements[data-v-e4d918c0] {
  transform-origin: 0 0;
}
.background[data-v-e4d918c0] {
  width: 100%;
  height: 100%;
  background-position: center;
  position: absolute;
}
.placeholder[data-v-e4d918c0] {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}.tabs[data-v-fd9e081d] {
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  line-height: 1;
}
.tabs[data-v-fd9e081d]:not(.card) {
  font-size: 13px;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 1px solid #333333;
}
.tabs:not(.card).space-around[data-v-fd9e081d] {
  justify-content: space-around;
}
.tabs:not(.card).space-between[data-v-fd9e081d] {
  justify-content: space-between;
}
.tabs:not(.card) .tab[data-v-fd9e081d] {
  text-align: center;
  border-bottom: 2px solid transparent;
  padding: 8px 10px;
  cursor: pointer;
}
.tabs:not(.card) .tab.active[data-v-fd9e081d] {
  border-bottom: 2px solid var(--color, #217346);
}
.tabs:not(.card) .tab.disabled[data-v-fd9e081d] {
  opacity: 0.35;
  cursor: default;
}
.tabs.card[data-v-fd9e081d] {
  height: 40px;
  font-size: 12px;
  flex-shrink: 0;
}
.tabs.card .tab[data-v-fd9e081d] {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2A2A2A;
  border-bottom: 1px solid #333333;
  cursor: pointer;
}
.tabs.card .tab.active[data-v-fd9e081d] {
  background-color: transparent;
  border-bottom-color: transparent;
}
.tabs.card .tab + .tab[data-v-fd9e081d] {
  border-left: 1px solid #333333;
}.input[data-v-ef2fa41d] {
  background-color: #fff;
  border: 1px solid #d9d9d9;
  padding: 0 5px;
  border-radius: 4px;
  transition: border-color 0.25s;
  font-size: 13px;
  display: flex;
}
.input input[data-v-ef2fa41d] {
  min-width: 0;
  height: 30px;
  outline: 0;
  border: 0;
  line-height: 30px;
  vertical-align: top;
  color: #E5E5E5;
  padding: 0 5px;
  flex: 1;
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.input input[data-v-ef2fa41d]::-moz-placeholder {
  color: #bfbfbf;
}
.input input[data-v-ef2fa41d]::placeholder {
  color: #bfbfbf;
}
.input[data-v-ef2fa41d]:not(.disabled):hover, .input.focused[data-v-ef2fa41d] {
  border-color: #217346;
}
.input.disabled[data-v-ef2fa41d] {
  background-color: #f5f5f5;
  border-color: #dcdcdc;
  color: #b7b7b7;
}
.input.disabled input[data-v-ef2fa41d] {
  color: #b7b7b7;
}
.input.simple[data-v-ef2fa41d] {
  border: 0;
}
.input .prefix[data-v-ef2fa41d], .input .suffix[data-v-ef2fa41d] {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 30px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}.button[data-v-8fcdb2a2] {
  height: 32px;
  line-height: 32px;
  outline: 0;
  font-size: 13px;
  padding: 0 15px;
  text-align: center;
  color: #E5E5E5;
  border-radius: 4px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  letter-spacing: 1px;
  cursor: pointer;
}
.button.small[data-v-8fcdb2a2] {
  height: 24px;
  line-height: 24px;
  padding: 0 7px;
  letter-spacing: 0;
  font-size: 12px;
}
.button.default[data-v-8fcdb2a2] {
  background-color: #fff;
  border: 1px solid #d9d9d9;
  color: #E5E5E5;
}
.button.default[data-v-8fcdb2a2]:hover {
  color: #217346;
  border-color: #217346;
}
.button.primary[data-v-8fcdb2a2] {
  background-color: #217346;
  border: 1px solid #217346;
  color: #fff;
}
.button.primary[data-v-8fcdb2a2]:hover {
  background-color: #2A9058;
  border-color: #2A9058;
}
.button.checkbox[data-v-8fcdb2a2], .button.radio[data-v-8fcdb2a2] {
  background-color: #fff;
  border: 1px solid #d9d9d9;
  color: #E5E5E5;
}
.button.checkbox[data-v-8fcdb2a2]:not(.checked):hover, .button.radio[data-v-8fcdb2a2]:not(.checked):hover {
  color: #217346;
}
.button.checked[data-v-8fcdb2a2] {
  color: #fff;
  background-color: #217346;
  border-color: #217346;
}
.button.checked[data-v-8fcdb2a2]:hover {
  background-color: #2A9058;
  border-color: #2A9058;
}
.button.disabled[data-v-8fcdb2a2] {
  background-color: #f5f5f5;
  border: 1px solid #d9d9d9;
  color: #b7b7b7;
  cursor: default;
}.tippy-box[data-animation=scale][data-placement^=top]{transform-origin:bottom}.tippy-box[data-animation=scale][data-placement^=bottom]{transform-origin:top}.tippy-box[data-animation=scale][data-placement^=left]{transform-origin:right}.tippy-box[data-animation=scale][data-placement^=right]{transform-origin:left}.tippy-box[data-animation=scale][data-state=hidden]{transform:scale(.5);opacity:0}.popover.center[data-v-743e0af2] {
  display: flex;
  justify-content: center;
  align-items: center;
}
.popover-content[data-v-743e0af2] {
  background-color: #fff;
  padding: 10px;
  border: 1px solid #333333;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  font-size: 13px;
}.tippy-box[data-theme~=popover] {
  border: 0;
  outline: 0;
}.select[data-v-fe8f0496] {
  width: 100%;
  height: 32px;
  padding-right: 32px;
  border-radius: 4px;
  transition: border-color 0.25s;
  font-size: 13px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  position: relative;
  cursor: pointer;
}
.select[data-v-fe8f0496]:not(.disabled):hover {
  border-color: #217346;
}
.select.disabled[data-v-fe8f0496] {
  background-color: #f5f5f5;
  border-color: #dcdcdc;
  color: #b7b7b7;
  cursor: default;
}
.select .selector[data-v-fe8f0496] {
  min-width: 50px;
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.options[data-v-fe8f0496] {
  max-height: 260px;
  padding: 5px;
  overflow: auto;
  text-align: left;
  font-size: 13px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.option[data-v-fe8f0496] {
  height: 32px;
  line-height: 32px;
  padding: 0 5px;
  border-radius: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.option.disabled[data-v-fe8f0496] {
  color: #b7b7b7;
}
.option[data-v-fe8f0496]:not(.disabled, .selected):hover {
  background-color: rgba(33, 115, 70, 0.05);
  cursor: pointer;
}
.option.selected[data-v-fe8f0496] {
  color: #217346;
  font-weight: 700;
}
.icon[data-v-fe8f0496] {
  width: 32px;
  height: 30px;
  color: #bfbfbf;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}.link-dialog[data-v-8974361e] {
  font-size: 13px;
  line-height: 1.675;
}
.input[data-v-8974361e] {
  width: 100%;
  height: 32px;
}
.preview[data-v-8974361e] {
  margin-top: 12px;
}
.thumbnail[data-v-8974361e] {
  border: 1px solid rgba(33, 115, 70, 0.15);
  margin-top: 5px;
  border-radius: 4px;
}
.btns[data-v-8974361e] {
  margin-top: 20px;
  text-align: right;
}.modal[data-v-bfe728af], .mask[data-v-bfe728af] {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5000;
}
.modal[data-v-bfe728af] {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: 0;
  border: 0;
}
.mask[data-v-bfe728af] {
  position: absolute;
  background: rgba(0, 0, 0, 0.25);
}
.modal-content[data-v-bfe728af] {
  z-index: 5001;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  position: relative;
}
.close-btn[data-v-bfe728af] {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 16px;
  right: 16px;
  cursor: pointer;
}
.modal-fade-enter-active[data-v-bfe728af] {
  animation: modal-fade-enter-bfe728af 0.25s both ease-in;
}
.modal-fade-leave-active[data-v-bfe728af] {
  animation: modal-fade-leave-bfe728af 0.25s both ease-out;
}
.modal-zoom-enter-active[data-v-bfe728af] {
  animation: modal-zoom-enter-bfe728af 0.25s both cubic-bezier(0.4, 0, 0, 1.5);
}
.modal-zoom-leave-active[data-v-bfe728af] {
  animation: modal-zoom-leave-bfe728af 0.25s both;
}
@keyframes modal-fade-enter-bfe728af {
from {
    opacity: 0;
}
}
@keyframes modal-fade-leave-bfe728af {
to {
    opacity: 0;
}
}
@keyframes modal-zoom-enter-bfe728af {
from {
    transform: scale3d(0.3, 0.3, 0.3);
}
}
@keyframes modal-zoom-leave-bfe728af {
to {
    transform: scale3d(0.3, 0.3, 0.3);
}
}.canvas[data-v-24c77624] {
  height: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  background-color: #2A2A2A;
  position: relative;
}
.drag-mask[data-v-24c77624] {
  cursor: grab;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.viewport-wrapper[data-v-24c77624] {
  position: absolute;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.01), 0 0 12px 0 rgba(0, 0, 0, 0.1);
}
.viewport[data-v-24c77624] {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}.shape-item-thumbnail[data-v-e224033a] {
  position: relative;
  cursor: pointer;
}
.shape-content[data-v-e224033a] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.shape-content:hover .shape-path[data-v-e224033a]:not(.outlined) {
  stroke: #217346;
}
.shape-content:hover .shape-path.outlined[data-v-e224033a] {
  fill: #217346;
}
.shape-content svg[data-v-e224033a]:not(:root) {
  overflow: visible;
}.shape-pool[data-v-8542014b] {
  width: 340px;
  max-height: 520px;
  overflow: auto;
  margin-top: -8px;
  margin-bottom: -8px;
  margin-right: -10px;
  padding-right: 10px;
  padding-top: 10px;
}
.category-name[data-v-8542014b] {
  width: 100%;
  font-size: 12px;
  margin-bottom: 10px;
  border-left: 4px solid #bbb;
  background-color: #f1f1f1;
  padding: 3px 0 3px 8px;
  color: #555;
}
.shape-list[data-v-8542014b] {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  margin-bottom: 10px;
}
.shape-item[data-v-8542014b] {
  width: 8%;
  margin-bottom: calc(20% / 9);
  height: 0;
  padding-bottom: 8%;
  flex-shrink: 0;
}
.shape-item[data-v-8542014b]:not(:nth-child(10n)) {
  margin-right: calc(20% / 9);
}.chart-pool[data-v-0349a41d] {
  width: 240px;
  margin-bottom: -5px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.chart-item[data-v-0349a41d] {
  width: 24%;
  margin-bottom: calc(4% / 3);
  height: 0;
  padding-bottom: 25%;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}
.chart-item[data-v-0349a41d]:not(:nth-child(4n)) {
  margin-right: calc(4% / 3);
}
.chart-content[data-v-0349a41d] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999;
}
.chart-content[data-v-0349a41d]:hover {
  color: #217346;
}
.chart-content .name[data-v-0349a41d] {
  margin-top: 4px;
}.number-input[data-v-a7349874] {
  background-color: #fff;
  border: 1px solid #d9d9d9;
  padding: 0 0 0 5px;
  border-radius: 4px;
  transition: border-color 0.25s;
  font-size: 13px;
  display: inline-flex;
}
.number-input .input-wrap[data-v-a7349874] {
  flex: 1;
  color: #E5E5E5;
  padding: 0 0 0 5px;
  position: relative;
}
.number-input:not(.disabled) .input-wrap:hover .handlers[data-v-a7349874] {
  opacity: 1;
}
.number-input .handlers[data-v-a7349874] {
  width: 20px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  font-size: 6px;
  color: #999;
  opacity: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: opacity 0.25s;
  background-color: #fff;
}
.number-input .handlers .handler[data-v-a7349874] {
  width: 100%;
  height: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid #d9d9d9;
  cursor: pointer;
}
.number-input .handlers .handler + .handler[data-v-a7349874] {
  border-top: 1px solid #d9d9d9;
}
.number-input .handlers .handler[data-v-a7349874]:hover {
  color: #217346;
}
.number-input input[data-v-a7349874] {
  width: calc(100% - 5px);
  min-width: 0;
  padding: 0;
  height: 30px;
  line-height: 30px;
  outline: 0;
  border: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.number-input input[data-v-a7349874]::-moz-placeholder {
  color: #bfbfbf;
}
.number-input input[data-v-a7349874]::placeholder {
  color: #bfbfbf;
}
.number-input[data-v-a7349874]:not(.disabled):hover, .number-input.focused[data-v-a7349874] {
  border-color: #217346;
}
.number-input.disabled[data-v-a7349874] {
  background-color: #f5f5f5;
  border-color: #dcdcdc;
  color: #b7b7b7;
}
.number-input.disabled input[data-v-a7349874] {
  color: #b7b7b7;
}
.number-input .prefix[data-v-a7349874], .number-input .suffix[data-v-a7349874] {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 30px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}.table-generator[data-v-6b0f7721] {
  width: 100%;
  margin-top: -10px;
}
.title[data-v-6b0f7721] {
  height: 28px;
  line-height: 28px;
  background-color: #2A2A2A;
  margin: 0 -10px 10px -10px;
  padding: 0 14px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.title .right[data-v-6b0f7721] {
  cursor: pointer;
}
.title .right[data-v-6b0f7721]:hover {
  color: #217346;
}
table[data-v-6b0f7721] {
  border-collapse: separate;
}
td[data-v-6b0f7721] {
  width: 23px;
  height: 23px;
  line-height: 23px;
  border: 2px solid #fff;
  background-color: #f7f7f7;
}
.cell[data-v-6b0f7721] {
  width: 100%;
  height: 100%;
  border: 1px solid #dcdcdc;
}
.cell.active[data-v-6b0f7721] {
  background-color: rgba(33, 115, 70, 0.1);
  border-color: #217346;
}
.custom[data-v-6b0f7721] {
  width: 230px;
}
.custom .row[data-v-6b0f7721] {
  display: flex;
  align-items: center;
}
.custom .row + .row[data-v-6b0f7721] {
  margin-top: 10px;
}
.btns[data-v-6b0f7721] {
  margin-top: 10px;
  text-align: right;
}
.btns .btn[data-v-6b0f7721] {
  margin-left: 10px;
}.input[data-v-1a73108a] {
  display: none;
}.popover-menu-item[data-v-4793daea] {
  min-width: 80px;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.popover-menu-item.center[data-v-4793daea] {
  text-align: center;
}
.popover-menu-item[data-v-4793daea]:hover {
  background-color: #f1f1f1;
}
.popover-menu-item + .popover-menu-item[data-v-4793daea] {
  margin-top: 2px;
}.canvas-tool[data-v-a543cdd4] {
  position: relative;
  border-bottom: 1px solid #333333;
  background-color: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  -moz-column-gap: 4px;
       column-gap: 4px;
  row-gap: 4px;
  padding: 4px 10px;
  min-height: 40px;
  font-size: 13px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.left-handler[data-v-a543cdd4],
.add-element-handler[data-v-a543cdd4],
.right-handler[data-v-a543cdd4],
.more[data-v-a543cdd4] {
  display: contents;
}
.more-icon[data-v-a543cdd4] {
  display: none;
}
.popover-menu-item[data-v-a543cdd4] {
  display: flex;
  padding: 8px 10px;
}
.popover-menu-item.center[data-v-a543cdd4] {
  justify-content: center;
}
.popover-menu-item .icon[data-v-a543cdd4] {
  font-size: 18px;
  margin-right: 8px;
}
.add-element-handler[data-v-a543cdd4] {
  position: static;
}
.add-element-handler > div[data-v-a543cdd4] {
  flex-shrink: 0;
}
.add-element-handler .insert-handler-item[data-v-a543cdd4] {
  height: 30px;
  font-size: 14px;
  margin: 0 2px;
  padding: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}
.add-element-handler .insert-handler-item[data-v-a543cdd4]:not(.group-btn):hover {
  background-color: #363F4C;
  color: #fff;
}
.add-element-handler .insert-handler-item.active[data-v-a543cdd4] {
  background-color: #363F4C;
  color: #fff;
}
.add-element-handler .insert-handler-item .icon[data-v-a543cdd4] {
  margin-right: 0;
}
.add-element-handler .insert-handler-item.group-btn[data-v-a543cdd4] {
  margin-right: 2px;
  padding: 0 6px;
  gap: 0;
  display: inline-flex;
  align-items: stretch;
}
.add-element-handler .insert-handler-item.group-btn[data-v-a543cdd4]:hover {
  background-color: #363F4C;
  color: #fff;
}
.add-element-handler .insert-handler-item.group-btn .group-btn-main[data-v-a543cdd4] {
  height: 100%;
  min-width: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 4px;
  border-radius: 4px;
}
.add-element-handler .insert-handler-item.group-btn .arrow[data-v-a543cdd4] {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  padding: 0 4px;
  border-radius: 4px;
}
.add-element-handler .insert-handler-item.group-btn .group-btn-main[data-v-a543cdd4]:hover,
.add-element-handler .insert-handler-item.group-btn .arrow[data-v-a543cdd4]:hover {
  background-color: #363F4C;
  color: #fff;
}
.handler-item[data-v-a543cdd4] {
  height: 30px;
  font-size: 14px;
  margin: 0 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
}
.handler-item.disable[data-v-a543cdd4] {
  opacity: 0.5;
}
.left-handler .handler-item[data-v-a543cdd4], .right-handler .handler-item[data-v-a543cdd4] {
  padding: 0 8px;
}
.left-handler .handler-item.active[data-v-a543cdd4], .left-handler .handler-item[data-v-a543cdd4]:not(.disable):hover, .right-handler .handler-item.active[data-v-a543cdd4], .right-handler .handler-item[data-v-a543cdd4]:not(.disable):hover {
  background-color: #f1f1f1;
}
.right-handler .presentation-actions[data-v-a543cdd4] {
  display: contents;
}
.right-handler .presentation-action-item[data-v-a543cdd4] {
  height: 30px;
  font-size: 14px;
  margin: 0 2px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  line-height: 1;
  transition: background-color 0.2s ease;
}
.right-handler .presentation-action-item .action-icon[data-v-a543cdd4] {
  font-size: 14px;
  line-height: 1;
}
.right-handler .text[data-v-a543cdd4] {
  display: inline-block;
  width: 40px;
  text-align: center;
  cursor: pointer;
}
.right-handler .viewport-size[data-v-a543cdd4] {
  font-size: 13px;
}
@media screen and (width <= 1600px) {
.add-element-handler .insert-handler-item .icon[data-v-a543cdd4] {
    margin-right: 0;
}
.add-element-handler .insert-handler-item .text[data-v-a543cdd4] {
    display: none;
}
}
@media screen and (width <= 1366px) {
.add-element-handler .insert-handler-item[data-v-a543cdd4] {
    padding: 0 6px;
}
}
@media screen and (width <= 1200px) {
.presentation-actions .presentation-action-item[data-v-a543cdd4]:not(:last-child) {
    display: none;
}
.right-handler .text[data-v-a543cdd4] {
    display: none;
}
.more > .handler-item[data-v-a543cdd4] {
    display: none;
}
.more-icon[data-v-a543cdd4] {
    display: block;
}
}
@media screen and (width <= 1000px) {
.left-handler[data-v-a543cdd4], .right-handler[data-v-a543cdd4] {
    display: none;
}
}.templates[data-v-6e55b04f] {
  width: 500px;
  height: 500px;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.catalogs[data-v-6e55b04f] {
  width: 108px;
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid #333333;
  overflow: auto;
}
.catalogs .catalog[data-v-6e55b04f] {
  padding: 7px 8px;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
}
.catalogs .catalog[data-v-6e55b04f]:hover {
  background-color: #2A2A2A;
  color: #fff;
}
.catalogs .catalog.active[data-v-6e55b04f] {
  color: #217346;
  background-color: rgba(33, 115, 70, 0.05);
  border-right: 2px solid #217346;
  font-weight: 700;
}
.catalogs .catalog + .catalog[data-v-6e55b04f] {
  margin-top: 3px;
}
.content[data-v-6e55b04f] {
  display: flex;
  flex-direction: column;
}
.header[data-v-6e55b04f] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-right: 4px;
}
.header:hover .insert-all[data-v-6e55b04f] {
  opacity: 1;
  transition: opacity 0.2s;
}
.types[data-v-6e55b04f] {
  display: flex;
}
.types .type[data-v-6e55b04f] {
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
  color: #fff;
}
.types .type + .type[data-v-6e55b04f] {
  margin-left: 4px;
}
.types .type.active[data-v-6e55b04f] {
  color: #217346;
  background-color: rgba(33, 115, 70, 0.05);
  font-weight: 700;
}
.types .type[data-v-6e55b04f]:hover {
  background-color: #2A2A2A;
  color: #fff;
}
.insert-all[data-v-6e55b04f] {
  opacity: 0;
  font-size: 12px;
  color: #217346;
  text-decoration: underline;
  cursor: pointer;
}
.list[data-v-6e55b04f] {
  width: 392px;
  padding: 2px;
  margin-right: -10px;
  padding-right: 10px;
  overflow: auto;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.slide-item[data-v-6e55b04f] {
  position: relative;
  width: 48%;
  margin-bottom: calc(4% / 1);
}
.slide-item[data-v-6e55b04f]:not(:nth-child(2n)) {
  margin-right: calc(4% / 1);
}
.slide-item:hover .btns[data-v-6e55b04f] {
  opacity: 1;
}
.slide-item:hover .thumbnail[data-v-6e55b04f] {
  outline-color: #217346;
}
.slide-item .btns[data-v-6e55b04f] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  background-color: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: 4px;
}
.slide-item .thumbnail[data-v-6e55b04f] {
  outline: 2px solid #333333;
  transition: outline 0.2s;
  border-radius: 4px;
  cursor: pointer;
}.thumbnails[data-v-a8ef0197] {
  border-right: solid 1px #333333;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.add-slide[data-v-a8ef0197] {
  height: 40px;
  font-size: 12px;
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid #333333;
  cursor: pointer;
}
.add-slide .btn[data-v-a8ef0197] {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.add-slide .btn[data-v-a8ef0197]:hover {
  background-color: #2A2A2A;
}
.add-slide .select-btn[data-v-a8ef0197] {
  width: 30px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid #333333;
}
.add-slide .select-btn[data-v-a8ef0197]:hover {
  background-color: #2A2A2A;
}
.add-slide .icon[data-v-a8ef0197] {
  margin-right: 3px;
  font-size: 12px;
}
.thumbnail-list[data-v-a8ef0197] {
  padding: 5px 0;
  flex: 1;
  overflow: auto;
}
.thumbnail-item[data-v-a8ef0197] {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0;
  position: relative;
}
.thumbnail-item .thumbnail[data-v-a8ef0197] {
  border-radius: 4px;
  outline: 2px solid rgba(33, 115, 70, 0.15);
}
.thumbnail-item.active .label[data-v-a8ef0197] {
  color: #217346;
}
.thumbnail-item.active .thumbnail[data-v-a8ef0197] {
  outline-color: #217346;
}
.thumbnail-item.selected .thumbnail[data-v-a8ef0197] {
  outline-color: #217346;
}
.thumbnail-item.selected .note-flag[data-v-a8ef0197] {
  background-color: #217346;
}
.thumbnail-item.selected .note-flag[data-v-a8ef0197]::after {
  border-top-color: #217346;
}
.thumbnail-item .note-flag[data-v-a8ef0197] {
  width: 16px;
  height: 12px;
  border-radius: 1px;
  position: absolute;
  left: 8px;
  top: 13px;
  font-size: 8px;
  background-color: rgba(33, 115, 70, 0.75);
  color: #fff;
  text-align: center;
  line-height: 12px;
  cursor: pointer;
}
.thumbnail-item .note-flag[data-v-a8ef0197]::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  top: 10px;
  left: 4px;
  border: 4px solid transparent;
  border-top-color: rgba(33, 115, 70, 0.75);
}
.label[data-v-a8ef0197] {
  font-size: 12px;
  color: #999;
  width: 20px;
  cursor: grab;
}
.label.offset-left[data-v-a8ef0197] {
  position: relative;
  left: -4px;
}
.label[data-v-a8ef0197]:active {
  cursor: grabbing;
}
.page-number[data-v-a8ef0197] {
  height: 40px;
  font-size: 12px;
  border-top: 1px solid #333333;
  line-height: 40px;
  text-align: center;
  color: #666;
}
.section-title[data-v-a8ef0197] {
  height: 26px;
  font-size: 12px;
  padding: 6px 8px 2px 18px;
  color: #555;
}
.section-title.contextmenu-active[data-v-a8ef0197] {
  color: #217346;
}
.section-title.contextmenu-active .text[data-v-a8ef0197]::before {
  border-bottom-color: #217346;
  border-right-color: #217346;
}
.section-title .text[data-v-a8ef0197] {
  display: flex;
  align-items: center;
  position: relative;
}
.section-title .text[data-v-a8ef0197]::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 3px solid transparent;
  border-left: 3px solid transparent;
  border-bottom: 3px solid #555;
  border-right: 3px solid #555;
  margin-right: 5px;
}
.section-title .text .text-content[data-v-a8ef0197] {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.section-title input[data-v-a8ef0197] {
  width: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  font-size: 12px;
}.slider[data-v-11349058] {
  width: 100%;
  height: 12px;
  padding: 4px 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.slider.disabled .track[data-v-11349058] {
  background-color: #b4b4b4;
}
.slider.disabled .thumb[data-v-11349058] {
  outline: 2px solid #b4b4b4;
}
.slider[data-v-11349058]:not(.disabled) {
  cursor: pointer;
}
.slider:not(.disabled) .bar[data-v-11349058]:hover {
  background-color: #f0f0f0;
}
.slider:not(.disabled) .track[data-v-11349058]:hover {
  background-color: #2A9058;
}
.slider:not(.disabled) .thumb[data-v-11349058]:hover, .slider:not(.disabled) .thumb[data-v-11349058]:active {
  outline: 4px solid #217346;
}
.bar[data-v-11349058] {
  width: calc(100% - 10px);
  margin-left: 5px;
  height: 4px;
  border-radius: 2px;
  position: relative;
  background-color: #f5f5f5;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background-color 0.2s;
}
.track[data-v-11349058] {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #217346;
  transition: background-color 0.2s;
}
.thumb[data-v-11349058] {
  position: absolute;
  top: 50%;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: #fff;
  outline: 2px solid #217346;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 100;
}
.thumb[data-v-11349058]:hover::before, .thumb[data-v-11349058]:hover::after, .thumb[data-v-11349058]:active::before, .thumb[data-v-11349058]:active::after {
  display: block;
}
.thumb[data-v-11349058]::before {
  content: attr(data-tooltip);
  min-width: 28px;
  display: none;
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background-color: #262626;
  text-align: center;
  color: #fff;
  border-radius: 4px;
  padding: 6px 5px;
  font-size: 12px;
}
.thumb[data-v-11349058]::after {
  content: "";
  display: none;
  position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #262626;
}.row[data-v-a0e972b8] {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}.color-btn[data-v-de0487b3] {
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}
.color-block[data-v-de0487b3] {
  height: 20px;
  margin-left: 8px;
  flex: 1;
  outline: 1px dashed rgba(102, 102, 102, 0.12);
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAEBJREFUOE9jfPbs2X8GIoCkpCQRqhgYGEcNxBlOo2GIM2iGQLL5//8/UTnl+fPnxOWUUQNxhtNoGOLOKYM+2QAAh2Nq10DwkukAAAAASUVORK5CYII=);
}
.content[data-v-de0487b3] {
  width: 100%;
  height: 100%;
}
.color-btn-icon[data-v-de0487b3] {
  width: 32px;
  font-size: 13px;
  color: #bfbfbf;
}.checkerboard[data-v-bcd33c3e] {
  background-size: contain;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}.alpha[data-v-f857ebb7] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.alpha-checkboard-wrap[data-v-f857ebb7] {
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.alpha-gradient[data-v-f857ebb7] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.alpha-container[data-v-f857ebb7] {
  cursor: pointer;
  position: relative;
  z-index: 2;
  height: 100%;
  margin: 0 3px;
}
.alpha-pointer[data-v-f857ebb7] {
  z-index: 2;
  position: absolute;
}
.alpha-picker[data-v-f857ebb7] {
  cursor: pointer;
  width: 4px;
  height: 8px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  background: #fff;
  margin-top: 1px;
  transform: translateX(-2px);
}.hue[data-v-fc65cbca] {
  background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.hue-container[data-v-fc65cbca] {
  cursor: pointer;
  margin: 0 2px;
  position: relative;
  height: 100%;
}
.hue-pointer[data-v-fc65cbca] {
  z-index: 2;
  position: absolute;
  top: 0;
}
.hue-picker[data-v-fc65cbca] {
  cursor: pointer;
  margin-top: 1px;
  width: 4px;
  height: 8px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  background: #fff;
  transform: translateX(-2px);
}.saturation[data-v-f65d3d36],
.saturation-white[data-v-f65d3d36],
.saturation-black[data-v-f65d3d36] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  cursor: pointer;
}
.saturation-white[data-v-f65d3d36] {
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}
.saturation-black[data-v-f65d3d36] {
  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}
.saturation-pointer[data-v-f65d3d36] {
  cursor: pointer;
  position: absolute;
}
.saturation-circle[data-v-f65d3d36] {
  width: 4px;
  height: 4px;
  box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  transform: translate(-2px, -2px);
}.editable-input[data-v-a5b61586] {
  width: 100%;
  position: relative;
  overflow: hidden;
  text-align: center;
  font-size: 14px;
}
.editable-input[data-v-a5b61586]::after {
  content: "#";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}
.input-content[data-v-a5b61586] {
  width: 100%;
  padding: 4px;
  border: 0;
  border-bottom: 1px solid #ddd;
  outline: none;
  text-align: center;
}
.input-label[data-v-a5b61586] {
  text-transform: capitalize;
}.color-picker[data-v-d4970c84] {
  position: relative;
  width: 240px;
  background: #fff;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  margin-bottom: -10px;
}
.picker-saturation-wrap[data-v-d4970c84] {
  width: 100%;
  padding-bottom: 50%;
  position: relative;
  overflow: hidden;
}
.picker-controls[data-v-d4970c84] {
  display: flex;
}
.picker-sliders[data-v-d4970c84] {
  padding: 4px 0;
  flex: 1;
}
.picker-hue-wrap[data-v-d4970c84] {
  position: relative;
  height: 10px;
}
.picker-alpha-wrap[data-v-d4970c84] {
  position: relative;
  height: 10px;
  margin-top: 4px;
  overflow: hidden;
}
.picker-color-wrap[data-v-d4970c84] {
  width: 24px;
  height: 24px;
  position: relative;
  margin-top: 4px;
  margin-right: 4px;
  outline: 1px dashed rgba(102, 102, 102, 0.12);
}
.picker-color-wrap .checkerboard[data-v-d4970c84] {
  background-size: auto;
}
.picker-current-color[data-v-d4970c84] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.picker-field[data-v-d4970c84] {
  display: flex;
  margin-bottom: 8px;
  margin-top: 4px;
}
.picker-field .transparent[data-v-d4970c84] {
  width: 24px;
  height: 24px;
  margin-left: 8px;
  position: relative;
  cursor: pointer;
}
.picker-field .transparent[data-v-d4970c84]::after {
  content: "";
  width: 26px;
  height: 2px;
  position: absolute;
  top: 11px;
  left: -1px;
  transform: rotate(-45deg);
  background-color: #f00;
}
.picker-field .transparent .checkerboard[data-v-d4970c84] {
  background-size: auto;
}
.picker-field .straw[data-v-d4970c84] {
  width: 24px;
  height: 24px;
  margin-left: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  background-color: #f5f5f5;
  outline: 1px solid #f1f1f1;
  cursor: pointer;
}
.picker-field .input[data-v-d4970c84] {
  flex: 1;
}
.picker-presets[data-v-d4970c84] {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.picker-presets-color[data-v-d4970c84] {
  width: 7%;
  margin-bottom: calc(30% / 9);
  height: 0;
  padding-bottom: 7%;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}
.picker-presets-color[data-v-d4970c84]:not(:nth-child(10n)) {
  margin-right: calc(30% / 9);
}
.picker-presets-color.alpha[data-v-d4970c84] {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADBJREFUOE9jfPbs2X8GPEBSUhKfNAPjqAHDIgz+//+PNx08f/4cfzoYNYCBceiHAQC5flV5JzgrxQAAAABJRU5ErkJggg==);
}
.picker-presets-color.white[data-v-d4970c84]::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #f5f5f5;
}
.picker-presets-color-content[data-v-d4970c84] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.picker-gradient-presets[data-v-d4970c84] {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.picker-gradient-col[data-v-d4970c84] {
  width: 7%;
  margin-bottom: calc(30% / 9);
  display: flex;
  flex-direction: column;
}
.picker-gradient-col[data-v-d4970c84]:not(:nth-child(10n)) {
  margin-right: calc(30% / 9);
}
.picker-gradient-color[data-v-d4970c84] {
  width: 100%;
  height: 16px;
  position: relative;
  cursor: pointer;
}
.recent-colors-title[data-v-d4970c84] {
  font-size: 12px;
  margin-bottom: 4px;
}.switch[data-v-7e57e57d] {
  height: 20px;
  display: inline-block;
  cursor: pointer;
}
.switch:not(.disabled).active .switch-core[data-v-7e57e57d] {
  border-color: #217346;
  background-color: #217346;
}
.switch:not(.disabled).active .switch-core[data-v-7e57e57d]::after {
  left: 100%;
  margin-left: -17px;
}
.switch.disabled[data-v-7e57e57d] {
  cursor: default;
}
.switch.disabled .switch-core[data-v-7e57e57d]::after {
  background-color: #f5f5f5;
}
.switch-core[data-v-7e57e57d] {
  margin: 0;
  display: inline-block;
  position: relative;
  width: 40px;
  height: 20px;
  border: 1px solid #d9d9d9;
  outline: none;
  border-radius: 10px;
  box-sizing: border-box;
  background: #d9d9d9;
  transition: border-color 0.3s, background-color 0.3s;
  vertical-align: middle;
}
.switch-core[data-v-7e57e57d]::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  border-radius: 100%;
  transition: all 0.3s;
  width: 16px;
  height: 16px;
  background-color: #fff;
}.select[data-v-93228ab7] {
  width: 100%;
  height: 32px;
  padding-right: 32px;
  border-radius: 4px;
  transition: border-color 0.25s;
  font-size: 13px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  position: relative;
  cursor: pointer;
}
.select[data-v-93228ab7]:not(.disabled):hover {
  border-color: #217346;
}
.select.disabled[data-v-93228ab7] {
  background-color: #f5f5f5;
  border-color: #dcdcdc;
  color: #b7b7b7;
  cursor: default;
}
.select .selector[data-v-93228ab7] {
  min-width: 50px;
  height: 30px;
  line-height: 30px;
  padding-left: 10px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.options[data-v-93228ab7] {
  max-height: 260px;
  padding: 5px;
  overflow: auto;
  text-align: left;
  font-size: 13px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.icon[data-v-93228ab7] {
  width: 32px;
  height: 30px;
  color: #bfbfbf;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}.row[data-v-b54527a2] {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.switch-wrapper[data-v-b54527a2] {
  text-align: right;
}
.option[data-v-b54527a2] {
  height: 32px;
  padding: 0 5px;
  border-radius: 4px;
}
.option[data-v-b54527a2]:not(.selected):hover {
  background-color: rgba(33, 115, 70, 0.05);
  cursor: pointer;
}
.option.selected[data-v-b54527a2] {
  color: #217346;
  font-weight: 700;
}.row[data-v-eb067523] {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.switch-wrapper[data-v-eb067523] {
  text-align: right;
}.text-color-btn[data-v-a6566338] {
  width: 100%;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0;
}
.text-color-block[data-v-a6566338] {
  width: 17px;
  height: 4px;
  margin-top: 1px;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAAXNSR0IArs4c6QAAACdJREFUGFdjfPbs2X8GBgYGSUlJEMXAiCHw//9/sIrnz59DVKALAADNxxVfaiODNQAAAABJRU5ErkJggg==);
}
.text-color-block .text-color-block-content[data-v-a6566338] {
  width: 100%;
  height: 100%;
}.button-group[data-v-48b7d793] {
  display: flex;
  align-items: center;
}
.button-group[data-v-48b7d793] button.button {
  border-radius: 0;
  border-left-width: 1px;
  border-right-width: 0;
  display: inline-block;
}
.button-group[data-v-48b7d793]:not(.passive) button.button:not(:last-child, .radio, .checkbox):hover {
  position: relative;
}
.button-group[data-v-48b7d793]:not(.passive) button.button:not(:last-child, .radio, .checkbox):hover::after {
  content: "";
  width: 1px;
  height: calc(100% + 2px);
  background-color: #217346;
  position: absolute;
  top: -1px;
  right: -1px;
}
.button-group[data-v-48b7d793]:not(.passive) button.button:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-left-width: 1px;
}
.button-group[data-v-48b7d793]:not(.passive) button.button:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right-width: 1px;
}
.button-group.passive[data-v-48b7d793] button.button:not(.last, .radio, .checkbox):hover {
  position: relative;
}
.button-group.passive[data-v-48b7d793] button.button:not(.last, .radio, .checkbox):hover::after {
  content: "";
  width: 1px;
  height: calc(100% + 2px);
  background-color: #217346;
  position: absolute;
  top: -1px;
  right: -1px;
}
.button-group.passive[data-v-48b7d793] button.button.first {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-left-width: 1px;
}
.button-group.passive[data-v-48b7d793] button.button.last {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right-width: 1px;
}.select-group[data-v-f51ab263] {
  display: flex;
  align-items: center;
}
.select-group[data-v-f51ab263] .select-wrap .select {
  border-radius: 0;
  border-left-width: 0;
  border-right-width: 0;
}
.select-group[data-v-f51ab263] .select-wrap + .select-wrap .select {
  border-left-width: 1px;
}
.select-group[data-v-f51ab263] .select-wrap:hover + .select-wrap .select {
  border-left-color: #217346;
}
.select-group[data-v-f51ab263] .select-wrap:first-child .select {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-left-width: 1px;
}
.select-group[data-v-f51ab263] .select-wrap:last-child .select {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right-width: 1px;
}.rich-text-base[data-v-c57f810c] {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.rich-text-base[data-v-c57f810c] .ai-loading {
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-top: 8px;
  border: 1px solid #217346;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spinner-c57f810c 0.8s linear infinite;
}
.row[data-v-c57f810c] {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.font-size-btn[data-v-c57f810c] {
  padding: 0;
}
.link-popover[data-v-c57f810c] {
  width: 240px;
}
.link-popover .btns[data-v-c57f810c] {
  margin-top: 10px;
  text-align: right;
}
.list-wrap[data-v-c57f810c] {
  width: 176px;
  color: #666;
  padding: 8px;
  margin: -12px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.list[data-v-c57f810c] {
  background-color: #2A2A2A;
  padding: 4px 4px 4px 20px;
  cursor: pointer;
}
.list[data-v-c57f810c]:not(:nth-child(3n)) {
  margin-right: 8px;
}
.list[data-v-c57f810c]:nth-child(4), .list[data-v-c57f810c]:nth-child(5), .list[data-v-c57f810c]:nth-child(6) {
  margin-top: 8px;
}
.list[data-v-c57f810c]:hover {
  color: #217346;
}
.list:hover span[data-v-c57f810c] {
  background-color: #217346;
}
.list-item[data-v-c57f810c] {
  width: 24px;
  height: 12px;
  position: relative;
  font-size: 10px;
  top: -2px;
}
.list-item span[data-v-c57f810c] {
  width: 100%;
  height: 2px;
  display: inline-block;
  position: absolute;
  top: 8px;
  background-color: #666;
}
.popover-btn[data-v-c57f810c] {
  padding: 0 3px;
}
@keyframes spinner-c57f810c {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}.text-style-panel[data-v-28db33b5] {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.row[data-v-28db33b5] {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.preset-style[data-v-28db33b5] {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.preset-style-item[data-v-28db33b5] {
  width: 50%;
  height: 50px;
  border: solid 1px #d6d6d6;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  transition: all 0.2s;
}
.preset-style-item[data-v-28db33b5]:hover {
  border-color: #217346;
  color: #217346;
  z-index: 1;
}
.preset-style-item[data-v-28db33b5]:nth-child(2n) {
  margin-left: -1px;
}
.preset-style-item[data-v-28db33b5]:nth-child(n+3) {
  margin-top: -1px;
}.row[data-v-9c071afb] {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}.row[data-v-1588667e] {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.switch-wrapper[data-v-1588667e] {
  text-align: right;
}
.filter[data-v-1588667e] {
  font-size: 12px;
}
.filter-item[data-v-1588667e] {
  padding: 6px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.filter-item .name[data-v-1588667e] {
  width: 60px;
}
.filter-item .filter-slider[data-v-1588667e] {
  flex: 1;
  margin: 0 6px;
}
.presets[data-v-1588667e] {
  margin-bottom: 5px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.preset-item[data-v-1588667e] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 31%;
  margin-bottom: calc(7% / 2);
}
.preset-item[data-v-1588667e]:not(:nth-child(3n)) {
  margin-right: calc(7% / 2);
}
.preset-item img[data-v-1588667e] {
  max-width: 100%;
  max-height: 120px;
}
.preset-item .preset-label[data-v-1588667e] {
  font-size: 12px;
  color: #888;
}.row[data-v-43e2f954] {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.switch-wrapper[data-v-43e2f954] {
  text-align: right;
}.row[data-v-ce8cbddf] {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.switch-wrapper[data-v-ce8cbddf] {
  text-align: right;
}
.origin-image[data-v-ce8cbddf] {
  height: 100px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #2A2A2A;
  margin-bottom: 10px;
}
.full-width-btn[data-v-ce8cbddf] {
  width: 100%;
  margin-bottom: 10px;
}
.clip[data-v-ce8cbddf] {
  width: 250px;
  font-size: 12px;
}
.clip .title[data-v-ce8cbddf] {
  margin-bottom: 5px;
}
.shape-clip[data-v-ce8cbddf] {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.shape-clip-item[data-v-ce8cbddf] {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 16%;
  margin-bottom: calc(20% / 4);
}
.shape-clip-item[data-v-ce8cbddf]:not(:nth-child(5n)) {
  margin-right: calc(20% / 4);
}
.shape-clip-item:hover .shape[data-v-ce8cbddf] {
  background-color: #ccc;
}
.shape-clip-item .shape[data-v-ce8cbddf] {
  width: 40px;
  height: 40px;
  background-color: #e1e1e1;
}
.popover-btn[data-v-ce8cbddf] {
  padding: 0 3px;
}.gradient-bar[data-v-9a8937c3] {
  width: calc(100% - 10px);
  height: 18px;
  padding: 1px 0;
  margin: 3px 0;
  position: relative;
  left: 5px;
}
.gradient-bar .bar[data-v-9a8937c3] {
  height: 16px;
  border: 1px solid #d9d9d9;
}
.gradient-bar .point[data-v-9a8937c3] {
  width: 10px;
  height: 18px;
  background-color: #fff;
  position: absolute;
  top: 0;
  border: 2px solid #fff;
  outline: 1px solid #d9d9d9;
  box-shadow: 0 0 2px 2px #d9d9d9;
  border-radius: 1px;
  cursor: pointer;
}
.gradient-bar .point.active[data-v-9a8937c3] {
  outline: 1px solid #217346;
  box-shadow: 0 0 2px 2px #217346;
}.shape-style-panel[data-v-8652a625] {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.row[data-v-8652a625] {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.font-size-btn[data-v-8652a625] {
  padding: 0;
}
.title[data-v-8652a625] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.shape-pool[data-v-8652a625] {
  width: 235px;
  height: 150px;
  overflow: auto;
  padding: 5px;
  padding-right: 10px;
  border: 1px solid #333333;
  margin-bottom: 20px;
}
.shape-list[data-v-8652a625] {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.shape-item[data-v-8652a625] {
  width: 14%;
  margin-bottom: calc(16% / 5);
  height: 0;
  padding-bottom: 14%;
  flex-shrink: 0;
}
.shape-item[data-v-8652a625]:not(:nth-child(6n)) {
  margin-right: calc(16% / 5);
}
.pattern-image-wrapper[data-v-8652a625] {
  margin-bottom: 10px;
}
.pattern-image[data-v-8652a625] {
  height: 0;
  padding-bottom: 56.25%;
  border: 1px dashed #333333;
  border-radius: 4px;
  position: relative;
  transition: all 0.2s;
}
.pattern-image[data-v-8652a625]:hover {
  border-color: #217346;
  color: #217346;
}
.pattern-image .content[data-v-8652a625] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
}.row[data-v-6f85e240] {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.line-btn[data-v-6f85e240] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 !important;
}
.line-btn .line-wrapper[data-v-6f85e240] {
  margin-left: 8px;
}
.line-wrapper[data-v-6f85e240] {
  overflow: visible;
}
.preset-point-style[data-v-6f85e240] {
  padding: 0 10px;
}
.preset-point-style + .preset-point-style[data-v-6f85e240] {
  margin-top: 10px;
}
.option[data-v-6f85e240] {
  height: 32px;
  padding: 0 5px;
  border-radius: 4px;
}
.option[data-v-6f85e240]:not(.selected):hover {
  background-color: rgba(33, 115, 70, 0.05);
  cursor: pointer;
}
.option.selected[data-v-6f85e240] {
  color: #217346;
  font-weight: 700;
}.chart-data-editor[data-v-0d302d7b] {
  width: 600px;
  position: relative;
}
.editor-content[data-v-0d302d7b] {
  width: 100%;
  height: 360px;
  position: relative;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  padding-left: 30px;
  padding-top: 20px;
  overflow: auto;
  overflow: overlay;
}
.range-box[data-v-0d302d7b] {
  position: absolute;
  top: 20px;
  left: 30px;
  z-index: 100;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.temp-range[data-v-0d302d7b] {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(136, 136, 136, 0.3);
}
.range-line[data-v-0d302d7b] {
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  border: 0 solid #217346;
}
.range-line.t[data-v-0d302d7b] {
  border-top-width: 1px;
}
.range-line.b[data-v-0d302d7b] {
  border-bottom-width: 1px;
}
.range-line.l[data-v-0d302d7b] {
  border-left-width: 1px;
}
.range-line.r[data-v-0d302d7b] {
  border-right-width: 1px;
}
.resizable[data-v-0d302d7b] {
  position: absolute;
  width: 12px;
  height: 12px;
  left: 0;
  top: 0;
  margin: -9px 0 0 -9px;
  cursor: nwse-resize;
}
.resizable[data-v-0d302d7b]::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 12px;
  right: 0;
  top: 0;
  background-color: #217346;
}
.resizable[data-v-0d302d7b]::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 4px;
  right: 0;
  bottom: 0;
  background-color: #217346;
}
table[data-v-0d302d7b] {
  width: 100%;
  height: 100%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  table-layout: fixed;
}
table td[data-v-0d302d7b] {
  text-align: center;
  border: 1px solid #ccc;
  vertical-align: middle;
  width: 100px;
  height: 32px;
}
table td.head[data-v-0d302d7b] {
  background-color: rgba(33, 115, 70, 0.08);
}
table .item[data-v-0d302d7b] {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  font-size: 13px;
  text-align: center;
  background-color: transparent;
}
.btns[data-v-0d302d7b] {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
.btns .btn[data-v-0d302d7b] {
  margin-left: 10px;
}
.btns .left[data-v-0d302d7b] {
  display: flex;
  align-items: center;
  font-size: 12px;
}
.btns .left .change[data-v-0d302d7b] {
  color: #ccc;
  margin-left: 5px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
}
.btns .left .change[data-v-0d302d7b]:hover {
  text-decoration: underline;
}
.col-header[data-v-0d302d7b] {
  width: auto;
  height: 20px;
  position: absolute;
  top: 0;
  left: 30px;
  display: flex;
  border: 1px solid #ccc;
  border-bottom: 0;
  border-right: 0;
  background-color: #2A2A2A;
}
.col-header-item[data-v-0d302d7b] {
  width: 100px;
  position: relative;
  border-right: 1px solid #ccc;
}
.col-key[data-v-0d302d7b] {
  font-size: 10px;
  text-align: center;
  line-height: 20px;
}
.row-header[data-v-0d302d7b] {
  height: auto;
  width: 30px;
  position: absolute;
  top: 20px;
  left: 0;
  border: 1px solid #ccc;
  border-bottom: 0;
  border-right: 0;
  background-color: #2A2A2A;
}
.row-header-item[data-v-0d302d7b] {
  height: 32px;
  position: relative;
  border-bottom: 1px solid #ccc;
}
.row-key[data-v-0d302d7b] {
  height: 100%;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.all-header[data-v-0d302d7b] {
  width: 30px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #ccc;
  border-bottom: 0;
  border-right: 0;
  background-color: #2A2A2A;
}
.all-header .triangle[data-v-0d302d7b] {
  position: absolute;
  bottom: 4px;
  right: 4px;
}.theme-colors-setting[data-v-2c82e870] {
  display: flex;
  flex-direction: column;
}
.title[data-v-2c82e870] {
  margin-bottom: 15px;
  font-size: 17px;
  font-weight: 700;
}
.row[data-v-2c82e870] {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.label[data-v-2c82e870] {
  font-size: 13px;
}
.btn[data-v-2c82e870] {
  width: 100%;
  margin-top: 12px;
}
.color-btn-wrap[data-v-2c82e870] {
  position: relative;
}
.delete-color-btn[data-v-2c82e870] {
  position: absolute;
  width: 30px;
  right: 2px;
  top: 2px;
  bottom: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  cursor: pointer;
}.color-btn[data-v-ad2b52be] {
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}
.blocks[data-v-ad2b52be] {
  display: flex;
  flex: 1;
  margin-left: 8px;
  outline: 1px dashed rgba(102, 102, 102, 0.12);
}
.color-block[data-v-ad2b52be] {
  height: 20px;
  flex: 1;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAEBJREFUOE9jfPbs2X8GIoCkpCQRqhgYGEcNxBlOo2GIM2iGQLL5//8/UTnl+fPnxOWUUQNxhtNoGOLOKYM+2QAAh2Nq10DwkukAAAAASUVORK5CYII=);
}
.color-block + .color-block[data-v-ad2b52be] {
  margin-left: 2px;
}
.content[data-v-ad2b52be] {
  width: 100%;
  height: 100%;
}
.color-btn-icon[data-v-ad2b52be] {
  width: 32px;
  font-size: 13px;
  color: #bfbfbf;
}.checkbox[data-v-ea6670de] {
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.checkbox:not(.disabled).checked .checkbox-input[data-v-ea6670de] {
  background-color: #217346;
  border-color: #217346;
}
.checkbox:not(.disabled).checked .checkbox-input[data-v-ea6670de]::after {
  transform: rotate(45deg) scaleY(1);
}
.checkbox:not(.disabled).checked .checkbox-label[data-v-ea6670de] {
  color: #217346;
}
.checkbox.disabled[data-v-ea6670de] {
  color: #b7b7b7;
  cursor: default;
}
.checkbox.disabled .checkbox-input[data-v-ea6670de] {
  background-color: #f5f5f5;
}
.checkbox-input[data-v-ea6670de] {
  display: inline-block;
  position: relative;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  width: 16px;
  height: 16px;
  background-color: #fff;
  vertical-align: middle;
  transition: border-color 0.15s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.15s cubic-bezier(0.71, -0.46, 0.29, 1.46);
  z-index: 1;
}
.checkbox-input[data-v-ea6670de]::after {
  content: "";
  border: 2px solid #fff;
  border-left: 0;
  border-top: 0;
  height: 9px;
  left: 4px;
  position: absolute;
  top: 1px;
  transform: rotate(45deg) scaleY(0);
  width: 6px;
  transition: transform 0.15s ease-in 0.05s;
  transform-origin: center;
}
.checkbox-original[data-v-ea6670de] {
  opacity: 0;
  outline: 0;
  position: absolute;
  margin: 0;
  width: 0;
  height: 0;
  z-index: -1;
}
.checkbox-label[data-v-ea6670de] {
  margin-left: 5px;
  line-height: 20px;
  font-size: 13px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}.chart-style-panel[data-v-99603c0b] {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.row[data-v-99603c0b] {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.full-width-btn[data-v-99603c0b] {
  width: 100%;
}
.label[data-v-99603c0b] {
  font-size: 12px;
  margin-bottom: 4px;
}
.preset-themes[data-v-99603c0b] {
  width: 250px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.preset-theme[data-v-99603c0b] {
  display: flex;
  cursor: pointer;
  border: 1px solid #ccc;
  padding: 2px;
  border-radius: 4px;
  width: 48%;
  margin-bottom: calc(4% / 1);
}
.preset-theme[data-v-99603c0b]:not(:nth-child(2n)) {
  margin-right: calc(4% / 1);
}
.preset-theme[data-v-99603c0b]:hover {
  border-color: #217346;
  transition: border-color 0.1s;
}
.preset-theme-color[data-v-99603c0b] {
  height: 20px;
  flex: 1;
}.row[data-v-3bba82d4] {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.theme-switch[data-v-3bba82d4] {
  margin-bottom: 18px;
}
.switch-wrapper[data-v-3bba82d4] {
  text-align: right;
}
.set-count[data-v-3bba82d4] {
  display: flex;
  justify-content: center;
  align-items: center;
}
.set-count .btn[data-v-3bba82d4] {
  padding: 0 8px;
}
.set-count .count-text[data-v-3bba82d4] {
  flex: 1;
  text-align: center;
  margin: 0 8px;
}svg[data-v-5e587b13] {
  overflow: hidden;
}.textarea[data-v-9ecab944] {
  outline: 0;
  width: 100%;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 10px;
  transition: border-color 0.25s;
  box-sizing: border-box;
  line-height: 1.675;
  resize: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.textarea[data-v-9ecab944]:focus {
  border-color: #217346;
  background-color: #fff;
}
.textarea.resizable[data-v-9ecab944] {
  resize: vertical;
}
.textarea.disabled[data-v-9ecab944] {
  background-color: #f5f5f5;
  border-color: #dcdcdc;
  color: #b7b7b7;
}
.textarea[data-v-9ecab944]::-moz-placeholder {
  color: #bfbfbf;
}
.textarea[data-v-9ecab944]::placeholder {
  color: #bfbfbf;
}.latex-editor[data-v-2eaf1275] {
  height: 560px;
}
.container[data-v-2eaf1275] {
  height: calc(100% - 50px);
  display: flex;
}
.left[data-v-2eaf1275] {
  width: 540px;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.input-area[data-v-2eaf1275] {
  flex: 1;
}
.input-area textarea[data-v-2eaf1275] {
  height: 100% !important;
  border-color: #333333 !important;
  padding: 10px !important;
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
}
.input-area textarea[data-v-2eaf1275]:focus {
  box-shadow: none !important;
}
.preview[data-v-2eaf1275] {
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 20px;
  border: 1px solid #333333;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-radius: 4px;
}
.placeholder[data-v-2eaf1275] {
  color: #888;
  font-size: 13px;
}
.preview-content[data-v-2eaf1275] {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.right[data-v-2eaf1275] {
  width: 280px;
  height: 100%;
  margin-left: 20px;
  border: solid 1px #333333;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-radius: 4px;
  overflow: hidden;
}
.content[data-v-2eaf1275] {
  height: calc(100% - 40px);
  font-size: 13px;
}
.formula[data-v-2eaf1275] {
  height: 100%;
  padding: 12px;
  overflow: auto;
  overflow: overlay;
}
.formula-item + .formula-item[data-v-2eaf1275] {
  margin-top: 10px;
}
.formula-item .formula-title[data-v-2eaf1275] {
  margin-bottom: 5px;
}
.formula-item .formula-item-content[data-v-2eaf1275] {
  height: 60px;
  padding: 5px;
  display: flex;
  align-items: center;
  background-color: #2A2A2A;
  border-radius: 4px;
  cursor: pointer;
}
.symbol[data-v-2eaf1275] {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.symbol-pool[data-v-2eaf1275] {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  padding: 12px;
  overflow: auto;
  overflow: overlay;
}
.symbol-item[data-v-2eaf1275] {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
}
.symbol-item[data-v-2eaf1275]:hover {
  background-color: #2A2A2A;
  cursor: pointer;
}
.footer[data-v-2eaf1275] {
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.footer .btn[data-v-2eaf1275] {
  margin-left: 10px;
}.row[data-v-11a157d9] {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}.row[data-v-94035050] {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.title[data-v-94035050] {
  margin-bottom: 10px;
}
.background-image-wrapper[data-v-94035050] {
  margin-bottom: 10px;
}
.background-image[data-v-94035050] {
  height: 0;
  padding-bottom: 56.25%;
  border: 1px dashed #333333;
  border-radius: 4px;
  position: relative;
  transition: all 0.2s;
}
.background-image[data-v-94035050]:hover {
  border-color: #217346;
  color: #217346;
}
.background-image .content[data-v-94035050] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
}
.switch-row[data-v-94035050] {
  height: 32px;
}
.switch-wrapper[data-v-94035050] {
  text-align: right;
}.row[data-v-f0a67509] {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.switch-row[data-v-f0a67509] {
  height: 32px;
}
.switch-wrapper[data-v-f0a67509] {
  text-align: right;
}.row[data-v-80533770] {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.title[data-v-80533770] {
  margin-bottom: 10px;
}
.label[data-v-80533770] {
  text-align: center;
}
.icon-btn[data-v-80533770] {
  display: inline-block;
  text-align: center;
  cursor: pointer;
}
.icon-btn.active[data-v-80533770] {
  color: #217346;
}
.text-btn[data-v-80533770] {
  height: 30px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
.text-btn[data-v-80533770]:hover {
  background-color: #efefef;
  border-radius: 4px;
}.element-animation-panel[data-v-9f940b7d] {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.element-animation[data-v-9f940b7d] {
  height: 32px;
  display: flex;
  align-items: center;
}
.element-animation-btn[data-v-9f940b7d] {
  width: 100%;
}
.config-item[data-v-9f940b7d] {
  display: flex;
  align-items: center;
}
.config-item + .config-item[data-v-9f940b7d] {
  margin-top: 5px;
}
.tip[data-v-9f940b7d] {
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-style: italic;
}
.animation-pool[data-v-9f940b7d] {
  width: 400px;
  height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 12px;
  margin-right: -10px;
  padding-right: 5px;
  position: relative;
}
.animation-pool .mask[data-v-9f940b7d] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.animation-pool.in .type-title[data-v-9f940b7d] {
  border-left-color: #68a490;
  background-color: rgba(104, 164, 144, 0.15);
}
.animation-pool.out .type-title[data-v-9f940b7d] {
  border-left-color: #d86344;
  background-color: rgba(216, 99, 68, 0.15);
}
.animation-pool.attention .type-title[data-v-9f940b7d] {
  border-left-color: #e8b76a;
  background-color: rgba(232, 183, 106, 0.15);
}
.pool-type[data-v-9f940b7d]:not(:last-child) {
  margin-bottom: 5px;
}
.type-title[data-v-9f940b7d] {
  width: 100%;
  font-size: 13px;
  margin-bottom: 10px;
  border-left: 4px solid #aaa;
  background-color: #eee;
  padding: 4px 0 4px 10px;
}
.pool-item-wrapper[data-v-9f940b7d] {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.pool-item[data-v-9f940b7d] {
  width: 24%;
  margin-bottom: calc(4% / 3);
  margin-bottom: 5px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}
.pool-item[data-v-9f940b7d]:not(:nth-child(4n)) {
  margin-right: calc(4% / 3);
}
.animation-box[data-v-9f940b7d] {
  background-color: #2A2A2A;
  border-radius: 4px;
}
.animation-sequence[data-v-9f940b7d] {
  flex: 1;
  padding-right: 12px;
  margin-right: -12px;
  overflow: auto;
  overflow: overlay;
}
.sequence-item[data-v-9f940b7d] {
  border: 1px solid #333333;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 8px;
  transition: all 0.5s;
}
.sequence-item.in.active[data-v-9f940b7d] {
  border-color: #68a490;
}
.sequence-item.out.active[data-v-9f940b7d] {
  border-color: #d86344;
}
.sequence-item.attention.active[data-v-9f940b7d] {
  border-color: #e8b76a;
}
.sequence-item.active[data-v-9f940b7d] {
  height: auto;
}
.sequence-item .sequence-content[data-v-9f940b7d] {
  display: flex;
  align-items: center;
  cursor: grab;
}
.sequence-item .sequence-content[data-v-9f940b7d]:active {
  cursor: grabbing;
}
.sequence-item .sequence-content .index[data-v-9f940b7d] {
  flex: 1;
}
.sequence-item .sequence-content .text[data-v-9f940b7d] {
  flex: 6;
}
.sequence-item .sequence-content .handler[data-v-9f940b7d] {
  flex: 2;
  font-size: 15px;
  text-align: right;
}
.sequence-item .sequence-content .handler-btn[data-v-9f940b7d] {
  margin-left: 8px;
  cursor: pointer;
}.theme-styles-extract[data-v-bb98722e] {
  height: 500px;
  display: flex;
  flex-direction: column;
}
.content[data-v-bb98722e] {
  flex: 1;
  overflow: auto;
  padding-right: 20px;
  margin-right: -20px;
}
.config-item[data-v-bb98722e] {
  padding: 12px 0 10px;
  border-bottom: 1px dashed #f5f5f5;
  font-size: 13px;
}
.label[data-v-bb98722e] {
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}
.label .tip[data-v-bb98722e] {
  font-size: 12px;
  color: #999;
}
.values.inline[data-v-bb98722e] {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.values.inline .value-wrap[data-v-bb98722e] {
  width: 9%;
  margin-bottom: calc(10% / 9);
  margin-top: 0 !important;
  cursor: pointer;
}
.values.inline .value-wrap[data-v-bb98722e]:not(:nth-child(10n)) {
  margin-right: calc(10% / 9);
}
.values.inline .value[data-v-bb98722e] {
  height: 25px;
  padding: 0;
}
.values.inline .value.disabled[data-v-bb98722e] {
  opacity: 0.2;
  position: relative;
}
.values.inline .value.disabled[data-v-bb98722e]::after {
  content: "";
  width: 24px;
  height: 2px;
  position: absolute;
  top: 11px;
  left: -1px;
  transform: rotate(-45deg);
  background-color: #000;
}
.values.inline .value.disabled[data-v-bb98722e]::before {
  content: "";
  width: 24px;
  height: 2px;
  position: absolute;
  top: 11px;
  left: -1px;
  transform: rotate(45deg);
  background-color: #000;
}
.values .value-wrap[data-v-bb98722e] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.values .value-wrap + .value-wrap[data-v-bb98722e] {
  margin-top: 3px;
}
.values .handler[data-v-bb98722e] {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  margin-left: 10px;
}
.values .handler .state[data-v-bb98722e] {
  opacity: 0;
  font-size: 15px;
}
.values .handler .state.active[data-v-bb98722e] {
  opacity: 1;
}
.values .handler .config-btn[data-v-bb98722e] {
  cursor: pointer;
}
.values .handler .config-btn[data-v-bb98722e]:hover {
  color: #217346;
}
.values .value[data-v-bb98722e] {
  width: 150px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border: 1px solid #333333;
  font-size: 12px;
  padding: 0 5px;
  border-radius: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.btns[data-v-bb98722e] {
  margin-top: 12px;
}
.btns .btn[data-v-bb98722e] {
  width: 100%;
}.theme-colors-setting[data-v-440f4bde] {
  display: flex;
  flex-direction: column;
}
.title[data-v-440f4bde] {
  margin-bottom: 15px;
  font-size: 17px;
  font-weight: 700;
}
.row[data-v-440f4bde] {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.label[data-v-440f4bde] {
  font-size: 13px;
  cursor: move;
}
.btn[data-v-440f4bde] {
  width: 100%;
  margin-top: 12px;
}
.slide-design-panel[data-v-921f31cc] {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  width: 100%;
}
.row[data-v-921f31cc] {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  gap: 8px;
  min-width: 0;
}
.title[data-v-921f31cc] {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.title .more[data-v-921f31cc] {
  cursor: pointer;
}
.title .more .text[data-v-921f31cc] {
  font-size: 12px;
  margin-right: 3px;
}
.background-image-wrapper[data-v-921f31cc] {
  margin-bottom: 10px;
}
.background-image[data-v-921f31cc] {
  height: 0;
  padding-bottom: 56.25%;
  border: 1px dashed #333333;
  border-radius: 4px;
  position: relative;
  transition: all 0.2s;
}
.background-image[data-v-921f31cc]:hover {
  border-color: #217346;
  color: #217346;
}
.background-image .content[data-v-921f31cc] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
}
.canvas-size[data-v-921f31cc] {
  width: 100%;
  color: #888;
  font-size: 12px;
  text-align: center;
}
.theme-list[data-v-921f31cc] {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.theme-item[data-v-921f31cc] {
  width: 48%;
  margin-bottom: calc(4% / 1);
  padding-bottom: 27%;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
}
.theme-item[data-v-921f31cc]:not(:nth-child(2n)) {
  margin-right: calc(4% / 1);
}
.theme-item .theme-item-content[data-v-921f31cc] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px;
  border: 1px solid #333333;
  border-radius: 4px;
}
.theme-item .text[data-v-921f31cc] {
  font-size: 15px;
}
.theme-item .colors[data-v-921f31cc] {
  display: flex;
  margin-top: 6px;
}
.theme-item .color-block[data-v-921f31cc] {
  width: 12px;
  height: 12px;
  margin-right: 2px;
}
.theme-item:hover .btns[data-v-921f31cc] {
  opacity: 1;
}
.theme-item .btns[data-v-921f31cc] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  background-color: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.2s;
}
.option[data-v-921f31cc] {
  height: 32px;
  padding: 0 5px;
  border-radius: 4px;
}
.option[data-v-921f31cc]:not(.selected):hover {
  background-color: rgba(33, 115, 70, 0.05);
  cursor: pointer;
}
.option.selected[data-v-921f31cc] {
  color: #217346;
  font-weight: 700;
}

/* 右侧窄栏场景：统一“标签列/控件列”占比，避免设计面板出现横向错位 */
.slide-design-panel[data-v-921f31cc] .row > div[style*="width: 40%"] {
  width: 34% !important;
  flex: 0 0 34%;
}
.slide-design-panel[data-v-921f31cc] .row > div[style*="width: 60%"] {
  width: 66% !important;
  flex: 0 0 66%;
  min-width: 0;
}.animation-pool[data-v-924801cb] {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.animation-item[data-v-924801cb] {
  width: 50%;
  height: 100px;
  border: solid 1px #d6d6d6;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0 15px 0;
  position: relative;
  cursor: pointer;
}
.animation-item.active[data-v-924801cb] {
  border-color: #217346;
  background-color: rgba(33, 115, 70, 0.05);
  z-index: 1;
}
.animation-item[data-v-924801cb]:nth-child(2n) {
  margin-left: -1px;
}
.animation-item[data-v-924801cb]:nth-child(n+3) {
  margin-top: -1px;
}
.animation-block[data-v-924801cb] {
  width: 64px;
  height: 36px;
  background: #666;
  position: relative;
  overflow: hidden;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.animation-block.fade[data-v-924801cb]:hover::after {
  content: "PPTist";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #217346;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fade-924801cb 0.3s linear;
}
.animation-block.slideX[data-v-924801cb]:hover::after {
  content: "PPTist";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #217346;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: slideX-924801cb 0.3s linear;
}
.animation-block.slideY[data-v-924801cb]:hover::after {
  content: "PPTist";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #217346;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: slideY-924801cb 0.3s linear;
}
.animation-block.slideX3D[data-v-924801cb]:hover::after {
  content: "PPTist";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #217346;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: slideX3D-924801cb 0.3s linear;
}
.animation-block.slideY3D[data-v-924801cb]:hover::after {
  content: "PPTist";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #217346;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: slideY3D-924801cb 0.3s linear;
}
.animation-block.rotate[data-v-924801cb]:hover::after {
  transform-origin: 0 0;
  content: "PPTist";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #217346;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: rotate-924801cb 0.3s linear;
}
.animation-block.scaleY[data-v-924801cb]:hover::after {
  content: "PPTist";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #217346;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: scaleY-924801cb 0.3s linear;
}
.animation-block.scaleX[data-v-924801cb]:hover::after {
  content: "PPTist";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #217346;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: scaleX-924801cb 0.3s linear;
}
.animation-block.scale[data-v-924801cb]:hover::after {
  content: "PPTist";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #217346;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: scale-924801cb 0.3s linear;
}
.animation-block.scaleReverse[data-v-924801cb]:hover::after {
  content: "PPTist";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #217346;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: scaleReverse-924801cb 0.3s linear;
}
.animation-text[data-v-924801cb] {
  font-size: 12px;
  color: #333;
  text-align: center;
}
@keyframes fade-924801cb {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}
@keyframes slideX-924801cb {
0% {
    transform: translateX(100%);
}
100% {
    transform: translateX(0);
}
}
@keyframes slideY-924801cb {
0% {
    transform: translateY(100%);
}
100% {
    transform: translateY(0);
}
}
@keyframes slideX3D-924801cb {
0% {
    transform: translateX(100%) scale(0.5);
}
100% {
    transform: translateX(0);
}
}
@keyframes slideY3D-924801cb {
0% {
    transform: translateY(100%) scale(0.5);
}
100% {
    transform: translateY(0);
}
}
@keyframes rotate-924801cb {
0% {
    transform: rotate(-90deg);
}
100% {
    transform: rotate(0);
}
}
@keyframes scaleY-924801cb {
0% {
    transform: scaleY(0.1);
}
100% {
    transform: scaleY(1);
}
}
@keyframes scaleX-924801cb {
0% {
    transform: scaleX(0.1);
}
100% {
    transform: scaleY(1);
}
}
@keyframes scale-924801cb {
0% {
    transform: scale(0.25);
}
100% {
    transform: scale(1);
}
}
@keyframes scaleReverse-924801cb {
0% {
    transform: scale(2);
}
100% {
    transform: scale(1);
}
}.row[data-v-8ef95b04] {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}.row[data-v-52bb9881] {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.font-size-btn[data-v-52bb9881] {
  padding: 0;
}
.option[data-v-52bb9881] {
  height: 32px;
  padding: 0 5px;
  border-radius: 4px;
}
.option[data-v-52bb9881]:not(.selected):hover {
  background-color: rgba(33, 115, 70, 0.05);
  cursor: pointer;
}
.option.selected[data-v-52bb9881] {
  color: #217346;
  font-weight: 700;
}
.toolbar[data-v-a77f0fe6] {
  border-left: solid 1px #333333;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  gap: 0;
  flex-wrap: nowrap;
  border-bottom: none;
}
.content[data-v-a77f0fe6] {
  padding: 12px;
  font-size: 13px;
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  overflow: auto;
  overflow: overlay;
}

/* 右侧卡片标签样式统一由 pptist-dark-theme.scss 维护，避免多处冲突 */.editor[data-v-fd74ca30] {
  height: 100%;
  overflow: auto;
}
.prosemirror-editor[data-v-fd74ca30] {
  height: 100%;
  cursor: text;
}
.prosemirror-editor[data-v-fd74ca30] .ProseMirror {
  height: 100%;
  font-size: 12px;
  overflow: auto;
  padding: 8px;
  line-height: 1.5;
}
.prosemirror-editor[data-v-fd74ca30] .ProseMirror > p[data-placeholder]::before {
  content: attr(data-placeholder);
  pointer-events: none;
  position: absolute;
  font-size: 12px;
  color: rgba(102, 102, 102, 0.5);
}
.menu[data-v-fd74ca30] {
  display: flex;
  background-color: #fff;
  padding: 6px 4px;
  border: 1px solid #333333;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.menu button[data-v-fd74ca30] {
  outline: 0;
  border: 0;
  background-color: #fff;
  padding: 3px;
  border-radius: 4px;
  font-size: 16px;
  margin: 0 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.menu button[data-v-fd74ca30]:hover, .menu button.active[data-v-fd74ca30] {
  background-color: #217346;
  color: #fff;
}.remark[data-v-d0c67cfc] {
  position: relative;
  border-top: 1px solid #333333;
}
.resize-handler[data-v-d0c67cfc] {
  height: 7px;
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  cursor: n-resize;
  z-index: 2;
}.fullscreen-spin[data-v-e83a5601] {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}
.fullscreen-spin.mask[data-v-e83a5601] {
  background-color: rgba(241, 241, 241, 0.7);
}
.spin[data-v-e83a5601] {
  width: 200px;
  height: 200px;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.spinner[data-v-e83a5601] {
  width: 36px;
  height: 36px;
  border: 3px solid #217346;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spinner-e83a5601 0.8s linear infinite;
}
.text[data-v-e83a5601] {
  margin-top: 20px;
  color: #217346;
}
@keyframes spinner-e83a5601 {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}.export-img-dialog[data-v-b6672192] {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.thumbnails-view[data-v-b6672192] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.thumbnails-view[data-v-b6672192]::after {
  content: "";
  background-color: rgba(34, 39, 46, 0.9);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.configs[data-v-b6672192] {
  width: 350px;
  height: calc(100% - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
}
.configs .row[data-v-b6672192] {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px;
}
.configs .title[data-v-b6672192] {
  width: 100px;
  position: relative;
  color: #e9edf2;
  font-weight: 500;
}
.configs .title[data-v-b6672192]::after {
  content: attr(data-range);
  position: absolute;
  top: 20px;
  left: 0;
  color: #c2c9d3;
}
.configs .config-item[data-v-b6672192] {
  flex: 1;
}
.btns[data-v-b6672192] {
  width: 300px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.btns .export[data-v-b6672192] {
  flex: 1;
}
.btns .close[data-v-b6672192] {
  width: 100px;
  margin-left: 10px;
}.export-json-dialog[data-v-271c5b3d] {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.preview[data-v-271c5b3d] {
  width: 100%;
  height: calc(100% - 90px);
  margin-bottom: 10px;
  background-color: #f9f9f9;
  color: #0451a5;
  overflow: auto;
}
pre[data-v-271c5b3d] {
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
}
.btns[data-v-271c5b3d] {
  width: 300px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btns .export[data-v-271c5b3d] {
  flex: 1;
}
.btns .close[data-v-271c5b3d] {
  width: 100px;
  margin-left: 10px;
}
[data-v-271c5b3d]::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: transparent;
}
[data-v-271c5b3d]::-webkit-scrollbar-thumb {
  background-color: #e1e1e1;
  border-radius: 5px;
}.export-pdf-dialog[data-v-72b9976f] {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.thumbnails-view[data-v-72b9976f] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.thumbnails-view[data-v-72b9976f]::after {
  content: "";
  background-color: rgba(34, 39, 46, 0.9);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.thumbnail.break-page[data-v-72b9976f] {
  -moz-column-break-after: page;
       break-after: page;
}
.configs[data-v-72b9976f] {
  width: 300px;
  height: calc(100% - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
}
.configs .row[data-v-72b9976f] {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px;
}
.configs .title[data-v-72b9976f] {
  width: 100px;
  color: #e9edf2;
  font-weight: 500;
}
.configs .config-item[data-v-72b9976f] {
  flex: 1;
}
.configs .tip[data-v-72b9976f] {
  font-size: 12px;
  color: #c2c9d3;
  line-height: 1.8;
  margin-top: 25px;
}
.btns[data-v-72b9976f] {
  width: 300px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.btns .export[data-v-72b9976f] {
  flex: 1;
}
.btns .close[data-v-72b9976f] {
  width: 100px;
  margin-left: 10px;
}.export-pptx-dialog[data-v-2ffaeb55] {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.thumbnails-view[data-v-2ffaeb55] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.thumbnails-view[data-v-2ffaeb55]::after {
  content: "";
  background-color: rgba(34, 39, 46, 0.9);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.configs[data-v-2ffaeb55] {
  width: 350px;
  height: calc(100% - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1;
}
.configs .row[data-v-2ffaeb55] {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px;
}
.configs .title[data-v-2ffaeb55] {
  width: 100px;
  position: relative;
  color: #e9edf2;
  font-weight: 500;
}
.configs .title[data-v-2ffaeb55]::after {
  content: attr(data-range);
  position: absolute;
  top: 20px;
  left: 0;
  color: #c2c9d3;
}
.configs .config-item[data-v-2ffaeb55] {
  flex: 1;
}
.configs .tip[data-v-2ffaeb55] {
  font-size: 12px;
  color: #c2c9d3;
  line-height: 1.8;
  margin-top: 10px;
}
.btns[data-v-2ffaeb55] {
  width: 300px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
.btns .export[data-v-2ffaeb55] {
  flex: 1;
}
.btns .close[data-v-2ffaeb55] {
  width: 100px;
  margin-left: 10px;
}.export-pptist-dialog[data-v-a8f0a314] {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.configs[data-v-a8f0a314] {
  width: 350px;
  height: calc(100% - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.configs .row[data-v-a8f0a314] {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 25px;
}
.configs .title[data-v-a8f0a314] {
  width: 100px;
  position: relative;
}
.configs .title[data-v-a8f0a314]::after {
  content: attr(data-range);
  position: absolute;
  top: 20px;
  left: 0;
}
.configs .config-item[data-v-a8f0a314] {
  flex: 1;
}
.configs .tip[data-v-a8f0a314] {
  font-size: 12px;
  color: #aaa;
  line-height: 1.8;
  margin-top: 25px;
}
.btns[data-v-a8f0a314] {
  width: 300px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btns .export[data-v-a8f0a314] {
  flex: 1;
}
.btns .close[data-v-a8f0a314] {
  width: 100px;
  margin-left: 10px;
}.export-dialog[data-v-1c530b1e] {
  margin: -20px;
}
.content[data-v-1c530b1e] {
  height: 460px;
  padding: 12px;
  font-size: 13px;
  overflow: auto;
  overflow: overlay;
}.moveable-panel[data-v-11ce2958] {
  position: fixed;
  background-color: #fff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  border: 1px solid #333333;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}
.resizer[data-v-11ce2958] {
  width: 10px;
  height: 10px;
  position: absolute;
  bottom: 0;
  right: 0;
  cursor: se-resize;
}
.resizer[data-v-11ce2958]::after {
  content: "";
  position: absolute;
  bottom: -4px;
  right: -4px;
  transform: rotate(45deg);
  transform-origin: center;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-left-color: #e1e1e1;
}
.header[data-v-11ce2958] {
  height: 40px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: move;
}
.title[data-v-11ce2958] {
  flex: 1;
  font-size: 13px;
  padding-left: 10px;
}
.close-btn[data-v-11ce2958] {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #666;
  font-size: 13px;
  cursor: pointer;
}
.close-btn[data-v-11ce2958]:hover {
  color: #217346;
}
.content[data-v-11ce2958] {
  flex: 1;
  padding: 10px;
  overflow: auto;
}.select-panel[data-v-7c99ccba] {
  height: 100%;
  font-size: 12px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.handler[data-v-7c99ccba] {
  height: 24px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.handler .icon-btns[data-v-7c99ccba] {
  height: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.handler .icon-btn[data-v-7c99ccba] {
  width: 16px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.handler .icon-btn[data-v-7c99ccba]:hover {
  color: #217346;
}
.empty[data-v-7c99ccba] {
  width: 100%;
  height: 100%;
  color: #999;
  font-style: italic;
  display: flex;
  justify-content: center;
  align-items: center;
}
.element-list[data-v-7c99ccba] {
  height: calc(100% - 32px);
  padding-right: 10px;
  margin-right: -10px;
  overflow: auto;
}
.item[data-v-7c99ccba] {
  padding: 5px;
  font-size: 12px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.item.active[data-v-7c99ccba] {
  background-color: rgba(33, 115, 70, 0.1);
}
.item.group-active[data-v-7c99ccba] {
  background-color: rgba(33, 115, 70, 0.2);
}
.item.lock[data-v-7c99ccba] {
  cursor: default;
}
.item[data-v-7c99ccba]:not(.lock):hover {
  background-color: rgba(33, 115, 70, 0.25);
  transition: background-color 0.2s;
}
.item .name[data-v-7c99ccba] {
  height: 18px;
  line-height: 18px;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.item .icons[data-v-7c99ccba] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-left: 10px;
}
.item .icons .icon[data-v-7c99ccba] {
  margin-left: 6px;
  cursor: pointer;
}
.item .icons .icon[data-v-7c99ccba]:hover {
  color: #217346;
}
.group-els[data-v-7c99ccba] {
  padding: 5px 0;
}
.group-els .group-title[data-v-7c99ccba] {
  margin-bottom: 5px;
  padding: 0 5px;
}
.group-els .item[data-v-7c99ccba] {
  margin-left: 15px;
}
.input[data-v-7c99ccba] {
  width: 100%;
  height: 16px;
  border: 0;
  outline: 0;
  padding-left: 0;
  padding-right: 0;
  flex: 1;
  font-size: 12px;
  background-color: transparent;
}.search-panel[data-v-6acdb8e8] {
  font-size: 13px;
}
.content[data-v-6acdb8e8] {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.input[data-v-6acdb8e8] {
  margin-top: 10px;
}
.count[data-v-6acdb8e8] {
  font-size: 12px;
  margin-right: 8px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ignore-case[data-v-6acdb8e8] {
  font-size: 12px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
}
.ignore-case.active[data-v-6acdb8e8] {
  color: #217346;
}
.next-btn[data-v-6acdb8e8] {
  width: 22px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 !important;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
}
.next-btn[data-v-6acdb8e8]:hover {
  color: #217346;
}
.footer[data-v-6acdb8e8] {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 10px;
}
.close-btn[data-v-6acdb8e8] {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 8px;
  right: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #666;
  font-size: 13px;
  cursor: pointer;
}
.close-btn[data-v-6acdb8e8]:hover {
  color: #217346;
}.notes-panel[data-v-b4123d28] {
  height: 100%;
  font-size: 12px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.container[data-v-b4123d28] {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.notes[data-v-b4123d28] {
  flex: 1;
  overflow: auto;
  margin: 0 -10px;
  padding: 2px 12px;
}
.empty[data-v-b4123d28] {
  width: 100%;
  height: 100%;
  color: #999;
  font-style: italic;
  display: flex;
  justify-content: center;
  align-items: center;
}
.note[data-v-b4123d28] {
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 10px;
}
.note + .note[data-v-b4123d28] {
  margin-top: 10px;
}
.note.active[data-v-b4123d28] {
  background-color: #f7f7f7;
}
.note .header[data-v-b4123d28] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.note .header:hover .btns[data-v-b4123d28] {
  opacity: 1;
}
.note .user[data-v-b4123d28] {
  display: flex;
  align-items: center;
}
.note .user .avatar[data-v-b4123d28] {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #42ba97;
  color: #fff;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}
.note .user .username[data-v-b4123d28] {
  font-size: 14px;
}
.note .user .time[data-v-b4123d28] {
  font-size: 12px;
  color: #aaa;
}
.note .btns[data-v-b4123d28] {
  display: flex;
  align-items: center;
  opacity: 0;
}
.note .btns .btn[data-v-b4123d28] {
  margin-left: 5px;
  cursor: pointer;
}
.note .btns .btn[data-v-b4123d28]:hover {
  text-decoration: underline;
  color: #217346;
}
.note .replies[data-v-b4123d28] {
  margin-left: 20px;
  margin-top: 15px;
}
.note .replies .reply-item[data-v-b4123d28] {
  margin-top: 10px;
}
.note .replies .reply-item .content[data-v-b4123d28] {
  margin-top: 5px;
}
.note-reply[data-v-b4123d28] {
  margin-top: 15px;
}
.reply-btns[data-v-b4123d28] {
  margin-top: 5px;
  text-align: right;
}
.reply-btns .btn[data-v-b4123d28] {
  margin-left: 8px;
}
.send[data-v-b4123d28] {
  height: 120px;
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.send .footer[data-v-b4123d28] {
  margin-top: 10px;
  display: flex;
  align-items: center;
}
.send .footer .btn.icon[data-v-b4123d28] {
  font-size: 18px;
  color: #666;
  cursor: pointer;
}
.send .footer .btn + .btn[data-v-b4123d28] {
  margin-left: 8px;
}.symbol-panel[data-v-fe7752a2] {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.symbol-panel .emoji-types[data-v-fe7752a2] {
  font-size: 12px;
  display: flex;
  align-items: center;
  margin-bottom: 3px;
}
.symbol-panel .emoji-types .emoji-type[data-v-fe7752a2] {
  padding: 2px 4px;
  text-align: center;
  border-radius: 4px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  flex-shrink: 0;
  cursor: pointer;
}
.symbol-panel .emoji-types .emoji-type.active[data-v-fe7752a2] {
  color: #217346;
  background-color: rgba(33, 115, 70, 0.05);
  font-weight: 700;
}
.symbol-panel .emoji-types .emoji-type + .emoji-type[data-v-fe7752a2] {
  margin-left: 4px;
}
.symbol-panel .pool[data-v-fe7752a2] {
  padding: 5px 10px 0;
  margin: 0 -10px;
  flex: 1;
  font-size: 18px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: auto;
  overflow: overlay;
}
.symbol-panel .symbol-group[data-v-fe7752a2] {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.symbol-panel .symbol-group + .symbol-group[data-v-fe7752a2] {
  border-top: 1px solid #f0f0f0;
  padding-top: 10px;
  margin-top: 8px;
}
.symbol-panel .symbol-item[data-v-fe7752a2] {
  width: 12%;
  margin-bottom: calc(4% / 7);
  height: 38px;
  position: relative;
  border: 1px solid #333333;
  cursor: pointer;
}
.symbol-panel .symbol-item[data-v-fe7752a2]:not(:nth-child(8n)) {
  margin-right: calc(4% / 7);
}
.symbol-panel .symbol-item[data-v-fe7752a2]:hover {
  color: #217346;
  border-color: #217346;
  transition: all 0.2s;
}
.symbol-panel .symbol-item .symbol[data-v-fe7752a2] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.close-btn[data-v-fe7752a2] {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 8px;
  right: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #666;
  font-size: 13px;
  cursor: pointer;
}
.close-btn[data-v-fe7752a2]:hover {
  color: #217346;
}.notes-panel[data-v-4e2e1c45] {
  height: 100%;
  font-size: 12px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.container[data-v-4e2e1c45] {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.row[data-v-4e2e1c45] {
  width: 100%;
  display: flex;
  align-items: center;
}
.row + .row[data-v-4e2e1c45] {
  margin-top: 5px;
}
.placeholder[data-v-4e2e1c45] {
  height: 30px;
  line-height: 30px;
  text-align: center;
  color: #999;
  font-style: italic;
  border: 1px dashed #ccc;
  border-radius: 4px;
  margin-top: 5px;
}.image-waterfall-viewer[data-v-91c6b1ea] {
  overflow-x: hidden;
  overflow-y: auto;
}
.image-waterfall-content[data-v-91c6b1ea] {
  width: 100%;
  position: relative;
}
.waterfall-item[data-v-91c6b1ea] {
  text-align: center;
}
.waterfall-item.animation[data-v-91c6b1ea] {
  animation: fadeIn-91c6b1ea 0.5s ease both;
}
.waterfall-item[data-v-91c6b1ea] img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
@keyframes fadeIn-91c6b1ea {
0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}.image-lib-panel[data-v-276ae4bc] {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.container[data-v-276ae4bc] {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tools[data-v-276ae4bc] {
  flex-shrink: 0;
  margin-bottom: 10px;
}
.popover-menu-item.active[data-v-276ae4bc] {
  color: #217346;
}
.search-orientation[data-v-276ae4bc] {
  color: #999;
  padding-left: 5px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.search-btn[data-v-276ae4bc] {
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.search-btn[data-v-276ae4bc]:hover {
  color: #217346;
}
.imgs-wrap[data-v-276ae4bc] {
  flex: 1;
}
.img-item[data-v-276ae4bc] {
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.img-item:hover .mask[data-v-276ae4bc] {
  display: flex;
}
.img-item .mask[data-v-276ae4bc] {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.outline-editor {
  padding: 0 10px;
  padding-left: 40px;
  position: relative;
}
.outline-editor .item {
  height: 32px;
  position: relative;
}
.outline-editor .item.contextmenu-active {
  color: #217346;
}
.outline-editor .item.contextmenu-active .text {
  background-color: rgba(33, 115, 70, 0.08);
}
.outline-editor .item.title {
  font-weight: 700;
}
.outline-editor .item.lv-1 {
  font-size: 22px;
}
.outline-editor .item.lv-2 {
  font-size: 17px;
}
.outline-editor .item.lv-3 {
  font-size: 15px;
}
.outline-editor .item.lv-4 {
  font-size: 13px;
  padding-left: 20px;
}
.outline-editor .text {
  height: 100%;
  padding: 0 11px;
  line-height: 32px;
  border-radius: 4px;
  transition: background-color 0.2s;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.outline-editor .text:hover {
  background-color: rgba(33, 115, 70, 0.08);
}
.outline-editor .flag {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 50%;
  left: -40px;
  margin-top: -16px;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.outline-editor .flag::before {
  content: "";
  width: 1px;
  height: 100%;
  position: absolute;
  left: 50%;
  background-color: rgba(33, 115, 70, 0.1);
}
.outline-editor .flag::after {
  content: "";
  width: 32px;
  height: 22px;
  border-radius: 2px;
  background-color: #fff;
  border: 1px solid #217346;
  color: #217346;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: 400;
}
.outline-editor .item.lv-1 .flag::after {
  content: "主题";
}
.outline-editor .item.lv-2 .flag::after {
  content: "章";
}
.outline-editor .item.lv-3 .flag::after {
  content: "节";
}
.outline-editor .item.lv-4 .flag::after {
  opacity: 0;
}.aippt-dialog[data-v-41bdf017] {
  margin: -20px;
  padding: 30px;
}
.header[data-v-41bdf017] {
  margin-bottom: 12px;
}
.header .title[data-v-41bdf017] {
  font-weight: 700;
  font-size: 20px;
  margin-right: 8px;
  background: linear-gradient(270deg, #d897fd, #33bcfc);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  vertical-align: text-bottom;
  line-height: 1.1;
}
.header .subtite[data-v-41bdf017] {
  color: #888;
  font-size: 12px;
}
.header .subtite .local[data-v-41bdf017] {
  color: #217346;
  text-decoration: underline;
  cursor: pointer;
}
.preview pre[data-v-41bdf017] {
  max-height: 450px;
  padding: 10px;
  margin-bottom: 15px;
  background-color: #f1f1f1;
  overflow: auto;
}
.preview .outline-view[data-v-41bdf017] {
  max-height: 450px;
  padding: 10px;
  margin-bottom: 15px;
  background-color: #f1f1f1;
  overflow: auto;
}
.preview .btns[data-v-41bdf017] {
  display: flex;
  justify-content: center;
  align-items: center;
}
.preview .btns .btn[data-v-41bdf017] {
  width: 120px;
  margin: 0 5px;
}
.select-template .templates[data-v-41bdf017] {
  max-height: 450px;
  overflow: auto;
  margin-bottom: 10px;
  padding-right: 5px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.select-template .templates .template[data-v-41bdf017] {
  border: 2px solid #333333;
  border-radius: 4px;
  width: 49%;
  margin-bottom: calc(2% / 1);
}
.select-template .templates .template[data-v-41bdf017]:not(:nth-child(2n)) {
  margin-right: calc(2% / 1);
}
.select-template .templates .template.selected[data-v-41bdf017] {
  border-color: #217346;
}
.select-template .templates .template img[data-v-41bdf017] {
  width: 100%;
  min-height: 175px;
}
.select-template .btns[data-v-41bdf017] {
  display: flex;
  justify-content: center;
  align-items: center;
}
.select-template .btns .btn[data-v-41bdf017] {
  width: 120px;
  margin: 0 5px;
}
.recommends[data-v-41bdf017] {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.recommends .recommend[data-v-41bdf017] {
  font-size: 12px;
  background-color: #f1f1f1;
  border-radius: 4px;
  padding: 3px 5px;
  margin-right: 5px;
  margin-top: 5px;
  cursor: pointer;
}
.recommends .recommend[data-v-41bdf017]:hover {
  color: #217346;
}
.configs[data-v-41bdf017] {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
}
.configs .config-item[data-v-41bdf017] {
  font-size: 13px;
  display: flex;
  align-items: center;
}
.count[data-v-41bdf017] {
  font-size: 12px;
  color: #999;
  margin-right: 10px;
}
.submit[data-v-41bdf017] {
  height: 20px;
  font-size: 12px;
  background-color: #217346;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 8px 0 6px;
  border-radius: 4px;
  cursor: pointer;
}
.submit[data-v-41bdf017]:hover {
  background-color: #2A9058;
}
.submit .icon[data-v-41bdf017] {
  font-size: 15px;
  margin-right: 3px;
}
@media screen and (width <= 800px) {
.configs[data-v-41bdf017] {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
}
.configs .config-item[data-v-41bdf017] {
    margin-top: 8px;
}
.configs .config-item .label[data-v-41bdf017] {
    flex-shrink: 0;
}
.configs .config-item .config-content[data-v-41bdf017] {
    width: 100% !important;
}
.select-template .templates[data-v-41bdf017] {
    padding-right: 0;
}
.select-template .templates .template img[data-v-41bdf017] {
    min-height: 60px;
}
}
@media screen and (width <= 380px) {
.preview pre[data-v-41bdf017] {
    max-height: 400px;
}
.preview .outline-view[data-v-41bdf017] {
    max-height: 400px;
}
.select-template .templates[data-v-41bdf017] {
    max-height: 400px;
}
}.pptist-editor-bridge[data-v-3d70c69f] {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.layout-content[data-v-3d70c69f] {
  height: 100%;
  display: flex;
}
.layout-content-left[data-v-3d70c69f] {
  width: 160px;
  height: 100%;
  flex-shrink: 0;
}
.layout-content-center[data-v-3d70c69f] {
  width: calc(100% - 160px - 300px);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.layout-content-center .center-top[data-v-3d70c69f] {
  min-height: 40px;
  height: auto;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}
.layout-content-center .center-body[data-v-3d70c69f] {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  z-index: 1;
}
.layout-content-center .center-bottom[data-v-3d70c69f] {
  flex: 0 0 auto;
}
.layout-content-right[data-v-3d70c69f] {
  width: 300px;
  min-width: 300px;
  height: 100%;
}.screen-element-video[data-v-3f3d166d] {
  position: absolute;
}
.rotate-wrapper[data-v-3f3d166d] {
  width: 100%;
  height: 100%;
}
.element-content[data-v-3f3d166d] {
  width: 100%;
  height: 100%;
}.screen-element-audio[data-v-8ce6831f] {
  position: absolute;
}
.rotate-wrapper[data-v-8ce6831f] {
  width: 100%;
  height: 100%;
}
.element-content[data-v-8ce6831f] {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.element-content:hover .audio-player[data-v-8ce6831f] {
  display: block;
}
.audio-icon[data-v-8ce6831f] {
  cursor: pointer;
}
.audio-player[data-v-8ce6831f] {
  position: absolute;
  display: none;
}.link[data-v-0668aba0] {
  cursor: pointer;
}.screen-slide[data-v-c5bba879] {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  overflow: hidden;
}
.background[data-v-c5bba879] {
  width: 100%;
  height: 100%;
  background-position: center;
  position: absolute;
}.screen-slide-list[data-v-010e8853] {
  background: #1d1d1d;
  position: relative;
  width: 100%;
  height: 100%;
}
.slide-item[data-v-010e8853] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.slide-item[data-v-010e8853]:not(.last, .next) {
  z-index: -1;
}
.slide-item.current[data-v-010e8853] {
  z-index: 2;
}
.slide-item.hide[data-v-010e8853] {
  opacity: 0;
}
.slide-item.turning-mode-no.before[data-v-010e8853] {
  transform: translateY(-100%);
}
.slide-item.turning-mode-no.after[data-v-010e8853] {
  transform: translateY(100%);
}
.slide-item.turning-mode-fade[data-v-010e8853] {
  transition: opacity 0.75s;
}
.slide-item.turning-mode-fade.before[data-v-010e8853] {
  pointer-events: none;
  opacity: 0;
}
.slide-item.turning-mode-fade.after[data-v-010e8853] {
  pointer-events: none;
  opacity: 0;
}
.slide-item.turning-mode-slideX[data-v-010e8853] {
  transition: transform 0.35s;
}
.slide-item.turning-mode-slideX.before[data-v-010e8853] {
  transform: translateX(-100%);
}
.slide-item.turning-mode-slideX.after[data-v-010e8853] {
  transform: translateX(100%);
}
.slide-item.turning-mode-slideY[data-v-010e8853] {
  transition: transform 0.35s;
}
.slide-item.turning-mode-slideY.before[data-v-010e8853] {
  transform: translateY(-100%);
}
.slide-item.turning-mode-slideY.after[data-v-010e8853] {
  transform: translateY(100%);
}
.slide-item.turning-mode-slideX3D[data-v-010e8853] {
  transition: transform 0.5s;
}
.slide-item.turning-mode-slideX3D.before[data-v-010e8853] {
  transform: translateX(-100%) scale(0.5);
}
.slide-item.turning-mode-slideX3D.after[data-v-010e8853] {
  transform: translateX(100%) scale(0.5);
}
.slide-item.turning-mode-slideY3D[data-v-010e8853] {
  transition: transform 0.5s;
}
.slide-item.turning-mode-slideY3D.before[data-v-010e8853] {
  transform: translateY(-100%) scale(0.5);
}
.slide-item.turning-mode-slideY3D.after[data-v-010e8853] {
  transform: translateY(100%) scale(0.5);
}
.slide-item.turning-mode-rotate[data-v-010e8853] {
  transition: transform 0.5s;
  transform-origin: 0 0;
}
.slide-item.turning-mode-rotate.before[data-v-010e8853] {
  transform: rotate(90deg);
}
.slide-item.turning-mode-rotate.after[data-v-010e8853] {
  transform: rotate(-90deg);
}
.slide-item.turning-mode-scaleY[data-v-010e8853] {
  transition: transform 0.5s;
}
.slide-item.turning-mode-scaleY.before[data-v-010e8853] {
  transform: scaleY(0.1);
}
.slide-item.turning-mode-scaleY.after[data-v-010e8853] {
  transform: scaleY(0.1);
}
.slide-item.turning-mode-scaleX[data-v-010e8853] {
  transition: transform 0.5s;
}
.slide-item.turning-mode-scaleX.before[data-v-010e8853] {
  transform: scaleX(0.1);
}
.slide-item.turning-mode-scaleX.after[data-v-010e8853] {
  transform: scaleX(0.1);
}
.slide-item.turning-mode-scale[data-v-010e8853] {
  transition: transform 0.5s;
}
.slide-item.turning-mode-scale.before[data-v-010e8853] {
  transform: scale(0.25);
}
.slide-item.turning-mode-scale.after[data-v-010e8853] {
  transform: scale(0.25);
}
.slide-item.turning-mode-scaleReverse[data-v-010e8853] {
  transition: transform 0.5s;
}
.slide-item.turning-mode-scaleReverse.before[data-v-010e8853] {
  transform: scale(2);
}
.slide-item.turning-mode-scaleReverse.after[data-v-010e8853] {
  transform: scale(2);
}
.slide-content[data-v-010e8853] {
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
}.slide-thumbnails[data-v-719f1bf3] {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #1a1a1a;
  z-index: 99;
}
.return-button[data-v-719f1bf3] {
  height: 60px;
  padding: 20px 30px 0;
}
.return-button .icon[data-v-719f1bf3] {
  color: #fff;
  font-size: 36px;
  cursor: pointer;
}
.return-button .icon[data-v-719f1bf3]:hover {
  color: #217346;
}
.slide-thumbnails-content[data-v-719f1bf3] {
  height: calc(100% - 100px);
  padding: 20px 30px 30px 30px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: auto;
  overflow: overlay;
}
.slide-thumbnails-content .thumbnail[data-v-719f1bf3] {
  width: 150px;
  outline: 2px solid #aaa;
  margin-right: 12px;
  margin-bottom: 12px;
}
.slide-thumbnails-content .thumbnail[data-v-719f1bf3]:hover {
  outline-color: #217346;
}
.slide-thumbnails-content .thumbnail.active[data-v-719f1bf3] {
  outline-width: 3px;
  outline-color: #217346;
}.writing-board[data-v-23a23d07] {
  z-index: 8;
  cursor: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.blackboard[data-v-23a23d07] {
  width: 100%;
  height: 100%;
  background-color: #0f392b;
}
.canvas[data-v-23a23d07] {
  position: absolute;
  top: 0;
  left: 0;
}
.eraser[data-v-23a23d07], .pen[data-v-23a23d07] {
  pointer-events: none;
  position: absolute;
  z-index: 9;
}
.eraser .icon[data-v-23a23d07], .pen .icon[data-v-23a23d07] {
  filter: drop-shadow(2px 2px 2px #555);
}
.eraser[data-v-23a23d07] {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 4px solid rgba(85, 85, 85, 0.15);
  color: rgba(85, 85, 85, 0.75);
}.writing-board-tool[data-v-86b7d0d5] {
  font-size: 12px;
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.writing-board-tool .writing-board-wrap[data-v-86b7d0d5] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.writing-board-tool .tools[data-v-86b7d0d5] {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.writing-board-tool .tool-content[data-v-86b7d0d5] {
  display: flex;
  align-items: center;
}
.writing-board-tool .btn[data-v-86b7d0d5] {
  padding: 5px;
  margin-right: 5px;
  border-radius: 4px;
  cursor: pointer;
}
.writing-board-tool .btn[data-v-86b7d0d5]:hover {
  color: #217346;
}
.writing-board-tool .btn.active[data-v-86b7d0d5] {
  background-color: rgba(33, 115, 70, 0.5);
  color: #fff;
}
.writing-board-tool .btn.close[data-v-86b7d0d5] {
  margin-right: 0;
  margin-left: 5px;
}
.writing-board-tool .icon[data-v-86b7d0d5] {
  font-size: 20px;
}
.writing-board-tool .colors[data-v-86b7d0d5] {
  display: flex;
  padding: 0 5px;
}
.writing-board-tool .color[data-v-86b7d0d5] {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  cursor: pointer;
}
.writing-board-tool .color[data-v-86b7d0d5]:hover {
  transform: scale(1.15);
}
.writing-board-tool .color.active[data-v-86b7d0d5] {
  transform: scale(1.3);
}
.writing-board-tool .color.white[data-v-86b7d0d5] {
  border: 1px solid #f1f1f1;
}
.writing-board-tool .color + .color[data-v-86b7d0d5] {
  margin-left: 8px;
}
.setting[data-v-86b7d0d5] {
  width: 200px;
  display: flex;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  font-size: 13px;
}
.setting.shape[data-v-86b7d0d5] {
  width: 280px;
}
.setting .shapes[data-v-86b7d0d5] {
  display: flex;
  align-items: center;
}
.setting .shapes .icon[data-v-86b7d0d5] {
  font-size: 20px;
  cursor: pointer;
}
.setting .shapes .icon + .icon[data-v-86b7d0d5] {
  margin-left: 6px;
}
.setting .shapes .icon.active[data-v-86b7d0d5] {
  color: #217346;
}
.setting .label[data-v-86b7d0d5] {
  width: 70px;
}
.setting .size-slider[data-v-86b7d0d5] {
  flex: 1;
}.countdown-timer[data-v-6a49221e] {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.header[data-v-6a49221e] {
  height: 16px;
  font-size: 13px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}
.header .text-btn[data-v-6a49221e] {
  margin-right: 8px;
  cursor: pointer;
}
.header .text-btn[data-v-6a49221e]:hover, .header .text-btn.active[data-v-6a49221e] {
  color: #217346;
}
.content[data-v-6a49221e] {
  display: flex;
  justify-content: space-between;
  padding: 0 5px;
}
.timer[data-v-6a49221e] {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: rgba(33, 115, 70, 0.05);
  overflow: hidden;
}
.timer input[data-v-6a49221e] {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background-color: transparent;
  text-align: center;
  font-size: 22px;
}
.colon[data-v-6a49221e] {
  height: 54px;
  line-height: 54px;
  font-size: 22px;
}
.icon-btn[data-v-6a49221e] {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.pause[data-v-6a49221e], .play[data-v-6a49221e] {
  font-size: 17px;
}
.reset[data-v-6a49221e] {
  font-size: 12px;
}
.close-btn[data-v-6a49221e] {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px;
  line-height: 1;
  cursor: pointer;
}
.close-btn[data-v-6a49221e]:hover {
  color: #217346;
}.bottom-thumbnails[data-v-b6438f97] {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: -120px;
  z-index: 4;
  transition: bottom 0.2s;
}
.bottom-thumbnails[data-v-b6438f97]::after {
  content: "";
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  top: -3px;
}
.bottom-thumbnails[data-v-b6438f97]:hover {
  bottom: 0;
  z-index: 20;
}
.thumbnails[data-v-b6438f97] {
  height: 120px;
  padding: 10px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  background-color: rgba(0, 0, 0, 0.75);
  position: relative;
}
.thumbnail[data-v-b6438f97] {
  display: inline-block;
  outline: 2px solid #aaa;
}
.thumbnail + .thumbnail[data-v-b6438f97] {
  margin-left: 10px;
}
.thumbnail[data-v-b6438f97]:hover {
  outline-color: #217346;
}
.thumbnail.active[data-v-b6438f97] {
  outline-width: 3px;
  outline-color: #217346;
}
[data-v-b6438f97]::-webkit-scrollbar {
  width: 0;
  height: 0;
}.base-view[data-v-d3cddeba] {
  width: 100%;
  height: 100%;
}
.base-view.laser-pen[data-v-d3cddeba] {
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAABHNCSVQICAgIfAhkiAAACCJJREFUWIXtmLuO3MYShv/qZl9IzqwXo2BkSAtsIK+z8wwOBcOJ9C56Cr2LlThQcgBnfofVBnswXlgTaLHaIdk3dtcJOKOzd8n2MeDABRDDgKz/m+pudv0N/BN/Luj/kYSZJQBxJR8DKESU/2zuPwTIzAKnpxqHhxUuLir0vYSUAkS0ewA5F7Rtxv7+iNPTEYeHkYjKXwrIzHK9XtultRohaKSkkFIVhqGCEAIxTvm0ZpRSTNOMUGqEUgnGxLX3cblc+t9T2S8GXK1W9dP53OLiwoLZhMtLQ4CiGBVKkchZIOcpn5QMKQuEyKx1YiCZvb0AooD9ff/rZuMPDg7cl+hWn3uAmQWABut1g/PzOnZdTd5bMY6aQtAIQQGQGEd5bYirKgPIZExiY2IKIbK1XpeinzaN2s7b4XPD/iAgM0ucn7fYbNrQ963Juaauq8k5i3E01PcG46iQs0TO1wGlzJAyo6oS2jagqgLGUQNQwTllvJeYzwUz9w8N+b2AzCxwft6i72fBuZkYhnbcbBqKsSbvazhnEIJBzqrEqGQpAlO1AaKShShC6wQpE4UQUNcBKenReyXm8yoIIYwQtNXq7qvkQxVssNm0wbmZuLiYUQgtnGtps2ngfQ3vLaVkEKOmGKcqMtMWkEnKTFonaB3Z+4AQPFmreD6vSAghxpECAFMKY7EoALovBlytVjXW6yb0fSuGoaUQWrq8nKHvW/R9S943xbmavJ+qmNIO8FMFIWXert7A1gYxjprHsSLmaTHt7UF0HYdSilmv82q1ynctnFuAzCzx8aPF+Xltcq7HzaaBcy36vsUwzKjrZhiGRgxDA+8tUjIUgkbOEqVMgEIUkjLDmAjvgwjBI6WKxlHybp5KyVRKMcaMGIb0dLFIzBxvzsdbgOv12i69t7HrpgURY02bTYO+b6nrZui6qZLONdz3jTg5ORDHx0f48OExQpgBAIzp8OjRez46Oi7Pnq1ot5BKETQVgYmosJRj6rrEQNJCxLX3EUB/LyAzC3z8qOGcIe8tOWdpmm81ed9gGJpdJdF1rXz79jucnX1za454P8fZ2ZzOzr6Rx8fvyvPnP38afiEKVVXmqhrJ+wSlIqoqYj73S2s1M7urC0ZcS3x6qhGCDpeXBuOoMY4Gzhl4b4tzNYahgXMNuq4Vb978cCfczTg7+0a8efMDuq6Fcw2GoSnO1fDewjmDcTQYx0kzBI3TU3319euAh4cVUlIEKApBU98bhGAoJSO8N/Dect834u3b73B+/vVn4XZxfv61ePv2O+77Bt5b4b2hlKbcfW8oBE2AQkoKh4fXRvU64MVFhZQqilEhBLX9CCvEqLer1YiTk4MvqtxdlTw5OcAWDDFq5DxphDBtmSlNzcddgMws0fcyDEOFUiQAiZxliVGVGFVJSXEImo6Pj3433Dbo+PiIQ9AlJbXLi5wnrVIm7b6X223wOiAAASkFhBDIWWAcJXKWshQhcpYiZ0k5S3z48PhO9ZcvgV9+ma6XL+8m/PDhMW1ziW1u5Cy3WpO2lOIq11VAAhEhRkLO0z0RgVmAefotRXz6lNyMV6+AxWK6Xr26GzCEGXZb4i7nTifnSXv6Tn7qssTdmf4+cRWQwczQmiHldM/MICogmn6FKDDmzj0Tr18D5+fT9fr13WrGdBCiXMu505Fy0mZmTJYBwPUPdUHOBaUUSFlQVRlS5rzbtqTMJGXGo0fvcXY2vyX+44/T9VA8evSepcy8zcdCFDG1ZBlSTto5FwC3P9RElNG22TTNCCEygAwps9A6Ca2TUCqRMZGPjo4fprg/+OjomIyJQqm0ywspJy0hJu22zVf34+tzcH9/hFIja51gTEJVJUiZoHWEMQFKhfLs2QpPnrz73XRPnrwrz56toFSAMQFaR0g5aRiTWOsEpUbs749XX7u51Y1QKjGQ2JjIbRtgTGClQrE2wFpPbTuU589/xmLx2xfDLRa/lefPf6a2HWCtL9YG3oJy2wY2JjKQoFTC6ekDgIeHEcZEs7cXUFURVTV1wtZ6UdcOTTOgrgfMZn158eKnL6rkkyfvyosXP2E261HXA5pmEHXtYK1HXU9WoKomTWMiDg/j1devbStEVN6/fx+XRIGt9RhHjZQ0Wat4HCsax//1fEQlf//9v8XJyTF9rt1q2+mPtW2PphnY2gHWOrbWcV17ttaDKKy9j4/398u9gACwXC49Pn7UuhQNQI3eT206s2DadptCFEiZqaoS/+tfvnz77X/oRsPKUmYyJpJSAdZ6NM2Aphl4Pu/QND3P5wO0dmo2c5jNHPb3/fKrr/xNnluARJRXq5V/2jQqOKfE1kPsPC8zM1VVLkqNwpiAEAxbq+hGy89SZtq2/MXaIOrasbUDmqZH2/Zo257bdghSOtM07tfNxh/s799yd3d6koODA8fM0ngvw9bgYG9vatOJClfVSFUVYe3UldxhmiBlxtY0kVLTlLHW8Xw+oG17NqYvs1lv6rrHcjkcEN1p5B9ydQPmc2GEoABAdB1TKYWlnDph5wJvbSdPpwvXbCcLUXhrO2FMQF0HttZBa8dtO5TZrDdt26FtewDDfRD3AhJRYeYemKxh2Bqc1HVTm17Xn4y7yFnyDeMurhh33hp3rmuvZjMXpHSmrqehXiz6h04XHjxZIKLMzB0Wi2LW64xhSAwkVFXEOGpo/dmjD2yPPlBVka31mM2caRqH5XLAnz362FUSQLdarfLTxSJpISLmcx8uLw217R8/PLpnzt3S/5KHdvG3Pn67Afr3PMB8APgvOwL+J/5s/BeEBm1u1Gu4+QAAAABJRU5ErkJggg==) 20 20, default !important;
}
.tools-left[data-v-d3cddeba] {
  position: fixed;
  bottom: 8px;
  left: 8px;
  font-size: 25px;
  color: #666;
  z-index: 10;
}
.tools-left .tool-btn[data-v-d3cddeba] {
  opacity: 0.1;
  cursor: pointer;
  transition: opacity 0.2s;
}
.tools-left .tool-btn[data-v-d3cddeba]:hover {
  opacity: 1;
}
.tools-left .tool-btn + .tool-btn[data-v-d3cddeba] {
  margin-left: 8px;
}
.tools-right[data-v-d3cddeba] {
  height: 66px;
  position: fixed;
  bottom: -66px;
  right: 0;
  z-index: 5;
  padding: 8px;
  transition: bottom 0.2s;
}
.tools-right.visible[data-v-d3cddeba] {
  bottom: 0;
}
.tools-right[data-v-d3cddeba]::after {
  content: "";
  width: 100%;
  height: 66px;
  position: absolute;
  left: 0;
  top: -66px;
}
.tools-right .content[data-v-d3cddeba] {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  font-size: 25px;
  background-color: #fff;
  color: #E5E5E5;
  padding: 8px 10px;
  box-shadow: 0 2px 12px 0 rgba(56, 56, 56, 0.2);
  border: 1px solid #e2e6ed;
}
.tools-right .tool-btn[data-v-d3cddeba] {
  cursor: pointer;
}
.tools-right .tool-btn[data-v-d3cddeba]:hover, .tools-right .tool-btn.active[data-v-d3cddeba] {
  color: #217346;
}
.tools-right .tool-btn + .tool-btn[data-v-d3cddeba] {
  margin-left: 15px;
}
.tools-right .page-number[data-v-d3cddeba] {
  font-size: 12px;
  padding: 0 12px;
  cursor: pointer;
}.presenter-view[data-v-5faf17d9] {
  width: 100%;
  height: 100%;
  display: flex;
}
.toolbar[data-v-5faf17d9] {
  width: 70px;
  height: 100%;
  background-color: #fff;
  border-right: solid 1px #eee;
  font-size: 12px;
  margin: 20px 0;
}
.toolbar .tool-btn[data-v-5faf17d9] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.toolbar .tool-btn + .tool-btn[data-v-5faf17d9] {
  margin-top: 22px;
}
.toolbar .tool-btn[data-v-5faf17d9]:hover, .toolbar .tool-btn.active[data-v-5faf17d9] {
  color: #217346;
}
.toolbar .divider[data-v-5faf17d9] {
  width: 70%;
  margin: 24px 15% !important;
}
.toolbar .tool-icon[data-v-5faf17d9] {
  margin-bottom: 8px;
  font-size: 22px;
}
.content[data-v-5faf17d9] {
  width: calc(100% - 430px);
  height: 100%;
  background-color: #1d1d1d;
}
.slide-list-wrap[data-v-5faf17d9] {
  height: calc(100% - 190px);
  margin: 20px;
  overflow: hidden;
  position: relative;
}
.slide-list-wrap.laser-pen[data-v-5faf17d9] {
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAABHNCSVQICAgIfAhkiAAACCJJREFUWIXtmLuO3MYShv/qZl9IzqwXo2BkSAtsIK+z8wwOBcOJ9C56Cr2LlThQcgBnfofVBnswXlgTaLHaIdk3dtcJOKOzd8n2MeDABRDDgKz/m+pudv0N/BN/Luj/kYSZJQBxJR8DKESU/2zuPwTIzAKnpxqHhxUuLir0vYSUAkS0ewA5F7Rtxv7+iNPTEYeHkYjKXwrIzHK9XtultRohaKSkkFIVhqGCEAIxTvm0ZpRSTNOMUGqEUgnGxLX3cblc+t9T2S8GXK1W9dP53OLiwoLZhMtLQ4CiGBVKkchZIOcpn5QMKQuEyKx1YiCZvb0AooD9ff/rZuMPDg7cl+hWn3uAmQWABut1g/PzOnZdTd5bMY6aQtAIQQGQGEd5bYirKgPIZExiY2IKIbK1XpeinzaN2s7b4XPD/iAgM0ucn7fYbNrQ963Juaauq8k5i3E01PcG46iQs0TO1wGlzJAyo6oS2jagqgLGUQNQwTllvJeYzwUz9w8N+b2AzCxwft6i72fBuZkYhnbcbBqKsSbvazhnEIJBzqrEqGQpAlO1AaKShShC6wQpE4UQUNcBKenReyXm8yoIIYwQtNXq7qvkQxVssNm0wbmZuLiYUQgtnGtps2ngfQ3vLaVkEKOmGKcqMtMWkEnKTFonaB3Z+4AQPFmreD6vSAghxpECAFMKY7EoALovBlytVjXW6yb0fSuGoaUQWrq8nKHvW/R9S943xbmavJ+qmNIO8FMFIWXert7A1gYxjprHsSLmaTHt7UF0HYdSilmv82q1ynctnFuAzCzx8aPF+Xltcq7HzaaBcy36vsUwzKjrZhiGRgxDA+8tUjIUgkbOEqVMgEIUkjLDmAjvgwjBI6WKxlHybp5KyVRKMcaMGIb0dLFIzBxvzsdbgOv12i69t7HrpgURY02bTYO+b6nrZui6qZLONdz3jTg5ORDHx0f48OExQpgBAIzp8OjRez46Oi7Pnq1ot5BKETQVgYmosJRj6rrEQNJCxLX3EUB/LyAzC3z8qOGcIe8tOWdpmm81ed9gGJpdJdF1rXz79jucnX1za454P8fZ2ZzOzr6Rx8fvyvPnP38afiEKVVXmqhrJ+wSlIqoqYj73S2s1M7urC0ZcS3x6qhGCDpeXBuOoMY4Gzhl4b4tzNYahgXMNuq4Vb978cCfczTg7+0a8efMDuq6Fcw2GoSnO1fDewjmDcTQYx0kzBI3TU3319euAh4cVUlIEKApBU98bhGAoJSO8N/Dect834u3b73B+/vVn4XZxfv61ePv2O+77Bt5b4b2hlKbcfW8oBE2AQkoKh4fXRvU64MVFhZQqilEhBLX9CCvEqLer1YiTk4MvqtxdlTw5OcAWDDFq5DxphDBtmSlNzcddgMws0fcyDEOFUiQAiZxliVGVGFVJSXEImo6Pj3433Dbo+PiIQ9AlJbXLi5wnrVIm7b6X223wOiAAASkFhBDIWWAcJXKWshQhcpYiZ0k5S3z48PhO9ZcvgV9+ma6XL+8m/PDhMW1ziW1u5Cy3WpO2lOIq11VAAhEhRkLO0z0RgVmAefotRXz6lNyMV6+AxWK6Xr26GzCEGXZb4i7nTifnSXv6Tn7qssTdmf4+cRWQwczQmiHldM/MICogmn6FKDDmzj0Tr18D5+fT9fr13WrGdBCiXMu505Fy0mZmTJYBwPUPdUHOBaUUSFlQVRlS5rzbtqTMJGXGo0fvcXY2vyX+44/T9VA8evSepcy8zcdCFDG1ZBlSTto5FwC3P9RElNG22TTNCCEygAwps9A6Ca2TUCqRMZGPjo4fprg/+OjomIyJQqm0ywspJy0hJu22zVf34+tzcH9/hFIja51gTEJVJUiZoHWEMQFKhfLs2QpPnrz73XRPnrwrz56toFSAMQFaR0g5aRiTWOsEpUbs749XX7u51Y1QKjGQ2JjIbRtgTGClQrE2wFpPbTuU589/xmLx2xfDLRa/lefPf6a2HWCtL9YG3oJy2wY2JjKQoFTC6ekDgIeHEcZEs7cXUFURVTV1wtZ6UdcOTTOgrgfMZn158eKnL6rkkyfvyosXP2E261HXA5pmEHXtYK1HXU9WoKomTWMiDg/j1devbStEVN6/fx+XRIGt9RhHjZQ0Wat4HCsax//1fEQlf//9v8XJyTF9rt1q2+mPtW2PphnY2gHWOrbWcV17ttaDKKy9j4/398u9gACwXC49Pn7UuhQNQI3eT206s2DadptCFEiZqaoS/+tfvnz77X/oRsPKUmYyJpJSAdZ6NM2Aphl4Pu/QND3P5wO0dmo2c5jNHPb3/fKrr/xNnluARJRXq5V/2jQqOKfE1kPsPC8zM1VVLkqNwpiAEAxbq+hGy89SZtq2/MXaIOrasbUDmqZH2/Zo257bdghSOtM07tfNxh/s799yd3d6koODA8fM0ngvw9bgYG9vatOJClfVSFUVYe3UldxhmiBlxtY0kVLTlLHW8Xw+oG17NqYvs1lv6rrHcjkcEN1p5B9ydQPmc2GEoABAdB1TKYWlnDph5wJvbSdPpwvXbCcLUXhrO2FMQF0HttZBa8dtO5TZrDdt26FtewDDfRD3AhJRYeYemKxh2Bqc1HVTm17Xn4y7yFnyDeMurhh33hp3rmuvZjMXpHSmrqehXiz6h04XHjxZIKLMzB0Wi2LW64xhSAwkVFXEOGpo/dmjD2yPPlBVka31mM2caRqH5XLAnz362FUSQLdarfLTxSJpISLmcx8uLw217R8/PLpnzt3S/5KHdvG3Pn67Afr3PMB8APgvOwL+J/5s/BeEBm1u1Gu4+QAAAABJRU5ErkJggg==) 20 20, default !important;
}
.thumbnails[data-v-5faf17d9] {
  height: 150px;
  padding: 15px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  border-top: solid 1px #3a3a3a;
  position: relative;
}
.thumbnail[data-v-5faf17d9] {
  display: inline-block;
  outline: 2px solid #aaa;
}
.thumbnail + .thumbnail[data-v-5faf17d9] {
  margin-left: 10px;
}
.thumbnail[data-v-5faf17d9]:hover {
  outline-color: #217346;
}
.thumbnail.active[data-v-5faf17d9] {
  outline-width: 3px;
  outline-color: #217346;
}
.remark[data-v-5faf17d9] {
  width: 360px;
  height: 100%;
  position: relative;
  background-color: #2a2a2a;
  border-left: solid 1px #3a3a3a;
  color: #fff;
}
.remark .header[data-v-5faf17d9] {
  height: 60px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  border-bottom: 1px solid #3a3a3a;
}
.remark .remark-content[data-v-5faf17d9] {
  height: calc(100% - 60px);
  padding: 20px;
  line-height: 1.5;
  overflow: auto;
  overflow: overlay;
}
.remark .remark-content.empty[data-v-5faf17d9] {
  color: #999;
  font-style: italic;
}
.remark .remark-scale[data-v-5faf17d9] {
  position: absolute;
  right: 5px;
  bottom: 5px;
  font-size: 22px;
  display: flex;
}
.remark .scale-btn[data-v-5faf17d9] {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
}
.remark .scale-btn.disable[data-v-5faf17d9] {
  color: #666;
  cursor: no-drop;
}
.remark .scale-btn[data-v-5faf17d9]:not(.disable):hover {
  background-color: #333;
}
[data-v-5faf17d9]::-webkit-scrollbar {
  width: 0;
  height: 0;
}.pptist-screen-bridge[data-v-b978b797] {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background: #000;
}/* ============================================================================
 * 我要收集 - 主视图样式
 * 深色主题，与系统整体风格一致
 * ============================================================================ */

/* ── 根容器 ──────────────────────────────────────────────── */
.collect-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-primary, #111827);
  color: var(--text-secondary, #ccc);
}

/* ── HOME 阶段 ──────────────────────────────────────────── */
.collect-home {
  flex: 1;
  overflow-y: auto;
  padding: 12px 24px;
}

.collect-home.is-file-selected {
  padding-top: 0;
}

.collect-hero {
  text-align: center;
  padding: 8px 0 0;
}

.collect-hero-title {
  font-size: 27px;
  font-weight: 700;
  color: var(--text-primary, #e5e5e5);
  margin-bottom: 12px;
}

.collect-hero-desc {
  font-size: 16px;
  color: var(--text-primary, #e5e5e5);
  margin-bottom: 0;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  white-space: nowrap;
}

.collect-file-note {
  margin: 12px 0 0;
  font-size: 16px;
  color: var(--accent-primary, #4ECDC4);
}

.collect-hint {
  font-size: 16px;
  color: var(--text-tertiary, #888);
  margin-top: 12px;
}

.collect-error {
  color: #ef4444;
  font-size: 13px;
  margin-top: 8px;
}

.collect-notice {
  color: #86efac;
  font-size: 13px;
  margin-bottom: 10px;
}

/* ── 按钮组 ──────────────────────────────────────────────── */
.collect-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  background: linear-gradient(135deg, #217346, #2A9058);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.collect-btn-primary:hover:not(:disabled) { opacity: 0.9; }
.collect-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

.collect-selected-actions {
  text-align: center;
  margin: 24px 0;
}

.collect-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: transparent;
  color: var(--text-secondary, #ccc);
  border: 1px solid var(--border-secondary, #444);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}

.collect-btn-ghost:hover { background: rgba(255,255,255,0.06); border-color: var(--accent-primary); }

.collect-btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: rgba(239,68,68,0.12);
  color: #f87171;
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.collect-btn-danger:hover { background: rgba(239,68,68,0.2); }

/* ── BUILDING 阶段 ──────────────────────────────────────── */
.collect-building {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.collect-building-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-primary, #333);
  flex-shrink: 0;
}

.collect-building-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
}

.collect-building-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  overflow: hidden;
}

.collect-builder-col {
  overflow-y: auto;
  padding: 20px;
  border-right: 1px solid var(--border-primary, #333);
}

.collect-preview-col {
  overflow-y: auto;
  padding: 20px;
  background: rgba(0,0,0,0.15);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.collect-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--text-tertiary, #888);
}

/* ── PUBLISHED 阶段 ─────────────────────────────────────── */
.collect-published {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.collect-published-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-primary, #333);
  flex-shrink: 0;
}

.collect-published-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
}

.collect-published-actions {
  display: flex;
  gap: 8px;
}

.collect-published-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* ── FormBuilder 样式 ────────────────────────────────────── */
.form-builder {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fb-section { display: flex; flex-direction: column; gap: 8px; }

.fb-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #aaa);
}

.fb-input, .fb-textarea, .fb-select {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-secondary, #1e1e1e);
  border: 1px solid var(--border-primary, #333);
  border-radius: 6px;
  color: var(--text-primary, #e0e0e0);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}

.fb-input:focus, .fb-textarea:focus, .fb-select:focus {
  border-color: var(--accent-primary, #217346);
}

.fb-input-sm { font-size: 13px; padding: 6px 10px; }

.fb-fields { display: flex; flex-direction: column; gap: 8px; }

.fb-field-card {
  background: var(--bg-tertiary, #252525);
  border: 1px solid var(--border-primary, #333);
  border-radius: 8px;
  overflow: hidden;
}

.fb-field-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-primary, #333);
}

.fb-grip { color: var(--text-tertiary, #666); flex-shrink: 0; }

.fb-field-label-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary, #e0e0e0);
  font-size: 14px;
  font-weight: 600;
  outline: none;
}

.fb-field-actions {
  display: flex;
  gap: 2px;
}

.fb-field-actions button {
  padding: 4px;
  background: transparent;
  border: none;
  color: var(--text-tertiary, #888);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.15s;
}

.fb-field-actions button:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }
.fb-field-actions button:disabled { opacity: 0.3; cursor: default; }

.fb-field-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fb-field-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fb-field-row .fb-select { max-width: 160px; }

.fb-checkbox-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  white-space: nowrap;
}

.fb-checkbox-label input { accent-color: var(--accent-primary, #217346); }

.fb-add-btn {
  align-self: flex-start;
  margin-top: 4px;
}

/* ── FormPreview 样式 ────────────────────────────────────── */
.form-preview { width: 100%; max-width: 400px; }

.fp-device-frame {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  overflow: hidden;
}

.fp-header {
  background: linear-gradient(135deg, #217346, #2A9058);
  padding: 20px;
  color: #fff;
}

.fp-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.fp-desc { font-size: 14px; opacity: 0.85; }

.fp-body { padding: 20px; }

.fp-field { margin-bottom: 16px; }

.fp-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}

.fp-required { color: #ef4444; margin-left: 2px; }

.fp-input, .fp-textarea, .fp-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  color: #111827;
  background: #fff;
  font-family: inherit;
}

.fp-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.fp-option {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #374151;
}

.fp-empty {
  text-align: center;
  color: #9ca3af;
  padding: 32px 0;
  font-size: 13px;
}

.fp-footer {
  padding: 0 20px 20px;
}

.fp-submit-btn {
  width: 100%;
  padding: 10px;
  background: linear-gradient(135deg, #217346, #2A9058);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: not-allowed;
  opacity: 0.6;
}

/* ── SharePanel 样式 ─────────────────────────────────────── */
.share-panel {
  background: var(--bg-secondary, #1e1e1e);
  border: 1px solid var(--border-primary, #333);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 20px;
}

.share-panel-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
  margin-bottom: 10px;
}

.share-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary, #aaa);
  margin-bottom: 12px;
}

.share-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.share-status-dot.active { background: #22c55e; }
.share-status-dot.closed { background: #ef4444; }

.share-status-count { margin-left: auto; }

.share-link-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.share-link-input {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg-primary, #111);
  border: 1px solid var(--border-primary, #333);
  border-radius: 6px;
  color: var(--text-primary, #e0e0e0);
  font-size: 13px;
  outline: none;
}

.share-link-copy,
.share-link-open {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--bg-tertiary, #252525);
  border: 1px solid var(--border-primary, #333);
  border-radius: 6px;
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}

.share-link-copy:hover,
.share-link-open:hover {
  border-color: var(--accent-primary, #217346);
  color: var(--text-primary);
}

.share-hint {
  font-size: 14px;
  color: var(--text-tertiary, #666);
  margin-top: 10px;
}

/* ── SubmissionList 样式 ──────────────────────────────────── */
.submission-list {
  background: var(--bg-secondary, #1e1e1e);
  border: 1px solid var(--border-primary, #333);
  border-radius: 10px;
  overflow: hidden;
}

.sl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-primary, #333);
}

.sl-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
  display: flex;
  align-items: center;
  gap: 6px;
}

.sl-count { font-weight: 400; color: var(--text-tertiary, #888); font-size: 13px; }

.sl-actions { display: flex; gap: 8px; }

.sl-btn {
  font-size: 12px !important;
  padding: 5px 10px !important;
}

.sl-empty {
  padding: 40px;
  text-align: center;
  color: var(--text-tertiary, #888);
  font-size: 13px;
}

.sl-table-wrap { overflow-x: auto; }

.sl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.sl-table th,
.sl-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-primary, #333);
  white-space: nowrap;
}

.sl-table th {
  font-weight: 600;
  color: var(--text-secondary, #aaa);
  font-size: 12px;
  text-transform: none;
}

.sl-table td { color: var(--text-primary, #e0e0e0); }

.sl-sync-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
}

.sl-sync-badge.synced { background: rgba(34,197,94,0.15); color: #22c55e; }
.sl-sync-badge.pending { background: rgba(234,179,8,0.15); color: #eab308; }

.sl-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px;
  border-top: 1px solid var(--border-primary, #333);
}

.sl-page-btn {
  padding: 4px 12px;
  background: var(--bg-tertiary, #252525);
  border: 1px solid var(--border-primary, #333);
  border-radius: 4px;
  color: var(--text-secondary, #aaa);
  font-size: 12px;
  cursor: pointer;
}

.sl-page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.sl-page-info { font-size: 12px; color: var(--text-tertiary, #888); }

/* ── FormHistoryPanel 样式 ────────────────────────────────── */
.form-history {
  margin-top: 32px;
  background: var(--bg-secondary, #252525);
  border: 1px solid var(--border-primary, #333);
  border-radius: 12px;
  padding: 16px;
}

.fh-header {
  margin-bottom: 12px;
}

.fh-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
  display: flex;
  align-items: center;
  gap: 4px;
}

.fh-refresh-link {
  margin-left: 8px;
  border: none;
  background: transparent;
  color: #93c5fd;
  font-size: 15px;
  cursor: pointer;
  padding: 0;
}

.fh-refresh-link:hover:not(:disabled) { text-decoration: underline; }
.fh-refresh-link:disabled { opacity: 0.55; cursor: not-allowed; }

.fh-loading {
  display: flex;
  justify-content: center;
  padding: 20px;
  color: var(--text-tertiary, #888);
}

/* 历史表单表格样式：与“我要报表-历史报表清单”保持一致 */
.form-history .report-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.form-history .report-history-header h3 {
  margin: 0;
  font-size: 17px;
  color: var(--text-primary, #E5E5E5);
}

.form-history .report-history-table-wrap {
  overflow: auto;
}

.form-history .report-history-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.form-history .report-history-table th,
.form-history .report-history-table td {
  border-bottom: 1px solid var(--border-primary, #333);
  padding: 10px 8px;
  text-align: left;
  font-size: 15px;
}

.form-history .report-history-table th {
  color: var(--text-tertiary, #B3B3B3);
  font-weight: 500;
}

.form-history .report-history-table td {
  color: var(--text-secondary, #E5E5E5);
}

.form-history .report-history-empty {
  text-align: center !important;
  color: var(--text-tertiary, #B3B3B3) !important;
  padding: 20px 0 !important;
}

.form-history .report-history-open-link {
  border: none;
  background: transparent;
  color: #93c5fd;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-size: 15px;
}

.form-history .report-history-open-link:hover:not(:disabled) {
  text-decoration: underline;
}

.form-history .report-history-open-link:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-history .report-history-row-actions {
  display: flex;
  gap: 8px;
}

.form-history .ui-history-action-btn-edit {
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #7dd3fc;
}

.form-history .ui-history-action-btn-edit:hover:not(:disabled) {
  background: rgba(56, 189, 248, 0.2);
  border-color: rgba(56, 189, 248, 0.5);
}

.form-history .report-history-pagination {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.form-history .report-history-page-btn {
  border: 1px solid #334155;
  background: rgba(15, 23, 42, 0.45);
  color: #cbd5e1;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
}

.form-history .report-history-page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-history .report-history-page-info {
  font-size: 13px;
  color: #94a3b8;
}

.fh-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.fh-status.active { background: rgba(34,197,94,0.15); color: #22c55e; }
.fh-status.closed { background: rgba(239,68,68,0.15); color: #f87171; }
.fh-status.draft { background: rgba(234,179,8,0.15); color: #eab308; }

/* ── 修改表单弹窗 ───────────────────────────────────────── */
.collect-edit-modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.collect-edit-modal {
  width: min(560px, 100%);
  background: var(--bg-secondary, #1e1e1e);
  border: 1px solid var(--border-primary, #333);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.collect-edit-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-primary, #333);
}

.collect-edit-modal-header h3 {
  margin: 0;
  font-size: 16px;
  color: var(--text-primary, #E5E5E5);
}

.collect-edit-modal-close {
  border: none;
  background: transparent;
  color: var(--text-tertiary, #aaa);
  cursor: pointer;
}

.collect-edit-modal-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.collect-edit-modal-footer {
  padding: 12px 14px;
  border-top: 1px solid var(--border-primary, #333);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ── 通用动画 ────────────────────────────────────────────── */
.spin { animation: collect-spin 1s linear infinite; }
@keyframes collect-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── 响应式 ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .collect-building-body {
    grid-template-columns: 1fr;
  }
  .collect-preview-col {
    border-top: 1px solid var(--border-primary, #333);
    border-right: none;
    max-height: 400px;
  }
}
/* ============================================================================
 * 我要连接 - 主视图样式
 * 深色主题，参照 collect.css 设计规范
 * ============================================================================ */

/* ── 根容器 ──────────────────────────────────────────────── */
.connect-view {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-primary, #111827);
  color: var(--text-secondary, #ccc);
}

/* ── HOME 阶段 ──────────────────────────────────────────── */
.connect-home {
  flex: 1;
  overflow-y: auto;
  padding: 12px 32px 16px;
}

.connect-home.is-file-selected {
  padding-top: 0;
}

.connect-hero {
  text-align: center;
  padding: 8px 0 0;
}

.connect-hero-title {
  font-size: 27px;
  font-weight: 700;
  color: var(--text-primary, #e5e5e5);
  margin-bottom: 12px;
}

.connect-hero-desc {
  font-size: 16px;
  color: var(--text-primary, #e5e5e5);
  margin-bottom: 0;
  max-width: none;
  line-height: 1.6;
  white-space: nowrap;
}

.connect-file-note {
  margin: 12px 0 0;
  font-size: 16px;
  color: var(--accent-primary, #4ECDC4);
}

.connect-selected-actions {
  padding: 20px 0;
}

.connect-section-title {
  font-size: 19px;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  text-align: center;
  margin: 0 0 20px;
}

.connect-error {
  color: #ef4444;
  font-size: 13px;
  margin-top: 8px;
}

.connect-sync-msg {
  padding: 0 20px;
  font-size: 13px;
  color: #86efac;
}

/* ── 连接器类型卡片网格 ──────────────────────────────────── */
.connect-catalog {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  max-width: none;
  margin: 0 auto;
}

.connect-catalog-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 130px;
  padding: 24px 16px;
  background: var(--bg-secondary, #1e1e1e);
  border: 2px solid var(--border-primary, #333);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  text-align: center;
  color: inherit;
}

.connect-catalog-card:hover {
  border-color: var(--accent-primary, #217346);
  background: rgba(33, 115, 70, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}

.connect-catalog-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.connect-catalog-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.connect-catalog-name {
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  color: var(--text-primary, #e5e5e5);
}

.connect-catalog-desc {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-secondary, #b3b3b3);
  text-align: center;
}

/* ── CONFIGURING 阶段 ───────────────────────────────────── */
.connect-configuring {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.connect-configuring-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  overflow: hidden;
}

.connect-form-col {
  overflow-y: auto;
  padding: 20px;
  border-right: 1px solid var(--border-primary, #333);
}

.connect-mapping-col {
  overflow-y: auto;
  padding: 20px;
  background: rgba(0, 0, 0, 0.1);
}

/* ── 配置表单 ────────────────────────────────────────────── */
.connect-config-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.connect-config-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.connect-config-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary, #aaa);
}

.connect-required {
  color: #ef4444;
  margin-left: 2px;
}

.connect-config-input,
.connect-config-select,
.connect-config-textarea {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-secondary, #1e1e1e);
  border: 1px solid var(--border-primary, #333);
  border-radius: 6px;
  color: var(--text-primary, #e0e0e0);
  font-size: 16px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.connect-config-input:focus,
.connect-config-select:focus,
.connect-config-textarea:focus {
  border-color: var(--accent-primary, #217346);
}

.connect-config-textarea {
  resize: vertical;
  min-height: 60px;
}

.connect-config-hint {
  font-size: 14px;
  color: var(--text-tertiary, #666);
}

.connect-config-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.connect-webhook-hint {
  padding: 12px;
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.2);
  border-radius: 8px;
  font-size: 15px;
  color: #c4b5fd;
  line-height: 1.5;
}

.connect-db-guide {
  padding: 10px 12px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 8px;
  font-size: 14px;
  color: #dbeafe;
  line-height: 1.5;
}

.connect-db-guide-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: #f8fafc;
}

.connect-db-guide-list {
  margin: 0;
  padding-left: 16px;
}

.connect-db-guide-list li {
  margin: 3px 0;
}

.connect-db-guide-note {
  color: #bfdbfe;
}

.connect-db-guide code {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 4px;
  padding: 0 4px;
  color: #e2e8f0;
}

/* ── 测试结果 ────────────────────────────────────────────── */
.connect-test-result {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 15px;
}

.connect-config-actions .collect-btn-ghost,
.connect-config-actions .collect-btn-primary {
  font-size: 16px;
}

.connect-test-result span {
  white-space: pre-wrap;
}

.connect-test-result.success {
  background: rgba(34, 197, 94, 0.1);
  color: #86efac;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.connect-test-result.error {
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ── 字段映射面板 ────────────────────────────────────────── */
.connect-mapping-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.connect-mapping-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.connect-mapping-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
}

.connect-mapping-hint {
  font-size: 14px;
  color: var(--text-tertiary, #888);
}

.connect-mapping-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.connect-mapping-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.connect-mapping-input {
  flex: 1;
}

.connect-mapping-arrow {
  flex-shrink: 0;
  color: var(--text-tertiary, #666);
}

.connect-mapping-remove {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border-primary, #333);
  border-radius: 4px;
  color: var(--text-tertiary, #888);
  cursor: pointer;
  transition: all 0.15s;
}

.connect-mapping-remove:hover {
  border-color: #ef4444;
  color: #f87171;
}

.connect-mapping-add {
  align-self: flex-start;
}

/* ── ACTIVE / DETAIL 阶段 ───────────────────────────────── */
.connect-detail {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.connect-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.connect-detail-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.connect-detail-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary, #e5e5e5);
  margin: 0;
}

.connect-detail-status {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

.connect-detail-status.active {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}

.connect-detail-status.paused {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}

.connect-detail-status.error {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.connect-detail-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.connect-detail-info {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  padding: 12px;
  background: var(--bg-secondary, #1e1e1e);
  border: 1px solid var(--border-primary, #333);
  border-radius: 8px;
}

.connect-detail-info-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}

.connect-detail-info-label {
  font-weight: 600;
  color: var(--text-tertiary, #888);
  font-size: 12px;
}

/* ── Webhook URL ─────────────────────────────────────────── */
.connect-webhook-url-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.connect-webhook-url-row {
  display: flex;
  gap: 6px;
}

.connect-webhook-url-row .connect-config-input {
  flex: 1;
}

/* ── 同步历史 ────────────────────────────────────────────── */
.connect-jobs-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.connect-jobs-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
  margin: 0;
}

.connect-job-error {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  color: #fca5a5;
}

/* ── 历史连接器列表 ──────────────────────────────────────── */
.connect-history {
  margin-top: 32px;
}

/* ── 响应式 ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .connect-home {
    padding: 12px 16px;
  }
  .connect-catalog {
    grid-template-columns: repeat(2, 1fr);
  }
  .connect-configuring-body {
    grid-template-columns: 1fr;
  }
  .connect-mapping-col {
    border-top: 1px solid var(--border-primary, #333);
  }
}

@media (max-width: 640px) {
  .connect-catalog {
    grid-template-columns: 1fr;
  }
}
/* ============================================================================
 * 主题系统 - 深色主题 + 绿色强调色
 * 基于 design-a-aitable-style.html 设计稿
 * ============================================================================ */

:root {
  /* ===== 背景色系 ===== */
  --bg-primary: #1E1E1E;
  --bg-secondary: #252525;
  --bg-tertiary: #2A2A2A;
  --bg-elevated: #2E2E2E;

  /* ===== 文字色系 ===== */
  --text-primary: #FFFFFF;
  --text-secondary: #E5E5E5;
  --text-tertiary: #B3B3B3;
  --text-disabled: #666666;

  /* ===== 强调色（绿色系） ===== */
  --accent-primary: #217346;
  --accent-hover: #2A9058;
  --accent-active: #34D399;
  --accent-bg: rgba(33, 115, 70, 0.2);

  /* ===== 边框/分隔线 ===== */
  --border-primary: #333333;
  --border-secondary: #3A3A3A;

  /* ===== 交互状态 ===== */
  --hover-bg: #2A2A2A;
  --selected-bg: rgba(33, 115, 70, 0.3);

  /* ===== 侧边栏尺寸 ===== */
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 56px;

  /* ===== 过渡动画 ===== */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
}

/* ===== 亮色主题（用于 Auth 页面切换） ===== */
[data-theme="light"] {
  --auth-bg-primary: #F8FAFC;
  --auth-bg-card: #FFFFFF;
  --auth-text-primary: #0F172A;
  --auth-text-secondary: #475569;
  --auth-text-muted: #94A3B8;
  --auth-border: #E2E8F0;
  --auth-input-bg: #FFFFFF;
  --auth-input-border: #E2E8F0;
  --auth-input-focus: #217346;
  --auth-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* 认证页深色主题（默认） */
:root,
[data-theme="dark"] {
  --auth-bg-primary: #0F0F0F;
  --auth-bg-card: #1A1A1A;
  --auth-text-primary: #F8FAFC;
  --auth-text-secondary: #CBD5E1;
  --auth-text-muted: #64748B;
  --auth-border: #334155;
  --auth-input-bg: #252525;
  --auth-input-border: #334155;
  --auth-input-focus: #34D399;
  --auth-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
/* ============================================================================
 * Airtable 风格布局系统
 * 整体结构：左侧导航栏 + 右侧主内容区
 * ============================================================================ */

/* ===== 根布局 ===== */
.app-layout {
  display: flex;
  height: 100vh;
  background: var(--bg-primary);
  color: var(--text-secondary);
  overflow: hidden;
}

/* ============================================================================
 * 左侧导航栏 (Sidebar)
 * ============================================================================ */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-primary);
  display: flex;
  flex-direction: column;
  height: 100vh;
  transition: width var(--transition-slow), min-width var(--transition-slow);
  overflow: hidden;
  z-index: 20;
  position: relative;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
  min-width: var(--sidebar-collapsed-width);
}

.sidebar.resizing {
  transition: none;
}

.sidebar-resizer {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  background: transparent;
  z-index: 40;
}

.sidebar-resizer:hover,
.sidebar.resizing .sidebar-resizer {
  background: rgba(33, 115, 70, 0.28);
}

body.sidebar-resizing,
body.sidebar-resizing * {
  cursor: col-resize !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}

/* 侧边栏头部 */
.sidebar-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-primary);
  flex-shrink: 0;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center; /* 居中对齐 */
  gap: 10px;
  margin-bottom: 12px;
}

.sidebar-brand-icon {
  width: 36px; /* 略微加大图标 */
  height: 36px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.sidebar-brand-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  /* 优化图标渲染，消除锯齿 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  filter: contrast(1.1) brightness(1.05) saturate(1.1);
  transform: translateZ(0); /* 硬件加速 */
  backface-visibility: hidden;
}

.sidebar-brand-text {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 18px; /* 从15px增大到18px */
  white-space: nowrap;
  overflow: hidden;
}

.sidebar .sidebar-search {
  width: 100%;
  padding: 7px 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: 6px;
  color: var(--text-tertiary);
  font-size: 15px;
  transition: border-color var(--transition-fast);
}

.sidebar .sidebar-search:focus {
  outline: none;
  border-color: var(--accent-primary);
}

.sidebar.collapsed .sidebar-header {
  padding: 14px 8px;
}

.sidebar.collapsed .sidebar-brand-text,
.sidebar.collapsed .sidebar-search {
  display: none;
}

/* 侧边栏标签页 */
.sidebar-tabs {
  display: flex;
  padding: 6px;
  margin: 0 16px 8px;
  gap: 4px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
}

.sidebar.collapsed .sidebar-tabs {
  display: none;
}

.sidebar-tab {
  flex: 1;
  min-height: 38px;
  padding: 7px 12px;
  background: transparent;
  border: none;
  color: #ffffff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  border-radius: 7px;
  transition: all var(--transition-fast);
  text-align: center;
}

.sidebar-tab:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.sidebar-tabs .sidebar-tab.active {
  background: rgba(255, 255, 255, 0.16);
  color: #86EFAC;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  text-shadow: 0 0 8px rgba(134, 239, 172, 0.35);
}

/* 侧边栏操作按钮 */
.sidebar-actions {
  padding: 10px 16px;
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border-primary);
  flex-shrink: 0;
}

.sidebar.collapsed .sidebar-actions {
  padding: 10px 8px;
  flex-direction: column;
}

.sidebar-action-btn {
  flex: 1;
  padding: 7px 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.sidebar-action-group {
  flex: 1;
  position: relative;
  min-width: 0;
}

.sidebar-action-group .sidebar-action-btn {
  width: 100%;
}

.sidebar-action-btn:hover {
  background: var(--border-primary);
  border-color: var(--accent-primary);
}

.sidebar-action-btn.primary {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.sidebar-action-btn.primary:hover {
  background: var(--accent-hover);
}

.sidebar-action-btn:disabled {
  opacity: 0.85;
  cursor: not-allowed;
}

.sidebar-upload-progress-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(148, 163, 184, 0.25);
}

.sidebar-upload-progress-fill {
  height: 100%;
  background: #10b981;
  transition: width 0.2s ease;
}

.sidebar.collapsed .sidebar-action-btn span {
  display: none;
}

/* 当前文件名 */
.sidebar-filename {
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border-primary);
  flex-shrink: 0;
}

.sidebar-filename-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 170px;
}

/* 文件树（工作表列表） */
.sidebar-file-tree {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px;
}

.sidebar-file-tree.locked {
  opacity: 0.85;
}

.sidebar-file-tree.locked .tree-item.tree-file,
.sidebar-file-tree.locked .tree-item.tree-file * {
  pointer-events: none;
  cursor: not-allowed !important;
}

.sidebar-file-tree::-webkit-scrollbar {
  width: 8px;
}

.sidebar-file-tree::-webkit-scrollbar-track {
  background: #1E1E1E;
}

.sidebar-file-tree::-webkit-scrollbar-thumb {
  background: #3A3A3A;
  border-radius: 4px;
}

.sidebar-file-tree::-webkit-scrollbar-thumb:hover {
  background: #4A4A4A;
}

.tree-item {
  padding: 8px 10px;
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  overflow: hidden;
  border-radius: 6px;
  margin-bottom: 2px;
  font-size: 15px;
  color: var(--text-tertiary);
  border: 1px solid transparent;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
}

.tree-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.tree-item.active {
  background: rgba(33, 115, 70, 0.22);
  color: var(--accent-active);
  border: 1px solid rgba(78, 205, 196, 0.45);
  box-shadow: inset 0 0 0 1px rgba(78, 205, 196, 0.12);
  border-radius: 6px;
}

.tree-item.active::before {
  content: '';
  width: 3px;
  height: 16px;
  background: var(--accent-primary);
  border-radius: 2px;
  box-shadow: 0 0 4px rgba(33, 115, 70, 0.4);
  flex-shrink: 0;
  margin-right: 8px;
}

/* 子级导引线：强化目录/文件层级关系 */
.tree-item.tree-child:not(.active)::after {
  content: '';
  position: absolute;
  left: calc(7px + (var(--tree-depth) * 18px));
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(148, 163, 184, 0.22);
  pointer-events: none;
}

.tree-item-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tree-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tree-item-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

.tree-item:hover .tree-item-actions {
  opacity: 1;
  pointer-events: auto;
}

.tree-item.active .tree-item-actions {
  opacity: 1;
  pointer-events: auto;
}

.tree-item-action {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tree-item-action:hover {
  background: var(--border-primary);
  color: var(--text-primary);
}

.tree-item-rename-input {
  flex: 1;
  min-width: 0;
  max-width: 100%;
  padding: 2px 6px;
  background: var(--bg-primary);
  border: 1px solid var(--accent-primary);
  border-radius: 3px;
  color: var(--text-primary);
  font-size: 15px;
  outline: none;
  box-sizing: border-box;
}

.sidebar.collapsed .tree-item-name,
.sidebar.collapsed .tree-item-actions {
  display: none;
}

/* 侧边栏底部 */
.sidebar-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border-primary);
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-shrink: 0;
}

.sidebar.collapsed .sidebar-footer {
  padding: 10px 4px;
  flex-direction: column;
  gap: 4px;
}

.sidebar-footer-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  transition: all var(--transition-fast);
}

.sidebar-footer-icon:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.sidebar-footer-icon.active {
  background: var(--accent-primary);
  color: var(--text-primary);
}

/* 折叠按钮 */
.sidebar-collapse-btn {
  width: 100%;
  padding: 8px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-primary);
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.sidebar-collapse-btn:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

/* 文件夹树节点 */
.tree-item.tree-folder {
  color: #d8dee9;
  font-weight: 600;
  background: rgba(148, 163, 184, 0.06);
  border-color: rgba(148, 163, 184, 0.16);
}

.tree-item.tree-folder:hover {
  color: #ffffff;
  background: rgba(148, 163, 184, 0.11);
  border-color: rgba(148, 163, 184, 0.26);
}

.tree-item.tree-folder.depth-0 {
  margin-top: 5px;
}

.tree-item.tree-folder.depth-1,
.tree-item.tree-folder.depth-2,
.tree-item.tree-folder.depth-3,
.tree-item.tree-folder.depth-4 {
  background: rgba(148, 163, 184, 0.03);
  border-color: rgba(148, 163, 184, 0.1);
  font-weight: 500;
}

.tree-item.tree-file {
  background: transparent;
  border-color: transparent;
}

.tree-item.tree-file:hover {
  background: rgba(255, 255, 255, 0.04);
}

.tree-item.tree-file .tree-item-name {
  font-size: 15px;
  color: #c5ced9;
}

.tree-item.tree-file.active .tree-item-name {
  color: #e8fff2;
  font-weight: 600;
}

/* 当前选中文件：增强对比度与可识别性（背景 + 边框 + 外发光） */
.tree-item.tree-file.active {
  background: linear-gradient(90deg, rgba(33, 115, 70, 0.62) 0%, rgba(33, 115, 70, 0.34) 100%);
  border-color: rgba(120, 255, 214, 0.9);
  box-shadow:
    inset 0 0 0 1px rgba(120, 255, 214, 0.42),
    0 0 0 1px rgba(120, 255, 214, 0.3),
    0 6px 16px rgba(33, 115, 70, 0.4);
  outline: 1px solid rgba(82, 245, 181, 0.45);
  outline-offset: -1px;
}

.tree-item.tree-file.active::before {
  width: 5px;
  height: 18px;
  background: #66ffd2;
  box-shadow: 0 0 10px rgba(102, 255, 210, 0.85);
}

.tree-item.tree-file.active .tree-item-icon {
  color: #9efad4;
}

.tree-item-chevron {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-tertiary);
}

.tree-item-chevron.file-chevron {
  cursor: pointer;
  color: var(--text-secondary);
}

.tree-item.tree-sheet-node {
  font-size: 14px;
  color: var(--text-secondary);
  gap: 6px;
}

.tree-star-icon {
  color: #f5a623;
  flex-shrink: 0;
  margin-left: auto;
}

.tree-favorite-btn {
  margin-left: auto;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.tree-favorite-btn:hover {
  background: var(--hover-bg);
  color: #ff5f7a;
}

.tree-favorite-btn.active {
  color: #ff5f7a;
}

.tree-item.tree-file.pending {
  background: rgba(59, 130, 246, 0.14);
  border-color: rgba(96, 165, 250, 0.45);
}

.tree-file-pending-spinner {
  margin-left: auto;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #93c5fd;
  animation: tree-file-spin 0.9s linear infinite;
}

@keyframes tree-file-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 当前工作簿 Sheet 列表分区 */
.sidebar-sheet-list {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border-primary);
}

/* 文件管理标签 - 优化视觉层级和美观度 */
.sidebar-tree-label {
  padding: 7px 8px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-primary);
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(33, 115, 70, 0.12);
  border-left: 3px solid var(--accent-primary);
  border-radius: 4px;
  transition: all var(--transition-fast);
}

/* 添加左侧装饰线，增强视觉层级 */
.sidebar-tree-label::before {
  content: none;
}

/* 悬停效果，增强交互感 */
.sidebar-tree-label:hover {
  background: rgba(33, 115, 70, 0.12);
  color: var(--accent-active);
}

/* 云空间用量条 */
.sidebar-storage-bar {
  padding: 4px 10px 6px;
  margin-bottom: 2px;
}
.sidebar-storage-text {
  font-size: 11px;
  color: var(--text-secondary, #999);
  display: flex;
  align-items: center;
  gap: 0;
  line-height: 1;
  margin-bottom: 4px;
}
.sidebar-storage-sep {
  opacity: 0.5;
}
.sidebar-storage-track {
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
}
.sidebar-storage-fill {
  height: 100%;
  background: var(--accent-primary, #217346);
  border-radius: 2px;
  transition: width 0.4s ease;
  min-width: 2px;
}
.sidebar-storage-fill.danger {
  background: #e5484d;
}

.sidebar-empty-hint {
  padding: 16px 12px;
  text-align: center;
  font-size: 14px;
  color: var(--text-tertiary);
}

/* 新建下拉菜单 */
.new-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  min-width: 180px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  padding: 4px;
  margin-top: 4px;
}

.new-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 15px;
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast);
}

.new-dropdown-item:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.new-dropdown-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.new-dropdown-item:disabled:hover {
  background: transparent;
  color: var(--text-secondary);
}

/* 右键菜单 */
.tree-context-menu {
  position: fixed;
  z-index: 2000;
  min-width: 160px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  padding: 4px;
}

.tree-context-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 15px;
  cursor: pointer;
  text-align: left;
  transition: all var(--transition-fast);
}

.tree-context-item:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

/* ===== 拖拽视觉反馈 ===== */
.tree-item[draggable="true"] {
  cursor: grab;
}
.tree-item[draggable="true"]:active {
  cursor: grabbing;
  opacity: 0.6;
}
.tree-item.drag-over {
  background: var(--accent-bg);
  border: 1px dashed var(--accent-primary);
  border-radius: 4px;
}
.sidebar-file-tree.drag-over-root {
  border-top: 2px dashed var(--accent-primary);
  background: rgba(51, 102, 255, 0.03);
}

/* 上传模式选择对话框 */
.upload-mode-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.5);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upload-mode-dialog {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: 24px;
  width: 520px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}

.upload-mode-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.upload-mode-header h3 {
  margin: 0;
  font-size: 18px;
  color: var(--text-primary);
}

.upload-mode-close {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

.upload-mode-close:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.upload-mode-filename {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.upload-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.upload-mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 12px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.upload-mode-card:hover {
  background: var(--accent-bg);
  border-color: var(--accent-primary);
  color: var(--text-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

.upload-mode-card-label {
  font-size: 13px;
  font-weight: 600;
}

.upload-mode-card-desc {
  font-size: 14px;
  color: var(--text-tertiary);
  text-align: center;
  line-height: 1.3;
}

/* ============================================================================
 * 主内容区
 * ============================================================================ */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* ============================================================================
 * 顶部头部栏 (Header)
 * ============================================================================ */
.airtable-header {
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-primary);
  padding: 6px 16px 6px;
  flex-shrink: 0;
}

/* (已废弃 - 进度条已合并到 header-row-unified 绿线) */

/* 视图 + 工具合并行 */
.header-row-unified {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin-bottom: 0;
  flex-wrap: wrap;
}

/* 底部绿色线：默认静态全宽 */
.header-row-unified::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent-primary);
  pointer-events: none;
  z-index: 1;
}

/* ---- 加载进度条：复用绿线位置 ---- */

/* 加载中：绿线变为暗灰轨道，高度 3px */
.header-row-unified.loading::after {
  background: rgba(148, 163, 184, 0.2);
  height: 3px;
}
/* 完成后：轨道不可见，fill 层接管 */
.header-row-unified.load-completed::after {
  background: transparent;
}

/* 进度填充层：叠加在绿线位置 */
.header-progress-fill {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: var(--accent-primary);
  transition: width 0.35s ease;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
}
/* 加载中脉冲动画 */
.header-progress-fill:not(.completed) {
  animation: progress-pulse 1.8s ease-in-out infinite;
}
@keyframes progress-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}
/* 完成态：蓝色，无动画 */
.header-progress-fill.completed {
  background: #3b82f6;
  box-shadow: none;
  height: 2px;
  animation: none;
}

/* 进度阶段文字：内联在工具栏（退出按钮左侧） */
.header-progress-stage {
  font-size: 13px;
  color: rgba(16, 185, 129, 0.85);
  white-space: nowrap;
  line-height: 1;
  padding: 0 4px;
  animation: stage-fade-in 0.3s ease;
}
.header-progress-stage.completed {
  color: #60a5fa;
}
@keyframes stage-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.header-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-title-icon {
  width: 24px;
  height: 24px;
  background: var(--accent-primary);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}

.header-title-text {
  font-size: 17px;
  font-weight: 600;
  color: var(--accent-active);
}

.header-title-desc {
  font-size: 14px;
  color: var(--text-tertiary);
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.header-tool-btn {
  padding: 5px 12px;
  background: transparent;
  border: 1px solid var(--border-secondary);
  border-radius: 6px;
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 13px;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.header-tool-btn:hover {
  background: var(--border-primary);
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

.header-tool-btn.active {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--text-primary);
}

/* 视图标签行 - Tab 页设计 */
.header-row-views {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1;
  min-width: 0;
  border-bottom: 1px solid var(--border-primary);
  position: relative;
}

/* 平台视图 Tab 栏：占满可用宽度，隐藏滚动条 */
.header-row-views-scroll {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 6px;
  padding: 2px 0 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.header-row-views-scroll::-webkit-scrollbar {
  display: none;
}

/* Tab 页样式：连贯的 Tab 条，非独立按钮 */
.header-view-tab {
  flex-shrink: 0;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  transition: color var(--transition-fast), background var(--transition-fast);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 5px;
  position: relative;
  overflow: visible;
}

.header-view-tab:hover {
  background: rgba(33, 115, 70, 0.14);
  border-color: rgba(33, 115, 70, 0.55);
  color: var(--text-primary);
}

.header-view-tab.active {
  color: #E9FFF2;
  background: linear-gradient(135deg, rgba(33, 115, 70, 0.38), rgba(42, 144, 88, 0.30));
  border-color: rgba(78, 205, 196, 0.7);
  box-shadow: inset 0 0 0 1px rgba(78, 205, 196, 0.25);
  font-weight: 700;
}

.header-view-tab-badge {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.header-view-tab-badge-analyze {
  position: absolute;
  top: auto;
  bottom: -4px;
  right: -2px;
  transform: none;
  transform-origin: center;
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  color: #F3F4FF;
  padding: 1px 5px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(67, 56, 202, 0.32), rgba(147, 51, 234, 0.34));
  border: 1px solid rgba(167, 139, 250, 0.68);
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.85),
    0 0 6px rgba(129, 140, 248, 0.9),
    0 0 10px rgba(147, 51, 234, 0.72);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.25),
    0 0 10px rgba(129, 140, 248, 0.35);
  z-index: 2;
}

.header-view-tab.active .header-view-tab-badge-analyze {
  color: #FFFFFF;
  text-shadow:
    0 0 2px rgba(255, 255, 255, 0.95),
    0 0 8px rgba(129, 140, 248, 1),
    0 0 12px rgba(147, 51, 234, 0.86);
}

/* 活动 Tab 下方绿色线：绝对定位，从活动按钮延伸至最右侧 */
.header-view-tab-active-line {
  display: none;
}

/* 操作栏 */
.header-action-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Univer：为 fixed 对齐的 Ribbon 预留横向空间（测量用，不拦截点击） */
.header-action-bar.univer-ribbon-embed {
  min-height: 42px;
  position: relative;
  z-index: 1;
}

.header-univer-ribbon-pin-target {
  flex: 1;
  min-width: 120px;
  min-height: 40px;
  align-self: stretch;
  overflow-x: auto;
  overflow-y: visible;
  display: flex;
  align-items: center;
}

/* Ribbon 通过 fixed 对齐本插槽，DOM 仍在 .univer-sheet-host 内；插槽仅作测量占位 */
#sheetbot-univer-ribbon-slot {
  pointer-events: none;
}

/* --------------------------------------------------------------------------
 * Univer：Ribbon 移入顶栏后仍建议放行 overflow；html 类不依赖 :has，兼容旧浏览器。
 * -------------------------------------------------------------------------- */
html.sheetbot-univer-ribbon-embed .app-layout,
html.sheetbot-univer-ribbon-embed .main-content,
html.sheetbot-univer-ribbon-embed .content-area,
html.sheetbot-univer-ribbon-embed .content-excel-panel,
html.sheetbot-univer-ribbon-embed .content-excel-editor {
  overflow: visible !important;
}

html.sheetbot-univer-ribbon-embed .airtable-header {
  overflow: visible !important;
  position: relative;
  z-index: 6;
}

.app-layout:has(.univer-sheet-host) {
  overflow: visible;
}

.main-content:has(.univer-sheet-host) {
  overflow: visible;
}

.content-area:has(.univer-sheet-host) {
  overflow: visible;
}

.content-excel-panel:has(.univer-sheet-host) {
  overflow: visible;
}

.content-excel-editor:has(.univer-sheet-host) {
  overflow: visible;
}

.header-action-item {
  padding: 5px 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: 6px;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.header-action-item:hover {
  background: var(--hover-bg);
  border-color: var(--accent-primary);
}

.header-action-item.active {
  background: linear-gradient(135deg, var(--accent-primary, #217346), #2A9058);
  border-color: transparent;
  color: #fff;
}

.header-action-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 顶栏「常用函数」：与 Univer Ribbon 下拉同逻辑，下拉层对齐操作栏 */
.header-common-fn-wrap {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}

.header-common-fn-chevron {
  margin-left: 2px;
  opacity: 0.9;
}

/* 常用函数菜单：由 createPortal 挂到 body，仅用 class 控制外观（位置由内联 style 决定） */
.header-common-fn-dropdown-portal.new-dropdown {
  margin-top: 0;
  box-sizing: border-box;
}

.header-common-fn-dropdown .new-dropdown-item {
  font-size: 13px;
  padding: 6px 10px;
}

.header-common-fn-dropdown-divider {
  height: 1px;
  margin: 4px 8px;
  background: var(--border-primary);
}

/* 我要收集：操作栏严格只保留指定动作，防止遗留预留图标 */
.header-action-bar.collect-mode .header-action-item:not(.collect-action-item),
.header-action-bar.collect-mode .header-action-separator,
.header-action-bar.collect-mode .header-zoom-control {
  display: none !important;
}

.header-action-separator {
  width: 1px;
  height: 20px;
  background: var(--border-primary);
  margin: 0 4px;
}

/* ============================================================================
 * 工作表缩放控件（普通视图 & 我要分析）
 * ============================================================================ */
.header-zoom-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: 999px;
  color: var(--text-secondary);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.header-zoom-btn {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--border-secondary);
  background: rgba(33, 115, 70, 0.08);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.header-zoom-btn:hover {
  border-color: var(--accent-primary);
  background: rgba(33, 115, 70, 0.14);
}

.header-zoom-slider {
  width: 140px;
  accent-color: var(--accent-primary);
  cursor: pointer;
}

.header-zoom-value {
  min-width: 52px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ============================================================================
 * 内容区域（Excel + AI助手）
 * ============================================================================ */
.content-area {
  flex: 1;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  overflow: hidden;
  position: relative;
}

.content-excel-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* 公式栏（集成到内容区顶部） */
.content-formula-bar {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-primary);
  padding: 4px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.content-formula-bar .formula-label {
  color: var(--accent-active);
  font-weight: 600;
  font-size: 13px;
  padding: 0 6px;
  flex-shrink: 0;
}

.content-formula-bar .formula-input {
  flex: 1;
  padding: 4px 8px;
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 13px;
  font-family: 'Courier New', monospace;
}

.content-formula-bar .formula-input:focus {
  outline: none;
  border-color: var(--accent-primary);
}

/* Excel编辑器容器 */
.content-excel-editor {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.excel-loading-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 24, 39, 0.18);
  z-index: 20;
  pointer-events: none;
}

.excel-loading-badge {
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-secondary);
  background: rgba(15, 23, 42, 0.92);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* AI助手面板（右侧） */
.content-ai-panel {
  grid-column: 2;
  width: 380px;
  min-width: 380px;
  flex-shrink: 0;
  display: flex;
  min-height: 0;
  border-left: 1px solid #2E2C36;
  transition: width var(--transition-slow), min-width var(--transition-slow);
  overflow: hidden;
  align-self: stretch;
  height: 100%;
}

.content-ai-panel .ai-panel {
  height: 100% !important;
  min-height: 0;
  display: flex !important;
  flex-direction: column !important;
  /* overflow:hidden 是关键：让 flex 容器正确界定 scroll-body 的高度上界 */
  overflow: hidden;
}

/* 面板头部和文件信息行不参与压缩，scroll-body 独占剩余空间 */
.content-ai-panel .ai-panel > div:first-child,
.content-ai-panel .ai-panel .large-file-indicator {
  flex-shrink: 0;
}

.content-ai-panel .ai-panel .ai-panel-scroll-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden;
  padding: 16px;
  /* 更明显的滚动条颜色：深灰轨道 + 中灰滑块 */
  scrollbar-width: thin;
  scrollbar-color: #5A5566 #2D2B37;
}

.content-ai-panel .ai-panel .ai-panel-scroll-body::-webkit-scrollbar {
  width: 6px;
}

.content-ai-panel .ai-panel .ai-panel-scroll-body::-webkit-scrollbar-track {
  background: #2D2B37;
  border-radius: 3px;
}

.content-ai-panel .ai-panel .ai-panel-scroll-body::-webkit-scrollbar-thumb {
  background: #5A5566;
  border-radius: 3px;
}

.content-ai-panel .ai-panel .ai-panel-scroll-body::-webkit-scrollbar-thumb:hover {
  background: #7C7589;
}

/* ============================================================================
 * 底部状态栏（深色主题）
 * ============================================================================ */
.airtable-status-bar {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-primary);
  padding: 5px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

/* ============================================================================
 * 功能提示占位（功能开发中）
 * ============================================================================ */
.placeholder-toast {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-tertiary);
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
  padding: 10px 20px;
  color: var(--text-tertiary);
  font-size: 13px;
  z-index: 9999;
  animation: toast-in 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  max-width: 420px;
  text-align: center;
  line-height: 1.5;
}

.placeholder-toast-wide {
  max-width: 520px;
  padding: 14px 24px;
  background: #2a1a1a;
  border-color: #d4443555;
  color: #f0a0a0;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes toast-out {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to { opacity: 0; transform: translateX(-50%) translateY(10px); }
}

/* ============================================================================
 * 平台视图占位（我要汇报/报表/收集/连接/分享）
 * ============================================================================ */
.content-placeholder-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

/* 首次欢迎页不使用默认占位布局，避免卡片过大挤压顶部可视区域 */
.first-login-welcome-panel {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  min-height: 0;
  overflow: hidden;
}

.view-placeholder {
  max-width: 480px;
  width: 100%;
}

.view-placeholder-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: 32px;
  position: relative;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.view-placeholder-icon {
  width: 80px;
  height: 80px;
  background: var(--accent-bg);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
  margin-bottom: 20px;
}

.view-placeholder-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 12px 0;
}

.view-placeholder-desc {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.view-placeholder-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
}

.view-placeholder-features li {
  font-size: 13px;
  color: var(--text-tertiary);
  padding: 6px 0 6px 24px;
  position: relative;
  line-height: 1.5;
}

.view-placeholder-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent-primary);
  font-weight: 600;
}

.view-placeholder-badge {
  display: inline-block;
  padding: 6px 14px;
  background: var(--accent-primary);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
}

/* ============================================================================
 * 首次登录欢迎页
 * ============================================================================ */
.first-login-welcome {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 14px 20px;
  overflow-y: auto;
  /* 与 sidebar-file-tree 滚动条样式一致 */
  scrollbar-width: thin;
  scrollbar-color: #3A3A3A #1E1E1E;
}
.first-login-welcome::-webkit-scrollbar { width: 8px; }
.first-login-welcome::-webkit-scrollbar-track { background: #1E1E1E; }
.first-login-welcome::-webkit-scrollbar-thumb { background: #3A3A3A; border-radius: 4px; }
.first-login-welcome::-webkit-scrollbar-thumb:hover { background: #4A4A4A; }

.first-login-welcome-card {
  width: min(100%, 1120px);
  min-height: min(70vh, 700px);
  max-height: calc(100% - 12px);
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #3A3A3A #1E1E1E;
}

.first-login-welcome-header {
  text-align: center;
  margin-bottom: 20px;
}

.first-login-welcome-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  background: var(--accent-bg);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
}

.first-login-welcome-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.first-login-welcome-views {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  margin-bottom: 20px;
}

.first-login-view-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: 10px;
}

.first-login-view-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: var(--accent-bg);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
}

.first-login-view-text h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}

.first-login-view-text p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.first-login-welcome-actions {
  text-align: center;
  padding-top: 14px;
  border-top: 1px solid var(--border-primary);
}

@media (max-height: 760px) {
  .first-login-welcome {
    padding: 8px 10px;
  }

  .first-login-welcome-card {
    width: min(100%, 1020px);
    min-height: min(66vh, 560px);
    padding: 18px 20px;
  }

  .first-login-welcome-header {
    margin-bottom: 12px;
  }

  .first-login-welcome-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 8px;
  }

  .first-login-welcome-title {
    font-size: 20px;
  }

  .first-login-welcome-views {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    margin-bottom: 12px;
  }

  .first-login-view-item {
    padding: 9px 10px;
    gap: 10px;
  }

  .first-login-view-icon {
    width: 28px;
    height: 28px;
  }

  .first-login-view-text h3 {
    font-size: 13px;
  }

  .first-login-view-text p {
    font-size: 12px;
    line-height: 1.4;
  }

  .first-login-welcome-actions {
    padding-top: 10px;
  }
}

.first-login-btn-demo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  background: var(--accent-primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.first-login-btn-demo:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

.first-login-btn-demo:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.first-login-demo-hint {
  font-size: 14px;
  color: var(--text-tertiary);
  margin: 10px 0 16px 0;
}

.first-login-btn-skip {
  display: block;
  margin: 12px auto 0;
  padding: 8px 16px;
  background: transparent;
  color: var(--text-tertiary);
  border: none;
  font-size: 13px;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.first-login-btn-skip:hover:not(:disabled) {
  color: var(--text-secondary);
}

/* ===== Univer sheet tab 高亮（底部标签栏选中态） ===== */
[data-u-comp="slide-tab-item"][aria-selected="true"] {
  background: var(--accent-primary) !important;
  color: #fff !important;
  border-radius: 4px 4px 0 0;
}
[data-u-comp="slide-tab-item"][aria-selected="true"] span {
  color: #fff !important;
}

/* ======================================================================
   系统公告 — 横幅 + 弹窗
   ====================================================================== */

/* --- 顶部横幅 --- */
.announcement-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--text-primary, #e0e0e0);
  flex-shrink: 0;
}
.announcement-banner-title {
  font-weight: 600;
  white-space: nowrap;
}
.announcement-banner-sep {
  opacity: 0.4;
}
.announcement-banner-content {
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.announcement-banner-close {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.5;
  cursor: pointer;
  padding: 2px;
  margin-left: auto;
  flex-shrink: 0;
}
.announcement-banner-close:hover { opacity: 1; }

/* --- 弹窗遮罩 --- */
.announcement-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

.announcement-modal {
  background: var(--bg-elevated, #252525);
  border: 1px solid var(--border-primary, #333);
  border-radius: 12px;
  width: 420px;
  max-width: 92vw;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
  animation: slideUp 0.25s ease;
}
@keyframes slideUp { from { transform: translateY(24px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

.announcement-modal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px 12px;
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary, #e0e0e0);
}
.announcement-modal-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-tertiary, #666);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}
.announcement-modal-close:hover { background: rgba(255,255,255,0.08); }

.announcement-modal-body {
  padding: 0 20px 16px;
}
.announcement-modal-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text-primary, #e0e0e0);
}
.announcement-modal-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary, #aaa);
  margin: 0;
  white-space: pre-wrap;
}
.announcement-modal-date {
  font-size: 12px;
  color: var(--text-tertiary, #666);
  margin-top: 12px;
}

.announcement-modal-footer {
  padding: 0 20px 16px;
  display: flex;
  justify-content: flex-end;
}
.announcement-modal-btn {
  padding: 8px 24px;
  background: var(--accent-primary, #217346);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.announcement-modal-btn:hover {
  background: var(--accent-active, #1a5c37);
}
/* ============================================================================
 * "我要汇报" PPTX 模块样式
 * ============================================================================ */

/* ── 主容器 ────────────────────────────────────────────── */
.pres-view {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 12px 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── 首页 ──────────────────────────────────────────────── */
.pres-home {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pres-home-hero {
  text-align: center;
  padding: 8px 20px 0;
}
.pres-home-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary, #e0e0e0);
  margin: 0 0 12px;
}
.pres-home-desc {
  font-size: 16px;
  color: var(--text-secondary, #999);
  margin: 0;
}
.pres-home-hint {
  font-size: 16px;
  color: var(--accent-primary, #4ECDC4);
  margin: 12px 0 0;
}

.pres-home .pres-history-panel {
  margin-top: 32px;
}

/* ── 模板画廊 ──────────────────────────────────────────── */
.pres-template-gallery {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.pres-section-title {
  font-size: 19px;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  text-align: center;
  margin: 0;
}
.pres-tpl-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}
@media (max-width: 1200px) {
  .pres-tpl-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .pres-tpl-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── 模板卡片 ──────────────────────────────────────────── */
.pres-tpl-card {
  display: flex;
  flex-direction: column;
  border: 2px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-secondary, #1a1a1a);
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.pres-tpl-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
}
.pres-tpl-card.selected {
  border-color: var(--accent-primary, #4ECDC4);
  box-shadow: 0 0 0 1px var(--accent-primary, #4ECDC4), 0 6px 20px rgba(78,205,196,0.2);
}

/* 预览区 */
.pres-tpl-preview {
  position: relative;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 默认：灰度 + 略暗，hover/selected：恢复彩色 */
.pres-tpl-preview-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  filter: grayscale(100%) brightness(0.65);
  transition: filter 0.3s ease;
}
.pres-tpl-card:hover .pres-tpl-preview-image,
.pres-tpl-card.selected .pres-tpl-preview-image {
  filter: grayscale(0%) brightness(1);
}

/* 预览区遮罩：hover 时淡出，让图片更鲜活 */
.pres-tpl-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.28);
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.pres-tpl-card:hover .pres-tpl-preview::after,
.pres-tpl-card.selected .pres-tpl-preview::after {
  opacity: 0;
}

.pres-tpl-accent-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  opacity: 0.5;
  transition: opacity 0.3s ease;
  z-index: 1;
}
.pres-tpl-card:hover .pres-tpl-accent-bar,
.pres-tpl-card.selected .pres-tpl-accent-bar {
  opacity: 1;
}

.pres-tpl-preview-icon {
  opacity: 0.45;
  transition: opacity 0.3s ease;
  filter: grayscale(100%);
}
.pres-tpl-card:hover .pres-tpl-preview-icon,
.pres-tpl-card.selected .pres-tpl-preview-icon {
  opacity: 0.9;
  filter: grayscale(0%);
}

/* 信息区 */
.pres-tpl-info {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pres-tpl-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #999);
  transition: color 0.25s ease;
}
.pres-tpl-card:hover .pres-tpl-name,
.pres-tpl-card.selected .pres-tpl-name {
  color: var(--text-primary, #e0e0e0);
}
.pres-tpl-desc {
  font-size: 11px;
  color: var(--text-tertiary, #666);
  line-height: 1.4;
  transition: color 0.25s ease;
}
.pres-tpl-card:hover .pres-tpl-desc,
.pres-tpl-card.selected .pres-tpl-desc {
  color: var(--text-secondary, #999);
}

/* ── 自定义提示 ────────────────────────────────────────── */
.pres-custom-prompt {
  width: 100%;
}
.pres-prompt-divider {
  height: 1px;
  background: var(--border-primary, #333);
  margin: 24px 0 16px;
  width: 99%;
}
.pres-prompt-content-wrapper {
  max-width: none;
  margin: 0 auto;
  width: 100%;
}
.pres-prompt-panel {
  display: grid;
  grid-template-columns: minmax(0, calc(58% + 10px)) minmax(0, calc(42% - 10px));
  gap: 14px;
  align-items: stretch;
}
.pres-prompt-panel-left,
.pres-prompt-panel-right {
  background: rgba(20, 24, 31, 0.92);
  border: 1px solid var(--border-primary, #333);
  border-radius: 10px;
  padding: 12px;
}
.pres-prompt-panel-title {
  font-size: 14px;
  color: var(--text-secondary, #aaa);
  margin-bottom: 10px;
  font-weight: 600;
}
.pres-prompt-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0;
  align-content: flex-start;
  max-height: 176px;
  overflow: auto;
}
.pres-prompt-preset-item {
  padding: 6px 10px;
  background: var(--bg-tertiary, #2a2a2a);
  border: 1px solid var(--border-primary, #333);
  border-radius: 4px;
  font-size: 13px;
  color: var(--text-secondary, #aaa);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  line-height: 1.35;
  flex: 1 1 calc(50% - 8px);
  max-width: calc(50% - 4px);
  min-height: 34px;
}
.pres-prompt-preset-item:hover {
  background: var(--bg-hover, #333);
  border-color: var(--accent-primary, #4ECDC4);
  color: var(--text-primary, #e0e0e0);
}
.pres-prompt-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary, #aaa);
  margin-bottom: 8px;
  display: block;
}
.pres-prompt-input {
  width: 100%;
  background: var(--bg-secondary, #1e1e1e);
  border: 1px solid var(--border-primary, #333);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 15px;
  color: var(--text-primary, #e0e0e0);
  resize: vertical;
}
.pres-prompt-input::-moz-placeholder {
  font-size: 15px;
}
.pres-prompt-input::placeholder {
  font-size: 15px;
}
.pres-prompt-input:focus {
  border-color: var(--accent-primary, #4ECDC4);
  outline: none;
}

.pres-prompt-input-row {
  width: 100%;
}
.pres-prompt-input-row .pres-prompt-input {
  width: 100%;
  min-height: 140px;
  resize: none;
}
.pres-prompt-actions {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.pres-generate-inline-btn {
  flex: 0 0 auto;
  min-width: 132px;
  padding: 10px 16px;
  align-self: stretch;
  justify-content: center;
}

@media (max-width: 760px) {
  .pres-prompt-panel {
    grid-template-columns: 1fr;
  }
  .pres-prompt-input-row {
    width: 100%;
  }
  .pres-prompt-presets {
    max-height: none;
  }
  .pres-generate-inline-btn {
    width: 100%;
  }
  .pres-prompt-actions {
    justify-content: center;
  }
}

/* ── 生成按钮 ──────────────────────────────────────────── */
.pres-generate-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.pres-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  background: var(--accent-primary, #4ECDC4);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.pres-btn-primary svg {
  color: currentColor;
}
.pres-btn-primary:hover { opacity: 0.9; }
.pres-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

.pres-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--bg-tertiary, #2a2a2a);
  color: var(--text-primary, #ccc);
  border: 1px solid var(--border-primary, #333);
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}
.pres-btn-sm:hover { background: var(--bg-hover, #333); }

/* 与“历史报表清单”刷新按钮视觉保持一致 */
.pres-history-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(135deg, var(--accent-primary, #217346), #2A9058);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
}

.pres-history-refresh-btn:hover:not(:disabled) {
  box-shadow: 0 4px 12px rgba(33, 115, 70, 0.4);
}

.pres-history-refresh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pres-btn-xs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  background: transparent;
  color: var(--text-secondary, #999);
  border: 1px solid var(--border-primary, #333);
  border-radius: 3px;
  font-size: 11px;
  cursor: pointer;
}
.pres-btn-xs:hover { background: var(--bg-hover, #333); }
.pres-btn-danger { color: #e57373; border-color: #e5737366; }
.pres-btn-danger:hover { background: #e5737322; }

/* ── 生成进度 ──────────────────────────────────────────── */
.pres-generating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 60px 20px;
}
.pres-spinner {
  animation: presSpinAnim 1s linear infinite;
}
@keyframes presSpinAnim {
  to { transform: rotate(360deg); }
}
.pres-generating-msg {
  font-size: 15px;
  color: var(--text-primary, #ccc);
}
.pres-progress-bar {
  width: 320px;
  height: 4px;
  background: var(--bg-tertiary, #2a2a2a);
  border-radius: 2px;
  overflow: hidden;
}
.pres-progress-fill {
  height: 100%;
  background: var(--accent-primary, #4ECDC4);
  transition: width 0.5s ease;
}

/* ── 预览布局 ──────────────────────────────────────────── */
.pres-preview-layout {
  display: flex;
  gap: 16px;
  height: 100%;
  min-height: 0;
}
.pres-thumb-panel {
  width: 160px;
  min-width: 160px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 8px;
}
.pres-thumb-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: none;
  border: 2px solid transparent;
  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.pres-thumb-item.active {
  border-color: var(--accent-primary, #4ECDC4);
}
.pres-thumb-item:hover {
  border-color: var(--border-hover, #555);
}
.pres-thumb-number {
  font-size: 11px;
  color: var(--text-secondary, #888);
  min-width: 16px;
  text-align: right;
  padding-top: 2px;
}
.pres-thumb-card {
  flex: 1;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 2px;
}

/* ── 主舞台 ────────────────────────────────────────────── */
.pres-main-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

/* ── 幻灯片渲染 ────────────────────────────────────────── */
.pres-slide {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.pres-slide-mini {
  border-radius: 2px;
  font-size: 4px;
}
.pres-slide-content {
  flex: 1;
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
}
.pres-slide-mini .pres-slide-content {
  padding: 6px 8px;
}

/* ── 封面页 ────────────────────────────────────────────── */
.pres-slide-cover {
  justify-content: center;
  align-items: center;
  text-align: center;
}
.pres-cover-center {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pres-cover-title {
  font-size: 36px;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}
.pres-slide-mini .pres-cover-title { font-size: 8px; }
.pres-cover-subtitle {
  font-size: 16px;
  margin: 0;
}
.pres-slide-mini .pres-cover-subtitle { font-size: 5px; }
.pres-cover-accent-line {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  border-radius: 2px;
}
.pres-slide-mini .pres-cover-accent-line { display: none; }

/* ── 通用标题 ──────────────────────────────────────────── */
.pres-slide-heading {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 20px;
}
.pres-slide-mini .pres-slide-heading { font-size: 6px; margin-bottom: 4px; }
.pres-slide-subtitle {
  font-size: 14px;
  margin: 0 0 12px;
}

/* ── 目录页 ────────────────────────────────────────────── */
.pres-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pres-toc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
}
.pres-slide-mini .pres-toc-item { font-size: 5px; gap: 3px; }
.pres-toc-number {
  font-size: 20px;
  font-weight: 700;
  min-width: 32px;
}
.pres-slide-mini .pres-toc-number { font-size: 6px; min-width: 10px; }

/* ── KPI 页 ────────────────────────────────────────────── */
.pres-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.pres-slide-mini .pres-kpi-grid {
  gap: 3px;
  grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
}
.pres-kpi-card {
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pres-slide-mini .pres-kpi-card { padding: 3px; border-radius: 2px; }
.pres-kpi-label { font-size: 12px; }
.pres-kpi-value { font-size: 28px; font-weight: 700; }
.pres-kpi-unit { font-size: 11px; }
.pres-slide-mini .pres-kpi-label { font-size: 3px; }
.pres-slide-mini .pres-kpi-value { font-size: 6px; }
.pres-slide-mini .pres-kpi-unit { font-size: 3px; }

/* ── 图表/表格占位 ────────────────────────────────────── */
.pres-chart-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed;
  border-radius: 8px;
  font-size: 14px;
}
.pres-slide-mini .pres-chart-placeholder { font-size: 4px; border-radius: 2px; }
.pres-chart-mini-svg {
  width: 94%;
  height: 86%;
  display: block;
}
.pres-chart-preview-img {
  width: 96%;
  height: 92%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 4px;
}
.pres-slide-stock-image-wrap {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.pres-slide-stock-image {
  width: 38%;
  max-height: 110px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.25);
}

/* ── 要点列表 ──────────────────────────────────────────── */
.pres-slide-bullets {
  list-style: disc;
  padding-left: 24px;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}
.pres-slide-mini .pres-slide-bullets { font-size: 4px; gap: 2px; padding-left: 8px; }

/* ── 总结页 ────────────────────────────────────────────── */
.pres-summary-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pres-summary-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
}
.pres-slide-mini .pres-summary-list li { font-size: 4px; gap: 3px; }
.pres-summary-bullet {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  margin-top: 5px;
}
.pres-slide-mini .pres-summary-bullet { width: 3px; height: 3px; min-width: 3px; margin-top: 1px; }

/* ── 表格页 ────────────────────────────────────────────── */
.pres-table-wrap {
  overflow: auto;
  flex: 1;
}
.pres-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.pres-data-table th,
.pres-data-table td {
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,0.1);
  text-align: left;
}
.pres-slide-mini .pres-data-table { font-size: 3px; }
.pres-slide-mini .pres-data-table th,
.pres-slide-mini .pres-data-table td { padding: 1px 2px; }

/* ── 编辑器布局 ────────────────────────────────────────── */
.pres-editor-layout {
  display: flex;
  gap: 16px;
  height: 100%;
}
.pres-editor-preview {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pres-editor-props {
  width: 280px;
  min-width: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary, #1e1e1e);
  border-radius: 8px;
  border: 1px solid var(--border-primary, #333);
}
.pres-props-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}
.pres-prop-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pres-prop-label {
  font-size: 13px;
  color: var(--text-secondary, #999);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pres-prop-input,
.pres-prop-select,
.pres-prop-textarea {
  width: 100%;
  padding: 6px 10px;
  background: var(--bg-tertiary, #2a2a2a);
  border: 1px solid var(--border-primary, #333);
  border-radius: 4px;
  color: var(--text-primary, #e0e0e0);
  font-size: 14px;
}
.pres-prop-input:focus,
.pres-prop-select:focus,
.pres-prop-textarea:focus {
  border-color: var(--accent-primary, #4ECDC4);
  outline: none;
}
.pres-bullet-row {
  display: flex;
  gap: 4px;
  align-items: center;
}
.pres-bullet-row .pres-prop-input {
  flex: 1;
}

/* ── 播放模式 ──────────────────────────────────────────── */
.pres-player-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
}
.pres-player-stage {
  width: 100vw;
  height: 100vh;
}
.pres-player-stage .pres-slide {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.pres-player-progress {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255,255,255,0.1);
  z-index: 10000;
}
.pres-player-progress-fill {
  height: 100%;
  background: var(--accent-primary, #4ECDC4);
  transition: width 0.3s ease;
}
.pres-player-page-indicator {
  position: fixed;
  bottom: 12px;
  right: 16px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  z-index: 10000;
  cursor: default;
}
.pres-player-left-zone {
  position: fixed;
  left: 0;
  top: 0;
  width: 20%;
  height: 100%;
  z-index: 10001;
  cursor: pointer;
}

/* ── 历史面板 ──────────────────────────────────────────── */
.pres-history-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin: 24px auto 0;
  padding: 16px;
  background: var(--bg-secondary, #252525);
  border: 1px solid var(--border-primary, #333);
  border-radius: 12px;
}
.pres-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.pres-history-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  margin: 0;
}
.pres-history-refresh-link {
  margin-left: 8px;
  border: none;
  background: transparent;
  color: #93c5fd;
  font-size: 15px;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}
.pres-history-refresh-link:hover:not(:disabled) {
  text-decoration: underline;
}
.pres-history-refresh-link:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.pres-history-empty {
  font-size: 13px;
  color: var(--text-secondary, #888);
  text-align: center;
  padding: 20px;
}

/* 历史表与连接器/批量 Word / 报表共用 report-history-*，避免操作列挤压导致「打开」「删除」竖排 */
.pres-history-panel .report-history-table th:last-child,
.pres-history-panel .report-history-table td:last-child {
  white-space: nowrap;
  min-width: 168px;
  vertical-align: middle;
}
.pres-history-panel .ui-history-action-btn {
  flex-direction: row;
  flex-wrap: nowrap;
  white-space: nowrap;
  min-width: 72px;
}
.pres-history-panel .ui-history-action-btn span {
  white-space: nowrap;
}
.pres-history-panel .report-history-page-btn,
.pres-history-panel .report-history-page-info {
  font-size: 12px;
}

/* ── 空状态 ────────────────────────────────────────────── */
.pres-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-secondary, #888);
  font-size: 15px;
}

/* ── PPTist 编辑器全尺寸容器 ────────────────────────────── */
.pres-editor-fullsize {
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  height: 100% !important;
  min-height: 100% !important;
  display: block !important;
}

.pres-editor-fullsize .pptist-bridge-container {
  width: 99%;
  margin: 0 auto;
  height: 100%;
}
/* ============================================================================
 * 玩数据Skill - 深色设计系统
 * 色调对齐 AI 助手面板（#1C1B22 系列），Indigo/Violet 主色强调
 * ui-ux-pro-max: Dark mode WCAG AA+, 150-300ms transitions, no layout shift
 * ============================================================================ */

/* ---- 设计令牌 ---- */
:root {
  /* -- 背景层次（与 AI 助手保持一致） -- */
  --sk-bg:         #1C1B22;
  --sk-panel:      #24222C;
  --sk-card:       #201F28;
  --sk-elevated:   #2A2840;

  /* -- 边框 -- */
  --sk-border:     #2E2C36;
  --sk-border-s:   rgba(99, 102, 241, 0.45);

  /* -- 文字（深色下满足 4.5:1+） -- */
  --sk-text:       #E5E5E5;
  --sk-text-s:     #B3B0C0;
  --sk-muted:      #8B8698;

  /* -- 主色调（Indigo/Violet 渐变，区分于 AI 的绿色） -- */
  --sk-accent:     #6366f1;
  --sk-accent-h:   #4f46e5;
  --sk-accent-2:   #8b5cf6;
  --sk-accent-3:   #a855f7;
  --sk-accent-bg:  rgba(99, 102, 241, 0.14);
  --sk-accent-bg-s:rgba(99, 102, 241, 0.24);

  /* -- 语义色 -- */
  --sk-success:    #34d399;
  --sk-warn-bg:    rgba(245, 158, 11, 0.12);
  --sk-warn-border:#92400e;
  --sk-warn-text:  #fcd34d;
  --sk-ok-bg:      rgba(52, 211, 153, 0.1);
  --sk-ok-border:  rgba(52, 211, 153, 0.3);
  --sk-ok-text:    #34d399;
  --sk-danger:     #f87171;
  --sk-danger-bg:  rgba(248, 113, 113, 0.1);

  /* -- 阴影 -- */
  --sk-shadow-s: 0 1px 3px rgba(0,0,0,.35);
  --sk-shadow-m: 0 4px 16px rgba(0,0,0,.45);
  --sk-shadow-l: 0 8px 32px rgba(0,0,0,.55);

  /* -- 圆角 -- */
  --sk-radius: 10px;
}

/* ============================================================================
 * 页面容器
 * ============================================================================ */

.sk-page {
  display: flex;
  height: 100%;
  overflow: hidden;
  background: var(--sk-bg);
  color: var(--sk-text);
}

/* ============================================================================
 * 左侧列表面板
 * ============================================================================ */

.sk-list-panel {
  width: 300px;
  min-width: 268px;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--sk-panel);
  border-right: 1px solid var(--sk-border);
  flex-shrink: 0;
}

/* ---- 品牌区 ---- */
.sk-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--sk-border);
  flex-shrink: 0;
}

.sk-brand-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--sk-accent) 0%, var(--sk-accent-3) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 14px rgba(99,102,241,.4);
  flex-shrink: 0;
}

.sk-brand-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--sk-text);
  letter-spacing: -0.01em;
}

.sk-brand-subtitle {
  font-size: 14px;
  color: var(--sk-muted);
  margin-top: 2px;
}

.sk-brand-badge {
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--sk-accent), var(--sk-accent-3));
  color: #fff;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

/* ---- 工作簿状态横幅 ---- */
.sk-workbook-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 12px 2px;
  padding: 9px 12px;
  border-radius: 8px;
  background: var(--sk-warn-bg);
  border: 1px solid rgba(146, 64, 14, 0.4);
  font-size: 15px;
  color: var(--sk-warn-text);
  line-height: 1.5;
  flex-shrink: 0;
}

.sk-workbook-banner svg { flex-shrink: 0; margin-top: 1px; }
.sk-workbook-banner strong { color: #fbbf24; }

.sk-workbook-banner-ok {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 12px 2px;
  padding: 7px 12px;
  border-radius: 8px;
  background: var(--sk-ok-bg);
  border: 1px solid var(--sk-ok-border);
  font-size: 15px;
  color: var(--sk-ok-text);
  flex-shrink: 0;
}

.sk-workbook-banner-ok svg { flex-shrink: 0; }
.sk-workbook-banner-ok strong { color: #6ee7b7; }

/* ---- 搜索 + 操作 ---- */
.sk-list-toolbar {
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.sk-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.sk-search-icon {
  position: absolute;
  left: 10px;
  color: var(--sk-muted);
  pointer-events: none;
}

.sk-search-input {
  width: 100%;
  padding: 7px 10px 7px 32px;
  border: 1px solid var(--sk-border);
  border-radius: 8px;
  background: var(--sk-bg);
  font-size: 14px;
  color: var(--sk-text);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.sk-search-input::-moz-placeholder { color: var(--sk-muted); }

.sk-search-input::placeholder { color: var(--sk-muted); }

.sk-search-input:focus {
  border-color: var(--sk-accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.18);
}

.sk-list-actions {
  display: flex;
  gap: 6px;
}

/* ---- 技能卡片列表 ---- */
.sk-cards-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 4px 10px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(99,102,241,.25) transparent;
  min-height: 0;
}

.sk-cards-scroll::-webkit-scrollbar { width: 4px; }
.sk-cards-scroll::-webkit-scrollbar-track { background: transparent; }
.sk-cards-scroll::-webkit-scrollbar-thumb { background: rgba(99,102,241,.25); border-radius: 2px; }

/* ---- 技能卡片 ---- */
.sk-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 10px 10px 12px;
  margin-bottom: 4px;
  border-radius: 8px;
  background: var(--sk-card);
  border: 1px solid var(--sk-border);
  border-left: 3px solid transparent;
  cursor: pointer;
  transition: all .18s ease;
}

.sk-card:hover {
  border-color: rgba(99,102,241,.3);
  border-left-color: var(--sk-accent-2);
  background: var(--sk-elevated);
  box-shadow: var(--sk-shadow-s);
  transform: translateX(2px);
}

.sk-card--selected {
  border-color: rgba(99,102,241,.35);
  border-left-color: var(--sk-accent);
  background: var(--sk-elevated);
  box-shadow: var(--sk-shadow-m);
  transform: translateX(2px);
}

.sk-card-body { flex: 1; min-width: 0; }

.sk-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.sk-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--sk-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sk-card-preset-badge {
  font-size: 15px;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--sk-accent-bg);
  color: #a5b4fc;
  font-weight: 600;
  flex-shrink: 0;
  border: 1px solid rgba(99,102,241,.3);
}

.sk-card-desc {
  font-size: 15px;
  color: var(--sk-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}

.sk-card-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.sk-card-steps-count {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  color: var(--sk-muted);
  padding: 1px 5px;
  background: rgba(255,255,255,.05);
  border-radius: 4px;
}

.sk-card-tag {
  font-size: 15px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--sk-accent-bg);
  color: #a5b4fc;
  font-weight: 500;
}

/* 卡片右侧操作列 */
.sk-card-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  align-items: center;
}

/* 卡片执行/删除按钮（hover 才显示） */
.sk-card-run-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--sk-accent), var(--sk-accent-3));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.75);
  transition: opacity .18s, transform .18s;
  box-shadow: 0 2px 8px rgba(99,102,241,.4);
}

.sk-card-export-btn,
.sk-card-delete-btn {
  /* 与执行按钮一致的渐变 */
}

.sk-card:hover .sk-card-run-btn,
.sk-card--selected .sk-card-run-btn {
  opacity: 1;
  transform: scale(1);
}

.sk-card-run-btn:hover {
  box-shadow: 0 4px 14px rgba(99,102,241,.6);
  transform: scale(1.1) !important;
}

/* ---- 空/加载状态 ---- */
.sk-list-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  color: var(--sk-muted);
  font-size: 14px;
}

.sk-list-empty-hint {
  font-size: 14px;
  text-align: center;
  color: rgba(139,134,152,.6);
}

/* ---- 拖拽提示 ---- */
.sk-drop-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px;
  font-size: 14px;
  color: #a5b4fc;
  background: rgba(99,102,241,.08);
  border-top: 1px dashed var(--sk-border);
  flex-shrink: 0;
}

/* ============================================================================
 * 右侧编辑面板
 * ============================================================================ */

.sk-editor-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--sk-bg);
  position: relative;
}

/* ============================================================================
 * 无工作簿门控遮罩
 * ============================================================================ */

.sk-editor-gate {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(28, 27, 34, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 32px;
}

.sk-editor-gate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 48px;
  background: var(--sk-panel);
  border: 1.5px solid rgba(99, 102, 241, 0.45);
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(0,0,0,.65), 0 0 0 1px rgba(99,102,241,.15);
  text-align: center;
  max-width: 440px;
  animation: sk-gate-in .22s ease;
}

@keyframes sk-gate-in {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sk-editor-gate-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(99,102,241,.2), rgba(139,92,246,.2));
  border: 1.5px solid rgba(99,102,241,.4);
  color: #a5b4fc;
  animation: sk-gate-pulse 2.8s ease-in-out infinite;
}

@keyframes sk-gate-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,.4); }
  50%       { box-shadow: 0 0 0 10px rgba(99,102,241,.0); }
}

.sk-editor-gate-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--sk-text);
  letter-spacing: .4px;
}

.sk-editor-gate-desc {
  font-size: 15px;
  color: var(--sk-text-s);
  line-height: 1.65;
}

.sk-editor-gate-desc strong {
  color: #a5b4fc;
}

.sk-editor-gate-arrow {
  margin-top: 6px;
  padding: 8px 20px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(99,102,241,.2), rgba(139,92,246,.15));
  border: 1px solid rgba(99,102,241,.4);
  font-size: 15px;
  font-weight: 600;
  color: #a5b4fc;
  letter-spacing: .3px;
  animation: sk-arrow-blink 2.2s ease-in-out infinite;
}

@keyframes sk-arrow-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .55; }
}

/* ---- 禁用态（有遮罩但底层内容仍保持可读） ---- */

.sk-locked {
  pointer-events: none;
  opacity: 0.35;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.sk-card-run-btn--disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ---- 元数据区 ---- */
.sk-meta-section {
  padding: 18px 24px 14px;
  background: var(--sk-panel);
  border-bottom: 1px solid var(--sk-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-shrink: 0;
}

.sk-meta-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--sk-text);
  border: none;
  outline: none;
  background: transparent;
  width: 100%;
  letter-spacing: -0.01em;
}

.sk-meta-name::-moz-placeholder { color: rgba(139,134,152,.45); font-weight: 400; font-size: 16px; }

.sk-meta-name::placeholder { color: rgba(139,134,152,.45); font-weight: 400; font-size: 16px; }

.sk-meta-desc {
  font-size: 14px;
  color: var(--sk-text-s);
  border: 1px solid var(--sk-border);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--sk-bg);
  resize: none;
  outline: none;
  width: 100%;
  font-family: inherit;
  transition: border-color .2s, box-shadow .2s;
  line-height: 1.5;
}

.sk-meta-desc::-moz-placeholder { color: var(--sk-muted); }

.sk-meta-desc::placeholder { color: var(--sk-muted); }

.sk-meta-desc:focus {
  border-color: var(--sk-accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
  color: var(--sk-text);
}

/* ---- 适用范围 ---- */
.sk-scope-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sk-scope-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--sk-muted);
  white-space: nowrap;
}

.sk-meta-icon { color: var(--sk-muted); flex-shrink: 0; }

.sk-scope-select {
  padding: 5px 28px 5px 10px;
  border: 1px solid var(--sk-border);
  border-radius: 8px;
  background: var(--sk-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B8698' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center;
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  font-size: 15px;
  color: var(--sk-text);
  cursor: pointer;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.sk-scope-select:focus {
  border-color: var(--sk-accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}

/* option 深色 */
.sk-scope-select option { background: var(--sk-panel); color: var(--sk-text); }

/* 无工作簿时替代提示 */
.sk-scope-no-workbook {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--sk-warn-bg);
  border: 1px solid rgba(146,64,14,.35);
  font-size: 15px;
  color: var(--sk-warn-text);
}

.sk-scope-no-workbook svg { color: #f59e0b; flex-shrink: 0; }

/* ---- 标签输入 ---- */
.sk-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.sk-tag-input {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--sk-border);
  border-radius: 8px;
  background: var(--sk-bg);
  cursor: text;
  transition: border-color .2s, box-shadow .2s;
}

.sk-tag-input:focus-within {
  border-color: var(--sk-accent);
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}

.sk-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--sk-accent-bg);
  color: #a5b4fc;
  font-size: 14px;
  font-weight: 500;
}

.sk-tag-pill button {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: rgba(165,180,252,.5);
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  transition: color .15s;
}

.sk-tag-pill button:hover { color: var(--sk-danger); }

.sk-tag-input-field {
  border: none;
  outline: none;
  font-size: 15px;
  color: var(--sk-text);
  background: transparent;
  min-width: 60px;
}

.sk-tag-input-field::-moz-placeholder { color: rgba(139,134,152,.5); }

.sk-tag-input-field::placeholder { color: rgba(139,134,152,.5); }

/* ============================================================================
 * 步骤构建器容器
 * ============================================================================ */

.sk-builder-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  border-top: 1px solid var(--sk-border);
}

/* 步骤构建器主体区 */
.sk-builder-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 14px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(99,102,241,.2) transparent;
}

.sk-builder-main::-webkit-scrollbar { width: 4px; }
.sk-builder-main::-webkit-scrollbar-thumb { background: rgba(99,102,241,.2); border-radius: 2px; }

/* 右侧工作表预览面板 */
.sk-md-panel {
  flex-shrink: 0;
  min-width: 33%;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--sk-border);
  background: var(--sk-panel);
  overflow: hidden;
}

.sk-md-resizer {
  width: 10px;
  border: none;
  padding: 0;
  margin: 0;
  cursor: col-resize;
  background: linear-gradient(180deg, rgba(99,102,241,.08), rgba(99,102,241,.18), rgba(99,102,241,.08));
  border-left: 1px solid rgba(99,102,241,.18);
  border-right: 1px solid rgba(99,102,241,.18);
  transition: background .15s;
  flex-shrink: 0;
}

.sk-md-resizer:hover,
.sk-md-resizer.is-active {
  background: linear-gradient(180deg, rgba(99,102,241,.18), rgba(99,102,241,.35), rgba(99,102,241,.18));
}

.sk-sheet-preview-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  background: rgba(0,0,0,.16);
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(99,102,241,.2) transparent;
}

.sk-sheet-preview-wrap::-webkit-scrollbar { width: 4px; height: 4px; }
.sk-sheet-preview-wrap::-webkit-scrollbar-thumb { background: rgba(99,102,241,.2); border-radius: 2px; }

.sk-sheet-preview-table {
  border-collapse: collapse;
  width: -moz-max-content;
  width: max-content;
  min-width: 100%;
  table-layout: fixed;
}

.sk-sheet-preview-table th,
.sk-sheet-preview-table td {
  border: 1px solid var(--sk-border);
  padding: 6px 7px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--sk-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: none;
}

.sk-sheet-preview-table td.sk-sheet-cell-touched {
  box-shadow: inset 0 0 0 1.5px rgba(168, 85, 247, .95);
  background-image: linear-gradient(0deg, rgba(168,85,247,.15), rgba(168,85,247,.15));
}

.sk-sheet-preview-table thead th {
  position: sticky;
  top: 0;
  background: #2a2840;
  color: #c4b5fd;
  z-index: 1;
}

.sk-sheet-preview-table tbody th {
  position: sticky;
  left: 0;
  background: #2a2840;
  color: #c4b5fd;
  z-index: 1;
}

.sk-sheet-preview-corner {
  left: 0;
  z-index: 2 !important;
}

.sk-sheet-preview-empty {
  padding: 14px;
  color: var(--sk-muted);
  font-size: 14px;
}

/* ============================================================================
 * 底部操作栏
 * ============================================================================ */

.sk-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  background: var(--sk-panel);
  border-top: 1px solid var(--sk-border);
  gap: 12px;
  flex-shrink: 0;
}

.sk-status { flex: 1; font-size: 15px; }

.sk-status-sandbox-info {
  display: inline-flex;
  align-items: center;
  color: #a5b4fc;
  background: rgba(99,102,241,.12);
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 999px;
  padding: 4px 10px;
}

.sk-status-sandbox-pending {
  display: inline-flex;
  align-items: center;
  color: #fcd34d;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.35);
  border-radius: 999px;
  padding: 4px 10px;
}

.sk-status-error {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--sk-danger);
}

.sk-status-success {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--sk-success);
}

.sk-bottom-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.sk-bottom-actions-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 0;
}

.sk-action-notice {
  max-width: 760px;
  font-size: 13px;
  color: #c4b5fd;
  background: rgba(99,102,241,.10);
  border: 1px solid rgba(99,102,241,.28);
  border-radius: 8px;
  padding: 4px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- SKILL.md 底部预览 ---- */
.sk-md-preview {
  border-top: 1px solid var(--sk-border);
  background: var(--sk-panel);
  flex-shrink: 0;
}

.sk-md-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 16px;
}

.sk-md-copy-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 13px;
  border: 1px solid rgba(99,102,241,.35);
  border-radius: 4px;
  background: transparent;
  color: var(--sk-accent);
  cursor: pointer;
  transition: all .15s;
}

.sk-md-copy-btn:hover {
  background: rgba(99,102,241,.12);
  border-color: var(--sk-accent);
}

.sk-md-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 24px;
  font-size: 15px;
  color: var(--sk-muted);
  background: none;
  border: none;
  cursor: pointer;
  flex: 1;
  text-align: left;
  transition: color .15s;
}

.sk-md-toggle:hover { color: var(--sk-accent); }

.sk-md-content {
  padding: 12px 24px;
  margin: 0;
  font-size: 14px;
  font-family: 'Fira Code', 'SFMono-Regular', Consolas, monospace;
  color: #a5b4fc;
  background: rgba(0,0,0,.16);
  border-top: 1px solid var(--sk-border);
  max-height: 220px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.6;
}

/* ============================================================================
 * 通用按钮
 * ============================================================================ */

.sk-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
}

.sk-btn-sm { padding: 5px 10px; font-size: 15px; }

.sk-btn-primary {
  background: linear-gradient(135deg, var(--sk-accent), var(--sk-accent-2));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(99,102,241,.35);
}

.sk-btn-primary:hover {
  background: linear-gradient(135deg, var(--sk-accent-h), var(--sk-accent));
  box-shadow: 0 4px 14px rgba(99,102,241,.5);
  transform: translateY(-1px);
}

.sk-btn-ghost {
  background: var(--sk-accent-bg);
  color: #a5b4fc;
  border-color: rgba(99,102,241,.25);
}

.sk-btn-ghost:hover {
  background: var(--sk-accent-bg-s);
  border-color: rgba(99,102,241,.45);
}

.sk-btn-accent {
  background: linear-gradient(135deg, var(--sk-accent-2), var(--sk-accent-3));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(139,92,246,.35);
}

.sk-btn-accent:hover {
  background: linear-gradient(135deg, var(--sk-accent), var(--sk-accent-2));
  box-shadow: 0 4px 14px rgba(139,92,246,.5);
  transform: translateY(-1px);
}

.sk-btn-accent:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* 执行 Skill 按钮：突出显示 */
.sk-run-btn {
  gap: 5px;
  font-weight: 600;
  letter-spacing: .3px;
  padding: 6px 16px !important;
  animation: sk-run-pulse 2.5s ease-in-out infinite;
}
.sk-run-btn:disabled { animation: none; }
@keyframes sk-run-pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(139,92,246,.35); }
  50%      { box-shadow: 0 2px 16px rgba(139,92,246,.55); }
}

.sk-btn-danger {
  background: var(--sk-danger-bg);
  color: var(--sk-danger);
  border-color: rgba(248,113,113,.25);
}

.sk-btn-danger:hover {
  background: rgba(248,113,113,.18);
  border-color: rgba(248,113,113,.4);
}

/* 加载旋转 */
@keyframes sk-spin { to { transform: rotate(360deg); } }
.sk-spin { animation: sk-spin .8s linear infinite; }

/* ============================================================================
 * SkillStepBuilder 步骤构建器
 * ============================================================================ */

.skill-step-builder {
  display: flex;
  height: 100%;
  gap: 14px;
  overflow: hidden;
}

/* ---- 调色板 ---- */
.skill-palette {
  width: 200px;
  min-width: 180px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--sk-panel);
  border-radius: var(--sk-radius);
  border: 1px solid var(--sk-border);
}

.skill-palette-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--sk-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--sk-border);
  flex-shrink: 0;
}

.skill-palette-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 4px 6px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(99,102,241,.2) transparent;
  min-height: 0;
}

.skill-palette-scroll::-webkit-scrollbar { width: 3px; }
.skill-palette-scroll::-webkit-scrollbar-thumb { background: rgba(99,102,241,.2); border-radius: 2px; }

.skill-palette-hint {
  font-size: 15px;
  color: #a5b4fc;
  text-align: center;
  padding: 6px 8px;
  border-top: 1px dashed var(--sk-border);
  background: rgba(99,102,241,.05);
  flex-shrink: 0;
}

.skill-palette-category { margin-bottom: 2px; }

.skill-palette-cat-header {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 5px 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  color: #a5b4fc;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transition: color .15s;
}

.skill-palette-cat-header:hover { color: #c4b5fd; }

.skill-palette-ops {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 0 2px 4px;
}

.skill-palette-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 7px 3px 4px;
  border-radius: 5px;
  background: var(--sk-card);
  border: 1px solid var(--sk-border);
  font-size: 14px;
  color: var(--sk-text-s);
  cursor: grab;
  transition: all .15s;
  position: relative;
}

.skill-palette-chip:hover {
  background: var(--sk-elevated);
  border-color: rgba(99,102,241,.4);
  color: #c4b5fd;
  box-shadow: 0 2px 8px rgba(99,102,241,.2);
  transform: translateX(2px);
}

.skill-palette-chip:active { cursor: grabbing; }
.skill-palette-grip { color: rgba(139,134,152,.4); flex-shrink: 0; }

/* ---- 步骤画布 ---- */
.skill-canvas {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.skill-canvas-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--sk-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.skill-canvas-count {
  font-size: 14px;
  padding: 1px 7px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--sk-accent), var(--sk-accent-2));
  color: #fff;
  font-weight: 700;
}

.skill-steps-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(99,102,241,.2) transparent;
}

.skill-steps-list::-webkit-scrollbar { width: 3px; }
.skill-steps-list::-webkit-scrollbar-thumb { background: rgba(99,102,241,.2); border-radius: 2px; }

.skill-drop-zone {
  margin-top: 8px;
  border: 2px dashed rgba(99,102,241,.35);
  border-radius: var(--sk-radius);
  padding: 12px;
  text-align: center;
  font-size: 15px;
  color: #a5b4fc;
  transition: all .2s;
  background: rgba(99,102,241,.05);
  flex-shrink: 0;
}

.skill-drop-zone.active {
  border-color: var(--sk-accent);
  background: rgba(99,102,241,.1);
  color: #a5b4fc;
}

/* ---- 步骤卡片 ---- */
.skill-step-card {
  margin-bottom: 5px;
  border-radius: 8px;
  background: var(--sk-card);
  border: 1px solid var(--sk-border);
  border-left: 3px solid var(--sk-accent);
  transition: box-shadow .15s, background .15s;
}

.skill-step-card:hover {
  background: var(--sk-elevated);
  box-shadow: var(--sk-shadow-s);
}

.skill-step-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
}

.skill-step-drag-handle {
  color: rgba(139,134,152,.3);
  cursor: grab;
  flex-shrink: 0;
  transition: color .15s;
}

.skill-step-card:hover .skill-step-drag-handle { color: rgba(139,134,152,.7); }
.skill-step-drag-handle:active { cursor: grabbing; }

.skill-step-num {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sk-accent), var(--sk-accent-2));
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.skill-step-label-input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: var(--sk-text);
  padding: 0;
}

.skill-step-label-input:focus { color: #c4b5fd; }
.skill-step-label-input::-moz-placeholder { color: rgba(139,134,152,.45); }
.skill-step-label-input::placeholder { color: rgba(139,134,152,.45); }

.skill-step-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.skill-step-desc-inline {
  font-size: 12px;
  color: var(--sk-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skill-step-op-badge {
  font-size: 15px;
  font-family: 'Fira Code', monospace;
  color: #a5b4fc;
  background: var(--sk-accent-bg);
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-step-toggle,
.skill-step-delete {
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 5px;
  color: var(--sk-muted);
  transition: background .15s, color .15s;
  flex-shrink: 0;
}

.skill-step-toggle:hover { background: rgba(255,255,255,.06); color: var(--sk-text); }
.skill-step-delete:hover { background: var(--sk-danger-bg); color: var(--sk-danger); }

/* ---- 参数编辑器 ---- */
.skill-step-params {
  border-top: 1px solid var(--sk-border);
  padding: 8px 12px;
  background: rgba(0,0,0,.12);
}

.skill-params-editor { display: flex; flex-direction: column; gap: 5px; }

.skill-param-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--sk-card);
  border: 1px solid var(--sk-border);
  border-radius: 6px;
  padding: 4px 8px;
}

.skill-param-key {
  font-size: 14px;
  font-weight: 600;
  color: #a5b4fc;
  min-width: 60px;
  font-family: 'Fira Code', monospace;
}

.skill-param-val {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  background: transparent;
  color: var(--sk-text);
  font-family: 'Fira Code', monospace;
}

.skill-param-val:focus { color: #c4b5fd; }

.skill-param-del {
  border: none;
  background: rgba(248,113,113,.08);
  color: #fca5a5;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 5px;
  transition: color .15s, background .15s, transform .1s;
  flex-shrink: 0;
}

.skill-param-del:hover { color: #fecaca; background: rgba(248,113,113,.2); }
.skill-param-del:active { transform: scale(.96); }

.skill-param-add-row {
  display: flex;
  gap: 5px;
  align-items: center;
}

.skill-param-new-key,
.skill-param-new-val {
  flex: 1;
  padding: 4px 8px;
  border: 1px dashed rgba(99,102,241,.25);
  border-radius: 5px;
  font-size: 14px;
  background: rgba(99,102,241,.04);
  outline: none;
  color: var(--sk-text);
  font-family: 'Fira Code', monospace;
}

.skill-param-new-key::-moz-placeholder, .skill-param-new-val::-moz-placeholder { color: rgba(139,134,152,.4); }

.skill-param-new-key::placeholder,
.skill-param-new-val::placeholder { color: rgba(139,134,152,.4); }

.skill-param-new-key:focus,
.skill-param-new-val:focus {
  border-color: var(--sk-accent);
  background: rgba(99,102,241,.08);
}

.skill-param-add-btn {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: none;
  background: linear-gradient(135deg, var(--sk-accent), var(--sk-accent-2));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity .15s;
}

.skill-param-add-btn:hover { opacity: .8; }

.skill-param-reset-btn {
  border: 1px solid rgba(99,102,241,.35);
  background: rgba(99,102,241,.12);
  color: #c4b5fd;
  border-radius: 5px;
  font-size: 14px;
  padding: 3px 8px;
  cursor: pointer;
  transition: all .15s;
}

.skill-param-reset-btn:hover {
  background: rgba(99,102,241,.2);
  border-color: rgba(99,102,241,.55);
}

.skill-param-vars-hint {
  font-size: 15px;
  color: #c4b5fd;
  margin-top: 4px;
  line-height: 1.5;
  background: rgba(99,102,241,.08);
  border: 1px solid rgba(99,102,241,.25);
  border-radius: 6px;
  padding: 6px 8px;
}

.skill-param-schema {
  margin-top: 4px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.skill-param-schema-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: #d1d5db;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(99,102,241,.15);
  border-radius: 5px;
  padding: 4px 6px;
}

.skill-param-schema-item code {
  color: #a5b4fc;
  background: rgba(99,102,241,.12);
  border-radius: 4px;
  padding: 0 4px;
  font-family: 'Fira Code', monospace;
  white-space: nowrap;
}

.skill-param-var-scenes {
  margin-top: 4px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}

.skill-param-var-scene {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: #d1d5db;
  background: rgba(99,102,241,.04);
  border: 1px dashed rgba(99,102,241,.22);
  border-radius: 5px;
  padding: 4px 6px;
}

.skill-param-var-scene.is-muted {
  opacity: 0.52;
  border-color: rgba(139,134,152,.24);
  background: rgba(139,134,152,.06);
}

.skill-param-var-scene code {
  color: #c4b5fd;
  background: rgba(99,102,241,.16);
  border-radius: 4px;
  padding: 0 4px;
  font-family: 'Fira Code', monospace;
  white-space: nowrap;
}

.skill-param-var-scene em {
  margin-left: auto;
  font-style: normal;
  font-size: 13px;
  color: #22c55e;
  white-space: nowrap;
}

.skill-param-var-scene.is-muted em {
  color: #f59e0b;
}

.skill-param-vars-hint code {
  background: var(--sk-accent-bg);
  padding: 0 3px;
  border-radius: 3px;
  font-family: 'Fira Code', monospace;
  color: #a5b4fc;
  margin: 0 1px;
}

.skill-param-vars-hint code.is-muted {
  opacity: .45;
}

/* ============================================================================
 * 顶部导航 - 玩数据Skill 特殊按钮（不受深色背景影响）
 * ============================================================================ */

.header-skill-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px 5px 10px;
  margin-left: 6px;
  border: none;
  border-radius: 20px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s ease;
  box-shadow: 0 2px 8px rgba(99,102,241,.35);
  letter-spacing: 0.01em;
  flex-shrink: 0;
}

.header-skill-tab:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%);
  box-shadow: 0 4px 14px rgba(99,102,241,.55);
  transform: translateY(-1px);
}

.header-skill-tab.active {
  background: linear-gradient(135deg, #4338ca 0%, #6d28d9 50%, #7e22ce 100%);
  box-shadow: 0 4px 16px rgba(99,102,241,.65), inset 0 1px 0 rgba(255,255,255,.15);
  transform: translateY(-1px);
}

.header-skill-tab-icon {
  flex-shrink: 0;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.6));
}

.header-skill-tab:hover .header-skill-tab-icon,
.header-skill-tab.active .header-skill-tab-icon {
  animation: skill-zap-pulse .7s ease-in-out infinite alternate;
}

@keyframes skill-zap-pulse {
  0%   { filter: drop-shadow(0 0 2px rgba(255,255,255,.4)); transform: scale(1); }
  100% { filter: drop-shadow(0 0 6px rgba(255,255,255,.95)); transform: scale(1.15); }
}

.header-skill-tab-label { flex-shrink: 0; }

.header-skill-tab-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(255,255,255,.22);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255,255,255,.35);
  flex-shrink: 0;
  margin-left: 1px;
}

/* ============================================================================
 * v2 参数 UI 组件样式 (SkillParamWidgets)
 * ============================================================================ */

/* ---- 技能箱搜索框 ---- */

.skill-palette-search {
  padding: 4px 8px;
}

.skill-palette-search-input {
  width: 100%;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--sk-border);
  background: var(--sk-card);
  color: var(--sk-text);
  font-size: 13px;
  outline: none;
  transition: border-color .2s;
}

.skill-palette-search-input:focus {
  border-color: var(--sk-accent);
}

.skill-palette-search-input::-moz-placeholder { color: var(--sk-muted); }

.skill-palette-search-input::placeholder { color: var(--sk-muted); }

.skill-palette-cat-count {
  margin-left: auto;
  font-size: 13px;
  color: var(--sk-muted);
  font-weight: 400;
}

/* ---- 类型化参数编辑器 ---- */

.skw-params-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 4px;
}

.skw-param-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}

.skw-param-label {
  flex: 0 0 auto;
  min-width: 90px;
  max-width: 120px;
  font-size: 13px;
  color: var(--sk-text-s);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skw-required {
  color: var(--sk-danger);
  margin-left: 2px;
  font-weight: 700;
}

.skw-param-control {
  flex: 1;
  min-width: 0;
}

.skw-live-meta {
  margin-top: 5px;
  font-size: 12px;
  color: var(--sk-text-d);
}

.skw-empty-params {
  padding: 12px 0;
  text-align: center;
  color: var(--sk-muted);
  font-size: 13px;
}

/* ---- 通用输入框 ---- */

.skw-input {
  width: 100%;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--sk-border);
  background: var(--sk-card);
  color: var(--sk-text);
  font-size: 13px;
  outline: none;
  transition: border-color .2s;
  box-sizing: border-box;
}

.skw-input:focus {
  border-color: var(--sk-accent);
  box-shadow: 0 0 0 2px rgba(99,102,241,.15);
}

.skw-input::-moz-placeholder { color: rgba(139,134,152,.5); }

.skw-input::placeholder { color: rgba(139,134,152,.5); }

.skw-input-narrow {
  max-width: 80px;
}

/* ---- RangeInput / CellInput ---- */

.skw-range-input {
  display: flex;
  align-items: center;
  gap: 4px;
}

.skw-range-input .skw-input { flex: 1; }

.skw-select-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--sk-border);
  background: var(--sk-elevated);
  color: var(--sk-accent);
  cursor: pointer;
  transition: all .2s;
  flex-shrink: 0;
}

.skw-select-btn:hover {
  background: var(--sk-accent-bg);
  border-color: var(--sk-accent);
  box-shadow: 0 0 8px rgba(99,102,241,.3);
}

.skw-select-btn:active { transform: scale(.95); }

/* ---- ColorPicker ---- */

.skw-color-picker {
  position: relative;
}

.skw-color-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.skw-color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 2px solid var(--sk-border);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
  flex-shrink: 0;
}

.skw-color-swatch:hover {
  border-color: var(--sk-accent);
  box-shadow: 0 0 6px rgba(99,102,241,.4);
}

.skw-color-text {
  max-width: 90px;
  font-family: 'Consolas', monospace;
  font-size: 13px;
}

.skw-color-native {
  width: 28px;
  height: 28px;
  border: none;
  padding: 0;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  flex-shrink: 0;
}

.skw-color-palette {
  position: absolute;
  top: 34px;
  left: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(6, 28px);
  gap: 3px;
  padding: 8px;
  background: var(--sk-elevated);
  border: 1px solid var(--sk-border);
  border-radius: 8px;
  box-shadow: var(--sk-shadow-m);
}

.skw-color-cell {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s, border-color .15s;
}

.skw-color-cell:hover { transform: scale(1.15); }
.skw-color-cell.is-active { border-color: #fff; box-shadow: 0 0 4px rgba(255,255,255,.5); }

/* ---- NumberInput ---- */

.skw-number-input {
  display: flex;
  align-items: center;
  gap: 0;
}

.skw-num-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--sk-border);
  background: var(--sk-elevated);
  color: var(--sk-text-s);
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  transition: all .15s;
}

.skw-num-btn:first-child { border-radius: 6px 0 0 6px; }
.skw-num-btn:last-child  { border-radius: 0 6px 6px 0; }
.skw-num-btn:hover { background: var(--sk-accent-bg); color: var(--sk-accent); }
.skw-num-btn:active { transform: scale(.95); }

.skw-number-input .skw-input {
  border-radius: 0;
  border-left: none;
  border-right: none;
  text-align: center;
  max-width: 70px;
}

/* ---- BooleanToggle ---- */

.skw-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 36px;
  height: 20px;
  border: none;
  border-radius: 10px;
  background: var(--sk-border);
  cursor: pointer;
  padding: 0;
  transition: background .2s;
}

.skw-toggle.is-on { background: var(--sk-accent); }

.skw-toggle-track { display: none; }

.skw-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: left .2s;
}

.skw-toggle.is-on .skw-toggle-thumb { left: 18px; }

/* ---- SelectInput ---- */

.skw-select {
  width: 100%;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--sk-border);
  background: var(--sk-card);
  color: var(--sk-text);
  font-size: 13px;
  outline: none;
  cursor: pointer;
  transition: border-color .2s;
  -webkit-appearance: auto;
     -moz-appearance: auto;
          appearance: auto;
}

.skw-select:focus { border-color: var(--sk-accent); }

/* ---- FormulaInput ---- */

.skw-formula-input {
  display: flex;
  align-items: center;
  gap: 0;
}

.skw-formula-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px 0 0 6px;
  border: 1px solid var(--sk-border);
  border-right: none;
  background: var(--sk-elevated);
  color: var(--sk-accent);
  font-size: 13px;
  font-weight: 700;
  font-style: italic;
  flex-shrink: 0;
}

.skw-formula-input .skw-input {
  border-radius: 0 6px 6px 0;
  font-family: 'Consolas', monospace;
}

/* ---- 变量提示（精简版） ---- */

.skw-vars-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(99,102,241,.06);
  border: 1px solid rgba(99,102,241,.12);
  font-size: 13px;
  color: var(--sk-muted);
  flex-wrap: wrap;
  margin-top: 4px;
}

.skw-vars-hint code {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(99,102,241,.12);
  color: var(--sk-accent);
  font-size: 13px;
  font-family: 'Consolas', monospace;
}

/* ---- 恢复默认按钮 ---- */

.skw-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--sk-border);
  background: transparent;
  color: var(--sk-muted);
  font-size: 13px;
  cursor: pointer;
  transition: all .2s;
  align-self: flex-start;
}

.skw-reset-btn:hover {
  border-color: var(--sk-accent);
  color: var(--sk-accent);
  background: var(--sk-accent-bg);
}

/* ============================================================================
 * 范围选择交互样式
 * ============================================================================ */

.sk-range-select-hint {
  padding: 6px 10px;
  background: var(--sk-accent-bg);
  border-bottom: 1px solid var(--sk-accent);
  color: var(--sk-accent);
  font-size: 13px;
  text-align: center;
  animation: sk-range-hint-pulse 1.5s ease-in-out infinite;
}

@keyframes sk-range-hint-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .6; }
}

.sk-sheet-preview-wrap.sk-selecting {
  cursor: crosshair;
}

.sk-sheet-preview-wrap.sk-selecting td {
  cursor: crosshair;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.sk-sheet-preview-table td.sk-sheet-cell-selected {
  background: rgba(99, 102, 241, 0.25) !important;
  outline: 2px solid var(--sk-accent);
  outline-offset: -1px;
}

/* 批注指示器：右上角红色三角 */
.sk-sheet-preview-table td.sk-cell-has-comment {
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, 0.45);
}
.sk-sheet-preview-table td.sk-cell-has-comment::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 10px solid #ef4444;
  border-left: 10px solid transparent;
}

/* 超链接指示：蓝色下划线 */
.sk-sheet-preview-table td.sk-cell-has-link {
  color: #60a5fa !important;
  text-decoration: underline;
  cursor: pointer;
}

/* 数据验证指示：右上角青色小三角 */
.sk-sheet-preview-table td.sk-cell-has-validation {
  position: relative;
}
.sk-sheet-preview-table td.sk-cell-has-validation::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 10px solid #f59e0b;
  border-left: 10px solid transparent;
}

/* 单元格内徽标：提升可见性 */
.sk-sheet-preview-table td.sk-cell-has-validation::after {
  content: 'DV';
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: 9px;
  line-height: 1;
  color: #fbbf24;
  font-weight: 700;
  letter-spacing: 0.2px;
  opacity: 0.95;
  pointer-events: none;
}
/* ============================================================
   报表系统 CSS — 深色模式 + 动画 + 响应式 + 专业排版
   ============================================================ */

/* ── 通用动画 ─────────────────────────────────── */
@keyframes reportFadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes reportSlideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes reportPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.report-fade-in {
  animation: reportFadeIn 0.5s ease-out forwards;
}
.report-hidden {
  opacity: 0;
}

/* ── ReportView 容器 ──────────────────────────── */
.report-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  background: var(--bg-primary, #1E1E1E);
  color: var(--text-primary, #E5E5E5);
  overflow: hidden;
}

/* 当report-view在content-placeholder-panel内时，移除外层padding对滚动条的影响 */
.content-placeholder-panel .report-view {
  margin: -40px !important;
  width: calc(100% + 80px) !important;
  height: calc(100% + 80px) !important;
}

/* ── 顶部工具栏 ──────────────────────────────── */
.report-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: var(--bg-secondary, #252525);
  border-bottom: 1px solid var(--border-primary, #333);
  flex-shrink: 0;
}
.report-back-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid var(--border-primary, #444);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary, #B3B3B3);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}
.report-back-btn:hover {
  background: var(--bg-tertiary, #2A2A2A);
  color: var(--text-primary, #E5E5E5);
}
.report-toolbar-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary, #E5E5E5);
  flex: 1;
}
.report-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.report-inline-notice {
  margin: 0 auto 16px;
  max-width: none;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #7f1d1d;
  border-radius: 8px;
  background: rgba(127, 29, 29, 0.18);
  color: #fecaca;
  font-size: 14px;
}
.report-empty-file-hint {
  width: 100%;
  margin: 0 auto;
  padding: 8px 0 4px;
  text-align: center;
}
.report-empty-file-title {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary, #E5E5E5);
}
.report-empty-file-desc {
  margin: 0 0 12px;
  font-size: 16px;
  color: var(--text-secondary, #B3B3B3);
}
.report-empty-file-note {
  margin: 0;
  font-size: 16px;
  color: var(--accent-primary, #4ECDC4);
}
.report-domain-quickbar {
  max-width: none;
  width: 100%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.report-domain-quickbar-label {
  color: #94a3b8;
  font-size: 13px;
}
.report-domain-quick-btn {
  border: 1px solid #334155;
  background: rgba(15, 23, 42, 0.45);
  color: #cbd5e1;
  border-radius: 999px;
  font-size: 13px;
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.report-domain-quick-btn:hover:not(:disabled) {
  border-color: #60a5fa;
  color: #e2e8f0;
}
.report-domain-quick-btn.active {
  background: rgba(59, 130, 246, 0.2);
  border-color: #60a5fa;
  color: #bfdbfe;
}
.report-domain-quick-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.report-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border-primary, #444);
  background: var(--bg-tertiary, #2A2A2A);
  color: var(--text-secondary, #E5E5E5);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}
.report-toolbar-btn:hover:not(:disabled) {
  border-color: var(--accent-primary, #217346);
  background: #2f2f2f;
}
.report-toolbar-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.report-toolbar-btn-primary {
  background: rgba(33, 115, 70, 0.2);
  border-color: var(--accent-primary, #217346);
  color: #34D399;
}
.report-toolbar-btn-primary:hover:not(:disabled) {
  background: rgba(33, 115, 70, 0.35);
}

/* ── 主内容区 ─────────────────────────────────── */
.report-view .report-content {
  flex: 1;
  width: 100% !important;
  max-width: none !important;
  overflow-y: auto;
  padding: 12px 32px 16px 32px !important;
  padding-right: 0 !important;
}

.report-content-inner {
  width: 100%;
  margin: 0 auto;
  max-width: none;
  padding-right: 32px;
}

/* 强制主区域按 99% 展开（兜底旧样式/缓存覆盖） */
.report-view .report-inline-notice,
.report-view .report-domain-quickbar,
.report-view .report-template-stage,
.report-view .report-template-selector,
.report-view .report-history-panel,
.report-view .report-completed {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── 加载 / 错误状态 ─────────────────────────── */
.report-loading,
.report-generating,
.report-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 300px;
  color: var(--text-tertiary, #B3B3B3);
  font-size: 14px;
}
.report-progress-msg {
  animation: reportPulse 1.5s infinite;
}
.report-error { color: #F87171; }
.report-template-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 200px;
  color: var(--text-tertiary, #B3B3B3);
  font-size: 14px;
}
.report-retry-btn {
  padding: 8px 20px;
  background: var(--accent-primary, #217346);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
.report-retry-btn:hover { opacity: 0.9; }

/* ── 模板选择器 ──────────────────────────────── */
.report-template-selector {
  max-width: none;
  width: 100%;
  margin: 0 auto;
  animation: reportFadeIn 0.4s ease-out;
}
.report-template-title {
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 24px;
  color: var(--text-primary, #FFFFFF);
}
.report-template-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.report-template-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  background: var(--bg-secondary, #252525);
  border: 2px solid var(--border-primary, #333);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.25s;
  text-align: center;
}
.report-template-card:hover {
  border-color: var(--accent-primary, #217346);
  background: var(--bg-tertiary, #2A2A2A);
  transform: translateY(-2px);
}
.report-template-card.selected {
  border-color: var(--accent-primary, #217346);
  background: rgba(33, 115, 70, 0.12);
  box-shadow: 0 0 0 1px var(--accent-primary, #217346);
}
.report-template-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #000;
  font-size: 10px;
  font-weight: 600;
  border-radius: 4px;
}
.report-template-icon {
  color: var(--accent-primary, #34D399);
}
.report-template-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #E5E5E5);
}
.report-template-desc {
  font-size: 13px;
  color: var(--text-tertiary, #B3B3B3);
  line-height: 1.4;
}

/* ── 生成按钮 ─────────────────────────────────── */
.report-generate-actions {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.report-generate-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 40px;
  background: linear-gradient(135deg, var(--accent-primary, #217346), #2A9058);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
}
.report-generate-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(33, 115, 70, 0.4);
}
.report-generate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── 历史报表首页 ─────────────────────────────── */
.report-history-panel {
  max-width: none;
  width: 100%;
  margin: 32px auto 0;
  background: var(--bg-secondary, #252525);
  border: 1px solid var(--border-primary, #333);
  border-radius: 12px;
  padding: 16px;
}
.report-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.report-history-header h3 {
  margin: 0;
  font-size: 17px;
  color: var(--text-primary, #E5E5E5);
}
.report-history-refresh-link {
  margin-left: 8px;
  border: none;
  background: transparent;
  color: #93c5fd;
  font-size: 15px;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}
.report-history-refresh-link:hover:not(:disabled) {
  text-decoration: underline;
}
.report-history-refresh-link:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.report-history-actions {
  display: flex;
  gap: 8px;
}
.report-history-refresh-btn,
.report-history-generate-btn {
  padding: 8px 12px;
  font-size: 14px;
}
.report-history-table-wrap {
  overflow: auto;
}
.report-history-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}
.report-history-table th,
.report-history-table td {
  border-bottom: 1px solid var(--border-primary, #333);
  padding: 10px 8px;
  text-align: left;
  font-size: 15px;
}
.report-history-table th {
  color: var(--text-tertiary, #B3B3B3);
  font-weight: 500;
}
.report-history-table td {
  color: var(--text-secondary, #E5E5E5);
}
.report-history-empty {
  text-align: center !important;
  color: var(--text-tertiary, #B3B3B3) !important;
  padding: 20px 0 !important;
}
.report-history-open-link {
  border: none;
  background: transparent;
  color: #93c5fd;
  padding: 0;
  cursor: pointer;
  text-align: left;
}
.report-history-open-link:hover:not(:disabled) {
  text-decoration: underline;
}
.report-history-open-link:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.report-history-row-actions {
  display: flex;
  gap: 8px;
}
.report-history-pagination {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.report-history-page-btn {
  border: 1px solid #334155;
  background: rgba(15, 23, 42, 0.45);
  color: #cbd5e1;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 13px;
  cursor: pointer;
}
.report-history-page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.report-history-page-info {
  font-size: 13px;
  color: #94a3b8;
}

/* ── ReportCanvas (报表画布) ─────────────────── */
.report-canvas {
  max-width: none;
  width: 100%;
  margin: 0 auto;
}
.report-canvas.report-canvas-export-light {
  background: #ffffff;
  color: #000000;
  border-radius: 8px;
}
.report-canvas-export-pdf {
  max-width: 1080px;
}
.report-canvas-export-pdf .report-canvas-header {
  padding: 18px 12px 12px;
}
.report-canvas-export-pdf .report-canvas-title {
  font-size: 22px;
}
.report-canvas-export-pdf .report-section {
  margin-bottom: 20px;
}
.report-canvas-export-pdf .report-charts-grid {
  grid-template-columns: 1fr;
  gap: 14px;
}
.report-canvas-export-pdf .report-chart-section {
  padding: 12px;
}
.report-canvas-export-pdf .report-kpi-grid {
  gap: 10px;
}
.report-canvas-export-pdf .report-kpi-card {
  padding: 14px;
}
.report-canvas-export-pdf .report-kpi-value {
  font-size: 24px;
}
.report-canvas-export-pdf .report-canvas-footer {
  margin-top: 14px;
  padding: 14px;
}
.report-canvas-export-light,
.report-canvas-export-light * {
  color: #000000 !important;
}
.report-canvas-export-light .report-hidden {
  opacity: 1 !important;
  transform: none !important;
}
.report-canvas-export-light .report-fade-in {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
.report-canvas-export-light .report-export-static {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
.report-canvas-export-light .report-canvas-title,
.report-canvas-export-light .report-insight-summary h3,
.report-canvas-export-light .report-insight-block h3,
.report-canvas-export-light .report-insight-paragraph h4,
.report-canvas-export-light .report-data-table-header h3,
.report-canvas-export-light .report-kpi-value {
  color: #000000 !important;
}
.report-canvas-export-light .report-canvas-meta,
.report-canvas-export-light .report-insight-summary p,
.report-canvas-export-light .report-insight-paragraph p,
.report-canvas-export-light .report-chart-insight-item,
.report-canvas-export-light .report-kpi-label,
.report-canvas-export-light .report-kpi-unit,
.report-canvas-export-light .report-canvas-footer,
.report-canvas-export-light .report-domain-evidence,
.report-canvas-export-light .report-data-table-toggle {
  color: #374151 !important;
}
.report-canvas-export-light .report-canvas-template {
  background: #e8f3ec !important;
  color: #000000 !important;
}
.report-canvas-export-light .report-domain-chip {
  border-color: #c7d2fe !important;
  background: #eef2ff !important;
  color: #000000 !important;
}
.report-canvas-export-light .report-kpi-card,
.report-canvas-export-light .report-chart-section,
.report-canvas-export-light .report-insight-section,
.report-canvas-export-light .report-data-table-section {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  box-shadow: none !important;
}
.report-canvas-export-light .report-insight-item.report-finding {
  background: #eff6ff !important;
  border-left-color: #3b82f6 !important;
}
.report-canvas-export-light .report-insight-item.report-recommendation {
  background: #ecfdf5 !important;
  border-left-color: #10b981 !important;
}
.report-canvas-export-light .report-fallback-notice {
  border-color: rgba(217, 119, 6, 0.35) !important;
  background: rgba(251, 191, 36, 0.14) !important;
}
.report-canvas-export-light .report-fallback-title {
  color: #92400E !important;
}
.report-canvas-export-light .report-fallback-reason,
.report-canvas-export-light .report-fallback-detail,
.report-canvas-export-light .report-fallback-hint,
.report-canvas-export-light .report-fallback-btn {
  color: #1F2937 !important;
}
.report-canvas-export-light .report-data-table th {
  background: #f9fafb !important;
  color: #000000 !important;
  border-bottom: 1px solid #d1d5db !important;
}
.report-canvas-export-light .report-data-table td {
  color: #000000 !important;
  border-bottom: 1px solid #e5e7eb !important;
}
.report-canvas-export-light .report-data-table tr:hover td {
  background: #f9fafb !important;
}
.report-canvas-export-light .report-chart-insights {
  border-top-color: #d1d5db !important;
}
.report-canvas-export-light .report-canvas-footer {
  border-top-color: #d1d5db !important;
}
.report-canvas-header {
  text-align: center;
  padding: 32px 20px 24px;
  animation: reportSlideUp 0.5s ease-out;
}
.report-canvas-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary, #FFFFFF);
  margin: 0 0 8px;
}
.report-canvas-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 14px;
  color: var(--text-tertiary, #B3B3B3);
}
.report-canvas-template {
  padding: 2px 10px;
  background: rgba(52, 211, 153, 0.15);
  color: #34D399;
  border-radius: 4px;
  font-size: 13px;
}
.report-domain-context {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.report-domain-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(96, 165, 250, 0.45);
  background: rgba(96, 165, 250, 0.12);
  color: #bfdbfe;
  font-size: 13px;
}
.report-domain-evidence {
  color: #94a3b8;
  font-size: 12px;
}

/* ── Sections ─────────────────────────────────── */
.report-section {
  margin-bottom: 48px;
}

/* ── KPI 卡片 ─────────────────────────────────── */
.report-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.report-kpi-card {
  padding: 20px;
  background: var(--bg-secondary, #252525);
  border: 1px solid var(--border-primary, #333);
  border-radius: 10px;
  text-align: center;
  animation: reportSlideUp 0.5s ease-out both;
  transition: transform 0.2s, box-shadow 0.2s;
}
.report-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.report-kpi-label {
  font-size: 13px;
  color: var(--text-tertiary, #B3B3B3);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.report-kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary, #FFFFFF);
  font-variant-numeric: tabular-nums;
}
.report-kpi-unit {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-tertiary, #B3B3B3);
  margin-left: 4px;
}

/* ── 图表区域 ─────────────────────────────────── */
.report-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.report-chart-section {
  background: var(--bg-secondary, #252525);
  border: 1px solid var(--border-primary, #333);
  border-radius: 10px;
  padding: 16px;
  animation: reportFadeIn 0.5s ease-out both;
}
.report-chart-insights {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(148, 163, 184, 0.25);
}
.report-chart-insight-item {
  margin: 6px 0;
  color: #cbd5e1;
  font-size: 16px;
  line-height: 1.75;
}

/* ── AI 洞察 ──────────────────────────────────── */
.report-insight-section {
  background: var(--bg-secondary, #252525);
  border: 1px solid var(--border-primary, #333);
  border-radius: 10px;
  padding: 28px;
}
.report-fallback-notice {
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid rgba(250, 204, 21, 0.4);
  background: rgba(250, 204, 21, 0.08);
}
.report-fallback-title {
  font-size: 15px;
  font-weight: 600;
  color: #FDE68A;
  margin-bottom: 8px;
}
.report-fallback-reason,
.report-fallback-detail,
.report-fallback-hint {
  margin: 6px 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary, #E5E5E5);
}
.report-fallback-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}
.report-fallback-btn {
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: transparent;
  color: var(--text-secondary, #E5E5E5);
  border-radius: 6px;
  font-size: 13px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.report-fallback-btn:hover {
  border-color: rgba(250, 204, 21, 0.8);
  color: #FDE68A;
}
.report-fallback-btn-primary {
  border-color: rgba(250, 204, 21, 0.8);
  background: rgba(250, 204, 21, 0.18);
  color: #FDE68A;
}
.report-insight-summary {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-primary, #333);
}
.report-insight-summary h3,
.report-insight-block h3 {
  font-size: 19px;
  font-weight: 600;
  color: var(--text-primary, #FFFFFF);
  margin: 0 0 10px;
}
.report-insight-summary p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary, #E5E5E5);
  margin: 0;
}
.report-insight-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.report-insight-item {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary, #E5E5E5);
}
.report-insight-item.report-finding {
  background: rgba(96, 165, 250, 0.08);
  border-left: 3px solid #60A5FA;
}
.report-insight-item.report-recommendation {
  background: rgba(52, 211, 153, 0.08);
  border-left: 3px solid #34D399;
}
.report-insight-block {
  margin-bottom: 20px;
}
.report-insight-details {
  margin-bottom: 20px;
}
.report-insight-paragraph {
  margin-bottom: 16px;
}
.report-insight-paragraph h4 {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #FFFFFF);
  margin: 0 0 6px;
}
.report-insight-paragraph p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary, #E5E5E5);
  margin: 0;
}

/* ── 数据表格 ─────────────────────────────────── */
.report-data-table-section {
  background: var(--bg-secondary, #252525);
  border: 1px solid var(--border-primary, #333);
  border-radius: 10px;
  overflow: hidden;
}
.report-data-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-primary, #333);
}
.report-data-table-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #FFFFFF);
  margin: 0;
}
.report-data-table-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-tertiary, #B3B3B3);
}
.report-data-table-wrapper {
  overflow-x: auto;
}
.report-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.report-data-table th {
  padding: 10px 14px;
  text-align: left;
  background: var(--bg-tertiary, #2A2A2A);
  color: var(--text-secondary, #E5E5E5);
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-primary, #333);
}
.report-data-table td {
  padding: 8px 14px;
  color: var(--text-secondary, #E5E5E5);
  border-bottom: 1px solid rgba(51, 51, 51, 0.5);
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.report-data-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* ── 导出工具栏 ──────────────────────────────── */
.report-export-bar {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.report-export-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-primary, #444);
  background: var(--bg-tertiary, #2A2A2A);
  color: var(--text-secondary, #E5E5E5);
  transition: all 0.2s;
}
.report-export-btn:hover:not(:disabled) {
  background: var(--bg-secondary, #252525);
  border-color: var(--accent-primary, #217346);
}
.report-export-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.report-export-share {
  background: rgba(52, 211, 153, 0.1);
  border-color: #34D399;
  color: #34D399;
}
.report-export-share:hover:not(:disabled) {
  background: rgba(52, 211, 153, 0.2);
}

/* ── 分享对话框 ──────────────────────────────── */
.report-share-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: reportFadeIn 0.2s ease-out;
}
.report-share-dialog {
  background: var(--bg-secondary, #252525);
  border: 1px solid var(--border-primary, #444);
  border-radius: 12px;
  width: 480px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.report-share-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-primary, #333);
  color: var(--text-primary, #FFFFFF);
}
.report-share-header h3 {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
.report-share-close {
  background: none;
  border: none;
  color: var(--text-tertiary, #B3B3B3);
  cursor: pointer;
  padding: 4px;
}
.report-share-body {
  padding: 20px;
}
.report-share-hint {
  font-size: 13px;
  color: var(--text-tertiary, #B3B3B3);
  margin: 0 0 12px;
}
.report-share-url-row {
  display: flex;
  gap: 8px;
}
.report-share-url-input {
  flex: 1;
  padding: 8px 12px;
  background: var(--bg-tertiary, #2A2A2A);
  border: 1px solid var(--border-primary, #444);
  border-radius: 6px;
  color: var(--text-primary, #E5E5E5);
  font-size: 12px;
  outline: none;
}
.report-share-copy-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: var(--accent-primary, #217346);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.report-share-copy-btn:hover {
  opacity: 0.9;
}

/* ── 页脚 ─────────────────────────────────────── */
.report-canvas-footer {
  text-align: center;
  padding: 24px;
  font-size: 11px;
  color: var(--text-tertiary, #666);
  border-top: 1px solid var(--border-primary, #333);
  margin-top: 32px;
}

/* ── 分享页面（独立布局） ────────────────────── */
.share-report-page {
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-primary, #1E1E1E);
  color: var(--text-primary, #E5E5E5);
  padding: 24px;
}
.share-report-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-bottom: 28px;
}
.share-report-loading,
.share-report-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 16px;
}
.share-report-error h2 { color: #F87171; }
.share-report-badge {
  text-align: center;
  margin-top: 32px;
  font-size: 11px;
  color: var(--text-tertiary, #666);
}
.share-report-backtop {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(52, 211, 153, 0.5);
  background: rgba(15, 23, 42, 0.9);
  color: #34d399;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  z-index: 30;
}
.share-report-backtop:hover {
  background: rgba(30, 41, 59, 0.95);
}

/* ── 响应式布局 ──────────────────────────────── */
@media (max-width: 1024px) {
  .report-template-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .report-charts-grid {
    grid-template-columns: 1fr;
  }
  .report-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .report-content {
    padding: 16px;
  }
  .report-kpi-grid {
    grid-template-columns: 1fr;
  }
  .report-canvas-title {
    font-size: 20px;
  }
  .report-kpi-value {
    font-size: 22px;
  }
  .report-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .report-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .report-toolbar-actions {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .report-export-bar {
    width: 100%;
    justify-content: flex-end;
  }
  .share-report-page {
    padding: 12px;
  }
  .report-insight-section {
    padding: 16px;
  }
  .report-chart-section {
    padding: 10px;
  }
  .report-chart-insight-item {
    font-size: 15px;
  }
  .report-insight-summary h3,
  .report-insight-block h3 {
    font-size: 17px;
  }
  .report-insight-summary p {
    font-size: 15px;
  }
  .report-insight-item {
    font-size: 15px;
  }
  .report-insight-paragraph h4 {
    font-size: 16px;
  }
  .report-insight-paragraph p {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .report-template-grid {
    grid-template-columns: 1fr;
  }
  .report-export-bar {
    flex-wrap: wrap;
  }
  .report-canvas-header {
    padding: 16px 12px;
  }
}
*, ::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:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.\!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;
  }
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.z-50 {
  z-index: 50;
}
.z-\[10000\] {
  z-index: 10000;
}
.z-\[9998\] {
  z-index: 9998;
}
.z-\[9999\] {
  z-index: 9999;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-12 {
  margin-top: 3rem;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.\!table {
  display: table !important;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.h-4 {
  height: 1rem;
}
.h-8 {
  height: 2rem;
}
.w-4 {
  width: 1rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-96 {
  width: 24rem;
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.max-w-sm {
  max-width: 24rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.border-collapse {
  border-collapse: collapse;
}
.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 spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-pointer {
  cursor: pointer;
}
.\!resize {
  resize: both !important;
}
.resize {
  resize: both;
}
.list-inside {
  list-style-position: inside;
}
.list-disc {
  list-style-type: disc;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-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-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));
}
.overflow-x-auto {
  overflow-x: auto;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.border {
  border-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-gray-100 {
  --tw-border-opacity: 1;
  border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-b-blue-500 {
  --tw-border-opacity: 1;
  border-bottom-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/60 {
  background-color: rgb(0 0 0 / 0.6);
}
.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-purple-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-sky-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
}
.bg-sky-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(12 74 110 / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.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-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-8 {
  padding-top: 2rem;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.text-\[13px\] {
  font-size: 13px;
}
.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-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.italic {
  font-style: italic;
}
.leading-relaxed {
  line-height: 1.625;
}
.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-sky-100 {
  --tw-text-opacity: 1;
  color: rgb(224 242 254 / var(--tw-text-opacity, 1));
}
.text-sky-800 {
  --tw-text-opacity: 1;
  color: rgb(7 89 133 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.overline {
  text-decoration-line: overline;
}
.line-through {
  text-decoration-line: line-through;
}
.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-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -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-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -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);
}
.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);
}
.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);
}
.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);
}
.sepia {
  --tw-sepia: sepia(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);
}
.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);
}
.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-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;
}
.\[-\:T\.Z\] {
  -: T.Z;
}

/* ============================================================================
 * 深色主题全局覆盖 - Airtable 风格
 * 统一将所有组件颜色切换为深色主题
 * ============================================================================ */

/* ===== 全局背景和文字 ===== */
body {
  background: #1E1E1E !important;
  color: #E5E5E5 !important;
}

/* ===== Excel 容器深色化 ===== */
.excel-container {
  background: #1E1E1E !important;
  scrollbar-color: #3A3A3A #252525 !important;
}

.excel-grid {
  background: transparent !important;
  border-color: #333333 !important;
}

.scroll-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
}

.excel-corner {
  background: #2A2A2A !important;
  border-color: #333333 !important;
}

.excel-header {
  background: #2A2A2A !important;
  border-color: #333333 !important;
  color: #E5E5E5 !important;
}

.excel-header:hover {
  background: #333333 !important;
}

.excel-row-header {
  background: #2A2A2A !important;
  border-color: #333333 !important;
  color: #B3B3B3 !important;
}

.excel-row-header:hover {
  background: #333333 !important;
}

/* ===== 单元格主题 ===== */
/* 默认白底由 CSS 提供，非白色背景由 renderCell inline style 覆盖（无需 !important） */
.excel-cell {
  background-color: white;
  border-color: rgba(128, 128, 128, 0.25);
  contain: layout style paint;
}

.excel-cell:hover {
  filter: brightness(1.06);
}

/* ===== Excel 选区 ===== */
.excel-selection {
  border-color: #217346 !important;
  background: rgba(33, 115, 70, 0.12) !important;
}

.excel-selection.extra {
  border-color: #22c55e !important;
  border-style: dashed !important;
  background: rgba(34, 197, 94, 0.1) !important;
}

/* ===== 列/行调整器 ===== */
.excel-col-resizer {
  background: transparent !important;
}

.excel-col-resizer:hover,
.excel-col-resizer.active {
  background: #217346 !important;
}

.excel-row-resizer:hover,
.excel-row-resizer.active {
  background: #217346 !important;
}

/* ===== 右键菜单深色化 ===== */
.excel-context-menu {
  background: #252525 !important;
  border-color: #333333 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.excel-context-menu button {
  color: #E5E5E5 !important;
  font-size: 13px !important;
}

.excel-context-menu button:hover {
  background: #2A2A2A !important;
}

.excel-context-menu .divider {
  border-color: #333333 !important;
}

.excel-context-menu .menu-header {
  color: #E0E0E0 !important;
  background: rgba(33, 115, 70, .12) !important;
  border-color: #333333 !important;
  font-size: 15px !important;
  letter-spacing: .3px !important;
}

.excel-context-menu .menu-hint {
  color: #888888 !important;
  font-size: 13px !important;
}

.excel-context-menu .formula-item {
  border-color: #333333 !important;
}

.excel-context-menu .formula-label {
  color: #B3B3B3 !important;
  font-size: 13px !important;
}

.excel-context-menu .formula-result {
  color: #34D399 !important;
  font-size: 14px !important;
}

.excel-context-menu .action-btn {
  background: #2A2A2A !important;
  border-color: #333333 !important;
  color: #E5E5E5 !important;
  font-size: 12px !important;
}

.excel-context-menu .action-btn:hover {
  border-color: #217346 !important;
}

.excel-context-menu .action-btn.insert {
  background: #217346 !important;
  color: white !important;
}

.excel-context-menu .param-input {
  background: #1A1A1A !important;
  border: 1px solid #444444 !important;
  color: #E5E5E5 !important;
  border-radius: 4px !important;
  font-size: 14px !important;
}

.excel-context-menu .param-input:focus {
  border-color: #217346 !important;
  box-shadow: 0 0 0 1px rgba(33, 115, 70, 0.35) !important;
  outline: none !important;
}

.excel-context-menu .formula-execute {
  background: #217346 !important;
  border: none !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 5px !important;
  padding: 7px 12px !important;
  margin-top: 8px !important;
}

.excel-context-menu .formula-execute:hover {
  background: #2A9058 !important;
}

.excel-context-menu .formula-execute:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

.excel-context-menu .back-btn {
  background: transparent !important;
  color: #34D399 !important;
  border-bottom: 1px solid #333333 !important;
  font-size: 14px !important;
}

.excel-context-menu .back-btn:hover {
  color: #E5E5E5 !important;
  background: #2A2A2A !important;
}

.excel-context-menu .formula-name {
  color: #34D399 !important;
  font-size: 15px !important;
}

.excel-context-menu .formula-desc {
  color: #AAAAAA !important;
  font-size: 13px !important;
}

.excel-context-menu .formula-expr {
  background: #1A1A1A !important;
  color: #C0C0C0 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  font-size: 13px !important;
}

.excel-context-menu .formula-detail {
  background: #2A2A2A !important;
  border: 1px solid #3A3A3A !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
}

.excel-context-menu .formula-params {
  background: #222222 !important;
  border-top: 1px solid #3A3A3A !important;
  padding: 10px 12px !important;
}

.excel-context-menu .param-row {
  background: transparent !important;
}

.excel-context-menu .param-label {
  color: #BBBBBB !important;
  font-size: 13px !important;
}

.excel-context-menu .param-hint {
  color: #777777 !important;
  font-size: 12px !important;
}

.excel-context-menu .param-input::-moz-placeholder {
  color: var(--text-disabled, #666666) !important;
}

.excel-context-menu .param-input::placeholder {
  color: var(--text-disabled, #666666) !important;
}

.excel-context-menu .param-input:disabled {
  opacity: 0.55 !important;
  cursor: default !important;
}

/* ===== 状态栏深色化 ===== */
.status-bar {
  background: #252525 !important;
  border-top: 1px solid #333333 !important;
  color: #B3B3B3 !important;
}

.status-item {
  color: #B3B3B3 !important;
}

.status-item.hint {
  color: #666666 !important;
}

.status-stat {
  background: transparent !important;
  border: none !important;
}

.status-stat .stat-label {
  color: #B3B3B3 !important;
}

.status-stat .stat-value {
  color: #B3B3B3 !important;
}

/* ===== AI 面板 — 温紫灰色调（Warm Slate） ===== */
.ai-panel {
  background: #1C1B22 !important;
  border-color: #2E2C36 !important;
  height: 100% !important;
  width: 100% !important;
}

.ai-panel-header {
  background: #24222C !important;
  border-color: #2E2C36 !important;
}

.ai-panel-title {
  color: #86EFAC !important;
}

.ai-panel-header .close-btn {
  color: #8B8698 !important;
}

.ai-panel-header .close-btn:hover {
  color: #FFFFFF !important;
  background: rgba(33, 115, 70, 0.28) !important;
}

.ai-header-icon {
  color: #34D399 !important;
}

.ai-view-badge {
  background: #217346 !important;
  color: #E9FFF2 !important;
  font-size: 13px !important;
}

.ai-close-btn {
  color: #8B8698 !important;
}

.ai-close-btn:hover {
  color: #FFFFFF !important;
}

.ai-panel-body {
  background: transparent !important;
}

.ai-welcome {
  color: #8B8698 !important;
}

.ai-welcome-icon {
  color: #5A5566 !important;
}

.ai-welcome-title {
  color: #E5E5E5 !important;
}

.ai-welcome-hint {
  color: #34D399 !important;
}

.ai-preset select {
  background: transparent !important;
  border-color: #2E2C36 !important;
  color: #D4D0DC !important;
}

.ai-preset select:focus {
  border-color: #34D399 !important;
}

.ai-hint {
  color: #5A5566 !important;
}

.ai-messages {
  background: transparent !important;
}

.ai-msg.user, .ai-message.user {
  background: rgba(33, 115, 70, 0.2) !important;
  color: #E9FFF2 !important;
}

.ai-msg.assistant, .ai-message.assistant {
  background: #24222C !important;
  color: #E8E4F0 !important;
  border-left-color: #34D399 !important;
}

.ai-msg.error, .ai-message.error {
  background: rgba(220, 38, 38, 0.15) !important;
  color: #FCA5A5 !important;
}

.ai-msg .thinking {
  color: #8B8698 !important;
}

.ai-msg code, .ai-message code,
.ai-message.assistant code {
  background: #16141C !important;
  color: #86EFAC !important;
}

.ai-msg pre, .ai-message pre,
.ai-message.assistant pre {
  background: #16141C !important;
  border-color: #2E2C36 !important;
}

.ai-msg pre code, .ai-message pre code {
  color: #E8E4F0 !important;
}

.ai-msg blockquote {
  border-left-color: #34D399 !important;
  color: #8B8698 !important;
}

.ai-msg h1, .ai-msg h2, .ai-msg h3, .ai-msg h4,
.ai-message h1, .ai-message h2, .ai-message h3, .ai-message h4,
.ai-message.assistant h1, .ai-message.assistant h2,
.ai-message.assistant h3, .ai-message.assistant h4 {
  color: #FFFFFF !important;
}

.ai-msg p, .ai-message p,
.ai-message.assistant p {
  color: #E8E4F0 !important;
}

.ai-msg li, .ai-message li,
.ai-message.assistant li {
  color: #E8E4F0 !important;
}

/* AI 底部输入区 */
/* ── 报表分析视角快捷区 ───────────────────── */
.report-perspective-bar {
  margin-bottom: 10px;
}
.report-perspective-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 600;
  color: #E5E5E5;
  margin-bottom: 8px;
}

.ai-perspective-icon {
  color: #34D399 !important;
}
.report-perspective-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.report-perspective-chip {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #334155;
  background: rgba(15, 23, 42, 0.45);
  color: #cbd5e1;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.report-perspective-chip:hover {
  border-color: #34D399;
  color: #D1FAE5;
  background: rgba(33, 115, 70, 0.22);
}
.report-perspective-hint {
  margin-top: 6px;
  font-size: 13px;
  color: #64748b;
}

/* ── AI 执行状态浮动条 ── */
.ai-execution-status-bar {
  flex-shrink: 0;
  padding: 8px 14px 6px;
  background: linear-gradient(180deg, #1a1824 0%, #201e28 100%);
  border-top: 1px solid #2E2C36;
}

.ai-execution-status-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
}

.ai-execution-spinner {
  color: #34D399;
  flex-shrink: 0;
}

.ai-execution-label {
  font-size: 13px;
  color: #d1d5db;
  white-space: nowrap;
}

.ai-execution-detail {
  font-size: 12px;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-execution-progress-track {
  margin-top: 6px;
  height: 2px;
  border-radius: 1px;
  background: #2E2C36;
  overflow: hidden;
}

.ai-execution-progress-pulse {
  height: 100%;
  width: 40%;
  border-radius: 1px;
  background: linear-gradient(90deg, #34D399 0%, #10B981 50%, #34D399 100%);
  animation: execPulse 1.8s ease-in-out infinite;
}

@keyframes execPulse {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* 错误状态 */
.ai-execution-status-bar.ai-execution-error {
  border-top-color: #7f1d1d;
}

.ai-execution-icon-error {
  color: #f87171;
  flex-shrink: 0;
}

.ai-execution-error .ai-execution-label {
  color: #fca5a5;
}

/* 完成状态 */
.ai-execution-status-bar.ai-execution-done {
  border-top-color: #14532d;
}

.ai-execution-icon-done {
  color: #34D399;
  flex-shrink: 0;
}

.ai-execution-done .ai-execution-label {
  color: #86EFAC;
}

.ai-footer-area {
  padding: 12px;
  border-top: 1px solid #2E2C36;
  background: #24222C;
  flex-shrink: 0;
}

.ai-operation-label {
  color: #FFFFFF !important;
  font-size: 13px !important;
}

.ai-footer-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.ai-footer-textarea {
  flex: 1;
  background: #1C1B22 !important;
  border: 1px solid #2E2C36 !important;
  border-radius: 6px;
  padding: 10px 12px;
  color: #D4D0DC !important;
  font-size: 14px;
  resize: vertical;
  min-height: 60px;
  outline: none;
  transition: border-color 0.15s ease;
}

.ai-footer-textarea:focus {
  border-color: #34D399 !important;
}

.ai-footer-textarea::-moz-placeholder {
  color: #5A5566;
  font-size: 14px;
}

.ai-footer-textarea::placeholder {
  color: #5A5566;
  font-size: 14px;
}

.ai-footer-textarea:disabled {
  background: #16141C !important;
  color: #5A5566 !important;
}

.ai-footer-send-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 16px;
  min-height: 60px;
  background: linear-gradient(135deg, #217346, #2A9058) !important;
  border: none;
  border-radius: 6px;
  color: white !important;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.15s ease;
}

.ai-footer-send-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #1A5C37, #217346) !important;
}

.ai-footer-send-btn:disabled {
  background: #2E2C36 !important;
  color: #5A5566 !important;
  cursor: not-allowed;
}

/* 我要收集视图：兜底移除遗留三点“更多”预留按钮 */
body.collect-view-active button:has(.lucide-more-horizontal),
body.collect-view-active button:has(.lucide-more-vertical),
body.collect-view-active button:has(.lucide-ellipsis),
body.collect-view-active button:has(.lucide-ellipsis-vertical),
body.collect-view-active [role='button']:has(.lucide-more-horizontal),
body.collect-view-active [role='button']:has(.lucide-more-vertical),
body.collect-view-active [role='button']:has(.lucide-ellipsis),
body.collect-view-active [role='button']:has(.lucide-ellipsis-vertical) {
  display: none !important;
}

body.collect-view-active .lucide-more-horizontal,
body.collect-view-active .lucide-more-vertical,
body.collect-view-active .lucide-ellipsis,
body.collect-view-active .lucide-ellipsis-vertical {
  display: none !important;
}

.ai-panel .large-file-indicator {
  background: #24222C !important;
  border-color: #2E2C36 !important;
}

.ai-panel .large-file-indicator .file-name {
  color: #86EFAC !important;
  font-size: 13px !important;
}

.ai-panel .large-file-indicator .file-info {
  color: #8B8698 !important;
  font-size: 13px !important;
}

.ai-sql-builder-icon {
  color: #34D399 !important;
}

.ai-sql-builder-title {
  color: #E5E5E5 !important;
}

.ai-sql-close-btn {
  color: #B3B3B3 !important;
}

.ai-sql-close-btn:hover {
  color: #E5E5E5 !important;
}

/* ===== AI 面板内部组件覆盖（温紫灰） ===== */
.ai-dark-select {
  background: #1C1B22 !important;
  border: 1px solid #2E2C36 !important;
  color: #D4D0DC !important;
  border-radius: 6px;
}

.ai-dark-select:focus {
  border-color: #34D399 !important;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.18) !important;
}

.ai-dark-select:disabled {
  background: #16141C !important;
  color: #5A5566 !important;
}

.ai-dark-select option {
  background: #1C1B22 !important;
  color: #D4D0DC !important;
}

.ai-quick-action {
  position: relative;
}

.ai-quick-action-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
}

.ai-quick-action-trigger:disabled {
  cursor: not-allowed;
}

.ai-quick-action-trigger-text {
  flex: 1;
  text-align: left;
  font-size: 14px;
  color: #D4D0DC;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-quick-action-chevron {
  color: #8B8698;
  transition: transform 0.2s ease;
}

.ai-quick-action-chevron.open {
  transform: rotate(180deg);
}

.ai-quick-action-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(560px, calc(100vh - 220px));
  overflow: auto;
  z-index: 30;
  padding: 6px;
  background: #1C1B22 !important;
  border: 1px solid #2E2C36 !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.ai-quick-action-header,
.ai-quick-action-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  padding: 7px 8px;
  font-size: 14px;
}

.ai-quick-action-header {
  color: #86EFAC;
  font-weight: 600;
  border-bottom: 1px solid #2E2C36;
  margin-bottom: 4px;
}

.ai-quick-action-item {
  border: none;
  background: transparent;
  color: #D4D0DC;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ai-quick-action-item:hover {
  background: rgba(33, 115, 70, 0.2);
}

.ai-dark-input {
  background: #1C1B22 !important;
  border: 1px solid #2E2C36 !important;
  color: #D4D0DC !important;
  border-radius: 6px;
}

.ai-dark-input:focus {
  border-color: #34D399 !important;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.18) !important;
}

.ai-dark-input::-moz-placeholder {
  color: #5A5566 !important;
}

.ai-dark-input::placeholder {
  color: #5A5566 !important;
}

.ai-dark-section {
  background: rgba(22, 20, 28, 0.5) !important;
  border: 1px solid #2E2C36 !important;
  border-radius: 6px;
}

/* ================================
 * AI - SQL 构建器字体增强（不改按钮）
 * 目标：提升可读性；按钮字号保持原样
 * ================================ */
.ai-panel .ai-sql-builder .ai-sql-label {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

.ai-panel .ai-sql-builder .ai-dark-select,
.ai-panel .ai-sql-builder .ai-dark-input {
  font-size: 17px !important;
  line-height: 1.55 !important;
}

.ai-panel .ai-sql-help {
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.ai-panel .ai-sql-help p {
  font-size: 14px !important;
  line-height: 1.55 !important;
}

.ai-panel .ai-sql-help li {
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.ai-panel .ai-sql-help code,
.ai-panel .ai-sql-codeblock {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}

/* 锁定 SQL 执行按钮字号（避免被上面规则联动） */
.ai-panel [data-ui="ai-sql-run-btn"] {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

/* 下方提示框/消息气泡文字适度调大（按钮不受影响） */
.ai-panel .ai-message {
  font-size: 13px !important;
  line-height: 1.6 !important;
}

/* AI 助手：可关闭的短时提示（success / warning / error / 状态 等） */
.ai-panel .ai-message.ai-message--prompt {
  position: relative;
  padding-right: 34px !important;
}

.ai-panel .ai-prompt-dismiss {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: rgba(148, 163, 184, 0.14);
  color: inherit;
  cursor: pointer;
  opacity: 0.88;
  z-index: 2;
  padding: 0;
  line-height: 0;
}

.ai-panel .ai-prompt-dismiss:hover {
  opacity: 1;
  background: rgba(148, 163, 184, 0.26);
}

/* Agent「正在执行」：RefreshCw 快旋（替代正文前缀 🔧） */
@keyframes ai-exec-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.ai-panel .ai-thinking-exec-spin {
  color: #fbbf24;
  animation: ai-exec-spin 0.5s linear infinite;
}

.ai-panel .ai-message pre {
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.ai-panel .ai-message code {
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}

/* AI 面板内所有 Tailwind 类覆盖 */
.ai-panel .text-gray-400,
.ai-panel .text-gray-500,
.ai-panel .text-gray-600,
.ai-panel .text-gray-700,
.ai-panel .text-gray-800 {
  color: #8B8698 !important;
}

.ai-panel .bg-gray-50,
.ai-panel .bg-gray-100 {
  background: rgba(22, 20, 28, 0.5) !important;
}

.ai-panel .bg-white {
  background: transparent !important;
}

.ai-panel .border-gray-200,
.ai-panel .border-gray-300 {
  border-color: #2E2C36 !important;
}

.ai-panel .text-blue-600 {
  color: #34D399 !important;
}

.ai-panel .bg-blue-600 {
  background: #217346 !important;
}

.ai-panel .hover\:bg-blue-700:hover {
  background: #1A5C37 !important;
}

.ai-panel .bg-orange-50 {
  background: #24222C !important;
}

.ai-panel .border-orange-200 {
  border-color: #2E2C36 !important;
}

.ai-panel .text-orange-800 {
  color: #86EFAC !important;
}

.ai-panel .text-orange-600 {
  color: #34D399 !important;
}

.ai-panel .disabled\:bg-gray-100:disabled {
  background: #16141C !important;
}

.ai-panel .disabled\:bg-gray-400:disabled {
  background: #2E2C36 !important;
}

/* ===== 对话框深色化（使用 Tailwind 类的弹窗） ===== */
/* 所有固定定位的弹窗中 bg-white 改为深色 */
.fixed.inset-0 .bg-white {
  background: #252525 !important;
  border: 1px solid #333333 !important;
  color: #E5E5E5 !important;
}

.fixed.inset-0 .bg-white h2,
.fixed.inset-0 .bg-white h3,
.fixed.inset-0 .bg-white label,
.fixed.inset-0 .bg-white span {
  color: #E5E5E5 !important;
}

.fixed.inset-0 .bg-white .text-xl,
.fixed.inset-0 .bg-white .font-bold {
  color: #FFFFFF !important;
}

.fixed.inset-0 .bg-white .text-gray-500,
.fixed.inset-0 .bg-white .text-gray-600,
.fixed.inset-0 .bg-white .text-gray-700 {
  color: #B3B3B3 !important;
}

.fixed.inset-0 .bg-white .text-gray-500:hover,
.fixed.inset-0 .bg-white .text-gray-600:hover,
.fixed.inset-0 .bg-white .text-gray-700:hover {
  color: #FFFFFF !important;
}

.fixed.inset-0 .bg-white input,
.fixed.inset-0 .bg-white select,
.fixed.inset-0 .bg-white textarea {
  background: #1E1E1E !important;
  border-color: #3A3A3A !important;
  color: #E5E5E5 !important;
}

.fixed.inset-0 .bg-white input:focus,
.fixed.inset-0 .bg-white select:focus,
.fixed.inset-0 .bg-white textarea:focus {
  border-color: #217346 !important;
  ring-color: #217346 !important;
}

.fixed.inset-0 .bg-white button {
  color: #E5E5E5 !important;
}

.fixed.inset-0 .bg-white .bg-blue-500,
.fixed.inset-0 .bg-white .bg-green-500,
.fixed.inset-0 .bg-white .bg-indigo-500 {
  background: #217346 !important;
  color: white !important;
}

.fixed.inset-0 .bg-white .bg-blue-500:hover,
.fixed.inset-0 .bg-white .bg-green-500:hover,
.fixed.inset-0 .bg-white .bg-indigo-500:hover {
  background: #2A9058 !important;
}

.fixed.inset-0 .bg-white .bg-gray-200,
.fixed.inset-0 .bg-white .bg-gray-300 {
  background: #333333 !important;
  color: #E5E5E5 !important;
}

.fixed.inset-0 .bg-white .border-gray-300 {
  border-color: #3A3A3A !important;
}

/* ===== 欢迎引导深色化 ===== */
.welcome-guide, .welcome-card {
  background: #252525 !important;
  border-color: #333333 !important;
  color: #E5E5E5 !important;
}

/* ===== 帮助弹窗深色化 ===== */
.help-modal {
  background: #252525 !important;
  border-color: #333333 !important;
  color: #E5E5E5 !important;
}

.help-modal-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
}

.help-modal-sidebar {
  background: #1E1E1E !important;
  border-color: #333333 !important;
}

.help-nav-item {
  color: #B3B3B3 !important;
}

.help-nav-item:hover {
  background: #2A2A2A !important;
  color: #FFFFFF !important;
}

.help-nav-item.active {
  background: rgba(33, 115, 70, 0.2) !important;
  color: #34D399 !important;
  border-left-color: #217346 !important;
}

.help-modal-header {
  background: #2A2A2A !important;
  border-color: #333333 !important;
}

.help-modal-header h2, .help-modal-header h3 {
  color: #FFFFFF !important;
}

.help-modal-content {
  background: #252525 !important;
  color: #E5E5E5 !important;
}

.help-modal-content h1, .help-modal-content h2,
.help-modal-content h3, .help-modal-content h4 {
  color: #FFFFFF !important;
}

.help-modal-content code {
  background: #1E1E1E !important;
  color: #34D399 !important;
}

.help-modal-content pre {
  background: #1E1E1E !important;
  border-color: #333333 !important;
}

.help-modal-content table {
  border-color: #333333 !important;
}

.help-modal-content th {
  background: #2A2A2A !important;
  border-color: #333333 !important;
  color: #E5E5E5 !important;
}

.help-modal-content td {
  border-color: #333333 !important;
  color: #E5E5E5 !important;
}

/* ===== 帮助弹窗 iframe 模式样式 ===== */
.help-modal-iframe {
  width: 90vw !important;
  max-width: 1200px !important;
  height: 85vh !important;
  max-height: 800px !important;
}

.help-modal-iframe .help-modal-body {
  flex: 1;
  overflow: hidden;
  padding: 0;
}

.help-modal-iframe .help-modal-body.iframe-container {
  display: block;
}

.help-iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 0 0 12px 12px;
}

.help-external-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid #666666;
  border-radius: 6px;
  color: #E5E5E5;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.help-external-btn:hover {
  background: #333333;
  border-color: #888888;
}

/* ===== 报表模态框深色化 ===== */
.report-modal-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
}

/* ===== 报表生成器样式（浅色主题，文字深色） ===== */
.report-modal {
  background: white !important;
  color: #1f2937 !important; /* 深色文字 */
}

.report-modal-header {
  border-color: #e5e7eb !important;
}

.report-modal-header h2 {
  color: #1f2937 !important; /* 深色标题 */
}

.report-modal-close {
  color: #6b7280 !important;
}

.report-modal-close:hover {
  background: #f3f4f6 !important;
  color: #1f2937 !important;
}

.report-modal-content {
  background: white !important;
  color: #1f2937 !important; /* 深色文字 */
}

.report-dimensions-section {
  background: transparent !important; /* 透明背景 */
  border-color: transparent !important;
  color: #1f2937 !important; /* 深色文字 */
}

.report-dimensions-section h3,
.report-dimensions-section label {
  color: #1f2937 !important; /* 深色文字 */
}

.report-dimensions-section select,
.report-dimensions-section input {
  background: white !important;
  border-color: #d1d5db !important;
  color: #1f2937 !important; /* 深色文字 */
}

.report-file-info {
  background: #f9fafb !important;
  border-color: #e5e7eb !important;
  color: #1f2937 !important; /* 深色文字 */
}

.report-content-section {
  background: white !important;
  color: #1f2937 !important; /* 深色文字 */
}

.report-actions button {
  color: #1f2937 !important; /* 深色文字 */
}

/* ===== 大文件模式指示器深色化 ===== */
.large-file-label {
  color: #E5E5E5 !important;
}

/* ===== 上传进度条深色化 ===== */
.upload-progress-container {
  background: #1E1E1E !important;
}

.upload-progress-bar {
  background: #333333 !important;
}

.upload-progress-fill {
  background: #217346 !important;
}

.upload-progress-text {
  color: #E5E5E5 !important;
}

/* ===== 结果工作表标签深色化 ===== */
.result-sheet-tab {
  background: #2A2A2A !important;
  border-color: #333333 !important;
  color: #34D399 !important;
}

/* ===== 滚动条深色化 ===== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #1E1E1E;
}

::-webkit-scrollbar-thumb {
  background: #3A3A3A;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4A4A4A;
}

::-webkit-scrollbar-corner {
  background: #1E1E1E;
}

/* ============================================================================
 * 深色主题全局覆盖结束
 * ============================================================================ */




* {



  margin: 0;



  padding: 0;



  box-sizing: border-box;



}







body {



  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',



    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',



    sans-serif;



  -webkit-font-smoothing: antialiased;



  -moz-osx-font-smoothing: grayscale;



}







/* 拖拽选择时禁用文本选中 */



body.excel-no-select {



  -webkit-user-select: none;



     -moz-user-select: none;



          user-select: none;



}







#root {



  width: 100%;



  height: 100vh;



  overflow: hidden;



}







/* Excel样式 */



.excel-container {



  width: 100%;



  height: 100%;



  overflow: auto;



  background: #f8f9fa;



  position: relative;



  /* 确保滚动条始终可见 */



  overflow-y: auto;



  overflow-x: auto;



  /* 强制显示滚动条 */



  scrollbar-width: thin;



  scrollbar-color: #3A3A3A #1E1E1E;



}







.excel-container.is-dragging {



  cursor: cell;



}







.excel-canvas {
  position: relative;
  /* 创建独立堆叠上下文：图表的 z-index 封闭在此层内，不与滚动条伪元素竞争 */
  isolation: isolate;
}

/* 网格线由 GridLinesOverlay 统一绘制（SVG 覆盖全网格，虚拟化时 CSS 无法覆盖无 DOM 行）
 * 仅对无用户边框的单元格隐藏默认边框，有用户边框的单元格保留工具栏设置的边框 */
.excel-canvas .excel-cell:not(.has-user-border) {
  border: none;
}







.excel-selection {



  position: absolute;



  border: 1px solid #217346;



  background: rgba(33, 115, 70, 0.08);



  box-sizing: border-box;



  pointer-events: none;



  z-index: 20;



}







.excel-grid {



  display: grid;



  background: transparent;



  border: 1px solid #d0d7de;



  border-right: none;



  border-bottom: none;



}







.excel-corner {



  background: #f6f8fa;



  border-right: 1px solid #d0d7de;



  border-bottom: 1px solid #d0d7de;



  position: sticky;



  top: 0;



  left: 0;



  z-index: 10;



  min-width: 40px;



  min-height: 30px;



  display: flex;



  align-items: center;



  justify-content: center;



}







.excel-cell {



  border-right: 1px solid #d0d7de;



  border-bottom: 1px solid #d0d7de;



  background: white;



  padding: 2px 4px;



  display: flex;



  align-items: center;



  font-size: 13px;



  position: relative;



  min-width: 0;



  min-height: 0;



  overflow: hidden;



  white-space: nowrap;



  text-overflow: ellipsis;



  cursor: cell;



  -webkit-user-select: none;



     -moz-user-select: none;



          user-select: none;



}







.excel-cell:hover {
  filter: brightness(1.06);
}







/* 如果单元格有自定义背景色，hover 时不覆盖 */



.excel-cell.has-custom-bg {



  background: var(--cell-bg-color) !important;



}







.excel-cell.has-custom-bg:hover {
  background: var(--cell-bg-color) !important;
  filter: brightness(1.04);
}







.excel-cell.selected:not(.has-user-border) {



  border: none !important;



  z-index: 1;



  box-shadow: none;



  background: #e6f7ed !important;



}

/* 用户主动设置了边框时，保证边框在网格线之上可见 */
.excel-cell.has-user-border {
  z-index: 3;
}







/* 如果单元格有自定义背景色，即使被选中也保持自定义背景色 */



.excel-cell.has-custom-bg.selected {



  background: var(--cell-bg-color, inherit) !important;



}







.excel-cell.editing {



  border: 1px solid #34D399 !important;



  z-index: 2;



  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.22);



  outline: none;



  /* 编辑态继承当前单元格配色，保证主题一致 */
  background: inherit;
  color: inherit;
  caret-color: currentColor;



  white-space: normal;



  overflow: visible;



  -webkit-user-select: text;



     -moz-user-select: text;



          user-select: text;

  cursor: text !important;



}







/* 格式刷激活时的鼠标样式 */



.excel-cell.format-brush-cursor {



  cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23217346" stroke-width="2"><path d="M18.37 2.63 14 7l-1.59-1.59a2 2 0 0 0-2.82 0L8 7l9 9 1.59-1.59a2 2 0 0 0 0-2.82L17 10l4.37-4.37a2.12 2.12 0 1 0-3-3Z"/><path d="M9 8c-2 3-4 3.5-7 4l8 10c2-1 6-5 6-7"/><path d="M14.5 17.5 4.5 15"/></svg>') 0 16, copy;



}

/* 普通视图：数据验证可视化（右上角橙色角标 + DV 徽标） */
.excel-cell.excel-cell-has-validation::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-top: 10px solid rgba(245, 158, 11, 0.95);
  border-left: 10px solid transparent;
  pointer-events: none;
}

.excel-cell.excel-cell-has-validation::after {
  content: 'DV';
  position: absolute;
  right: 2px;
  bottom: 1px;
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  color: #f59e0b;
  pointer-events: none;
}

/* 普通视图：批注可视化（红色内边框） */
.excel-cell.excel-cell-has-comment {
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.9);
}

/* 普通视图：超链接可视化（蓝色下划线） */
.excel-cell.excel-cell-has-link {
  color: #60a5fa !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}







.excel-header {



  background: #f6f8fa;



  border-right: 1px solid #d0d7de;



  border-bottom: 1px solid #d0d7de;



  display: flex;



  align-items: center;



  justify-content: center;



  font-weight: 600;



  font-size: 12px;



  color: #656d76;



  position: sticky;



  top: 0;



  z-index: 5;



  min-height: 30px;



  cursor: default;



  overflow: hidden;



}







.excel-header:hover {



  background: #eaeef2;



}







.excel-row-header {



  background: #f6f8fa;



  border-right: 1px solid #d0d7de;



  border-bottom: 1px solid #d0d7de;



  display: flex;



  align-items: center;



  justify-content: center;



  font-weight: 600;



  font-size: 18px;



  color: #656d76;



  position: sticky;



  left: 0;



  z-index: 5;



  min-width: 40px;



  cursor: default;



  overflow: hidden;



}



.excel-col-resizer {



  position: absolute;



  top: 0;



  right: -2px;



  width: 6px;



  height: 100%;



  cursor: col-resize;



}







.excel-row-resizer {



  position: absolute;



  left: 0;



  bottom: -2px;



  width: 100%;



  height: 6px;



  cursor: row-resize;



}







.excel-context-menu {



  position: fixed;



  background: #ffffff;



  border: 1px solid #d0d7de;



  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);



  border-radius: 6px;



  padding: 6px 0;



  z-index: 2000;



  min-width: 160px;



  max-width: 320px;



  max-height: calc(100vh - 16px);



  overflow-y: auto;



}







.excel-context-menu button {



  width: 100%;



  padding: 6px 12px;



  background: none;



  border: none;



  text-align: left;



  font-size: 12px;



  cursor: pointer;



}







.excel-context-menu button:hover {



  background: #f3f4f6;



}







.excel-context-menu .divider {



  height: 1px;



  margin: 4px 0;



  background: #e5e7eb;



}







.excel-context-menu .menu-header {



  padding: 6px 12px;



  font-size: 12px;



  font-weight: 600;



  color: #1f2937;



  background: #f9fafb;



  border-bottom: 1px solid #e5e7eb;



  margin-bottom: 4px;



}







.excel-context-menu .menu-hint {



  padding: 4px 12px;



  font-size: 11px;



  color: #6b7280;



}







/* 公式菜单项 */



.excel-context-menu .formula-item {



  padding: 6px 12px;



  border-bottom: 1px solid #f3f4f6;



}







.excel-context-menu .formula-item:last-child {



  border-bottom: none;



}







.excel-context-menu .formula-row {



  display: flex;



  justify-content: space-between;



  align-items: center;



  margin-bottom: 4px;



}







.excel-context-menu .formula-label {



  font-size: 12px;



  color: #374151;



  font-weight: 500;



}







.excel-context-menu .formula-result {



  font-size: 13px;



  color: #059669;



  font-weight: 600;



  font-family: 'SF Mono', Monaco, Consolas, monospace;



}







.excel-context-menu .formula-actions {



  display: flex;



  gap: 6px;



}







.excel-context-menu .action-btn {



  flex: 1;



  padding: 4px 8px;



  font-size: 11px;



  border: 1px solid #d1d5db;



  border-radius: 4px;



  cursor: pointer;



  transition: all 0.15s;



}







.excel-context-menu .action-btn.insert {



  background: #3b82f6;



  color: white;



  border-color: #3b82f6;



}







.excel-context-menu .action-btn.insert:hover {



  background: #2563eb;



  border-color: #2563eb;



}







.excel-context-menu .action-btn.copy {



  background: white;



  color: #374151;



}







.excel-context-menu .action-btn.copy:hover {



  background: #f3f4f6;



}







/* ============================================



 * 状态栏样式



 * ============================================ */



.status-bar {



  display: flex;



  justify-content: space-between;



  align-items: center;



  height: 28px;



  padding: 0 12px;



  background: #f8fafc;



  border-top: 1px solid #e2e8f0;



  font-size: 12px;



  color: #64748b;



}







.status-left {



  display: flex;



  align-items: center;



  gap: 16px;



}







.status-right {



  display: flex;



  align-items: center;



  gap: 20px;



}







.status-item {



  display: flex;



  align-items: center;



  gap: 4px;



}







.status-item.hint {



  color: #94a3b8;



  font-style: italic;



}







.status-stat {



  display: flex;



  align-items: center;



  gap: 6px;



  padding: 2px 8px;



  background: white;



  border: 1px solid #e2e8f0;



  border-radius: 4px;



}







.status-stat .stat-label {



  color: #94a3b8;



  font-size: 11px;



}







.status-stat .stat-value {



  color: #0f172a;



  font-weight: 600;



  font-family: 'SF Mono', Monaco, Consolas, monospace;



}







/* ============================================



 * 公式参数输入样式



 * ============================================ */



.excel-context-menu .formula-params {



  padding: 8px 12px;



  background: #f9fafb;



  border-top: 1px solid #e5e7eb;



}







.excel-context-menu .param-row {



  display: flex;



  align-items: center;



  gap: 8px;



  margin-bottom: 6px;



}







.excel-context-menu .param-row:last-child {



  margin-bottom: 0;



}







.excel-context-menu .param-label {



  font-size: 11px;



  color: #6b7280;



  min-width: 60px;



}







.excel-context-menu .param-input {



  flex: 1;



  padding: 4px 8px;



  border: 1px solid #d1d5db;



  border-radius: 4px;



  font-size: 12px;



  width: 80px;



}







.excel-context-menu .param-input:focus {



  outline: none;



  border-color: #3b82f6;



}







.excel-context-menu .formula-execute {



  width: 100%;



  padding: 6px 12px;



  margin-top: 8px;



  background: #3b82f6;



  color: white;



  border: none;



  border-radius: 4px;



  font-size: 12px;



  cursor: pointer;



}







.excel-context-menu .formula-execute:hover {



  background: #2563eb;



}







.excel-context-menu .back-btn {



  width: 100%;



  padding: 6px 12px;



  background: none;



  border: none;



  text-align: left;



  font-size: 12px;



  color: #3b82f6;



  cursor: pointer;



  border-bottom: 1px solid #e5e7eb;



}







.excel-context-menu .back-btn:hover {



  background: #f3f4f6;



}







.excel-context-menu .formula-detail {



  padding: 8px 12px;



  background: #f9fafb;



}







.excel-context-menu .formula-name {



  font-weight: 600;



  color: #1f2937;



  margin-bottom: 4px;



}







.excel-context-menu .formula-desc {



  font-size: 11px;



  color: #6b7280;



  margin-bottom: 4px;



}







.excel-context-menu .formula-expr {



  font-size: 11px;



  color: #9ca3af;



  font-family: 'SF Mono', Monaco, Consolas, monospace;



}







.excel-context-menu .param-hint {



  font-size: 10px;



  color: #9ca3af;



  margin-left: 4px;



}







.excel-row-header:hover {



  background: #eaeef2;



}







/* 工具栏样式 */



.toolbar {



  display: flex;



  align-items: center;



  gap: 4px 8px;



  padding: 8px 12px;



  background: white;



  border-bottom: 1px solid #d0d7de;



  flex-wrap: wrap;



  min-height: 48px;



}







/* ============================================



 * 公式栏样式



 * ============================================ */



.formula-bar {



  display: flex;



  align-items: center;



  padding: 6px 8px;



  background: white;



  border-bottom: 1px solid #d0d7de;



  /* 宽度延展到右边尽头 */



  width: 100%;



}







.formula-bar-label {



  font-size: 13px;



  font-weight: 600;



  color: #217346;



  margin-right: 8px;



  min-width: 20px;



  text-align: center;



}







.formula-bar-input {



  flex: 1;



  border: 1px solid #d0d7de;



  border-radius: 4px;



  padding: 6px 10px;



  font-size: 13px;



  font-family: 'Consolas', 'Monaco', monospace;



  background: #fafafa;



  transition: all 0.2s;



}







.formula-bar-input:focus {



  outline: none;



  border-color: #217346;



  background: white;



  box-shadow: 0 0 0 2px rgba(33, 115, 70, 0.15);



}







.formula-bar-input::-moz-placeholder {



  color: #9ca3af;



}







.formula-bar-input::placeholder {



  color: #9ca3af;



}







.toolbar-logo {
  padding: 4px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  border-right: 1px solid #e0e0e0;
  margin-right: 8px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.toolbar-logo .logo-image {
  height: 44px;
  width: auto;
  max-width: 200px;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  padding: 4px 10px;
  background: #ffffff;
  transition: all 0.2s ease;
}

.toolbar-logo .logo-image:hover {
  opacity: 0.85;
  border-color: #217346;
  box-shadow: 0 0 0 2px rgba(33, 115, 70, 0.1);
}







.toolbar-btn {



  padding: 6px 12px;



  border: 1px solid #d0d7de;



  background: white;



  border-radius: 4px;



  cursor: pointer;



  display: flex;



  align-items: center;



  gap: 4px;



  font-size: 13px;



  transition: all 0.2s;



}







.toolbar-btn:hover {



  background: #f6f8fa;



  border-color: #217346;



}







.toolbar-btn.active {



  background: #217346;



  color: white;



  border-color: #217346;



}







.toolbar-btn.ai-toggle {



  background: linear-gradient(135deg, #217346 0%, #2a9058 100%);



  color: white;



  border-color: #217346;



}







.toolbar-btn.ai-toggle:hover {



  background: linear-gradient(135deg, #2a9058 0%, #34a568 100%);



  border-color: #2a9058;



}







.toolbar-btn.ai-toggle.active {



  background: linear-gradient(135deg, #1a5c38 0%, #217346 100%);



  border-color: #1a5c38;



  box-shadow: 0 0 8px rgba(33, 115, 70, 0.5);



}







.toolbar-divider {



  width: 1px;



  height: 24px;



  background: #d0d7de;



  margin: 0 4px;



}







.toolbar-group {



  display: flex;



  align-items: center;



  gap: 4px;



  padding: 0 4px;



}







.toolbar-select {



  padding: 4px 8px;



  border: 1px solid #d0d7de;



  border-radius: 4px;



  font-size: 13px;



  background: white;



  cursor: pointer;



  min-width: 60px;



}







.toolbar-select:hover {



  border-color: #217346;



}







.toolbar-color-input {



  width: 32px;



  height: 24px;



  border: 1px solid #d0d7de;



  border-radius: 4px;



  cursor: pointer;



  padding: 0;



}







.toolbar-color-input:hover {



  border-color: #217346;



}







.toolbar-icon {



  color: #656d76;



}







/* 工具栏按钮禁用状态 */



.toolbar-btn.disabled {



  opacity: 0.5;



  cursor: not-allowed;



  pointer-events: none;



}







/* 工具栏右侧区域 */



.toolbar-right {



  display: flex;



  align-items: center;



  gap: 8px;



  margin-left: auto;



}







/* 连接状态指示 */



.connection-status {



  display: flex;



  align-items: center;



  gap: 4px;



  font-size: 13px;



  color: #656d76;



}







/* 颜色选择器容器 */



.toolbar-group.color-picker {



  position: relative;



}







.toolbar-group.color-picker .toolbar-icon {



  position: absolute;



  right: 8px;



  pointer-events: none;



}







/* ============================================



 * 主内容区左右分栏布局



 * ============================================ */



.app-main-container {



  flex: 1;



  display: flex;



  min-height: 0;



  overflow: hidden;



}







/* 工作表面板 */



.excel-panel {



  flex: 1;



  position: relative;



  overflow: hidden;



  transition: flex 0.3s ease;



  display: flex;



  flex-direction: column;



}







.excel-panel.with-ai {



  flex: 1;



}







/* 表格编辑器包装器（占据剩余空间） */



.excel-editor-wrapper {



  flex: 1;



  min-height: 0;



  overflow: hidden;



  position: relative;



}







/* ============================================



 * AI 助手右侧面板



 * ============================================ */



.ai-panel {



  width: 400px;



  min-width: 360px;



  max-width: 500px;



  background: #ffffff;



  border-left: 1px solid #d0d7de;



  display: flex;



  flex-direction: column;



  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.06);



}







/* 标题栏 - 与工具栏 AI 助手按钮颜色一致 */



.ai-panel-header {



  display: flex;



  justify-content: space-between;



  align-items: center;



  padding: 12px 16px;



  background: linear-gradient(135deg, #217346 0%, #2a9058 100%);



  -webkit-user-select: none;



     -moz-user-select: none;



          user-select: none;



}







.ai-panel-title {



  display: flex;



  align-items: center;



  gap: 8px;



  color: white;



  font-weight: 600;



  font-size: 13px;



}







.ai-panel-title .status-dot {



  width: 8px;



  height: 8px;



  border-radius: 50%;



  margin-left: 4px;



}







.ai-panel-title .status-dot.connected {



  background: #22c55e;



  box-shadow: 0 0 6px #22c55e;



}







.ai-panel-title .status-dot.connecting {



  background: #fbbf24;



  animation: pulse 1s infinite;



}







.ai-panel-title .status-dot.disconnected {



  background: #ef4444;



}







@keyframes pulse {



  0%, 100% { opacity: 1; }



  50% { opacity: 0.5; }



}







.ai-panel-header .close-btn {



  width: 28px;



  height: 28px;



  border: none;



  border-radius: 4px;



  background: rgba(255, 255, 255, 0.1);



  color: white;



  cursor: pointer;



  display: flex;



  align-items: center;



  justify-content: center;



  transition: background 0.15s;



}







.ai-panel-header .close-btn:hover {



  background: rgba(239, 68, 68, 0.9);



}







/* 内容区 */



.ai-panel-body {



  flex: 1;



  overflow-y: auto;



  padding: 12px;



  background: #f8fafc;



}







.ai-welcome {



  text-align: center;



  padding: 24px 16px;



  color: #64748b;



}







.ai-welcome svg {



  margin: 0 auto 12px;



  color: #94a3b8;



}







.ai-welcome p {



  font-size: 14px;



  font-weight: 500;



}







.ai-preset {



  margin-bottom: 12px;



}







.ai-preset select {



  width: 100%;



  padding: 10px 12px;



  border: 1px solid #d1d5db;



  border-radius: 6px;



  font-size: 12px;



  background: white;



  cursor: pointer;



}







.ai-preset select:focus {



  outline: none;



  border-color: #3b82f6;



}







.ai-preset select:disabled {



  background: #f3f4f6;



  cursor: not-allowed;



}







.ai-hint {



  text-align: center;



  font-size: 14px;



  color: #94a3b8;



  margin-bottom: 12px;



}







.ai-messages {



  display: flex;



  flex-direction: column;



  gap: 8px;



}







.ai-msg {



  padding: 8px 10px;



  border-radius: 6px;



  font-size: 13px;



  line-height: 1.4;



  width: 100%;



  word-wrap: break-word;



  word-break: break-word;



  overflow-wrap: break-word;



  white-space: normal;



  box-sizing: border-box;



}







/* AI助手消息样式 */



.ai-message {



  padding: 8px 10px;



  border-radius: 6px;



  line-height: 1.4;



  width: 100%;



  word-wrap: break-word;



  word-break: break-word;



  overflow-wrap: break-word;



  white-space: normal;



  box-sizing: border-box;



}







.ai-message.assistant {



  background: #f6f8fa;



  color: #24292f;



  border: 1px solid #e5e7eb;



  border-bottom-left-radius: 4px;



  font-size: 12px;



}







.ai-message.assistant p {



  font-size: 13px;



  margin: 0;



}







.ai-message.assistant p + p {



  margin-top: 4px;



}

/* 普通视图：企业场景数据构造提示词（商业化样式） */
.ai-dataset-presets {
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid #2E2C36;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(36, 34, 44, 0.95), rgba(28, 27, 34, 0.92));
}

.ai-dataset-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  color: #D1FAE5;
  font-size: 16px;
  font-weight: 600;
}

.ai-dataset-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.ai-dataset-chip {
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid #334155;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.45);
  color: #E5E7EB;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ai-dataset-chip:hover {
  border-color: #34D399;
  color: #F0FDF4;
  background: rgba(33, 115, 70, 0.22);
}

/* =============================================
   Goal Presets - 普通模式目标导向指令列表
   ============================================= */
.goal-presets-list {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
  border: 1px solid #2E2C36;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(36, 34, 44, 0.95), rgba(28, 27, 34, 0.92));
}

.goal-presets-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px 6px;
  color: #D1FAE5;
  font-size: 13px;
  font-weight: 600;
}

/* ---------- AI 智能指令建议（显眼入口 + 结果下拉） ---------- */
.goal-ai-suggest-wrap {
  margin: 10px 10px 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(251, 191, 36, 0.45);
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.38) 0%, rgba(30, 27, 40, 0.95) 55%, rgba(22, 20, 31, 0.98) 100%);
  box-shadow: 0 0 0 1px rgba(253, 224, 71, 0.12), 0 6px 22px rgba(0, 0, 0, 0.35);
}

.goal-ai-suggest-trigger {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: #FEF3C7;
}

.goal-ai-suggest-trigger:hover:not(:disabled) {
  color: #FFFBEB;
}

.goal-ai-suggest-trigger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.goal-ai-suggest-icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: #FBBF24;
  filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.55));
}

.goal-ai-suggest-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.goal-ai-suggest-spin {
  flex-shrink: 0;
  color: #FBBF24;
  animation: spin 0.9s linear infinite;
}

.goal-ai-suggest-error {
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  color: #FECACA;
  background: rgba(127, 29, 29, 0.35);
}

.goal-ai-suggest-select {
  width: 100%;
  margin-top: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 8px;
  background-color: rgba(15, 23, 42, 0.75);
  color: #FEF9C3;
  font-size: 12px;
  outline: none;
  cursor: pointer;
}

.goal-ai-suggest-select:focus {
  border-color: #FBBF24;
}

.goal-ai-suggest-select option {
  background: #1a1523;
  color: #FEF3C7;
}

/* ---------- 行级指令 ---------- */
.goal-preset-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 14px;
  border: none;
  background: transparent;
  color: #D1D5DB;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.goal-preset-row:hover:not(:disabled) {
  background: rgba(33, 115, 70, 0.12);
  color: #F0FDF4;
}

.goal-preset-row:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.goal-preset-icon {
  flex-shrink: 0;
  color: #6B7280;
  transition: color 0.15s ease;
}

.goal-preset-row:hover:not(:disabled) .goal-preset-icon {
  color: #34D399;
}

.goal-preset-text {
  flex: 1;
  min-width: 0;
}

.goal-preset-arrow {
  flex-shrink: 0;
  color: #6B7280;
  transition: color 0.15s ease, transform 0.15s ease;
}

.goal-preset-row:hover:not(:disabled) .goal-preset-arrow {
  color: #34D399;
  transform: translateX(2px);
}

/* ---------- 自定义公式展开面板 ---------- */
.goal-preset-row-group {
  display: flex;
  flex-direction: column;
}

.goal-preset-formula-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 4px 14px 10px 39px;
  animation: gpFormulaSlide 0.15s ease-out;
}

@keyframes gpFormulaSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.goal-preset-select {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #334155;
  border-radius: 6px;
  background-color: rgba(15, 23, 42, 0.6);
  color: #D1D5DB;
  font-size: 12px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.goal-preset-select:focus {
  border-color: #34D399;
}

.goal-preset-select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.goal-preset-select option {
  background: #1a1a2e;
  color: #D1D5DB;
}







.ai-message.assistant ul, 



.ai-message.assistant ol {



  margin: 4px 0;



  padding-left: 20px;



  font-size: 12px;



}







.ai-message.assistant li {



  margin: 2px 0;



  font-size: 11px;



}







.ai-message.assistant h1, 



.ai-message.assistant h2, 



.ai-message.assistant h3, 



.ai-message.assistant h4 {



  font-size: 12px;



  margin: 4px 0 2px;



}







.ai-message.assistant code {



  font-size: 10px;



}







.ai-message.assistant pre {



  font-size: 10px;



}







.ai-message.user {



  background: linear-gradient(135deg, #217346 0%, #2a9058 100%);



  color: white;



  border-bottom-right-radius: 4px;



  font-size: 12px;



}







.ai-message.error {



  background: #fef2f2;



  color: #991b1b;



  border: 1px solid #fecaca;



  font-size: 11px;



}







/* AI助手回复消息内容样式 */



.ai-assistant-message {



  font-size: 13px !important;



  line-height: 1.6;



}







.ai-assistant-message p {



  font-size: 13px !important;



  margin: 0;



}







.ai-assistant-message p + p {



  margin-top: 4px;



}







.ai-assistant-message ul, 



.ai-assistant-message ol {



  margin: 4px 0;



  padding-left: 20px;



  font-size: 13px !important;



}







.ai-assistant-message li {



  margin: 2px 0;



  font-size: 13px !important;



}







.ai-assistant-message h1, 



.ai-assistant-message h2, 



.ai-assistant-message h3, 



.ai-assistant-message h4 {



  font-size: 13px;



  margin: 4px 0 2px;



}







.ai-assistant-message code {



  font-size: 12.5px;



}







.ai-assistant-message pre {



  font-size: 12px !important;



}

/* 后端进度/结果（Markdown）同样提升可读性 */
.ai-panel .backend-progress-message {
  font-size: 13px !important;
  line-height: 1.6;
}

.ai-panel .backend-progress-message p,
.ai-panel .backend-progress-message li {
  font-size: 13px !important;
  line-height: 1.6;
}

.ai-panel .backend-progress-message h1,
.ai-panel .backend-progress-message h2,
.ai-panel .backend-progress-message h3,
.ai-panel .backend-progress-message h4 {
  font-size: 13px;
  line-height: 1.5;
}

.ai-panel .backend-progress-message code,
.ai-panel .backend-progress-message pre {
  font-size: 12px !important;
  line-height: 1.55;
}







.ai-msg.user {



  background: linear-gradient(135deg, #217346 0%, #2a9058 100%);



  color: white;



  border-bottom-right-radius: 4px;



}







.ai-msg.assistant {



  background: white;



  color: #1f2937;



  border: 1px solid #e5e7eb;



  border-bottom-left-radius: 4px;



}







.ai-msg.error {



  background: #fef2f2;



  color: #991b1b;



  border: 1px solid #fecaca;



}







.ai-msg .thinking {



  color: #3b82f6;



  font-style: italic;



}







.ai-msg.processing {



  display: flex;



  align-items: center;



  gap: 8px;



  color: #3b82f6;



}







.ai-msg .spinner {



  animation: spin 1s linear infinite;



}







@keyframes spin {



  from { transform: rotate(0deg); }



  to { transform: rotate(360deg); }



}







.ai-msg p {



  margin: 0;



}







.ai-msg p + p {



  margin-top: 2px;



}







.ai-msg ul, .ai-msg ol {



  margin: 2px 0;



  padding-left: 16px;



}







.ai-msg li {



  margin: 0;



  padding: 0;



}







.ai-msg li + li {



  margin-top: 1px;



}







.ai-msg h1, .ai-msg h2, .ai-msg h3, .ai-msg h4 {



  margin: 4px 0 2px;



  font-size: 13px;



  font-weight: 600;



}







.ai-msg blockquote {



  margin: 2px 0;



  padding-left: 10px;



  border-left: 2px solid #d1d5db;



  color: #6b7280;



}







.ai-msg code {



  background: #f1f5f9;



  padding: 2px 6px;



  border-radius: 4px;



  font-size: 12px;



  word-break: break-all;



}







.ai-msg pre {



  background: #f1f5f9;



  padding: 8px 12px;



  border-radius: 6px;



  overflow-x: auto;



  font-size: 12px;



  margin: 8px 0;



}







.ai-msg pre code {



  background: none;



  padding: 0;



  white-space: pre-wrap;



  word-break: break-all;



}







/* 输入区 */



.ai-panel-footer {



  display: flex;



  gap: 8px;



  padding: 12px;



  background: white;



  border-top: 1px solid #e5e7eb;



}







.ai-panel-footer textarea {



  flex: 1;



  padding: 10px 12px;



  border: 1px solid #d1d5db;



  border-radius: 6px;



  font-size: 13px;



  resize: none;



  font-family: inherit;



}







.ai-panel-footer textarea:focus {



  outline: none;



  border-color: #3b82f6;



}







.ai-panel-footer textarea:disabled {



  background: #f3f4f6;



}







.ai-panel-footer .send-btn {



  padding: 10px 16px;



  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);



  color: white;



  border: none;



  border-radius: 6px;



  cursor: pointer;



  display: flex;



  align-items: center;



  justify-content: center;



  transition: opacity 0.15s;



}







.ai-panel-footer .send-btn:hover:not(:disabled) {



  opacity: 0.9;



}







.ai-panel-footer .send-btn:disabled {



  background: #9ca3af;



  cursor: not-allowed;



}







/* 滚动条样式（全局统一为普通视图同款） */



::-webkit-scrollbar {



  width: 8px;



  height: 8px;



}







::-webkit-scrollbar-track {



  background: #1E1E1E;



}







::-webkit-scrollbar-thumb {



  background: #3A3A3A;



  border-radius: 4px;



}







::-webkit-scrollbar-thumb:hover {



  background: #4A4A4A;



}







/* ============================================



 * 大文件模式样式



 * ============================================ */







/* 工具栏大文件按钮 */



.toolbar-btn .large-file-label {



  font-size: 11px;



  margin-left: 2px;



}







.toolbar-btn.large-file-active {



  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);



  color: white;



  border-color: #ea580c;



}







.toolbar-btn.large-file-active:hover {



  background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);



}







/* 大文件模式预览提示 */



.large-file-preview-banner {



  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);



  border-bottom: 1px solid #f59e0b;



  padding: 8px 16px;



  display: flex;



  align-items: center;



  justify-content: space-between;



  font-size: 13px;



}







.large-file-preview-banner .info {



  display: flex;



  align-items: center;



  gap: 8px;



  color: #92400e;



}







.large-file-preview-banner .actions {



  display: flex;



  gap: 8px;



}







.large-file-preview-banner .actions button {



  padding: 4px 12px;



  border-radius: 4px;



  font-size: 12px;



  cursor: pointer;



  transition: all 0.2s;



}







.large-file-preview-banner .actions .download-btn {



  background: #f97316;



  color: white;



  border: none;



}







.large-file-preview-banner .actions .download-btn:hover {



  background: #ea580c;



}







.large-file-preview-banner .actions .exit-btn {



  background: white;



  color: #92400e;



  border: 1px solid #f59e0b;



}







.large-file-preview-banner .actions .exit-btn:hover {



  background: #fef3c7;



}







/* AI 面板大文件模式指示器 */



.ai-panel .large-file-indicator {



  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);



  border-bottom: 1px solid #fdba74;



  padding: 8px 12px;



}







.ai-panel .large-file-indicator .file-name {



  font-weight: 600;



  color: #c2410c;



  font-size: 13px;



}







.ai-panel .large-file-indicator .file-info {



  font-size: 11px;



  color: #ea580c;



  margin-top: 2px;



}







/* ============================================



 * 大文件选择器下拉框



 * ============================================ */



.large-file-selector-container {



  position: relative;



  display: inline-flex;



}







.large-file-dropdown {



  position: absolute;



  top: 100%;



  left: 0;



  margin-top: 4px;



  min-width: 320px;



  max-width: 400px;



  background: white;



  border: 1px solid #e2e8f0;



  border-radius: 8px;



  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);



  z-index: 1000;



  overflow: hidden;



}







.large-file-dropdown-header {



  padding: 12px 16px;



  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);



  border-bottom: 1px solid #e2e8f0;



  font-size: 13px;



  font-weight: 600;



  color: #475569;



}







.large-file-dropdown-list {



  max-height: 240px;



  overflow-y: auto;



}







.large-file-dropdown-empty {



  padding: 24px 16px;



  text-align: center;



  color: #94a3b8;



  font-size: 13px;



}







.large-file-dropdown-item {



  padding: 10px 16px;



  cursor: pointer;



  border-bottom: 1px solid #f1f5f9;



  transition: all 0.15s ease;



}







.large-file-dropdown-item:hover {



  background: #f8fafc;



}







.large-file-dropdown-item.active {



  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);



  border-left: 3px solid #f97316;



}







.large-file-item-name {



  display: flex;



  align-items: center;



  gap: 8px;



  font-size: 13px;



  font-weight: 500;



  color: #1e293b;



  margin-bottom: 4px;



}







.large-file-item-name svg {



  color: #16a34a;



  flex-shrink: 0;



}







.large-file-item-name span {



  overflow: hidden;



  text-overflow: ellipsis;



  white-space: nowrap;



}







.large-file-item-info {



  display: flex;



  gap: 12px;



  font-size: 11px;



  color: #64748b;



  padding-left: 24px;



}







.large-file-dropdown-footer {



  padding: 10px 16px;



  background: #f8fafc;



  border-top: 1px solid #e2e8f0;



}







.large-file-upload-btn {



  width: 100%;



  padding: 8px 16px;



  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);



  color: white;



  border: none;



  border-radius: 6px;



  font-size: 13px;



  font-weight: 500;



  cursor: pointer;



  transition: all 0.2s ease;



}







.large-file-upload-btn:hover {



  background: linear-gradient(135deg, #15803d 0%, #166534 100%);



  transform: translateY(-1px);



}



/* ==============================================================================

 * 上传进度条样式

 * ============================================================================== */



.upload-progress-container {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 4px 12px;

  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);

  border: 1px solid #16a34a;

  border-radius: 20px;

  min-width: 140px;

}



.upload-progress-bar {

  flex: 1;

  height: 8px;

  background: #e2e8f0;

  border-radius: 4px;

  overflow: hidden;

}



.upload-progress-fill {

  height: 100%;

  background: linear-gradient(90deg, #16a34a 0%, #22c55e 50%, #4ade80 100%);

  border-radius: 4px;

  transition: width 0.3s ease;

  animation: progress-pulse 1.5s ease-in-out infinite;

}



@keyframes progress-pulse {

  0%, 100% {

    opacity: 1;

  }

  50% {

    opacity: 0.8;

  }

}



.upload-progress-text {

  font-size: 12px;

  font-weight: 600;

  color: #166534;

  min-width: 35px;

  text-align: right;

}







/* ==============================================================================



 * 结果文件样式



 * ============================================================================== */







.result-files-container {



  position: relative;



}







.toolbar-btn.has-results {



  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);



  border-color: #16a34a;



}







.result-files-badge {



  position: absolute;



  top: -4px;



  right: -4px;



  min-width: 16px;



  height: 16px;



  padding: 0 4px;



  background: #16a34a;



  color: white;



  border-radius: 8px;



  font-size: 10px;



  font-weight: 600;



  display: flex;



  align-items: center;



  justify-content: center;



}







.result-files-dropdown {



  position: absolute;



  top: 100%;



  right: 0;



  margin-top: 4px;



  min-width: 360px;



  background: white;



  border-radius: 8px;



  border: 1px solid #e2e8f0;



  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 



              0 8px 10px -6px rgba(0, 0, 0, 0.05);



  z-index: 1001;



  overflow: hidden;



}







.result-files-header {



  padding: 12px 16px;



  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);



  border-bottom: 1px solid #bbf7d0;



  font-size: 12px;



  font-weight: 600;



  color: #166534;



}



/* 结果工作表标签样式 */

.result-sheet-tab {



  background-color: #f0fdf4;



}



.result-sheet-tab:hover {



  background-color: #dcfce7;



}







.result-files-list {



  max-height: 280px;



  overflow-y: auto;



}







.result-file-item {



  display: flex;



  align-items: center;



  justify-content: space-between;



  padding: 10px 16px;



  border-bottom: 1px solid #f1f5f9;



  transition: all 0.15s ease;



}







.result-file-item:hover {



  background: #f8fafc;



}







.result-file-item:last-child {



  border-bottom: none;



}







.result-file-info {



  display: flex;



  align-items: center;



  gap: 8px;



  flex: 1;



  cursor: pointer;



  min-width: 0;



}







.result-file-icon {



  color: #16a34a;



  flex-shrink: 0;



}







.result-file-name {



  font-size: 13px;



  color: #334155;



  white-space: nowrap;



  overflow: hidden;



  text-overflow: ellipsis;



}







.result-file-rows {



  font-size: 11px;



  color: #94a3b8;



  flex-shrink: 0;



  margin-left: auto;



  padding-right: 8px;



}







.result-file-download {



  padding: 6px;



  background: transparent;



  border: 1px solid #e2e8f0;



  border-radius: 4px;



  cursor: pointer;



  color: #64748b;



  transition: all 0.15s ease;



  display: flex;



  align-items: center;



  justify-content: center;



}







.result-file-download:hover {



  background: #16a34a;



  border-color: #16a34a;



  color: white;



}



/* 新手引导提示卡片动画 */

@keyframes welcomeGuideFadeIn {

  from {

    opacity: 0;

    transform: translateY(-10px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.welcome-guide-tooltip {

  animation: welcomeGuideFadeIn 0.3s ease;

}



/* ============================================================================

 * 帮助弹窗样式 (HelpModal)

 * ============================================================================ */

.help-modal-overlay {

  position: fixed;

  inset: 0;

  background: rgba(0, 0, 0, 0.5);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 1000;

  animation: fadeIn 0.2s ease;

}



@keyframes fadeIn {

  from { opacity: 0; }

  to { opacity: 1; }

}



.help-modal {

  background: white;

  border-radius: 12px;

  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  width: 95%;

  max-width: 1200px;

  height: 90vh;

  display: flex;

  flex-direction: column;

  animation: slideUp 0.25s ease;

  overflow: hidden;

}



.help-modal-body {

  display: flex;

  flex: 1;

  overflow: hidden;

}



.help-modal-sidebar {

  width: 260px;

  border-right: 1px solid #e2e8f0;

  background: #f8fafc;

  overflow-y: auto;

  padding: 20px 0;

  flex-shrink: 0;

}



.help-nav-item {

  padding: 10px 24px;

  font-size: 14px;

  color: #475569;

  cursor: pointer;

  transition: all 0.2s;

  border-left: 3px solid transparent;

}



.help-nav-item:hover {

  background: #f1f5f9;

  color: #1e293b;

}



.help-nav-item.active {

  background: #eff6ff;

  color: #2563eb;

  border-left-color: #2563eb;

  font-weight: 500;

}



.help-nav-group {

  margin-bottom: 20px;

}



.help-nav-title {

  padding: 0 24px 8px;

  font-size: 12px;

  font-weight: 700;

  color: #94a3b8;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.help-modal-content {

  flex: 1;

  overflow-y: auto;

  padding: 40px 60px;

  line-height: 1.8;

  scroll-behavior: smooth;

}



/* 提示框样式 */

.help-callout {

  padding: 16px 20px;

  border-radius: 8px;

  margin: 20px 0;

  display: flex;

  gap: 12px;

}



.help-callout-info {

  background: #eff6ff;

  border-left: 4px solid #3b82f6;

}



.help-callout-warning {

  background: #fffbeb;

  border-left: 4px solid #f59e0b;

}



.help-callout-success {

  background: #f0fdf4;

  border-left: 4px solid #22c55e;

}



/* Markdown 样式 */

.help-modal-content h1 {

  font-size: 24px;

  font-weight: 700;

  color: #0f172a;

  margin-bottom: 16px;

  padding-bottom: 12px;

  border-bottom: 2px solid #e2e8f0;

}



.help-modal-content h2 {

  font-size: 20px;

  font-weight: 600;

  color: #1e293b;

  margin-top: 32px;

  margin-bottom: 12px;

}



.help-modal-content h3 {

  font-size: 16px;

  font-weight: 600;

  color: #334155;

  margin-top: 24px;

  margin-bottom: 8px;

}



.help-modal-content p {

  color: #475569;

  margin-bottom: 12px;

}



.help-modal-content ul,

.help-modal-content ol {

  color: #475569;

  margin-bottom: 12px;

  padding-left: 24px;

}



.help-modal-content li {

  margin-bottom: 4px;

}



.help-modal-content table {

  width: 100%;

  border-collapse: collapse;

  margin: 16px 0;

  font-size: 14px;

}



.help-modal-content th,

.help-modal-content td {

  border: 1px solid #e2e8f0;

  padding: 10px 12px;

  text-align: left;

}



.help-modal-content th {

  background: #f8fafc;

  font-weight: 600;

  color: #334155;

}



.help-modal-content td {

  color: #475569;

}



.help-modal-content code {

  background: #f1f5f9;

  padding: 2px 6px;

  border-radius: 4px;

  font-family: 'Menlo', 'Monaco', 'Consolas', monospace;

  font-size: 13px;

  color: #0f172a;

}



.help-modal-content pre {

  background: #1e293b;

  color: #e2e8f0;

  padding: 16px;

  border-radius: 8px;

  overflow-x: auto;

  margin: 12px 0;

}



.help-modal-content pre code {

  background: transparent;

  padding: 0;

  color: inherit;

}



.help-modal-content hr {

  border: none;

  border-top: 1px solid #e2e8f0;

  margin: 24px 0;

}



.help-modal-content strong {

  font-weight: 600;

  color: #1e293b;

}



.help-modal-content em {

  color: #64748b;

}



.help-modal-content blockquote {

  border-left: 4px solid #3b82f6;

  padding-left: 16px;

  margin: 16px 0;

  color: #475569;

  font-style: italic;

}

/* ============================================================================
 * 报表生成弹窗样式
 * ============================================================================ */

.report-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.report-modal {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 1200px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.report-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.report-modal-header h2 {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.report-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.2s;
}

.report-modal-close:hover {
  background: #f3f4f6;
  color: #1f2937;
}

.report-modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.report-file-info {
  display: flex;
  gap: 24px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 6px;
  margin-bottom: 24px;
}

.report-file-info .info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.report-file-info .info-label {
  font-size: 12px;
  color: #6b7280;
  font-weight: 500;
}

.report-file-info .info-value {
  font-size: 14px;
  color: #1f2937;
  font-weight: 600;
}

.report-dimensions-section {
  margin-bottom: 24px;
}

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

.dimensions-header h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.btn-analyze {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #217346;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

.btn-analyze:hover:not(:disabled) {
  background: #1a5a37;
}

.btn-analyze:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.recommended-dimensions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.recommended-header {
  padding: 12px;
  background: #eff6ff;
  border-radius: 6px;
  margin-bottom: 8px;
}

.business-type {
  font-size: 14px;
  font-weight: 600;
  color: #1e40af;
}

.dimension-card {
  padding: 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  background: white;
}

.dimension-card:hover {
  border-color: #217346;
  box-shadow: 0 4px 12px rgba(33, 115, 70, 0.1);
}

.dimension-card.selected {
  border-color: #217346;
  background: #f0fdf4;
}

.dimension-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 12px;
}

.dimension-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.dimension-item {
  font-size: 14px;
  color: #4b5563;
}

.dimension-item span {
  font-weight: 600;
  color: #1f2937;
  margin-right: 8px;
}

.dimension-reasoning {
  font-size: 13px;
  color: #6b7280;
  font-style: italic;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
}

.report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
}

.btn-generate {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: #217346;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.2s;
}

.btn-generate:hover:not(:disabled) {
  background: #1a5a37;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(33, 115, 70, 0.3);
}

.btn-generate:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.report-generating {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #6b7280;
}

.report-generating p {
  margin-top: 16px;
  font-size: 16px;
}

.report-content {
  padding: 24px;
}

.report-header {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 2px solid #e5e7eb;
}

.report-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.report-meta {
  font-size: 14px;
  color: #6b7280;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.report-progress {
  color: #217346;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.report-progress::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #217346;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* 报表加载指示器 - 底部显示 */
.report-loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  margin-top: 32px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px dashed #d1d5db;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
}

.report-loading-indicator .loading-text {
  color: #374151;
}

.report-loading-indicator svg {
  color: #217346;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 核心指标表格样式 */
.report-metrics-section {
  margin-bottom: 32px;
  padding: 32px;
  background: linear-gradient(to bottom, #ffffff, #f9fafb);
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.report-metrics-section h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 24px 0;
  padding-bottom: 12px;
  border-bottom: 3px solid #217346;
}

.metrics-table-wrapper {
  overflow-x: auto;
  margin-top: 16px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  background: white;
}

.metrics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 100%;
}

.metrics-table thead {
  background: linear-gradient(to bottom, #217346, #1e5f3a);
}

.metrics-table th {
  padding: 14px 18px;
  text-align: left;
  font-weight: 600;
  color: #ffffff;
  border-bottom: 2px solid #1e5f3a;
  white-space: nowrap;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.metrics-table tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: all 0.2s ease;
}

.metrics-table tbody tr:nth-child(even) {
  background: #fafbfc;
}

.metrics-table tbody tr:hover {
  background: #f0fdf4;
  transform: scale(1.01);
  box-shadow: 0 2px 4px rgba(33, 115, 70, 0.1);
}

.metrics-table tbody tr:last-child {
  border-bottom: none;
}

.metrics-table td {
  padding: 14px 18px;
  color: #374151;
  border-right: 1px solid #f3f4f6;
  line-height: 1.6;
}

.metrics-table td:last-child {
  border-right: none;
}

.metrics-table th:first-child,
.metrics-table td:first-child {
  padding-left: 24px;
}

.metrics-table th:last-child,
.metrics-table td:last-child {
  padding-right: 24px;
}

.metric-value {
  font-weight: 600;
  color: #217346;
  font-size: 16px;
}

.metrics-table-wrapper::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(to right, #217346, #34d399);
  border-radius: 8px 8px 0 0;
}

.report-charts {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-bottom: 32px;
}

.chart-container {
  padding: 24px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.chart-container h3 {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 16px 0;
}

.report-insights {
  margin-bottom: 32px;
  padding: 32px;
  background: linear-gradient(to bottom, #ffffff, #f9fafb);
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.report-insights h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 24px 0;
  padding-bottom: 12px;
  border-bottom: 3px solid #217346;
}

/* Markdown 样式增强 */
.insights-content {
  line-height: 1.8;
  color: #374151;
}

.markdown-h1 {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  margin: 32px 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #e5e7eb;
}

.markdown-h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin: 28px 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #e5e7eb;
}

.markdown-h3 {
  font-size: 20px;
  font-weight: 600;
  color: #374151;
  margin: 24px 0 12px 0;
}

.markdown-h4 {
  font-size: 18px;
  font-weight: 600;
  color: #4b5563;
  margin: 20px 0 10px 0;
}

.markdown-p {
  margin: 12px 0;
  line-height: 1.8;
  color: #374151;
}

.markdown-ul,
.markdown-ol {
  margin: 16px 0;
  padding-left: 24px;
}

.markdown-li {
  margin: 8px 0;
  line-height: 1.8;
  color: #374151;
}

.markdown-strong {
  font-weight: 600;
  color: #1f2937;
}

.insights-content {
  font-size: 15px;
  line-height: 1.8;
  color: #374151;
}

.report-downloads {
  display: flex;
  gap: 12px;
  justify-content: center;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
}

.btn-download.disabled,
.btn-download:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-download {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: white;
  color: #217346;
  border: 2px solid #217346;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s;
}

.btn-download:hover:not(:disabled) {
  background: #217346;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(33, 115, 70, 0.3);
}

/* 旋转动画 */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* 基础维度选择器样式 */
.basic-dimensions-section {
  margin-top: 24px;
  padding: 20px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.basic-dimensions-section h4 {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 16px 0;
}

.dimension-group {
  margin-bottom: 20px;
}

.dimension-group:last-child {
  margin-bottom: 0;
}

.dimension-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.dimension-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.dimension-select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  color: #1f2937;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 150px;
}

.dimension-select:hover {
  border-color: #217346;
}

.dimension-select:focus {
  outline: none;
  border-color: #217346;
  box-shadow: 0 0 0 3px rgba(33, 115, 70, 0.1);
}

.dimension-checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.dimension-checkboxes .checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
  transition: all 0.2s;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.dimension-checkboxes .checkbox-label:hover {
  border-color: #217346;
  background: #f0fdf4;
}

.dimension-checkboxes .checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #217346;
}

.dimension-checkboxes .checkbox-label input[type="checkbox"]:checked + span {
  font-weight: 600;
  color: #217346;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-out;
}

.report-content-section {
  margin-top: 24px;
  padding: 24px;
  background: white;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-reset {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: white;
  color: #217346;
  border: 2px solid #217346;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.2s;
  margin-left: 12px;
}

.btn-reset:hover {
  background: #f0fdf4;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(33, 115, 70, 0.2);
}

/* Markdown表格样式 - 商业化美观设计 */
.markdown-table-wrapper {
  overflow-x: auto;
  margin: 24px 0;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  background: white;
}

.markdown-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  font-size: 14px;
  min-width: 100%;
}

.markdown-thead {
  background: linear-gradient(to bottom, #217346, #1e5f3a);
}

.markdown-th {
  padding: 14px 18px;
  text-align: left;
  font-weight: 600;
  color: #ffffff;
  border-bottom: 2px solid #1e5f3a;
  white-space: nowrap;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.markdown-tbody .markdown-tr {
  border-bottom: 1px solid #f3f4f6;
  transition: all 0.2s ease;
}

.markdown-tbody .markdown-tr:nth-child(even) {
  background: #fafbfc;
}

.markdown-tbody .markdown-tr:hover {
  background: #f0fdf4;
  transform: scale(1.01);
  box-shadow: 0 2px 4px rgba(33, 115, 70, 0.1);
}

.markdown-tbody .markdown-tr:last-child {
  border-bottom: none;
}

.markdown-td {
  padding: 14px 18px;
  color: #374151;
  border-right: 1px solid #f3f4f6;
  line-height: 1.6;
}

.markdown-td:last-child {
  border-right: none;
}

.markdown-th:first-child,
.markdown-td:first-child {
  padding-left: 24px;
}

.markdown-th:last-child,
.markdown-td:last-child {
  padding-right: 24px;
}

/* 表格标题样式 */
.markdown-table-wrapper::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(to right, #217346, #34d399);
  border-radius: 8px 8px 0 0;
}

/* 表格与图表组合样式 */
.table-with-chart-wrapper {
  margin: 24px 0;
}

.table-chart-above {
  margin-bottom: 24px;
  padding: 20px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.table-chart-title {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 16px 0;
  text-align: center;
}

/* ========== 通知系统 ========== */

.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  pointer-events: none;
}

.notification-badge-inline {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  background: #ef4444;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
}

.notification-panel {
  position: fixed;
  bottom: 50px;
  left: 10px;
  width: 340px;
  max-height: 480px;
  background: var(--bg-secondary, #1e1e1e);
  border: 1px solid var(--border-primary, #333);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: notifSlideUp 0.2s ease-out;
}

@keyframes notifSlideUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.notification-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-primary, #333);
}

.notification-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
}

.notification-panel-action {
  background: transparent;
  border: none;
  color: var(--text-secondary, #888);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}
.notification-panel-action:hover { background: var(--bg-hover, #333); color: var(--text-primary, #e5e5e5); }

/* ===== 系统配置面板 ===== */
.system-config-panel {
  position: fixed;
  bottom: 50px;
  left: 10px;
  width: 360px;
  max-height: 520px;
  background: var(--bg-secondary, #1e1e1e);
  border: 1px solid var(--border-primary, #333);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: notifSlideUp 0.2s ease-out;
}
.system-config-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-primary, #333);
}
.system-config-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
  display: flex;
  align-items: center;
}
.system-config-panel-action {
  background: transparent;
  border: none;
  color: var(--text-secondary, #888);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}
.system-config-panel-action:hover { background: var(--bg-hover, #333); color: var(--text-primary, #e5e5e5); }
.system-config-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
}
.system-config-loading {
  text-align: center;
  padding: 24px;
  color: var(--text-secondary, #888);
  font-size: 13px;
}
.system-config-section {
  margin-bottom: 16px;
}
.system-config-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #888);
  margin-bottom: 6px;
}
.system-config-select {
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  background: var(--bg-primary, #0f0f0f);
  border: 1px solid var(--border-primary, #333);
  border-radius: 6px;
  color: var(--text-primary, #e5e5e5);
  cursor: pointer;
}
.system-config-select:focus {
  outline: none;
  border-color: var(--accent-primary, #34D399);
}
.system-config-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.system-config-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary, #e5e5e5);
  cursor: pointer;
}
.system-config-check input { cursor: pointer; }
.system-config-actions {
  margin-top: 20px;
}
.system-config-save-btn {
  width: 100%;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  background: var(--accent-primary, #34D399);
  color: #0f0f0f;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.system-config-save-btn:hover:not(:disabled) { opacity: 0.9; }
.system-config-save-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.system-config-toast {
  margin-top: 12px;
  font-size: 14px;
  color: var(--accent-primary, #34D399);
  text-align: center;
}

.ai-popup-toast {
  position: fixed;
  right: 20px;
  bottom: 22px;
  width: min(380px, calc(100vw - 24px));
  border-radius: 10px;
  padding: 10px 36px 10px 12px;
  z-index: 9997;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(148, 163, 184, 0.32);
  background: rgba(15, 23, 42, 0.96);
  color: #e5e7eb;
}

.ai-popup-toast.info {
  border-color: rgba(59, 130, 246, 0.45);
  background: rgba(16, 32, 62, 0.96);
}

.ai-popup-toast.success {
  border-color: rgba(16, 185, 129, 0.5);
  background: rgba(15, 45, 38, 0.96);
}

.ai-popup-toast.warning {
  border-color: rgba(245, 158, 11, 0.55);
  background: rgba(58, 36, 12, 0.96);
}

.ai-popup-toast.error {
  border-color: rgba(239, 68, 68, 0.55);
  background: rgba(57, 24, 24, 0.96);
}

.ai-popup-toast-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 4px;
}

.ai-popup-toast-content {
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.ai-popup-toast-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(148, 163, 184, 0.14);
  color: #e5e7eb;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  line-height: 0;
}

.ai-popup-toast-close:hover {
  background: rgba(148, 163, 184, 0.28);
  color: #fff;
}

.notification-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
}

.notification-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text-secondary, #888);
  gap: 8px;
}
.notification-empty p { margin: 0; font-size: 13px; }

.notification-section-label {
  padding: 6px 14px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary, #888);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.notification-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}
.notification-item:hover { background: var(--bg-hover, #2a2a2a); }

.notification-item.unread { background: rgba(52, 211, 153, 0.05); }
.notification-item.unread::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34D399;
}

.notification-item-icon { flex-shrink: 0; margin-top: 2px; }

.notification-item-content { flex: 1; min-width: 0; }

.notification-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #e5e5e5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-item-msg {
  font-size: 14px;
  color: var(--text-secondary, #999);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification-item-time {
  font-size: 11px;
  color: var(--text-muted, #666);
  margin-top: 4px;
}
.notification-inline-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--accent-primary, #34d399);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-top: 6px;
  text-decoration: underline;
}
.notification-inline-link:hover {
  color: #57f6b9;
}

.notification-item-delete {
  background: transparent;
  border: none;
  color: var(--text-muted, #666);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s;
  flex-shrink: 0;
  margin-top: 2px;
}
.notification-item:hover .notification-item-delete { opacity: 1; }
.notification-item-delete:hover { color: #ef4444; background: rgba(239, 68, 68, 0.1); }

/* 异步生成报表 */
.report-async-hint {
  color: #94a3b8;
  font-size: 13px;
  margin-top: 8px;
  padding: 10px 16px;
  background: rgba(59, 130, 246, 0.08);
  border-left: 3px solid #3b82f6;
  border-radius: 4px;
}
.report-generate-async-btn {
  background: transparent !important;
  border: 1px solid rgba(59, 130, 246, 0.4) !important;
  color: #60a5fa !important;
  font-size: 13px !important;
  margin-left: 8px;
}
.report-generate-async-btn:hover:not(:disabled) {
  background: rgba(59, 130, 246, 0.1) !important;
  border-color: #3b82f6 !important;
}
.report-generate-async-btn:disabled {
  opacity: 0.4;
}

/* ============================================================================
 * 历史列表操作按钮（共享）
 * 报表/汇报共用，避免样式漂移
 * ============================================================================ */
.ui-history-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 58px;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid #1d4ed8;
  background: rgba(30, 64, 175, 0.15);
  color: #dbeafe;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ui-history-action-btn:hover:not(:disabled) {
  border-color: #3b82f6;
  background: rgba(30, 64, 175, 0.24);
  transform: translateY(-1px);
}

.ui-history-action-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.28);
}

.ui-history-action-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.ui-history-action-btn-danger {
  border-color: #b91c1c;
  color: #fecaca;
  background: rgba(185, 28, 28, 0.16);
}

.ui-history-action-btn-danger:hover:not(:disabled) {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.22);
}

/* 三个业务视图共用：标题右侧“点击开始”按钮 */
.view-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.view-start-action-btn {
  border: 1px solid #217346;
  background: rgba(33, 115, 70, 0.22);
  color: #bbf7d0;
  border-radius: 999px;
  padding: 4px 14px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.2s ease;
}

.view-start-action-btn:hover {
  background: rgba(33, 115, 70, 0.34);
  border-color: #2ea65d;
}

/* ============================================================================
 * 自定义公式管理弹窗
 * ============================================================================ */

.fm-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9000;
}
.fm-dialog {
  background: var(--bg-secondary, #252525);
  border: 1px solid var(--border-primary, #333);
  border-radius: 12px;
  width: 820px; max-width: 94vw;
  height: 600px; max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}

/* ---- 标题栏 ---- */
.fm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-primary, #333);
}
.fm-title { font-size: 16px; font-weight: 700; color: var(--text-primary, #fff); }
.fm-close {
  background: none; border: none; color: var(--text-tertiary, #b3b3b3);
  cursor: pointer; padding: 4px; border-radius: 4px;
}
.fm-close:hover { color: var(--text-primary, #fff); background: var(--hover-bg, #2a2a2a); }

/* ---- 主体两栏 ---- */
.fm-body { display: flex; flex: 1; overflow: hidden; }

/* ---- 左侧列表 ---- */
.fm-list {
  width: 220px; min-width: 180px;
  border-right: 1px solid var(--border-primary, #333);
  display: flex; flex-direction: column;
}
.fm-list-toolbar {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-primary, #333);
}
.fm-list-items { flex: 1; overflow-y: auto; padding: 6px 0; }
.fm-list-item {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; cursor: pointer;
  color: var(--text-secondary, #e5e5e5);
  font-size: 13px; transition: background 0.12s;
}
.fm-list-item:hover { background: var(--hover-bg, #2a2a2a); }
.fm-list-item.active { background: var(--accent-bg, rgba(33,115,70,0.2)); color: var(--accent-active, #34d399); }
.fm-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-badge {
  font-size: 11px; padding: 1px 6px; border-radius: 4px;
  background: var(--accent-bg, rgba(33,115,70,0.2));
  color: var(--accent-active, #34d399);
}
.fm-empty { padding: 20px; text-align: center; color: var(--text-disabled, #666); font-size: 13px; }

/* ---- 右侧详情 ---- */
.fm-detail { flex: 1; display: flex; flex-direction: column; overflow-y: auto; }
.fm-detail-toolbar {
  display: flex; gap: 8px; padding: 10px 16px;
  border-bottom: 1px solid var(--border-primary, #333);
}
.fm-placeholder {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px;
}
.fm-placeholder-title { font-size: 15px; font-weight: 600; color: var(--text-tertiary, #b3b3b3); margin-bottom: 20px; }

/* ---- 使用指引 ---- */
.fm-guide { max-width: 400px; color: var(--text-tertiary, #b3b3b3); font-size: 13px; line-height: 1.8; }
.fm-guide-title { font-weight: 600; color: var(--text-secondary, #e5e5e5); margin-top: 12px; margin-bottom: 2px; }
.fm-guide ul { padding-left: 18px; margin: 0; }
.fm-guide code {
  background: var(--bg-tertiary, #2a2a2a); padding: 1px 5px; border-radius: 3px;
  font-family: 'Consolas', 'Menlo', monospace; font-size: 12px;
  color: var(--accent-active, #34d399);
}

/* ---- 错误 ---- */
.fm-error {
  display: flex; align-items: center; gap: 6px;
  margin: 8px 16px 0; padding: 8px 12px; border-radius: 6px;
  background: rgba(220, 38, 38, 0.12); color: #f87171; font-size: 13px;
}

/* ---- 表单 ---- */
.fm-form { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.fm-label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: var(--text-tertiary, #b3b3b3);
}
.fm-input {
  background: var(--bg-tertiary, #2a2a2a);
  border: 1px solid var(--border-primary, #333);
  border-radius: 6px; padding: 7px 10px;
  color: var(--text-primary, #fff); font-size: 13px;
  outline: none; transition: border-color 0.15s;
}
.fm-input:focus { border-color: var(--accent-primary, #217346); }
.fm-input:disabled { opacity: 0.55; cursor: default; }
.fm-input-mono { font-family: 'Consolas', 'Menlo', monospace; }
.fm-input-sm { padding: 5px 8px; font-size: 12px; }
.fm-input-num { width: 80px; }
.fm-hint { font-size: 11px; color: var(--text-disabled, #666); margin-top: 2px; }

/* ---- 参数区 ---- */
.fm-params-section { margin-top: 4px; }
.fm-params-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600; color: var(--text-secondary, #e5e5e5);
  margin-bottom: 6px;
}
.fm-param-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }

/* ---- 实时预览 ---- */
.fm-preview {
  margin-top: 10px; padding: 12px;
  background: var(--bg-tertiary, #2a2a2a);
  border: 1px solid var(--border-primary, #333);
  border-radius: 8px;
}
.fm-preview-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--accent-active, #34d399);
  margin-bottom: 8px;
}
.fm-preview-inputs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.fm-preview-label {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12px; color: var(--text-tertiary, #b3b3b3);
}
.fm-preview-result { font-size: 14px; color: var(--text-primary, #fff); }

/* ---- 按钮 ---- */
.fm-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; border-radius: 6px; font-size: 13px;
  border: 1px solid var(--border-primary, #333);
  background: var(--bg-tertiary, #2a2a2a);
  color: var(--text-secondary, #e5e5e5);
  cursor: pointer; transition: background 0.12s;
}
.fm-btn:hover { background: var(--hover-bg, #333); }
.fm-btn:disabled { opacity: 0.4; cursor: default; }
.fm-btn-accent {
  background: var(--accent-primary, #217346);
  border-color: var(--accent-primary, #217346);
  color: #fff;
}
.fm-btn-accent:hover { background: var(--accent-hover, #2a9058); }
.fm-btn-danger { color: #f87171; }
.fm-btn-danger:hover { background: rgba(220, 38, 38, 0.15); }
.fm-btn-sm {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 8px; border-radius: 4px; font-size: 12px;
  border: 1px solid var(--border-primary, #333);
  background: var(--bg-tertiary, #2a2a2a);
  color: var(--text-tertiary, #b3b3b3);
  cursor: pointer;
}
.fm-btn-sm:hover { background: var(--hover-bg, #333); color: var(--text-primary, #fff); }
.fm-btn-icon {
  background: none; border: none; padding: 3px; cursor: pointer;
  color: var(--text-disabled, #666); border-radius: 4px;
}
.fm-btn-icon:hover { color: #f87171; background: rgba(220, 38, 38, 0.1); }

/* ============================================================================
 * 用户中心面板 (UserCenterPanel)
 * ============================================================================ */
.uc-panel {
  position: fixed;
  bottom: 50px;
  left: 10px;
  width: 360px;
  max-height: 560px;
  background: var(--bg-secondary, #1e1e1e);
  border: 1px solid var(--border-primary, #333);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: notifSlideUp 0.2s ease-out;
}
.uc-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-primary, #333);
}
.uc-panel-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
  display: flex;
  align-items: center;
}
.uc-panel-close {
  background: transparent;
  border: none;
  color: var(--text-secondary, #888);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}
.uc-panel-close:hover { background: var(--bg-hover, #333); color: var(--text-primary, #e5e5e5); }
.uc-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
}

/* --- Section --- */
.uc-section {
  margin-bottom: 18px;
}
.uc-section-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #888);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

/* --- Info rows --- */
.uc-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 14px;
}
.uc-info-key { color: var(--text-tertiary, #666); }
.uc-info-val { color: var(--text-primary, #e5e5e5); font-weight: 500; }

/* --- Input --- */
.uc-input {
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  background: var(--bg-primary, #0f0f0f);
  border: 1px solid var(--border-primary, #333);
  border-radius: 6px;
  color: var(--text-primary, #e5e5e5);
  margin-bottom: 8px;
  box-sizing: border-box;
}
.uc-input:focus {
  outline: none;
  border-color: var(--accent-color, #4f8ef7);
}

/* --- Password toggle --- */
.uc-password-wrap {
  position: relative;
  margin-bottom: 8px;
}
.uc-password-wrap .uc-input { margin-bottom: 0; padding-right: 34px; }
.uc-eye-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-disabled, #555);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
}
.uc-eye-btn:hover { color: var(--text-secondary, #888); }

/* --- Hint --- */
.uc-hint {
  font-size: 12px;
  color: var(--text-disabled, #555);
  margin-bottom: 8px;
}

/* --- Action Button --- */
.uc-action-btn {
  width: 100%;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: var(--accent-color, #4f8ef7);
  color: #fff;
  transition: opacity 0.15s;
}
.uc-action-btn:hover { opacity: 0.85; }
.uc-action-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Logout --- */
.uc-section-logout { border-top: 1px solid var(--border-primary, #333); padding-top: 12px; }
.uc-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #dc2626;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  color: #dc2626;
  transition: background 0.15s;
}
.uc-logout-btn:hover { background: rgba(220, 38, 38, 0.1); }

/* --- Toast --- */
.uc-toast {
  position: absolute;
  bottom: 12px;
  left: 14px;
  right: 14px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  text-align: center;
  animation: notifSlideUp 0.15s ease-out;
}
.uc-toast.success { background: #166534; color: #bbf7d0; }
.uc-toast.error { background: #7f1d1d; color: #fca5a5; }

.excel-cell-has-image {
  padding: 0 !important;
  overflow: hidden;
}

.excel-cell-image {
  width: 100%;
  height: 100%;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}


/* ============================================================
 * 批量转 Word (Batch Word) 样式
 * ============================================================ */

.bw-view {
  display: flex; flex-direction: column;
  height: 100%; width: 100%;
  background: var(--bg-primary, #0f0f0f);
  color: var(--text-primary, #e5e5e5);
  overflow: hidden;
}

/* ---- 顶部导航 ---- */

.bw-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-color, #2a2a2a);
  flex-shrink: 0;
}
.bw-topbar-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 16px; font-weight: 600;
}
.bw-topbar-stage {
  display: flex; align-items: center; gap: 4px;
  margin-left: auto; font-size: 14px; opacity: 0.7;
}
.bw-stage-prefix {
  font-size: 14px;
  opacity: 0.9;
  margin-right: 2px;
}
.bw-stage-dot {
  padding: 2px 8px; border-radius: 10px;
  font-size: 14px;
}
.bw-stage-dot--active {
  background: linear-gradient(135deg, var(--accent-primary, #217346), #2A9058);
  color: #fff;
  opacity: 1; font-weight: 500;
}
.bw-stage-arrow { opacity: 0.35; }

/* ---- 主体 ---- */

.bw-body {
  flex: 1; overflow-y: auto;
  padding: 24px 32px;
  display: flex; flex-direction: column; gap: 20px;
}

/* ---- 首页 ---- */

.bw-home {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px;
  padding: 60px 0; text-align: center;
}
.bw-home-icon { opacity: 0.25; }
.bw-home-title { font-size: 24px; font-weight: 700; margin: 0; }
.bw-home-desc { font-size: 15px; opacity: 0.65; max-width: 480px; line-height: 1.6; }
.bw-home-info { font-size: 14px; opacity: 0.5; }
.bw-home-warn { font-size: 14px; color: #e5a340; }

/* ---- 按钮 ---- */

.bw-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 40px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent-primary, #217346), #2A9058);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s;
}
.bw-btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(33, 115, 70, 0.4);
}
.bw-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.bw-btn-lg { padding: 12px 40px; font-size: 16px; }

.bw-btn-ghost {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 12px; border-radius: 5px; border: none;
  background: transparent; color: var(--text-primary, #e5e5e5);
  font-size: 14px; cursor: pointer; opacity: 0.7;
  transition: opacity 0.15s;
}
.bw-btn-ghost:hover { opacity: 1; background: var(--bg-hover, #222); }

.bw-btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 4px; border: none;
  background: transparent; color: var(--text-primary, #e5e5e5);
  cursor: pointer; opacity: 0.5;
}
.bw-btn-icon:hover { opacity: 1; background: var(--bg-hover, #333); }

.bw-btn-reupload { margin-top: 8px; align-self: flex-start; }

/* ---- 上传区 ---- */

.bw-upload-section {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 520px; margin: 0 auto;
}

.bw-dropzone {
  border: 2px dashed var(--border-color, #333);
  border-radius: 10px; padding: 48px 24px;
  text-align: center; cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.bw-dropzone:hover {
  border-color: var(--accent-color, #4f8cff);
  background: rgba(79,140,255,0.04);
}
.bw-dropzone-inner {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.bw-dropzone-title { font-size: 16px; font-weight: 600; }
.bw-dropzone-hint { font-size: 14px; opacity: 0.5; }

.bw-ai-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; cursor: pointer; opacity: 0.8;
}
.bw-ai-toggle input { accent-color: var(--accent-color, #4f8cff); }

/* ---- 错误提示 ---- */

.bw-error {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; color: #e55; padding: 6px 0;
}
.bw-error--banner {
  background: rgba(220,60,60,0.1); border-radius: 6px;
  padding: 8px 14px;
}

/* ---- AI 加载 ---- */

.bw-ai-loading {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 6px;
  background: rgba(79,140,255,0.08); font-size: 14px;
}

/* ---- Excel 首行预览 ---- */
.bw-excel-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bw-excel-preview-table-wrap {
  border: 1px solid var(--border-color, #2a2a2a);
  border-radius: 8px;
  overflow-x: auto;
  background: var(--bg-secondary, #171717);
}

.bw-excel-preview-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  table-layout: fixed;
}

.bw-excel-preview-table th,
.bw-excel-preview-table td {
  border-bottom: 1px solid var(--border-color, #252525);
  border-right: 1px solid var(--border-color, #252525);
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
}

.bw-excel-preview-table th:last-child,
.bw-excel-preview-table td:last-child {
  border-right: none;
}

.bw-excel-preview-table thead th {
  background: #1c1c1c;
  font-weight: 600;
  color: #e8e8e8;
}

.bw-excel-preview-table tbody td {
  background: #151515;
  color: #d8d8d8;
}

.bw-excel-preview-image {
  display: block;
  max-width: 84px;
  max-height: 84px;
  border-radius: 6px;
  -o-object-fit: contain;
     object-fit: contain;
  background: #fff;
}

.bw-excel-preview-text {
  display: inline-block;
  min-height: 20px;
  line-height: 1.5;
}

/* ---- 映射编辑器 ---- */

.bw-mapping-editor { display: flex; flex-direction: column; gap: 10px; }

.bw-mapping-header {
  display: flex; align-items: center; justify-content: space-between;
}
.bw-mapping-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
}

.bw-mapping-table {
  border: 1px solid var(--border-color, #2a2a2a);
  border-radius: 8px; overflow: hidden;
}
.bw-mapping-row {
  display: grid; grid-template-columns: 1fr 1fr 90px 36px;
  gap: 8px; padding: 8px 12px; align-items: center;
  border-bottom: 1px solid var(--border-color, #222);
  position: relative;
}
.bw-mapping-row:last-child { border-bottom: none; }
.bw-mapping-row--head {
  background: var(--bg-secondary, #1a1a1a);
  font-size: 14px; font-weight: 500; opacity: 0.7;
}

.bw-mapping-empty {
  padding: 24px; text-align: center;
  font-size: 14px; opacity: 0.45;
}

.bw-low-conf {
  position: absolute; right: 42px; top: 50%; transform: translateY(-50%);
  color: #e5a340;
}

/* ---- 输入框 / 选择框 ---- */

.bw-input {
  background: var(--bg-secondary, #1a1a1a);
  border: 1px solid var(--border-color, #333);
  border-radius: 5px; padding: 6px 10px;
  color: var(--text-primary, #e5e5e5);
  font-size: 14px; outline: none;
  transition: border-color 0.15s;
}
.bw-input:focus { border-color: var(--accent-color, #4f8cff); }
.bw-input--narrow { max-width: 90px; }
.bw-input--wide { flex: 1; }

/* ---- 文件名配置 ---- */

.bw-filename-section { display: flex; flex-direction: column; gap: 10px; }
.bw-section-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 600;
}
.bw-filename-input-row {
  display: flex; align-items: center; gap: 6px;
}
.bw-filename-ext { font-size: 14px; opacity: 0.5; }

.bw-filename-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.bw-tag {
  padding: 3px 10px; border-radius: 12px;
  background: var(--bg-secondary, #222); font-size: 14px;
  cursor: pointer; opacity: 0.7; transition: opacity 0.15s;
}
.bw-tag:hover { opacity: 1; background: linear-gradient(135deg, var(--accent-primary, #217346), #2A9058); color: #fff; }
.bw-tag--active {
  opacity: 1;
  background: linear-gradient(135deg, var(--accent-primary, #217346), #2A9058);
  color: #fff;
}

.bw-filename-preview {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 12px; border-radius: 6px;
  background: var(--bg-secondary, #1a1a1a);
}
.bw-preview-label { font-size: 14px; opacity: 0.5; margin-bottom: 2px; }
.bw-preview-item { font-size: 14px; opacity: 0.8; }

/* ---- 在线编辑区（高保真 Word 渲染） ---- */
.bw-draft-editor {
  border: 1px solid var(--border-color, #2a2a2a);
  border-radius: 8px;
  background: var(--bg-secondary, #171717);
  padding: 14px;
}
.bw-editor-tools {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bw-btn-ai-annotate {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}
.bw-rich-editor {
  width: 100%;
  min-height: 320px;
  max-height: 600px;
  resize: vertical;
  background: #fff;
  border: 1px solid var(--border-color, #ccc);
  color: #222;
  border-radius: 6px;
  padding: 0;
  font-size: 14px;
  line-height: 1.7;
  outline: none;
  overflow: auto;
}
.bw-rich-editor:focus {
  border-color: var(--accent-color, #4f8cff);
}
.bw-rich-editor:empty::before {
  content: attr(data-placeholder);
  color: #999;
  pointer-events: none;
}
.bw-ph-token {
  display: inline;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(79, 140, 255, 0.22);
  color: #2563eb;
  font-weight: 600;
}
.bw-rich-editor img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.bw-rich-editor table {
  border-collapse: collapse !important;
  border: 1px solid #222 !important;
}
.bw-rich-editor td,
.bw-rich-editor th {
  border: 1px solid #222 !important;
}
.bw-editor-hint {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--text-secondary, #bdbdbd);
}

/* ---- 右键上下文菜单 ---- */
.bw-context-menu {
  position: fixed;
  z-index: 9999;
  min-width: 140px;
  max-height: 320px;
  overflow-y: auto;
  background: #fff;
  color: #222;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  padding: 4px 0;
  font-size: 14px;
}
.bw-context-menu-title {
  padding: 6px 14px;
  font-size: 13px;
  color: #888;
  border-bottom: 1px solid #eee;
}
.bw-context-menu-item {
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.bw-context-menu-item:hover {
  background: #e8f0fe;
  color: #1a56db;
}

/* ---- 生成面板 ---- */

.bw-generate-panel {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 0;
}
.bw-generate-actions-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}
.bw-generate-panel--done { color: #4caf50; }
.bw-gen-text { font-size: 15px; }

/* ---- 旋转动画 ---- */

.bw-spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border-color, #333);
  border-top-color: var(--accent-color, #4f8cff);
  border-radius: 50%;
  animation: bw-spin 0.7s linear infinite;
}
@keyframes bw-spin { to { transform: rotate(360deg); } }

.bw-spin { animation: bw-spin 0.7s linear infinite; }

/* ---- 映射阶段容器 ---- */
.bw-mapping-stage {
  display: flex; flex-direction: column; gap: 20px;
}

/* ================================================================
 *  未保存确认弹框
 * ================================================================ */
.unsaved-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}
.unsaved-confirm-dialog {
  background: var(--panel-bg, #1e1e1e);
  border: 1px solid var(--border-color, #333);
  border-radius: 10px;
  padding: 28px 32px 22px;
  min-width: 380px;
  max-width: 440px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
.unsaved-confirm-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
  margin-bottom: 12px;
}
.unsaved-confirm-body {
  font-size: 14px;
  color: var(--text-secondary, #aaa);
  line-height: 1.6;
  margin-bottom: 24px;
}
.unsaved-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.unsaved-btn {
  padding: 7px 18px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid var(--border-color, #444);
  transition: background 0.15s, color 0.15s;
}
.unsaved-btn.cancel {
  background: transparent;
  color: var(--text-secondary, #aaa);
}
.unsaved-btn.cancel:hover { background: rgba(255,255,255,0.06); }
.unsaved-btn.discard {
  background: transparent;
  color: #ef5350;
  border-color: #ef5350;
}
.unsaved-btn.discard:hover { background: rgba(239,83,80,0.12); }
.unsaved-btn.save {
  background: var(--accent-color, #4f8cff);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
}
.unsaved-btn.save:hover { filter: brightness(1.15); }

/* Excel 右键菜单：引用自定义公式（二级菜单） */
.excel-context-submenu-wrap {
  position: relative;
}

.excel-context-submenu-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.excel-context-submenu {
  position: absolute;
  top: -6px;
  left: calc(100% + 6px);
  min-width: 190px;
  max-height: 320px;
  overflow: auto;
  background: var(--bg-secondary, #1f2329);
  border: 1px solid var(--border-primary, #3a4049);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  z-index: 10001;
  padding: 4px;
}

.excel-context-submenu button {
  width: 100%;
  text-align: left;
}

/* ============================================================================
 * 网格左上角视觉统一（普通视图 / 大文件 DOM 网格）
 * - 添加三角形填充
 * - 右/下边线固定 1px，与单元格网格线一致
 * ============================================================================ */
.excel-grid .excel-corner {
  overflow: hidden;
  border-right-width: 1px !important;
  border-bottom-width: 1px !important;
}

.excel-grid .excel-corner::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 12px 12px 0;
  border-color: transparent #c8ced6 transparent transparent;
  opacity: 0.9;
  pointer-events: none;
}

.hover\:bg-blue-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-300:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-400:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}

.hover\:bg-purple-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}

.hover\:text-gray-600:hover {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-700:hover {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}

.hover\:text-gray-800:hover {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}

.hover\:text-red-600:hover {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}

.hover\:underline:hover {
  text-decoration-line: underline;
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.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-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}