/* 亮色 */
/* :root .light{
  --text-color: #fff;
  --text-background: blue;
} */
/* 暗色 */
/* :root .dark {
  --text-color: #000;
  --text-background: yellow;
} */

:root {
  --scrollbar: 0px;
  --full-screen-vw: 0px;


  /* 线 */
  --line: rgba(0, 0, 0, .12);
  --outline: rgba(0, 0, 0, .12);
  --black-line: rgba(0, 0, 0, .85);
  --light-line: rgba(255, 255, 255, .85);
  --activity-line:#e6e6e6;

  /* 字体 */
  --text-primary: rgba(0, 0, 0);
  --text-secondary: rgba(0, 0, 0, .6);
  --text-hint: rgba(0, 0, 0, .4);
  --text-disabled: rgba(0, 0, 0, .3);
  --text-primary-reverse: rgba(255, 255, 255);
  --text-secondary-reverse: rgba(255, 255, 255, .65);
  --text-hint-reverse: rgba(255, 255, 255, .4);
  --text-disabled-reverse: rgba(255, 255, 255, .3);
  --text-dark-blue: #133AB3;
  --text-primary-white: #fff;
  --text-primary-black: #000;
  
  /* 背景色 */
  --background-body: #fafafa;

  --background-primary: rgba(0, 0, 0, .85);
  --background-hint: rgba(0, 0, 0, .3);
  --background-light: rgba(0, 0, 0, .06);
  --background-listpressed: rgba(0, 0, 0, .03);
  --background-pressed: rgba(0, 0, 0, .08);

  --background-re-primary: rgba(255, 255, 255, .85);
  --background-re-hint: rgba(255, 255, 255, .3);
  --background-re-light: rgba(255, 255, 255, .06);
  --background-re-listpressed: rgba(255, 255, 255, .03);

  --background-selection: #FAFAFA;
  --background-icon: rgba(0, 0, 0, .04);
  --background-editor: rgba(0, 0, 0, .06);
  --background-inspiration-editor: rgba(255, 255, 255, .55);

  --background-tag: rgba(0, 0, 0, .04);
  --background-input: rgba(0, 0, 0, .06);
  --background-plain: #fafafa;
  --background-popup: #f7f7f7;
  --mask: rgba(0, 0, 0, .4);
  --moment-mask: rgba(0, 0, 0, .2);
  --background-white: rgba(255, 255, 255);
  --background-image: rgba(0, 0, 0, .1);
  --toast-background: #333333;


  /* figma 背景色 */
  --background-container: rgba(0, 0, 0, .08);
  --background-base01: #FFF;
  --background-base02: #F3F4F6;
  --background-mid01: #FFF;
  --background-card: #FFF;
  --background-top: #FFF;
  --background-mid02: #F3F4F6;
  --backgroung-light-theme: #F3F4F6;
  --background-emoji:#FFF;
  --background-emoji-icon:#F5F5F5;

  /* 选择框 */
  --check-box-background: #FFF;
  --radio-box-background: #FFF;
  --check-box-checked-background: #000;
  --radio-box-checked-background: #000;
  --check-box-border-color: rgba(0, 0, 0, 0.2);
  --radio-box-border-color: rgba(0, 0, 0, 0.2);
  --check-box-checked-color: #FFF;
  --radio-box-checked-color: #FFF;
  --checkbox-disabled: #f5f7fa;

  /* 通用 */
  --background-black: #000;

  /* 页面独有 */
  /* poc */
  --poc-ideas-backgound-linear-gradient: linear-gradient(180deg, rgba(245, 5, 20, 0.05) 8.3%, rgba(245, 5, 20, 0.00) 100%), #FFF;
  /* 创作页 */
  --gallery-cardone-background: linear-gradient(180deg, #FFF 0%, #FAF1AD 49.81%, #FFF 100%);
  --gallery-cardtwo-background: linear-gradient(180deg, #FFF 0%, #DCE7FC 49.81%, #FFF 100%);
  --gallery-cardthree-background:  linear-gradient(180deg, #FFF 0%, #F6DFD2 49.81%, #FFF 100%);
  --gallery-background:#fff;
  --gallery-teamcard-background: #f9f9f9;
  --gallery-casecard-background: #f9f9f9;
  --gallery-height-background: linear-gradient(180deg, #FFF 0%, #FAFAFA 100%);
  --gallery-line: #fff;
  /* 表单页 */
  --scroe-background: var(--background-base02);

  /* 会员页 */
  --member-nav-background: linear-gradient(180deg, #FAFAFA 0%, #FFF 100%);

  /* 个人中心背景渐变色 */
  --user-banner-background: linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.90) 100%);

  /* icon */
  --icon-light: rgba(0, 0, 0, .2);

  --tag-background: rgba(0, 0, 0, 0.05);

  /* 按钮组件 */
  --button-height: 44px;
  --icon-button-size: 56px;

  /* 颜色组 */
  --orbit-red: #DF3F3A;

  --blue: #007BFF;
  --ob-blue: #133AB3;

  /* h5导航组件下拉菜单 */
  --h5-nav-oneplus-background: linear-gradient(180deg, rgba(245, 5, 20, 0.12) 0%, rgba(245, 5, 20, 0.00) 48.87%);
  --h5-nav-oppo-background: linear-gradient(180deg, rgba(204, 255, 221, 0.45) 0%, rgba(204, 255, 221, 0.00) 48.87%);
  --h5-nav-signin-background: rgba(255, 255, 255, 1);

  --signin-popup-background: rgba(0, 0, 0, 0.60);
  --signin-card-background: rgba(240, 238, 234, 1);
  --signin-count-background: rgba(250, 250, 250, 1);
  --signin-before-background: rgba(250, 250, 250, 1);
  --signin-today-background: rgba(255, 181, 181, 1);
  --signin-future-background: rgba(245, 244, 240, 1);
  --signin-future-check-color: rgba(26, 26, 26, 0.15);
}

/* OPPO */
:root .oppo {
  --theme: var(--color-brandSecondary-community);
  --theme-disabled: #b3e19d;
  --theme-quote: rgba(45, 167, 78, 0.2);
  --theme-background: rgba(47, 177, 82, 0.1);
  --theme-chat-background: rgba(47, 177, 82, 0.15);
  --button-radius: 100px;
  --recommend-radius: 4px;

  --theme-progress-background: rgba(38, 192, 93, 0.2);
  --theme-progress-line-background: rgba(38, 192, 93, 0.75);
  --theme-btn-border: rgba(38, 192, 93, 0.30);
  --theme-btn-background: rgba(38, 192, 93, 0.10);

  --theme-nav-tag-background: rgba(38, 192, 93, 0.15);
}
/* ONEPLUS */
:root .oneplus {
  --theme: var(--color-brand-default);
  --theme-disabled: #fab6b6;
  --theme-quote: rgba(223, 61, 61, 0.2);
  --theme-background: rgba(223, 63, 58, 0.10);
  --theme-chat-background: rgba(223, 61, 61, 0.15);
  --button-radius: 2px;
  --recommend-radius: 0px;

  --theme-progress-background: rgba(255, 25, 25, 0.2);
  --theme-progress-line-background: rgba(255, 25, 25, 0.75);
  --theme-btn-border: rgba(255, 25, 25, 0.3);;
  --theme-btn-background: rgba(255, 25, 25, 0.1);

  --theme-nav-tag-background: rgba(245, 5, 20, 0.15);
 }


#app {
  position: relative;
  min-height: 100vh;
  min-width: 1200px;
  
}
#app .el-pagination {
  --el-pagination-button-height: 40px;
  --el-color-primary: var(--theme);
  --el-pagination-hover-color: var(--theme);
  --el-pagination-button-width: 40px;
  --el-pagination-button-height: 40px;
  --el-text-color-primary: #999999;
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 60px 0;
}
#app .el-pagination .number {
  min-width: 40px !important;
  border-radius: 6px;
  border: 1px solid #E9E9E9;
  margin: 0 4px;
  font-family: "orbit-M";
}
#app .el-pagination .btn-prev {
  margin-right: 4px;
}
#app .el-pagination .btn-next {
  margin-left: 4px;
}
#app .el-pagination .is-active {
  background-color: var(--theme);
  color: #FFF;
  border: none;
}

#app .el-pagination button {
  border-radius: 6px;
  border: 1px solid #E9E9E9;
}

body .van-tab--active {
  font-weight: normal !important;
}


/* 整体滚动条样式 */
.ob-scroll-bar::-webkit-scrollbar {
  width: 6px; /* 滚动条宽度 */
  height: 6px; /* 水平滚动条高度 */
}

/* 滚动条轨道 */
.ob-scroll-bar::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.1); /* 轨道背景颜色 */
  border-radius: 4px; /* 圆角 */
  display: none;
}

/* 滚动条滑块 */
.ob-scroll-bar::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3); /* 滑块背景颜色 */
  border-radius: 4px; /* 圆角 */
}

/* 滚动条滑块悬停状态 */
.ob-scroll-bar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(144, 147, 153, 0.5); /* 悬停时的颜色 */
}

/* 水平滚动条的样式 */
.ob-scroll-bar::-webkit-scrollbar-thumb:horizontal {
  background: rgba(0, 0, 0, 0.3);
}


@media screen and (max-width: 1023px) {
  body {
    width: 100vw;
    min-width: 100px;
    padding-top: 0;
    background: var(--color-background-primary);
    height: calc(100vh - var(--browser-address-bar, 0px));
  }
  /* 暗色监测 */
  @media (prefers-color-scheme: dark) {
    :root {
      /* 线 */
      --line: rgba(255, 255, 255, .2);
      --outline: rgba(255, 255, 255, .2);
      --black-line: rgba(255, 255, 255, .85);
      --light-line: rgba(255, 255, 255, .85);
      --activity-line:#404040;

      /* 字体 */
      --text-primary: rgba(255, 255, 255);
      --text-secondary: rgba(255, 255, 255, .6);
      --text-hint: rgba(255, 255, 255, .4);
      --text-disabled: rgba(255, 255, 255, .3);
      --text-primary-reverse: rgba(0, 0, 0);
      --text-secondary-reverse: rgba(0, 0, 0, .65);
      --text-hint-reverse: rgba(0, 0, 0, .4);
      --text-disabled-reverse: rgba(0, 0, 0, .3);

      --text-white: rgba(0, 0, 0);
      --text-dark-blue: #3e6dff;
      
      /* 背景色 */
      --background-body: #050505;

      --background-primary: rgba(255, 255, 255, .85);
      --background-hint: rgba(255, 255, 255, .3);
      --background-light: rgba(255, 255, 255, .06);
      --background-listpressed: rgba(255, 255, 255, .03);
      --background-inspiration-editor: rgba(46, 46, 46, 1);

      --background-re-primary: rgba(0, 0, 0, .85);
      --background-re-hint: rgba(0, 0, 0, .3);
      --background-re-light: rgba(0, 0, 0, .06);
      --background-re-listpressed: rgba(0, 0, 0, .03);

      --background-selection: #3c3c3c;
      --background-icon: rgba(255, 255, 255, .4);
      --background-editor: rgb(46, 46, 46);
      
      --background-tag: rgba(255, 255, 255, .1);
      --background-input: rgba(255, 255, 255, .2);
      --background-popup: #f7f7f7;
      --mask: rgba(0, 0, 0, .4);
      --moment-mask: rgba(0, 0, 0, .2);
      --background-white: #333;
      --background-image: rgba(0, 0, 0, 0.1);
      --toast-background: #FFF;

      /* figma 背景色 */
      --background-container: rgba(255, 255, 255, .15);
      --background-pressed: rgba(255, 255, 255, 0.15);
      --background-base01: #000;
      --background-base02: #000;
      --background-mid01: rgba(46, 46, 46, 1);
      --background-card: rgba(255, 255, 255, .1);
      --background-top: #333333;
      --background-mid02: #2E2E2E;
      --backgroung-light-theme: #141414;
      --background-emoji:#2B2B2B;
      --background-emoji-icon: #212121;

      /* 选择框 */
      --check-box-background: #000;
      --radio-box-background: #000;
      --check-box-checked-background: #333;
      --radio-box-checked-background: #333;
      --check-box-border-color: #333;
      --radio-box-border-color: #333;
      --check-box-checked-color: #FFF;
      --radio-box-checked-color: #FFF;
      --checkbox-disabled: var(--text-disabled);


      /* 通用 */
      --background-black: #FFF;

      /* 页面独有 */
      --poc-ideas-backgound-linear-gradient: linear-gradient(180deg, rgba(245, 5, 20, 0.05) 8.3%, rgba(245, 5, 20, 0.00) 100%), #000;

      --gallery-cardone-background: linear-gradient(180deg, #000 0%, #4B3C04 49.81%, #000 100%);
      --gallery-cardtwo-background: linear-gradient(180deg, #000 0%, #333E53 49.81%, #000 100%);
      --gallery-cardthree-background: linear-gradient(180deg, #000 0%, #3F2219 49.81%, #000 100%);
      --gallery-background:#050505;
      --gallery-teamcard-background:#2e2e2e;
      --gallery-casecard-background:#333;
      --gallery-height-background: linear-gradient(180deg, #000 0%, #000 0.01%, #2E2E2E 100%);
      --gallery-line: #333;
      
      /* 表单页 */
      --scroe-background: var(--background-mid02);

      /* 会员页 */
      --member-nav-background: linear-gradient(180deg, #262626 0%, #1A1A1A 100%);

      /* 个人中心背景渐变色 */
      --user-banner-background: linear-gradient(175deg, rgba(0, 0, 0, 0.30) 0.97%, rgba(0, 0, 0, 0.80) 95.81%);

      /* icon */
      --icon-light: rgba(255, 255, 255, .2);
      --tag-background: rgba(255, 255, 255, 0.05);

      /* h5导航组件下拉菜单（签到） */
      --h5-nav-oneplus-background: linear-gradient(180deg, rgba(245, 5, 20, 0.08) 0%, rgba(245, 5, 20, 0.00) 48.87%);
      --h5-nav-oppo-background: linear-gradient(180deg, rgba(44, 105, 65, 0.25) 0%, rgba(44, 105, 65, 0.00) 48.87%);
      --h5-nav-signin-background: rgba(255, 255, 255, 0.06);

      --signin-popup-background: rgba(255, 255, 255, 0.2);
      --signin-card-background: rgba(240, 238, 234, 0.05);
      --signin-count-background: rgba(250, 250, 250, 0.15);
      --signin-before-background: rgba(250, 250, 250, 0.75);
      --signin-today-background: rgba(245, 5, 20, 0.5);
      --signin-future-background: rgba(245, 244, 240, 0.1);
      --signin-future-check-color: rgba(250, 250, 250, 0.15);
    }
  }

  
  
  #app {
    min-height: unset;
    min-width: unset;
  }
  .van-overlay {
    --van-overlay-background: var(--mask);
  }
  .van-toast--bottom {
    --van-toast-position-bottom-distance: 40px;
    --van-toast-text-padding: 12px 20px;
    max-width: 320px;
  }
  .van-tab--active > .van-tab__text {
    font-weight: normal;
    font-family: 'orbit-M';
  }

  .van-popup {
    --van-popup-background: var(--background-selection);
    --van-popover-light-background: var(--background-selection);
    --van-popover-light-text-color: var(--text-primary);
    --van-border-color: transparent;
    --van-border-width: 0;
  }

  .van-popup .van-popover__action {
    white-space: nowrap;
    box-sizing: content-box;
  }

  .van-image-preview__swipe{
    background-color: #000;
  }
  .van-field {
    --van-field-input-text-color: var(--text-primary);
    --van-field-placeholder-text-color: var(--text-hint);
  }
  
  .van-cell {
    --van-cell-background: var(--background-body);
  }
  
  .el-input {
    --el-input-text-color: var(--text-primary);
  }

  .el-popper {
    border: none !important;
    --el-bg-color-overlay: var(--background-selection);
    --el-text-color-regular: var(--text-primary);
  }
  .el-textarea {
    --el-input-text-color: var(--text-primary);
    --el-input-placeholder-color: var(--text-hint);
  }
  .van-popup {
    background: var(--background-selection);
  }
}

/* 兼容浏览器无法识别暗色检测功能 */
.dark,.manualDark {
  /* 线 */
  --line: rgba(255, 255, 255, .2);
  --outline: rgba(255, 255, 255, .2);
  --black-line: rgba(255, 255, 255, .85);
  --light-line: rgba(255, 255, 255, .85);
  --activity-line:#404040;

  /* 字体 */
  --text-primary: rgba(255, 255, 255);
  --text-secondary: rgba(255, 255, 255, .6);
  --text-hint: rgba(255, 255, 255, .4);
  --text-disabled: rgba(255, 255, 255, .3);
  --text-primary-reverse: rgba(0, 0, 0);
  --text-secondary-reverse: rgba(0, 0, 0, .65);
  --text-hint-reverse: rgba(0, 0, 0, .4);
  --text-disabled-reverse: rgba(0, 0, 0, .3);

  --text-white: rgba(0, 0, 0);
  --text-dark-blue: #3e6dff;
  
  /* 背景色 */
  --background-body: #050505;

  --background-primary: rgba(255, 255, 255, .85);
  --background-hint: rgba(255, 255, 255, .3);
  --background-light: rgba(255, 255, 255, .06);
  --background-listpressed: rgba(255, 255, 255, .03);
  --background-inspiration-editor: rgba(46, 46, 46, 1);

  --background-re-primary: rgba(0, 0, 0, .85);
  --background-re-hint: rgba(0, 0, 0, .3);
  --background-re-light: rgba(0, 0, 0, .06);
  --background-re-listpressed: rgba(0, 0, 0, .03);

  --background-selection: #3c3c3c;
  --background-icon: rgba(255, 255, 255, .4);
  --background-editor: rgb(46, 46, 46);
  
  --background-tag: rgba(255, 255, 255, .1);
  --background-input: rgba(255, 255, 255, .2);
  --background-popup: #f7f7f7;
  --mask: rgba(0, 0, 0, .4);
  --moment-mask: rgba(0, 0, 0, .2);
  --background-white: #333;
  --background-image: rgba(0, 0, 0, 0.1);
  --toast-background: #FFF;

  /* figma 背景色 */
  --background-container: rgba(255, 255, 255, .15);
  --background-pressed: rgba(255, 255, 255, 0.15);
  --background-base01: #000;
  --background-base02: #000;
  --background-mid01: rgba(46, 46, 46, 1);
  --background-card: rgba(255, 255, 255, .1);
  --background-top: #333333;
  --background-mid02: #2E2E2E;
  --backgroung-light-theme: #141414;
  --background-emoji:#2B2B2B;
  --background-emoji-icon: #212121;

  /* 选择框 */
  --check-box-background: #000;
  --radio-box-background: #000;
  --check-box-checked-background: #333;
  --radio-box-checked-background: #333;
  --check-box-border-color: #333;
  --radio-box-border-color: #333;
  --check-box-checked-color: #FFF;
  --radio-box-checked-color: #FFF;
  --checkbox-disabled: var(--text-disabled);

  /* 通用 */
  --background-black: #FFF;

  /* 页面独有 */
  --poc-ideas-backgound-linear-gradient: linear-gradient(180deg, rgba(245, 5, 20, 0.05) 8.3%, rgba(245, 5, 20, 0.00) 100%), #000;

  --gallery-cardone-background: linear-gradient(180deg, #000 0%, #4B3C04 49.81%, #000 100%);
  --gallery-cardtwo-background: linear-gradient(180deg, #000 0%, #333E53 49.81%, #000 100%);
  --gallery-cardthree-background: linear-gradient(180deg, #000 0%, #3F2219 49.81%, #000 100%);
  --gallery-background:#050505;
  --gallery-teamcard-background:#2e2e2e;
  --gallery-casecard-background:#333;
  --gallery-height-background: linear-gradient(180deg, #000 0%, #000 0.01%, #2E2E2E 100%);
  --gallery-line: #333;
  
  /* 表单页 */
  --scroe-background: var(--background-mid02);

  /* icon */
  --icon-light: rgba(255, 255, 255, .2);
  --member-nav-background: linear-gradient(180deg, #262626 0%, #1A1A1A 100%);
  --tag-background: rgba(255, 255, 255, 0.05);

  /* h5导航组件下拉菜单 */
  --h5-nav-oneplus-background: linear-gradient(180deg, rgba(245, 5, 20, 0.08) 0%, rgba(245, 5, 20, 0.00) 48.87%);
  --h5-nav-oppo-background: linear-gradient(180deg, rgba(44, 105, 65, 0.25) 0%, rgba(44, 105, 65, 0.00) 48.87%);
  --h5-nav-signin-background: rgba(255, 255, 255, 0.06);

  --signin-popup-background: rgba(255, 255, 255, 0.2);
  --signin-card-background: rgba(240, 238, 234, 0.05);
  --signin-count-background: rgba(250, 250, 250, 0.15);
  --signin-before-background: rgba(250, 250, 250, 0.75);
  --signin-today-background: rgba(245, 5, 20, 0.5);
  --signin-future-background: rgba(245, 244, 240, 0.1);
  --signin-future-check-color: rgba(250, 250, 250, 0.15);
 }

.dark .van-toast {
  --van-toast-radius: 2px;
  --van-toast-text-padding: 16px 24px;
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
}

.scroll-hidden {
  overflow: hidden;
}
.scroll-hidden::-webkit-scrollbar {
  display: none;
}
.el-message {
  z-index: 4000 !important;
}
.van-toast--top {
  --van-toast-position-top-distance: 10%;
}
.van-toast {
  --van-toast-radius: 2px;
  --van-toast-text-padding: 16px 24px;
  --van-toast-background: var(--toast-background) !important;
  --van-toast-text-color: var(--text-primary-reverse) !important;
  background: var(--van-toast-background) !important;
  color: var(--van-toast-text-color) !important;
  max-width: 464px;
  z-index: 9999 !important;
}

.el-badge__content {
  border: none;
}



/* 公共类名 */

.break-word {
  word-break: break-word;
  white-space: wrap;
  overflow: hidden;
}

.border-xs-line {
  box-shadow: 0 0.33px 0 0 rgb(0 0 0 / 12%);
}

img[data-type="live_self"] {
  width:24px;
  height:24px;
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 99;
  background: transparent;
  margin:0;
}

.wap-popup .van-popup-slide-right-enter-from,.van-popup-slide-right-leave-active{
  transform:translate(100%,0);
}

.ob-popup {
  overflow: hidden;
}


/* 渐隐渐现 */
.fade-enter-active {
  animation: fade-in .5s;
}
.fade-leave-active {
  animation: fade-in .5s reverse;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes van-slide-right-enter{
  0%{
    transform:translate(0,0);
  }
}
@keyframes van-slide-right-leave{
  to{
    transform:translate(100%,-50%);
  }
}

.el-popup-parent--hidden {
  overflow: hidden !important;
}