.image-skeleton-container {
  position: relative;
  overflow: hidden;
}
.image-skeleton-container .skeleton {
  background-color: var(--button-primary-bg-color);
  width: 100%;
  height: 100%;
}
.image-skeleton-container .image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  /* 添加渐变效果 */
}
.image-skeleton-container .fade-in {
  opacity: 1;
  /* 加载后显示 */
}

.logo-area {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--main-padding-space-small) var(--main-padding-space);
  background-color: var(--background-color);
  box-shadow: 0px 1px 0px 0px var(--button-primary-bg-color);
}
.logo-area .logo {
  display: flex;
  align-items: center;
  flex: 1;
}
.logo-area .logo .image-skeleton-container {
  width: 1.16667rem !important;
  height: 1.16667rem !important;
}
.logo-area .logo img {
  width: 100%;
  height: 100%;
}
.logo-area .logo .text-area {
  margin-left: 0.22222rem;
}
.logo-area .logo .text-area .title {
  font-weight: bold;
  font-size: 0.44444rem;
  line-height: 0.55556rem;
  color: var(--main-title-color);
}
.logo-area .logo .text-area .desc {
  font-size: 0.38889rem;
  line-height: 0.55556rem;
  font-weight: 400;
  color: var(--sub-font-color);
}
.logo-area .button {
  padding: 0.11111rem 0.19444rem;
  background-color: var(--main-primary-color);
  border-radius: 0.11111rem;
}
.logo-area .button .text {
  font-size: 0.38889rem;
  color: var(--card-font-color);
  font-weight: 500;
  line-height: 0.38889rem;
  text-decoration: none;
}

.default-view {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 22;
}
.default-view .default-view-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.default-view .default-view-inner .loading-icon {
  width: 1.77778rem;
  height: 1.77778rem;
  margin-bottom: 0.44444rem;
}
.default-view .default-view-inner .default-icon {
  width: 3.88889rem;
  height: 2.77778rem;
  margin-bottom: 0.44444rem;
}
.default-view .default-view-inner .lottie-loading {
  width: 1.77778rem;
  height: 1.77778rem;
}
.default-view .default-view-inner .title {
  font-size: 0.38889rem;
  font-weight: 400;
  line-height: 0.55556rem;
  margin-bottom: 0.55556rem;
}
.default-view .default-view-inner .button {
  padding: 0.16667rem 0.61111rem;
  background-color: var(--main-primary-color);
  border-radius: var(--main-border-radius);
}
.default-view .default-view-inner .button .text {
  color: var(--card-font-color);
  font-weight: 500;
  line-height: 0.55556rem;
}

.download-page {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 99999;
  background-color: rgba(15, 14, 17, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}
.download-page .download-dialog {
  width: 7.77778rem;
  border-radius: var(--main-border-radius);
  background: var(--main-border-color);
  padding: 0.66667rem;
  box-sizing: border-box;
}
.download-page .download-dialog .title {
  font-weight: 500;
  font-size: 0.44444rem;
  color: var(--main-title-color);
  line-height: 0.66667rem;
  text-align: center;
  margin-bottom: 0.44444rem;
}
.download-page .download-dialog .button-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.download-page .download-dialog .button-area .button {
  width: 3.11111rem;
  height: 1rem;
  border-radius: var(--main-border-radius);
  text-align: center;
  line-height: 1rem;
  font-size: 0.38889rem;
  font-weight: 500;
  color: #fff;
  background: var(--main-primary-color);
  text-decoration: none;
}
.download-page .download-dialog .button-area .button.cancel {
  background: var(--button-primary-bg-color);
  color: var(--sub-font-color);
}

.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #D4C1F6;
  color: var(--background-color);
  padding: 0.33333rem 0.44444rem;
  border-radius: 0.22222rem;
  font-size: 0.38889rem;
  text-align: center;
  line-height: 0.55556rem;
  display: inline-block;
  white-space: normal;
  word-break: break-word;
  max-width: 70vw;
}
.toast.fail {
  background: #FF4F4F;
  color: #FFFFFF;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.feedback-dialog {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 9999;
}
.feedback-dialog .shadow {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}
.feedback-dialog .feedback-dialog-body {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 15.66667rem;
  padding: 0.66667rem 0.44444rem 0px 0.44444rem;
  box-sizing: border-box;
  background: var(--diving-line-color);
  border-radius: var(--main-border-radius) var(--main-border-radius) 0 0;
}
.feedback-dialog .feedback-dialog-body .title {
  font-size: 0.44444rem;
  font-weight: 500;
  color: var(--main-title-color);
  line-height: 0.66667rem;
  margin-bottom: 0.33333rem;
}
.feedback-dialog .feedback-dialog-body .desc {
  font-size: 0.38889rem;
  font-weight: 400;
  color: var(--third-font-color);
  line-height: 0.55556rem;
  margin-bottom: 0.33333rem;
}
.feedback-dialog .feedback-dialog-body .reason-list {
  position: relative;
  margin-bottom: 0.11111rem;
}
.feedback-dialog .feedback-dialog-body .reason-list .reason-item {
  padding: 0.22222rem 0;
  display: flex;
  align-items: center;
}
.feedback-dialog .feedback-dialog-body .reason-list .reason-item .checkbox {
  width: 0.55556rem;
  height: 0.55556rem;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAACQElEQVRYR+1Yv0sCYRju9MALCgxu8S+oQcgmDYxoaGopaCgocPInbW01GNRUW8r5YxEKcqugraGgIt2KFv8DHYKEghRSe1454zzvTPA8FL6DD7373vu+5557XvF5uLEhP7ghxzc22gBDodB0o9FYB8tOjuMEg9n+wtoFjJtkMvmqt7Ymgz6fzy4IgoSbNgwGpbdctl6v76RSqXd1QQdAv98vWiyWBxTOtIrxlBV8p2HkIajeSqFSqcxnMpmycpMOgMFg8ELBXI7n+V1RFPPRaPTHSHS0FiTkAXPHAOqlc3xmJUna1AUYCARmUfRCBWDtsVqtLuOJjGau7TkhJ6hJuMNFD03UarW5dDrdxNAErawGe3s4P6RrVqvVE4/H80azprUemFwEIffyXDSRSBxoAkThGQq3SHPorHEzwNEekA9fLBY/ZU1mAfDvNbcxCICXALeKUQbAKbMA0j6Q1wcA2jGuoMM1PQYZQL23whjsV6+MQcYgMcB+B7vogDUJaxLWJP9ogDUJaxLWJEY0ScsTk2lyOByTg/DCXf5Rf5Npwt7n8EPbmp5EaTth2L2xWOypX/H3cn8kEnHDD+fk2n24uiM9gE5MvMmTOUQRS2YYd5vNdttKF8CgSxkmdY0+KF2g6GMQBp68cKlUcoOME4xmqoCjzRPThQ6AcrL1jDnTwyPkNAvqhEszfpMTrlOANC1+g5xC6mRLk0GlqMPhsAtPtQJ9EJsTvQi+1xo50iugOa6VYZH6/tGOgHtlY5B1Q8/gL3fnEUezMLJBAAAAAElFTkSuQmCC) no-repeat center;
  background-size: cover;
  margin-right: 0.22222rem;
}
.feedback-dialog .feedback-dialog-body .reason-list .reason-item .checkbox.checked {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAADEElEQVRYR9WY3UsUURjGn7OraFHRRVR0EVmRFkoaFEgI1UVdGJQQfVEkYm1bLAVlQnVRUBfhB0IXun0huJXohW1YVmRdbBEZaCLFGhj9AV10EWXYzuk92LpnZ2dnZ3fGmfHAwC7zznl/73POvjvnYXD5YC7nw9wGvODnxQrHPlK5lHEUWqk2B36SPFEvR/+NIBtNN7emgmdr+eK8QrRzjoNWQqWFYOjmCgItt9h3dUwK4LkTfAlVFqHAEjvgpBzR2B9UtnWyH3LeFMDzJ/lDu5RLUYuUbO5gh9ICNvr4xr/AR5uVS0rnUVDRdJvNMCQpSOpdIvWuOQnIGa60drCrcYZkQB/vol/XEScBmWqZkwAbfLxPAfY6CegBHjUFWY2mgnYBriwC8vKBr19SpXAccOduQFxi9HQBQ2+TIR0FlOEE1sgH4P5dlwBu3wVUz+wsYGoKCLYB3yZcAFi1A9izPwEi4DrbgfHPLtiDm7YAh+uMwYmonPbg+jJAiWlXrNeSyiqoqdYDXu90lJ5y8XmyBty6Daj5/04TGQTCvca6ZPEGoNYP5FM7ESNGBYbuAGMj+s9nDXjgGLC5MjHpy6fAs8f6SdRwIvrBPWB4KHNxWQMuXQYEGoF58xOTv+gHxKU1tODCPUDkVWa4nPdg0VqgPgAUFOhDrl4HHKe4+LKK6IEwMDhgDC5nQPHgGkouIOXkT/qA18+nk6+iIgRcpiIyoWa9xPKE6ZZv/BNw5qJ5OFMKxkG1IH//Mr5HZ1VBGbLudKK/yUmzaUVasKaWWJ5Q3YTFvfdvgN5QJo3071sGKNLIf2Ojw/RmQo1YoTdeM8NSQAGyfAWwcBEwQS+fZuEs+ZGYUcfIs7oKOnkmjsPTISnUHGRHpe+Jutxw7KRT3WU6vF9PB1hK5+IxI0sxWzF07C1vlcwkV1kf5Al1t+hZH0IV4Wx5C/COPtpuHoGjSu1wadpvwuFiHty0zUQi5WKT8KudLSGYrsPacIqXk29XTZWVUOACK/cdeTCT1NOj3hjCslmkzjG3LWArFct1Ltcr+A96Pl04oePbHQAAAABJRU5ErkJggg==) no-repeat center;
  background-size: cover;
}
.feedback-dialog .feedback-dialog-body .reason-list .reason-item .text {
  font-size: 0.38889rem;
  font-weight: 400;
  color: var(--main-title-color);
  line-height: 0.55556rem;
}
.feedback-dialog .feedback-dialog-body .textarea {
  width: 100%;
  height: 1.77778rem;
  color: var(--fourth-font-color);
  box-sizing: border-box;
  padding: 0.33333rem;
  background: var(--main-border-color);
  border-radius: var(--main-border-radius);
  border: none;
  font-size: 0.38889rem;
  font-weight: 400;
  line-height: 0.55556rem;
  outline: none;
  font-family: Roboto, Roboto, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  caret-color: var(--main-primary-color);
  margin-bottom: 0.55556rem;
}
.feedback-dialog .feedback-dialog-body .btn-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.feedback-dialog .feedback-dialog-body .btn-area .btn {
  width: 4.44444rem;
  height: 1.22222rem;
  border-radius: var(--main-border-radius);
  line-height: 1.22222rem;
  text-align: center;
  font-size: 0.44444rem;
  font-weight: bold;
  color: var(--sub-font-color);
  background: var(--button-primary-bg-color);
  transition: all ease-in-out 0.3s;
}
.feedback-dialog .feedback-dialog-body .btn-area .btn.primary {
  color: #fff;
  background: var(--main-primary-color);
  opacity: 1;
}
.feedback-dialog .feedback-dialog-body .btn-area .btn.primary.disabled {
  color: #fff;
  background: rgba(131, 95, 243);
  opacity: 0.4;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

:root {
  --main-font-size: 0.38889rem;
  --main-title-font-size: 0.55556rem;
  --title-font-size: 0.44444rem;
  --desc-font-size: 0.33333rem;
  --main-padding-space: 0.44444rem;
  --main-padding-space-small: 0.33333rem;
  --main-padding-space-smaller: 0.22222rem;
  --main-margin-space: 0.33333rem;
  --main-margin-space-small: 0.16667rem;
  --main-border-radius: 0.22222rem;
  --background-light-color: #FFFFFF;
  --main-font-light-color: #61656D;
  --main-title-light-color: #191F2B;
  --card-font-light-color: #FFFFFF;
  --card-desc-light-color: #F9FAFF;
  --useful-bg-light-color: rgba(255, 255, 255, 0.7);
  --main-primary-light-color: #7367FF;
  --main-active-light-color: rgba(0, 0, 0, 0.08);
  --diving-line-light-color: #F5F5F5;
  --main-light-border-color: #E5E9F1;
  --reference-light-color: #000000;
  --generate-button-border-light-color: #92969E;
  --related-sub-title-light-color: #000;
  --button-primary-bg-light-color: rgba(115, 103, 255, 0.1);
  --button-default-bg-light-color: rgba(255, 255, 255, 0.6);
  --background-dark-color: #0F0E11;
  --main-font-dark-color: #f3f3f3;
  --main-primary-dark-color: #835FF3;
  --sub-primary-dark-color: #9C84E9;
  --channel-tab-bg-dark-color: #0F0E11;
  --sub-tab-dark-color: #F0EBFF;
  --main-title-dark-color: #f3f3f3;
  --card-font-dark-color: rgba(243, 243, 243, 0.8);
  --sub-font-dark-color: #D4D4D6;
  --diving-line-dark-color: #1A1A1A;
  --button-primary-bg-dark-color: #333333;
  --main-dark-border-color: #232323;
  --third-font-dark-color: #888888;
  --fourth-font-dark-color: #686868;
  --score-dark-color: #FFAE4B;
  --tag-dark-color-1: #FF445B;
  --tag-dark-color-2: #17C108;
  --tag-dark-color-3: #FF8640;
  --tag-dark-color-4: #0080FF;
}
:root {
  --background-color: var(--background-dark-color);
  --main-font-color: var(--main-font-dark-color);
  --main-title-color: var(--main-title-dark-color);
  --card-font-color: var(--card-font-dark-color);
  --card-desc-color: var(--card-desc-light-color);
  --useful-bg-color: var(--useful-bg-light-color);
  --main-primary-color: var(--main-primary-dark-color);
  --main-active-color: var(--main-active-light-color);
  --diving-line-color: var(--diving-line-dark-color);
  --main-border-color: var(--main-dark-border-color);
  --reference-color: var(--generate-button-border-light-color);
  --generate-button-border-color: var(--generate-button-border-light-color);
  --button-primary-bg-color: var(--button-primary-bg-dark-color);
  --button-default-bg-color: var(--button-default-bg-light-color);
  --channel-tab-bg-color: var(--channel-tab-bg-dark-color);
  --sub-tab-color: var(--sub-tab-dark-color);
  --sub-font-color: var(--sub-font-dark-color);
  --third-font-color: var(--third-font-dark-color);
  --sub-primary-color: var(--sub-primary-dark-color);
  --fourth-font-color: var(--fourth-font-dark-color);
  --score-color: var(--score-dark-color);
  --tag-color-1: var(--tag-dark-color-1);
  --tag-color-2: var(--tag-dark-color-2);
  --tag-color-3: var(--tag-dark-color-3);
  --tag-color-4: var(--tag-dark-color-4);
}
html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
img,
ol,
ul,
li,
form,
label {
  margin: 0;
  padding: 0;
  border: 0;
}
ul,
ol {
  list-style: none;
  /* list-style-position:inside; */
  /* padding-left: var(--main-page-padding); */
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
}
html {
  height: 0;
  background-color: var(--background-color);
}
body {
  background-color: var(--background-color);
  font: inherit;
  font-size: var(--main-font-size);
  color: var(--main-font-color);
  vertical-align: baseline;
  transition: color 0.5s, background-color 0.5s;
  line-height: 1.6;
  font-family: Roboto, Roboto, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}