:root{
    --heo-white: #fff;
    --heo-black: #000;
    --heo-none: rgba(0,0,0,0);
    --heo-gray: #999999;
    --heo-yellow: #ffc93e;
    --heo-main: #007AFF;
    --heo-shadow-blue: 0 8px 12px -3px rgba(40, 109, 234,.20);
    --heo-shadow-white: 0 8px 12px -3px rgba(255, 255, 255,.20);
    --heo-shadow-black: 0 0 12px 4px rgba(0, 0, 0,.05);
    --heo-shadow-yellow: 0px 38px 77px -26px rgba(255, 201, 62,.12);
    --heo-shadow-pink: 0 8px 12px -3px #ee7d7936;
    --heo-logo-color: linear-gradient(215deg,#4584ff 30%,#ff7676 70%);
  }
  
  ::selection {
    background: var(--heo-blue);
    color: var(--heo-white);
  }
  
  [data-theme=light] {
    --heo-theme: #425AEF;
    --heo-blue: #425AEF;
    --heo-red: #D8213C;
    --heo-green: #008200;
    --heo-fontcolor: #363636;
    --heo-background: #f4f4f4;
    --heo-reverse: #000;
    --heo-maskbg: rgba(255, 255, 255, 0.6);
    --heo-hovertext: #5374ff;
    --heo-ahoverbg: #F7F7FA;
    --heo-lighttext: #ef794f;
    --heo-secondtext: rgba(60, 60, 67, 0.6);
    --heo-scrollbar: rgba(60, 60, 67, 0.4);
    --heo-card-btn-bg: #f1f2f2;
    --heo-post-blockquote-bg: #fafcff;
    --heo-post-tabs-bg: #f2f5f8;
    --heo-secondbg: #f1f2f2;
    --heo-shadow-nav:0 5px 12px -5px rgba(102, 68, 68, 0.05);
    --heo-card-bg: #fff;
    --heo-shadow-lightblack:0 5px 12px -5px rgba(102, 68, 68, 0.00);
    --heo-shadow-light2black:0 5px 12px -5px rgba(102, 68, 68, 0.00);
  }
  
  [data-theme=dark] {
    --heo-theme: #0084FF;
    --heo-blue: #0084FF;
    --heo-red: #FF3842;
    --heo-green: #00FF00;
    --heo-fontcolor: #F7F7FA;
    --heo-background: #18171d;
    --heo-reverse: #fff;
    --heo-maskbg: rgba(0,0,0, 0.6);
    --heo-hovertext: #0A84FF;
    --heo-ahoverbg: #fff;
    --heo-lighttext: #f2b94b;
    --heo-secondtext: #a1a2b8;
    --heo-scrollbar: rgba(200, 200, 223, 0.4);
    --heo-card-btn-bg: #2e2d38;
    --heo-post-blockquote-bg: #000;
    --heo-post-tabs-bg: #121212;
    --heo-secondbg: #30343f;
    --heo-shadow-nav:0 5px 20px 0px rgba(28, 28, 28, 0.4);
    --heo-card-bg: #1d1b26;
    --heo-shadow-lightblack:0 5px 12px -5px rgba(102, 68, 68, 0.0);
    --heo-shadow-light2black:0 5px 12px -5px rgba(102, 68, 68, 0.0);
  }

/* bb哔哔 */
/* bb样式 */

.timeline ul li{
  position: relative;
  padding-left: 2.5rem;
}

/* 标题 */
.bb-info{
  display: inline;
  float: right;
  line-height: 3.7rem;
  color: var(--heo-secondtext);
}

/* 每条动态 */
#bber > section > ul > div > li > div{
  display: flex;
  flex-direction: initial;
  flex-wrap: wrap;
  background: var(--heo-post-blockquote-bg);
  box-shadow: var(--heo-shadow-lightblack);
  border-radius: 12px;
  padding: 8px 16px;
  margin-top: 12px;
}

#bber p{
  margin: 0;
}

#bber .datafrom i{
  margin-right: 4px;
}

/* 时间 */
#bber > section > ul > div > li > div .datatime{
  order: 1;
  color: var(--heo-secondtext);
  font-size: 0.6rem;
}

/* 内容 */
#bber > section > ul > div > li > div .datacont{
  order: 0;
  font-size: 1rem;
  font-weight: bold;
  color: var(--heo-lighttext);
  width: 100%;
  line-height: 1.38;
  margin: 8px 0;
}

/* 设备 */
#bber > section > ul > div > li > div .datafrom{
  order: 2;
  color: var(--heo-secondtext);
  font-size: 0.6rem!important;
  margin-left: 8px;
}
#bber > section > ul > div > li > div .datafrom small{
  font-size: 100%;
}

/* 时间线 */
.timeline ul li::before {
  position: absolute;
  top: 0.5rem;
  left: 0rem;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: var(--card-bg);
  content: "";
  background-image: url(https://cdn.jsdelivr.net/gh/Daibi-mua/cdn3@main/avatar.jpg);
  background-size: 2rem;
}

/* 加载更多 */
.load-btn.button-load{
  background: var(--heo-card-btn-bg);
  color: var(--heo-fontcolor);
  padding: 12px 12px;
  margin: 8px 0;
  width: 100%;
  text-align: center;
  border-radius: 12px;
  transition: 0.3s;
  font-weight: bold;
}

.load-btn.button-load:hover{
  background: var(--heo-main);
  color: var(--heo-white);
  transition: 0.3s;
  box-shadow: var(--heo-shadow-blue);
}