:root{
  --leonus-main:#9aa6f2;
  --leonus-border:1px solid #e0e3ed;
  --leonus-orange:#ff885f;
  --scrollbar-color:var(--leonus-main)
}
[data-theme=dark]{
  --scrollbar-color:#555;
}

/* 基础工具类 - 仅保留评论依赖的滚动条样式 */
::-webkit-scrollbar{
  width:6px;
  opacity:.6
}
::-webkit-scrollbar-thumb{
  border-radius:10px
}
::-webkit-scrollbar-thumb:hover{
  background-color:var(--leonus-main)
}
[data-theme=dark] ::-webkit-scrollbar-thumb:hover{
  background-color:var(--leonus-black)
}

/* twikoo 核心样式 */
#twikoo .tk-content ul{
  padding-left:20px
}
.tk-admin-container{
  z-index:1
}
#twikoo blockquote{
  padding:10px 15px;
  margin-bottom:0;
  border-color:#333;
  font-size:13px;
  line-height:1.7;
  background-color:rgba(0,0,0,.2)
}
.tk-content a.fancybox{
  display:block
}
.tk-main .tk-preview-container,.tk-main .tk-row.actions{
  margin-left:2.6rem
}
.tk-comments>.tk-submit .tk-preview-container{
  margin-left:3.5rem
}
.tk-preview-container blockquote p{
  margin:0
}
.tk-preview-container p{
  margin:0
}
.tk-preview-container{
  min-height:50px;
  padding:10px!important
}
.tk-submit-action-icon.__markdown{
  display:none
}
.tk-comments-count{
  display:none
}
.tk-comments-container .tk-comments-title{
  position:absolute;
  right:0;
  top:-50px;
  margin-bottom:0
}
.tk-comments-container .tk-comments-title>span:last-child{
  display:flex;
  align-items:center
}
button.el-button.el-button--small{
  border-radius:100px;
  padding:8px 24px
}
.tk-main .tk-submit button.el-button.el-button--small{
  padding:8px 18px
}
.tk-comments-title .tk-icon.__comments{
  margin-left:0;
  color:var(--font-color);
  display:inline-block;
  width:17px;
  height:17px;
  line-height:0;
  margin-right:10px;
  cursor:pointer;
  flex-shrink:0
}
.tk-comments-title .tk-icon.__comments:first-child{
  display:none
}
.tk-comments-title .tk-icon.__comments:hover{
  opacity:.8
}
.tk-avatar.tk-has-avatar{
  background-color:unset!important
}
.tk-owo-emotion{
  width:2.5rem!important
}
.OwO .OwO-body .OwO-items{
  padding:3px!important
}
.OwO .OwO-body .OwO-items-show{
  display:flex!important;
  flex-wrap:wrap;
  justify-content:space-between
}
.OwO .OwO-body .OwO-items .OwO-item{
  display:flex!important;
  width:auto!important;
  justify-content:center;
  line-height:1.5!important;
  font-size:2rem!important;
  padding:0!important;
  margin:8px
}
.OwO .OwO-body .OwO-items-image .OwO-item{
  overflow:hidden
}
.OwO .OwO-body .OwO-bar .OwO-packages .OwO-package-active{
  background-color:var(--leonus-main)!important;
  transition:.3s;
  color:#fff
}
.OwO .OwO-body .OwO-items .OwO-item:hover{
  box-shadow:0 2px 3px 1px rgb(0 0 0 / 15%)!important
}
.OwO .OwO-body .OwO-bar .OwO-packages li{
  line-height:2rem
}
#twikoo .tk-content{
  background:rgb(235 235 235 / 60%);
  padding:10px;
  border-radius:10px
}
[data-theme=dark] #twikoo .tk-content,[data-theme=dark] #twikoo blockquote{
  background:rgb(70 70 70 / 65%)
}
.tk-replies .tk-avatar{
  margin-right:.5rem!important
}
.tk-expand{
  border:var(--leonus-border);
  box-shadow:0 8px 16px -4px #2c2d300c;
  border-radius:12px;
  letter-spacing:5px
}
.tk-expand:hover{
  color:#fff;
  background-color:#4c4c4c!important
}
.tk-comments-container>.tk-comment>.tk-main>.tk-replies{
  padding-bottom:10px
}
.tk-comments-container>.tk-expand{
  margin-top:10px
}
.tk-nick.tk-nick-link{
  color:#f56c6c!important
}
#twikoo .el-textarea textarea::placeholder,#twikoo a{
  color:#878787
}
#twikoo .el-textarea textarea{
  min-height:8rem!important;
  background-size:90px
}
[data-theme=dark] #twikoo .el-textarea textarea{
  color:#fff;
  opacity:.7
}
[data-theme=dark] #twikoo .el-textarea textarea::placeholder{
  color:#fff
}
#twikoo .OwO-body{
  transform:translate(0,-115%);
  border-radius:8px
}
.tk-extras{
  margin:5px 0 15px
}
.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(1):before{
  content:'输入QQ号会自动获取昵称和头像🐧'
}
.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(2):before{
  content:'收到回复将会发送到您的邮箱📧'
}
.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(3):before{
  content:'可以通过昵称访问您的网站🔗'
}
.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::after,.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::before{
  display:block
}
.el-input.el-input--small.el-input-group.el-input-group--prepend::before{
  display:none;
  position:absolute;
  top:0;
  white-space:nowrap;
  border-radius:10px;
  left:50%;
  transform:translate(-50%,calc(-100% - 17px));
  padding:14px 18px;
  background:#444;
  color:#fff
}
.el-input.el-input--small.el-input-group.el-input-group--prepend::after{
  display:none;
  content:'';
  position:absolute;
  left:50%;
  top:0;
  border:12px solid transparent;
  border-top-color:#444;
  transform:translate(-50%,calc(-50% - 5px))
}
.OwO-item img{
  animation-play-state:paused
}
#owo-big{
  position:fixed;
  align-items:center;
  background-color:#fff;
  border:1px #aaa solid;
  border-radius:10px;
  z-index:9999;
  display:none;
  transform:translate(0,-105%);
  overflow:hidden;
  animation:owoIn .3s cubic-bezier(.42,0,.3,1.11)
}
[data-theme=dark] #owo-big{
  background-color:#4a4a4a
}
#owo-big img{
  width:100%
}
@keyframes owoIn{
  0%{transform:translate(0,-95%);opacity:0}
  100%{transform:translate(0,-105%);opacity:1}
}
.twikoo .el-button--primary.is-disabled,.twikoo .el-button--primary.is-disabled:active,.twikoo .el-button--primary.is-disabled:focus,.twikoo .el-button--primary.is-disabled:hover{
  background-color:var(--leonus-main)!important;
  opacity:.5
}
.twikoo .el-button:not(.el-button--primary):not(.el-button--text):active,.twikoo .el-button:not(.el-button--primary):not(.el-button--text):focus,.twikoo .el-button:not(.el-button--primary):not(.el-button--text):hover{
  color:#fff!important;
  background-color:var(--leonus-main)!important;
  border-color:var(--leonus-main)!important
}
.el-button--primary{
  background-color:var(--leonus-main)!important;
  border-color:var(--leonus-main)!important
}
/* @名字 颜色 */
.tk-ruser {
    color: rgba(245, 108, 108, 0.7) !important; /* 可替换为任意你想要的颜色值，如红色#ff0000、蓝色#0000ff等 */
}
/* 评论区边框颜色 */
.twikoo .el-input__inner:focus, .twikoo .el-textarea__inner:focus{
    border-color: #9aa6f2
}

/* twikoo 移动端响应式样式 */
@media screen and (max-width:768px){
  .twikoo .OwO-item img{
    width:100%!important
  }
  .tk-avatar{
    margin-right:.5rem!important
  }
  .tk-comments>.tk-submit .tk-preview-container,.tk-submit .tk-row.actions{
    margin-left:3rem
  }
  .tk-main .tk-preview-container,.tk-main .tk-row.actions{
    margin-left:2.1rem
  }
  .tk-comments-container .tk-comments-title{
    margin-left:108px
  }
  .tk-comments-container .tk-main .tk-submit button.el-button.el-button--small{
    padding:6px 12px
  }
  .tk-comments-container .el-button+.el-button{
    margin-left:3px
  }
}
@media screen and (max-width:468px){
  .OwO .OwO-body .OwO-items .OwO-item{
    width:calc(25% - 16px)!important
  }
  .tk-content img{
    max-width:100%!important
  }
}