/* 1.投稿页AI生成按钮------------------------------------------------------------------------------------------------------------------- */
#generate_description {
    position: absolute;
    bottom: 15px; /* 距离顶部的距离 */
    left: 15px; /* 距离右侧的距离 */
    background: linear-gradient(0deg, #274eee, #4667f0);
    border: none; /* 去掉默认边框 */
    color: #fff; /* 按钮文本颜色 */
    padding: 5px 10px; /* 按钮内边距 */
    border-radius: 5px; /* 圆角边框 */
    cursor: pointer; /* 鼠标悬停时显示为手型 */
    font-size: 14px; /* 按钮字体大小 */
}
#generate_description:hover {
    background: linear-gradient(0deg, #fccb24, #fde48e);
    color: #000; /* 鼠标悬停时的文本颜色 */
}


/* 2.详情页弹窗关闭按钮位置调整+文字加背景----------------------------------------------------------------------------------------------- */
.iconfont.icon-close-circle.icon-2x {
    font-size: 1.6em;
}
.modal-content .modal-body.down_body p {
    background: linear-gradient(180deg,#fccb24a8,#fde48e8a);
    padding: 12px;
    border-radius: 6px;
    margin: 20px 0 20px 0;
    font-size: 16px
}
.io-black-mode .modal-content .modal-body.down_body p {
    background: linear-gradient(-5deg,#dfe4f84d 0%,#dfe4f8a8 100%);
    color:#fff
}
.modal-content .btn.btn-arrow{
    margin:5px 0;
    border-radius: 6px;
}
.modal-dialog .modal-content{
    border-radius: 10px;
}

/* 3.大侧边栏美化------------------------------------------------------------------------------------------------------------------- */
.modal-dialog.h-100.sidebar-nav-inner {
    background-color: #fff
}
.io-black-mode .modal-dialog.h-100.sidebar-nav-inner {
    background-color: #2c2e2f
}
@media (max-width: 767px) {
    .modal-dialog.h-100.sidebar-nav-inner {
        background-color:#fff;
        width: calc(100% - 150px)!important
    }
    .sidebar-show>ul {
        margin-right: 150px!important
    }
}
.iconfont.icon-arrow-r-m.sidebar-more.text-sm{
    margin-right: 10px;
} 
.sticky.sidebar-nav.fade {
    overflow: hidden; /* 防止子元素溢出 */
}
.modal-dialog .sidebar-item>a:hover{
    background: linear-gradient(45deg,#fccb24,#fde48e);
    border-radius: 8px;
    box-shadow: 3px 3px 10px 1px rgb(39 78 238 / 11%);
}
.modal-dialog .sidebar-item>a:hover i,
.modal-dialog .sidebar-item>a:hover span {
    transform: translateX(20px) scale(1.1);
    color: #274eee;
    transition: transform 0.3s ease, color 0.3s ease; 
}
.sidebar-show>ul{
	margin-right: 5px!important;
} 
.sidebar-show>ul>li>a span{
	color:#274eee!important;
}
.io-black-mode .sidebar-show>ul>li>a span {
    color: #c6c9cf!important;
}
/* minina菜单搜索常高亮显示 */
#mininav .sidebar-item .smooth,
#mininav .sidebar-item>a{
    background: linear-gradient(45deg,#fccb24,#fde48e);
    border-radius: 8px;
    margin: 5px 6px!important
}
.io-black-mode #mininav .sidebar-item .smooth,
#mininav .sidebar-item>a{
    color: #234eff
}
#mininav .sidebar-item .smooth:hover,
#mininav .sidebar-item>a:hover{
    transform: scale(1.06)
}
/* 只有首页显示迷你菜单内站内搜索按钮 注意，mininav.php文件中添加starmininav类名*/
/* 第2行为次级导航，不添加会隐藏次级导航菜单*/
.home .starmininav .sidebar-item,
.page-template .starmininav .sidebar-item{
    display: block
}
.starmininav .sidebar-item {
    display: none
}

/*4 影视页豆瓣评分------------------------------------------------------------------------------------------------------------------- */
/* 豆瓣评分容器 */
.doubanpingfen {
    position: relative;
    top:20px;
    left:-180px;
}
.douban-score {
    display: flex;
    flex-direction: column;
    align-items: center; /* 水平居中显示内容 */
    justify-content: flex-end; /* 将内容与底部对齐 */
    position: absolute;
    bottom: 0;
    right: 0;
}
.douban-score strong {
    font-size: 85px;
    background: linear-gradient(0deg, #cea95c, #fce297);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.douban-score span {
    background: linear-gradient(0deg, #cea95c, #fce297);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 32px;
    margin-top: -25px;
}
.douban-score:after, .douban-score:before {
    font-family: io!important;
    position: absolute;
    font-size: 120px;
    bottom:-25px;
    background: linear-gradient(0deg, #cea95c, #fce297);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 8.2px rgba(255, 205, 77, .21);
}
.douban-score:before {
    content: "\e69e";
    left: 20%;
    transform: translateX(-100%); /* 中心相对于douban-score */
}
.douban-score:after {
    content: "\e69f";
    right: 20%;
    transform: translateX(100%); /* 中心相对于douban-score */
}
@media (max-width: 1024px) {
.doubanpingfen {
    display:none;
}
}
/* 首页影视卡片右上角分数 */
.card-book .douban-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: linear-gradient(45deg, #cea95c, #fce297);
    color: #000;
    padding: 2px 5px;
    font-size: 10px;
    border-radius: 0 10px 0 10px;
    z-index: 10;
}
.io-sidebar-widget .douban-badge{
    display:none
}

/*5 详情页超链接美化------------------------------------------------------------------------------------------------------------------- */
#wangzhijieshao .external:not(.postbtn),
#wangzhijieshao a{
  background: transparent;
  color: #274eee;
  text-transform: uppercase;
  position: relative;
  transition: 0.5s ease;
  padding-bottom: 5px;
}
.io-black-mode #wangzhijieshao .external:not(.postbtn),
.io-black-mode #wangzhijieshao a{
  color: #fcca1e;
}
#wangzhijieshao a::before {
    content: "\ecac";
    font-family: "io" !important;
    background:#274eee;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.io-black-mode #wangzhijieshao a::before{
    background:#fcca1e;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
#wangzhijieshao a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(to right, transparent 0%, #fcca1e 100%);
  transition: 0.5s ease;
  transform: skewX(-15deg);
}
#wangzhijieshao a:hover::after {
  width: 100%;
}

/*6 首页弹窗美化------------------------------------------------------------------------------------------------------------------- */
.io-bomb-content.io-popup-tips-content.rounded {
    border-radius: 15px!important;
    background-image: url("https://www.star8.cn/img/ico.webp");
    background-size: 250px;
    background-repeat: no-repeat;
    background-position: calc(100% + 80px) calc(100% + 60px);
}
.io-bomb-content .text-center {
    font-size: 30px;
    margin-bottom: 25px!important;
}
@media (min-width: 768px) {
.io-bomb-content .text-center {
    margin-top: -15px
}
}
.tanchuangneirong {
    background: #ffffffad;
    backdrop-filter: blur(5px);
    border-radius: 12px;
    padding: 10px;
    border: 1px solid #abb7ec2e;
    margin: 0 -10px;
}
.io-black-mode .io-bomb-content.io-popup-tips-content.rounded {
    background-image: url("https://www.star8.cn/img/heifang.webp")!important;
    background-size: 250px!important;
    background-repeat: no-repeat!important;
    background-position: calc(100% + 80px) calc(100% + 62px)!important;
}
.io-black-mode .tanchuangneirong {
    background: #1b1d1f69;
    
}
.tanchuangneirong p {
    margin-bottom: 10px;
    margin-top:10px
}
.io-black-mode .tanchuangneirong p {
    color:#fff
}
.io-bomb-content.io-popup-tips-content.rounded::before,
.io-bomb-content.io-popup-tips-content.rounded::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    top: 0;
}
.io-bomb-content.io-popup-tips-content.rounded::before {
    width: 120px;  /* 大圆 */
    height: 120px;
    top:-30px;
    left:-40px;
    background-color: rgb(107 135 244); /* 设置颜色，透明度可调 */
    z-index: 1; /* 确保它位于小圆之上 */
}
.io-bomb-content.io-popup-tips-content.rounded::after {
    width: 100px; /* 小圆 */
    height: 100px;
    top:-50px!important;
    left:20px!important;
    background-color: rgb(39 78 238 / 33%); /* 设置颜色，透明度可调 */
}
@media (max-width: 768px) {
.tanchuangneirong {
    margin: 10px 0
}
.io-bomb-content.io-popup-tips-content.rounded::before {
    width: 90px;  /* 大圆 */
    height: 90px;
}
.io-bomb-content.io-popup-tips-content.rounded::after {
    width: 70px; /* 小圆 */
    height: 70px;
}
.io-bomb-content.io-popup-tips-content.rounded {
    background-size: 200px;
    background-position: calc(100% + 60px) calc(100% + 45px);
}
}
.io-black-mode .io-bomb-content.io-popup-tips-content.rounded::before {
    background-color: rgb(173 173 177);
}
.io-black-mode .io-bomb-content.io-popup-tips-content.rounded::after {
    background-color: rgb(255 255 255 / 41%);
}

/*7 侧边栏设置布局美化------------------------------------------------------------------------------------------------------------------- */
.settings-container {
    display: flex; /* 使用 Flexbox 布局 */
    justify-content: space-between; /* 两列之间的间隔 */
    gap: 10px; /* 设置间隔 */
    flex-wrap: wrap; /* 允许子元素换行 */
}
.user-setting-container {
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(25px);/* 兼容旧版iOS Safari */
    backdrop-filter: blur(25px);
}
/* 侧边栏1，2以及DOCK栏控制共同样式 */
.settings-column,
.search-bg-position,
.search-bg-position-bgzhezhao,
.slider-container{
    background: rgba(255, 255, 255, 0.7);
    margin-top: 10px;
    border-radius: 12px;
    border: 1px solid #f6f6f7;
    box-shadow: 8px 8px 15px -10px rgb(128 128 128 / 18%)
}
.io-black-mode .settings-column,
.io-black-mode .search-bg-position,
.io-black-mode .search-bg-position-bgzhezhao,
.io-black-mode .slider-container{
    background: #363738;
    border: none;
    box-shadow: none
}
/* 1.网址设置边距 */
.settings-column {
    flex: 1; /* 每列占据相同的宽度 */
    padding:5px 0 0 15px;
}
/* 2.背景高度调整与遮罩滑块边距 */
.search-bg-position,
.search-bg-position-bgzhezhao{
    padding: 5px 15px 10px 15px;
}
.user-setting input[type=range] {
    -webkit-appearance: none;/*清除系统默认样式*/
    width: 100%;
    background: linear-gradient(-45deg,#274eee,#4667f0);
    border-radius: 12px;
}
.user-setting input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;/*清除系统默认样式*/
    height: 20px;/*拖动块高度*/
    width: 20px;/*拖动块宽度*/
    background: #274eee;/*拖动块背景*/
    border-radius: 50%;/*外观设置为圆形*/
    border: solid 5px #ffffff;/*设置边框*/
}
/*背景图像透明层添加遮罩与模糊*/
.header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* 初始透明度为 0 */
    backdrop-filter: blur(0px); /* 初始模糊为 0 */
    pointer-events: none; /* 透明层不影响用户操作 */
    z-index:99
}
/*透明遮罩与模糊滑块布局*/
.search-bg-position-bgzhezhao {
    display: flex;
    align-items: center;
    width: 100%;
    gap:10px
}
.search-bg-opacity,
.search-bg-blur {
    flex: 1;
}
.user-setting-container #search-text{
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 8px 8px 15px -10px rgb(128 128 128 / 18%)!important;
}
/*小于1400宽度隐藏伸缩滑块*/
@media screen and (max-width: 1400px) {
    .search-bg-position.shensuo {
        display: none;
    }
}
/* 背景图分类列表容器横向排列 */
.pic-categories .categories-list {
    display: flex;              /* 使用 flexbox 进行排列 */
    gap: 5px;                 /* 设置分类项之间的间隔，替代右边距 */
    flex-wrap: nowrap;          /* 防止换行 */
    overflow-x: auto;           /* 允许横向滚动 */
    margin-bottom: 5px;                  /* 去除默认外边距 */
    list-style: none;           /* 去除默认的列表样式 */
}
/* 设置分类项的宽度并确保它们在横向上排列 */
.pic-categories .category-item {
    white-space: nowrap;        /* 防止文字换行 */
    cursor: pointer;           /* 鼠标悬停时显示为手形 */
    padding: 5px 15px;          /* 为分类项添加内边距 */
    background-color: #f5f5f5;
    border-radius: 5px;         /* 圆角边框 */
    transition: background-color 0.3s ease, color 0.3s ease;  /* 平滑的背景颜色和文字颜色变化 */
}
/* 鼠标悬停时改变分类项的背景和文字颜色 */
.pic-categories .category-item:hover {
    background-color: #274eee;
    color: white;
}
/* 添加滚动条样式 */
.pic-categories .categories-list::-webkit-scrollbar {
    height: 5px;                /* 设置滚动条的高度 */
}
.user-setting-btn.zhankai{
    display:none
}
.category-item.active {
    background-color: #274fee!important;
    color: #fff;
}
.io-black-mode .pic-categories .category-item{
    background-color: #363738;
}
/* 背景图类型标识 */
.search-bg-options ul li div{
    position: relative;
}
.search-bg-options ul li div>span{
    position: absolute;
    left: 5px;
    top: 5px;
    background: #ffffffc2;
    font-size: .7rem;
    padding: 0 8px;
    border-radius: 20px;
    color: #676767;
}
.io-black-mode .search-bg-options ul li div>span{
    background: #363738;
    color: #bbb;
}
/*搜索框视频背景图布局*/
.header-big video{
    position: absolute;
    top: 50%;
    left: 50%;
    visibility: visible;
    width: 100%;
    height: 100%;
    transform: translate(-50%,-50%);
    pointer-events: none;
    object-fit: cover;
}

/*配合大搜索框伸缩js，加载高度属性后显示网页内容*/
/* 默认页面内容隐藏 */
body.home {
    visibility: hidden; /* 初始隐藏页面 */
    opacity: 0;         /* 确保页面不可见 */
    transition: opacity 0.3s ease-in-out; /* 渐变显示 */
}
/* 当内容加载完成后，应用此类 */
body.home.visible {
    visibility: visible; /* 显示页面内容 */
    opacity: 1;           /* 渐变显示 */
}

/*DOCK控制组件样式*/
/* 通用容器样式 */
.slider-container {
  --radius: 80px;
  --border: 4px;
  --height: 42px;
  --speed: 0.25s;
  --bg-color: hsl(0deg 0% 91.35%);
  --highlight-color: hsl(228.07deg 84.62% 59.22%);
  --text-color: hsl(0deg 0% 100%);
  display: flex;
  align-items: center; /* 垂直居中 */
  width: 100%; /* 占满父容器宽度 */
  gap: 10px; /* 控制文字和滑块的间距 */
  font-family: Arial, sans-serif;
  padding: 15px;
  margin-top: 0px;
}

/* 主滑块容器 */
.tabs {
  flex-grow: 1; /* 滑块占满右侧剩余空间 */
  height: var(--height);
  display: grid;
  grid-auto-flow: column;
  background: var(--bg-color);
  border-radius: var(--radius);
  position: relative;
  border: var(--border) solid var(--bg-color);
}

/* 隐藏单选按钮 */
.tabs > .input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* 动态设置激活状态 */
.tabs:has(:checked:nth-of-type(1)) {
  --active: 0;
}
.tabs:has(:checked:nth-of-type(2)) {
  --active: 1;
}
.tabs:has(:checked:nth-of-type(3)) {
  --active: 2;
}

/* 标签样式 */
.tabs .label {
  padding: 0 clamp(10px, 10px + 10px, 20px);
  cursor: pointer;
  text-align: center;
  height: 100%;
  display: grid;
  border-radius: calc(var(--radius) - var(--border));
  place-items: center;
  color: var(--text-color);
  transition: background, color;
  transition-duration: var(--speed);
  z-index:1
}

.input:not(:checked) + .label:hover {
  --highlight: 0.35;
  background: hsl(228.07deg 84.62% 59.22% / 57%);
}

/* 滑块样式 */
.tabs::after {
  pointer-events: none;
  content: "";
  width: calc(100% / 3); /* 3 个选项 */
  height: 100%;
  background: var(--highlight-color);
  position: absolute;
  border-radius: calc(var(--radius) - var(--border));
  translate: calc(var(--active, 0) * 100%) 0;
  transition: translate, outline-color;
  transition-duration: var(--speed);
}

@media (max-width: 768px) {
    .slider-container{
        display:none
    }
}

/* 为dock栏添加过渡效果 */
.dock-container {
  transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
  opacity: 1; /* 初始为完全不透明 */
}
/* 当设置为隐藏时，dock栏向下移动并渐隐 */
.dock-container.hidden {
  transform: translateX(-50%) translateY(100%); /* 向下移动容器，超出屏幕 */
  opacity: 0; /* 渐隐 */
}

/*8 失效提示页面美化------------------------------------------------------------------------------------------------------------------- */
/* 遮罩层样式 */
.custom-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    flex-direction: column; /* 改为纵向布局 */
}
.custom-dialog h2 {
	font-size: 30px;
    color:#274eee;
}
.custom-dialog h3 {
	font-size: 25px;
    margin:0 25px 20px 25px
}
/* 对话框样式 */
.custom-dialog {
    background: linear-gradient(45deg,#f0f2f7,#ffffff);
	padding: 25px;
	border-radius: 8px;/* 圆角效果 */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	position: relative;
	z-index: 10000;/* 确保在遮罩层上方 */
	overflow-y: auto;/* 允许纵向滚动 */
	text-align: center;/* 对话框文字居中 */
}
/* 按钮样式 */
.custom-dialog button {
	margin: 10px 5px;/* 每个按钮之间的间距 */
	padding: 10px 20px;
	background-color: #ffffff;
	color: black;
	border: none;
	cursor: pointer;
	border-radius: 6px;
	margin-bottom: 30px;
    border: 1px solid #4667f03b;
}
.custom-dialog button:hover {
	background-color: #fbcc2d;
}
/* 倒计时文本样式 */
.shixiaocountdown {
	font-size: 15px;
	color: gray;
	text-align: center;
    margin-top:15px
}
/* 图片样式 */
.corner-image {
	position: absolute;
	width: 100px;/* 可以根据需要调整大小 */
	height: 100px;/* 可以根据需要调整大小 */
}
.bottom-left {
	bottom: 0;
	left: 0;
}
.bottom-right {
	bottom: 0;
	right: 0;
}
/* 可点击文本样式 */
.clickable-link {
    color: #274eee; /* 设置文本颜色 */
    font-weight: bold; /* 加粗文本 */
}
@media (max-width: 768px) {
.custom-dialog {
margin:15px
}
    
.custom-dialog h2 {
	font-size: 25px;
}
.custom-dialog h3 {
	font-size: 20px;
    margin:0 5px 20px 5px
}
/* 按钮样式 */
.custom-dialog button {
	margin: 15px 5px;
	padding: 8px 10px;
}
.corner-image {
	position: absolute;
	width: 70px;/* 可以根据需要调整大小 */
	height: 70px;/* 可以根据需要调整大小 */
}
/* 倒计时文本样式 */
.shixiaocountdown {
    margin-top:25px
}
}

/*9 类型为下载资源时页面优化------------------------------------------------------------------------------------------------------------------- */
.app-info .info-term.mr-3,
.app-nature.text-center.text-md-left.mb-5.mb-md-4{
    display:none
}
.row.app-content.py-5.mb-xl-5.mb-0.mx-xxxl-n5 {
    margin-bottom: -35px!important;
    margin-top:15px
}
@media (max-width: 768px) {
.row.app-content .mb-0.text-muted.text-sm,
.row.app-content .mb-2.app-button{
    text-align:center
}
.row.app-content.py-5.mb-xl-5.mb-0.mx-xxxl-n5:after {
    content: '';
    width: -webkit-fill-available;
    border-bottom: 8px solid #f5f7fa
}
.io-black-mode .row.app-content.py-5.mb-xl-5.mb-0.mx-xxxl-n5:after {
        border-bottom: 8px solid #1b1d1f
}
}
@media (min-width: 1200px) {
.row.app-content .col {
    position: relative;
    padding: 30px 10px 20px 40px;
    border-radius: 8px;
    border: 1px solid #abb7ec4f;
    margin-top: -30px;
}
.row.app-content .col:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("https://www.tgsea.com/static/images/pattern.svg");
    background-size: cover;
    background-position: center;
    opacity: 0.05; /* 设置图片透明度 */
    border-radius: 8px; /* 保持圆角 */
}
.row.app-content .col * {
    position: relative;
    z-index: 1; /* 确保内容在背景伪元素之上 */
}
}

/*10 详情页面备用链接按钮------------------------------------------------------------------------------------------------------------------- */
@media (min-width: 768px) {
.spare-site.mb-3{
    display:none
}
}
@media (max-width: 768px) {
.beiyong.btn.btn-danger.qr-img {
    display:none
}
}
.btn.btn-danger.qr-img{
    background: linear-gradient(-45deg,#fc3b5b,#fc3d49);
    border: 1px solid #dce2fc00;
    margin: 0 0 10px 10px;
}
.beiyong.btn.btn-danger.qr-img {
    background: #fc3b5b;
    border: 1px solid #dce2fc00;
    box-shadow: 0 2px 10px rgb(252 59 91 / 40%);
}
.custom-dropdown-menu {
    margin-top:5px;
    background: #f7f9fc;
    border-radius: 8px; /* 圆角边框 */
    padding: 10px; /* 内边距 */
    border: 1px solid #4667f014;
    box-shadow: 8px 8px 15px -10px rgb(128 128 128 / 18%);
}
.beiyonglianjie {
    background-color: #ffffff; /* 选项背景 */
    margin-left:0!important;
    color: #333; /* 选项文字颜色 */
    padding: 8px 12px; /* 选项内边距 */
    display: block; /* 选项占满一行 */
    margin-bottom: 10px; /* 选项之间的间距 */
    border-radius: 6px; /* 选项圆角 */
    box-shadow: 8px 8px 15px -10px rgb(128 128 128 / 18%);
    transition: background-color 0.3s; /* 添加过渡效果 */
}
.io-black-mode .beiyonglianjie {
    background-color: #1b1d1f; /* 选项背景 */
}
.beiyonglianjie:hover {
    background: linear-gradient(-45deg,#fc3b5b,#fc3d49);
    color: #fff; /* 选项文字颜色 */
    box-shadow: 0 2px 10px rgb(252 59 91 / 40%)  
}
/* 去掉最后一个选项的下边距 */
.beiyonglianjie:last-child {
    margin-bottom: 0; /* 不设置下边距 */
}
/* 详情标题段落 */
.custom-siteInfo{
	padding:10px 0;
}
.custom-site-down:after {
    content: '';
    height: 1px;
    clear: both;
    display: table;
    margin-left: -20px;
    margin-right: -20px;
    padding-bottom: 16px;
    width: -webkit-fill-available;
    border-bottom: 8px solid #f5f7fa
}
.io-black-mode .custom-site-down:after {
    border-bottom: 8px solid #1b1d1f
}
.tags_box a {
    background: #f5f7fa;/* 标签背景色 */
}

/*11 网址卡片自定义字段小图标样式------------------------------------------------------------------------------------------------------------------- */
.url-card .star-togotips {
    top: 5px;
    right: 22px;
    position: absolute;
    color: #3f5cd8;
    display: flex;
    gap: 3px
}
.url-card .star-togotips i {
    font-size: 15px
}
.url-card .url-body:hover .star-togotips {
    opacity: 1
}
.url-card a.togo:hover i {
    text-shadow: 0 0 1px
}
@media (max-width: 456px) {
.star-togotips{
    display:none!important;
}
}
.url-card .url-body:hover .star-togotips .pc {
    color: #0067b8
}
.url-card .url-body:hover .star-togotips .and {
    color: #00d836
}
.url-card .url-body:hover .star-togotips .ios {
    color: black
}
.url-card .url-body:hover .star-togotips .tizi {
    color: #3f5cd8
}
.url-card .url-body:hover .star-togotips .gg {
    color: #ff2204
}
.url-card .url-body:hover .star-togotips .tv {
    color: #0fe3e0
}
.mini-sidebar.theme-intro.simple .star-togotips {
    display: none
}

/*12 中等网址块弹窗样式------------------------------------------------------------------------------------------------------------------- */
/* Modal 样式 */
.star8-modal {
    display: none; /* 默认隐藏 */
    position: fixed; /* 固定定位 */
    z-index: 9999;
    left: 50%; /* 左右居中 */
    top: 50%; /* 垂直居中 */
    transform: translate(-50%, -50%); /* 移动到真正的中心 */
    width: 100%;
    height: 100%;
}

/* 模态框内容 */
.star8-modal-content {
    position: relative;
    background-color: white;
    padding: 22px;
    width: 80%;
    max-width: 600px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-height: 90%; /* 限制模态框的最大高度 */
    position: fixed; /* 固定定位 */
    left: 50%; /* 左右居中 */
    top: 50%; /* 垂直居中 */
    transform: translate(-50%, -50%); /* 移动到真正的中心 */
}

/* 关闭按钮样式 */
.star8-close {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 24px;
    cursor: pointer;
}

/* 模态框头部 */
.star8-modal-header {
    display: flex;
    align-items: center;
    margin: 10px 0 20px 0;
}

/* 头像样式 */
.star8-modal-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
}

/* 标题和摘要 */
.star8-modal-text {
    flex-grow: 1;
}

.star8-modal-title {
    font-size: 1.5rem;
    margin: 0;
    font-weight: bold;
}

.star8-modal-summary {
    font-size: 0.8rem;
    color: #9E9E9E;
    margin-top: 5px;
    /* 限制最多显示两行 */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 显示2行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* 如果超出部分，显示省略号 */
}

/* 网址预览部分 */
.star8-modal-preview {
    width: 100%;
    border-radius: 8px;
    border: 5px solid #9e9e9e2e;
}

/* 底部按钮样式 */
.star8-modal-footer {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;
    margin-top: 20px;
    gap: 35px; /* 给按钮之间增加一些间距 */
}

/* 按钮样式 */
.star8-modal .star8-btn {
    padding: 12px 25px; /* 增加按钮的内边距，确保按钮内容显示清晰 */
    border-radius: 50px; /* 设置圆角 */
    width: auto; /* 自动宽度 */
    max-width: 180px; /* 限制按钮最大宽度 */
    text-align: center; /* 文本居中对齐 */
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    border: none; /* 去掉默认的边框 */
    transition: background-color 0.3s ease; /* 平滑过渡效果 */
    white-space: nowrap; /* 防止按钮内容换行 */
}

.star8-btn-primary {
    background-color: #274eee;
    color: white;
}

.star8-btn-secondary {
    background-color: #fbc91e;
    color: #ffffff;
}

.star8-btn-tertiary {
    background-color: #fc3b57;
    color: white;
}

/* 模态框背景层 */
.star8-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 35%);
}

/* 按钮悬停效果 */
.star8-btn:hover {
    opacity: 0.8;
    color: #fff;
}
.io-black-mode .star8-modal-content{
    background-color: #363738;
}
.io-black-mode .star8-modal-overlay {
    background-color: rgb(0 0 0 / 64%);
}
.io-black-mode .star8-btn-primary,
.io-black-mode .star8-btn-secondary{
    background-color: #1b1d1f;
}
/* 小屏幕适配 */
@media (max-width: 480px) {
    .star8-modal-content {
    top: 40%; /* 居中偏上（方便关闭） */
    }
    .star8-modal-content {
        margin: 10% auto; /* 保持模态框居中 */
        width: 90%; /* 调整模态框宽度 */
    }
    .star8-modal .star8-btn {
        width: 100%; /* 按钮在小屏幕下占满一行 */
        max-width: none; /* 去除最大宽度限制 */
        padding: 12px 20px; /* 增加按钮内边距 */
        font-size: 1rem; /* 保持字体大小 */
    }
}
@media (max-width: 768px) {
    .star8-modal-content {
        width: 90%; /* 中等屏幕下模态框宽度 */
    }
    .star8-modal-footer {
        flex-wrap: wrap; /* 按钮垂直排列 */
        gap: 10px; /* 增加间距 */
    }
}
/*13 书籍影视卡片改为新版一为样式------------------------------------------------------------------------------------------------------------------- */
.card-book .media-content::after {
    content: '';
    position: absolute;
    display: block;
    background: radial-gradient(farthest-side at 100% 0%, rgba(255, 255, 255, .3), transparent) no-repeat 100% 100% / 45% 100%;
    right: 0;
    top: 0;
    bottom: 0;
    width: 200%;
    pointer-events: none;
    transform: translateX(-50%);
    opacity: 0;
    clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
    transition: transform 1s, opacity .5s;
}
.card-book .media-content:hover::after {
    transform: translateX(-10%);
    opacity: 1;
}
@media (min-width: 1400px) {
    .col-xxl-8a {
        flex: 0 0 16.66%;
        max-width: 16.66%;
    }
}
.card-book .media-content::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: -30px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 0%, transparent 50%);
    border-radius: 0 0 var(--main-radius) var(--main-radius);
}
.card-book.list-item{
    margin-bottom:1.5rem
}
.book-template-default .card-book.list-item{
    margin-bottom:0
}

.card-book .list-content{
	position: absolute;
    pointer-events: none;
    color: #fff;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 10px 10px;
}
.card-book .list-title{
	transform: translateY(21px);
    transition: transform 0.4s ease;
}

.card-book:hover .list-title{
	transform: translateY(-5px);
}
.card-book .list-body .mt-1{
    margin-top:0!important;
}

.card-book .list-body .list-subtitle{
	color:#fff!important;
    opacity: 0;
    transition: opacity 0.3s ease-in,transform 0.3s ease-in;
}
.card-book:hover .list-body .list-subtitle{
	opacity: 1;
	transform: translateY(-5px);
}