@import url('../font/index.css');
:root {
  --font-fallback: 'HarmonyOS Sans SC', LXGW WenKai Screen R, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
  --font-body: var(--font-fallback);
  --font-mono: "SF Mono", Consolas, Monaco, "Courier New", Courier, monospace;
  --color-base-white: 0, 0%;
  --color-base-black: 240, 100%;
  --color-base-gray: 215, 14%;
  --color-base-blue: 212, 100%;
  --color-base-blue-dark: 212, 72%;
  --color-base-green: 158, 79%;
  --color-base-orange: 22, 100%;
  --color-base-purple: 269, 79%;
  --color-base-red: 351, 100%;
  --color-base-yellow: 41, 100%;
  --color-gray-5: var(--color-base-gray), 5%;
  --color-gray-10: var(--color-base-gray), 10%;
  --color-gray-20: var(--color-base-gray), 20%;
  --color-gray-30: var(--color-base-gray), 30%;
  --color-gray-40: var(--color-base-gray), 40%;
  --color-gray-50: var(--color-base-gray), 50%;
  --color-gray-60: var(--color-base-gray), 60%;
  --color-gray-70: var(--color-base-gray), 70%;
  --color-gray-80: var(--color-base-gray), 80%;
  --color-gray-90: var(--color-base-gray), 90%;
  --color-gray-95: var(--color-base-gray), 95%;
  --color-blue: var(--color-base-blue), 61%;
  --color-blue-dark: var(--color-base-blue-dark), 39%;
  --color-green: var(--color-base-green), 42%;
  --color-orange: var(--color-base-orange), 50%;
  --color-purple: var(--color-base-purple), 54%;
  --color-red: var(--color-base-red), 54%;
  --color-yellow: var(--color-base-yellow), 59%;
  color-scheme: light;
  --theme-accent: hsla(var(--color-red), 1);
  --theme-text-accent: #a67c52;
  --theme-accent-opacity: .15;
  --theme-divider: hsla(var(--color-gray-95), 1);
  --theme-text: hsla(var(--color-gray-10), 1);
  --theme-text-light: #262626;
  --theme-text-lighter: hsla(var(--color-gray-80), 1);
  --theme-bg: hsla(var(--color-base-white), 100%, 1);
  --theme-bg-hover: hsla(var(--color-gray-95), 1);
  --theme-bg-offset: hsla(var(--color-gray-90), 1);
  --theme-bg-accent: hsla(var(--color-blue), var(--theme-accent-opacity));
  --theme-code-inline-bg: hsla(var(--color-gray-95), 1);
  --theme-code-inline-text: var(--theme-text);
  --theme-code-bg: hsla(217, 19%, 27%, 1);
  --theme-code-text: hsla(var(--color-gray-95), 1);
  --theme-navbar-bg: hsla(var(--color-base-white), 100%, 1);
  --theme-navbar-height: 6rem;
  --theme-selection-color: #a67c52;
  --theme-selection-bg: #E2D7CF;
}

:root {
  --docsearch-primary-color: var(--theme-accent);
  --docsearch-logo-color: var(--theme-text);
}

:root {
  --user-font-scale: 1rem - 16px;
  --max-width: calc(100% - 1rem);
}

@media (min-width: 50em){
  :root {
    --max-width: 54em;
  }
}
  
:root {
  --text-font: 'HarmonyOS Sans SC', sans-serif;
  --code-text-font: 'SF Mono' !important;
}


html{
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif,system-ui,-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";
}

html {
  font-size: 16px;
  font-display: swap;
  color: #262626;
  -webkit-font-smoothing: antialiased;
}

body{
  width: 100%;
  --gutter: .5rem;
  --doc-padding: 2rem;
  padding: 0;
  margin: 0;
  color: #262626;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  max-width: 100vw;
  background: var(--theme-bg);
  color: var(--theme-text);
  letter-spacing: .6px;
}
body {
  font-family: 'HarmonyOS Sans SC', sans-serif;
}

/* 滚动条样式修改开始 */
html::-webkit-scrollbar {
    width: 11px;
    height: 8px;
}
html::-webkit-scrollbar-track {
    background-color: rgba(73, 177, 245, 0.2);
    border-radius: 2em;
}
html::-webkit-scrollbar-thumb {
    background-color: #49b1f5;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent);
    border-radius: 2em;
}
html::-webkit-scrollbar-corner {
    background-color: transparent;
}
html::-moz-selection {
    color: #fff;
    background-color: #49b1f5;
}
/* 滚动条样式修改结束 */


img {
    max-width: 100%;
    height: auto;
    border-style: none;
}


.navbar-toggler-icon{
    font-style: normal;
}


/* a{color:#282a2d;outline:0!important;text-decoration:none}
a:hover{text-decoration:none;color:#f1404b} */

/* p{color:#1d232b;margin:0;white-space:normal;word-break:break-all}  */
/* .content  p{
    margin: 2rem 0;
    text-align:justify;text-justify:auto;hyphens:auto
} */
a:-webkit-any-link {
    /* color: -webkit-link; */
    cursor: pointer;
    text-decoration: none;
}


.site-name{
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1.7em;
  letter-spacing: 0px;
  margin: 0;
  color: #212121;
}

.content h1{
    text-align: center;
    padding-bottom: 15px;
    border-bottom-width: 5px;
    border-bottom-style: solid;
    border-bottom-color: rgba(255,82,82,1);
    display: block;
    width: 100%;
    position: relative;
}

.content h1 a,
.content h1 a:focus,
.content h1 a:hover,
.content h1 a:visited{
    color: inherit;
}

a.nav-link{
    display: inline;
    font-size: 1.6rem;
    color: hsl(0, 5%, 20%);
}
a.nav-link:hover{text-decoration:none;color:#535deb}

.content h1 {
    font-size: 2.6rem;
    text-align: center;
    padding-bottom: 15px;
    border-bottom-width: 5px;
    border-bottom-style: solid;
    border-bottom-color: rgba(255,82,82,1);
    display: block;
    width: 100%;
    position: relative;
}

.content  h2{
    margin: 2rem 0;
    text-align:justify;text-justify:auto;hyphens:auto
}

.logo-img{
    display: inline-block;
    max-height: 53px;
    max-width: 225px;
    /* padding: 8px 4px 8px 12px; */
    vertical-align: middle;
}

.hfg-slot {
  display: flex;
  align-items: center;
}
.hfg-slot.right {
  justify-content: flex-end;
}

.site-title{
    display: inline-block;
    line-height: 1;
    max-width: 380px;
    outline: none;
    overflow: hidden;
    padding: 16px 5px;
    text-decoration: none;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.headline-hash{
    color: inherit !important; 
}

.headline-icon {
    font-size: 0.7em; 
    margin-left: 0.2em;
    font-style: normal;
}

h2[id] {
    font-weight: 400;
    font-size: 1.75rem;
    font-weight:600;
    padding-bottom: 20px;
    position: relative;
    padding-left: 20px;
    border-left: 4px solid red;
    background-image: linear-gradient(to right, blue, #aadef6);
    background-repeat: no-repeat;
    background-position: 10px bottom;
    background-size: calc(100% - 10px) 4px;
}

h3[id] {
    border-left: 2px solid #FF515B;
    padding-left: 15px;
    font-weight: 400;
    font-size: 1.5rem;
    margin-top: 1.0rem;
}




/* .btn a, a:focus, a:hover, a:visited{
text-decoration: none;
} */

.btn a{
    color: #fcfbfb!important;
    background-color: #cf2e2e;
    font-size: 2em!important;
    padding: .8em 1.2em;
    border-radius: 5px;
    text-align: center;
    line-height: 1!important;
    border: none;
    box-shadow: none;
    cursor: pointer;
    word-break: break-word;
    transition: .3s ease;
    display: inline-block;
}

.btn a:hover{
    box-shadow: inset 0 0 200px rgba(255,255,255,.15);
    outline: 0;
}

.date{
    text-align: right;
}

.toc hr{
    margin-top: 4em;
}

table {
margin: auto;
}




/** 进度比例和到顶部**/


@media (max-width: 767px) {

    .back-to-top {
        right: 10px;
    }

    .back-top-active {
        bottom: 10px;
    }
}

.box300-250 {
    width: 25rem;
    height: 14rem;
  }
  
  
  .blog-title{
    font-size: 30px;
    line-height: 1.5;
    font-weight: bold;
    text-align: left;
    padding-bottom: 9px;
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: rgba(255,82,82,1);
    display: block;
    width: 100%;
    position: relative;
  }
  
  .date {
    text-align: right;
  }
  
  .blog-info{
    line-height: 1.8;
    color: #9d9d9d;
    font-size: 15px;
  }
  /*标签内部垂直居中*/
  /*https://blog.csdn.net/DreamFJ/article/details/68921957*/
  .blog-info .label,
  .blog-info img {
  }
  
  .blog-info .label{
    opacity: 0.8;
  }
  
  .blog-content{
    padding-top: 15px;
    font-size: 15px;
    line-height: 1.6;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgba(255,82,82,1);
  }
  
  .blog-content img{
    margin: 15px auto;
    height: auto!important;
    max-width: 100%!important;
  }
  .blog-content a{
    color: #42b983;
    font-weight: 500;
    border-bottom: solid 2px #3b70fc;
    text-decoration: none;
    word-wrap: break-word;
  }
  .blog-content p{
    margin: 3px 2px 30px;
    font-size: 1.05rem;
    line-height: 1.85rem;
  }
  

  .blog-content .btn-outline-info {
    color: #00bda8;
    border-color: #00bda8;
  }
  
  .blog-content figcaption{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .blog-content td {
      white-space: nowrap;
      word-break: keep-all;
  }
  .blog-content li{
      line-height: 2.1;
  }
  
  .rating {
    position: relative;
    width: 160px;
    background: transparent;
    display: flex;
    justify-content: left;
    align-items: center;
    gap: .3em;
    padding: 5px 0px;
    overflow: hidden;
  }
  
  .rating__result {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-10px) translateX(-5px);
    z-index: -9;
    font: 3em Arial, Helvetica, sans-serif;
    color: #ffb900;
    pointer-events: none;
  }
  
  .rating__star {
    font-size: 1.3em;
    cursor: pointer;
    color: #ffb900;
    transition: filter linear .3s;
  }
  
  .rating__star:hover {
    filter: drop-shadow(1px 1px 4px gold);
  }
  
  .clear-block{
    display: inline !important;
  }
  .star{
    display: flex;
    justify-content: left;
    align-items: center;
  }
  
  
  .rating__star {
    cursor: pointer;
    color: #ffb900;
  }
  
  
  .text-right {
    text-align: right!important;
  }

.sticky{position:-webkit-sticky;position:sticky;top:0;z-index:1080;} 

.btn-center {
  margin-left: 50%!important;
  transform: translateX(-50%);
}

.blog-content img[src*="cover"]{
  width: 100%;
  height:100%;
}

.blog-content img[src$='#center'] {
  display: block;
  margin: 1rem auto;
  max-width: 100%;
  max-height: 600px;
}

.blog-content img[src$='#fluid'] {
  display: block;
  margin: 1rem auto;
  max-width: 100%;
  max-height: 600px;
  width: 100%;
}



 .card-title {
   margin-bottom: 0.25rem !important;
 }

.post-image {
  height: 15rem; width:100%
}

.post-card-image {
  height: 18rem; width:100%
}

.text-gray-300 {
  color: #d4dae3!important
}

.text-gray-400 {
  color: #c5ccd6!important
}

.text-gray-500 {
  color: #a7aeb8!important
}

.text-gray-600 {
  color: #69707a!important
}

.text-gray-700 {
  color: #4a515b!important
}

.text-gray-800 {
  color: #363d47!important
}

.fw-300 {
  font-weight: 300!important
}

.fw-400 {
  font-weight: 400!important
}

.fw-500 {
  font-weight: 500!important
}

.fw-600 {
  font-weight: 600!important
}

.fw-700 {
  font-weight: 700!important
}

.fw-800 {
  font-weight: 800!important
}
.fw-1000 {
  font-weight: 1000!important
}

.fs-1{
    font-size: calc(1.375rem + 1.5vw) !important;
}
.fs-2{
    font-size: calc(1.325rem + .9vw) !important;
}
.fs-3{
    font-size: calc(1.3rem + .6vw) !important;
}
.fs-4{
    font-size: calc(1.275rem + .3vw) !important;
}
.fs-5{
    font-size: 1.25rem !important;
}

.fs-6{
    font-size: 1rem !important;
}

.hr-icon {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  position: relative;
  margin: 40px auto;
  border: 2px dashed #d2ebfd;
  width: calc(100% - 4px);
}

.hr-icon:before {
  display: inline-block;
  font-weight: 600;
  font-family: 'Font Awesome 6 Free';
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  position: absolute;
  top: -20px;
  left: 5%;
  z-index: 1;
  color: #bfe4fb;
  content: '\f03d';
  font-size: 20px;
  line-height: 1;
  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
}

.separator {
  display: flex;
  align-items: center;
  text-align: center;
}

.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 2px solid #dc3545;
}

.separator:not(:empty)::before {
  margin-right: .25em;
}

.separator:not(:empty)::after {
  margin-left: .25em;
}
.url-card{
  width: 80%;   
}

.url-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 40px -24px rgb(0 36 100 / 50%);
}
#tableOfContents ul {
    padding-left: 1rem;
}
/* 动态添加 ::after */
.dynamic-after {
    position: relative; /* 让 tr 成为相对定位的容器 */
}

.dynamic-after::after {
    content: attr(data-content); /* 动态内容 */
    position: absolute; /* 绝对定位 */
    font-size: 0.8em;
    top: 1px; /* 定位到顶部 */
    right: 6px; /* 定位到右侧 */
    padding: 3px 3px;
    background-color: #ff515b  ; /* 背景色 */
    color: yellow; /* 字体颜色 */
    white-space: nowrap; /* 防止内容换行 */
    z-index: 1; /* 确保显示在最上层 */
}


.card-after {
    position: relative; /* 让 tr 成为相对定位的容器 */
}

.card-after::after {
    content: '推荐'; /* 动态内容 */
    position: absolute; /* 绝对定位 */
    font-size: 1.2rem;
    top: 1px; /* 定位到顶部 */
    right: 6px; /* 定位到右侧 */
    padding: 3px 3px;
    background-color: #ff515b  ; /* 背景色 */
    color: yellow; /* 字体颜色 */
    white-space: nowrap; /* 防止内容换行 */
    z-index: 1; /* 确保显示在最上层 */
}



.copy:active {
  background-color: #ffeaea;
}


.copy {
    position: relative;
    vertical-align: top;
    width: auto;
    height: auto;
    border: 3px dashed red;
    padding: 1px 15px;
    cursor: pointer;
    display: inline-block;
    transition: background-color 0.2s;
    color: red;
    line-height: 1.3;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

.copy::before {
  content: "COPY";
  position: absolute;
  top: -1em;
  left: 25%;
  transform: translateX(-50%);
  background-color: rgb(255, 255, 255);
  color: #0059ff;
  font-size: 8px;
  padding: 0px 5px 0px 5px;
  font-family: Arial, sans-serif;
}


.copy-toast {
  position: fixed;
  background-color: #333;
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 9999;
}

.copy-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(-6px);
}


.confirmBtn {
    background-color: transparent;
    color: #007bff;
    border: 2px solid #007bff;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}
.confirmBtn:hover {
    background-color: #007bff;
    color: #fff;
}


/* 回到顶部按钮容器样式 */
.back-to-top-container {
    display: none;
    position: fixed;
    bottom: 100px;
    right: 60px;
    z-index: 1;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, #ffffff, #ffffff); /* 设置单一颜色 */
    transition: opacity 0.3s ease;
}

.back-to-top-container.show {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

/* 回到顶部按钮样式 */
.back-to-top {
    width: 45px;
    height: 45px;
    bottom: 100px;
    right: 60px;
    font-size: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    background-color: var(--bs-danger); /* 设置按钮背景颜色 */
    border: none; /* 移除按钮边框 */
    z-index: 6; /* 设置按钮层级高于内层圆 */
}