body{background:#f2f5f9;font-size:14px;min-width:1300px}
.container{width:1300px;margin:0 auto}
.fl,.left{float:left}
.fr,.right{float:right}
@keyframes searchLights{0%{left:-200%;top:0}
to{left:100%;top:100px}
}
header{position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 70px;
    background: rgb(255 255 255/80%);
     box-shadow: 0 0 6px rgb(0 0 0 / 10%);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);}
/* LOGO 容器与头部等高，图片按比例自适应撑满，不拉伸变形 */
header .logo{width:140px;height:70px;padding:0;box-sizing:border-box;display:flex;align-items:center;-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s}
header .logo img{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;object-position:left center}
header .logo a{animation:shine .1s infinite linear;position:relative;overflow:hidden;display:flex;align-items:center;width:100%;height:100%}
header .logo a:before{content:"";position:absolute;left:-200%;width:200%;height:20px;background-image:linear-gradient(0,transparent 20%,rgba(255,255,255,.1) 50%,rgba(255,255,255,.1) 80%);background-color:rgba(255,255,255,.62);transform:rotate(-60deg);animation:searchLights 2s ease-in 2s infinite;z-index:3;pointer-events:none}
header .menu{display:none;transition:all .3s;-webkit-transition:all .3s}
header .layui-nav .layui-nav-item a{color:#666}
header .layui-nav .layui-this a{color:#007bf5}
header .layui-nav .layui-nav-item a:hover{color:#007bf5}
header nav{padding:0 0 0 100px}
header nav ul li{line-height:70px!important}
header .layui-nav{background:0 0;color:#666}
header .layui-nav .layui-this:after{width:30%;margin:0 35%}
header .layui-nav .layui-nav-item:after{background-color:#007bf5;border-radius:10px}
header .layui-nav-bar{display:none}
header.su nav ul li{line-height:50px!important}
header.su{height:50px;transition:all .3s;-webkit-transition:all .3s}
header.su .logo{padding:0;width:120px;height:50px;transition:all .3s;-webkit-transition:all .3s}
header.su .menu,header.su .night-open,header.su .search-open,header.su .set-open{line-height:50px;transition:all .3s;-webkit-transition:all .3s}
header .login-open{line-height:70px;transition:all .3s;-webkit-transition:all .3s}
header .login-open a{color:#333}
header .night-open,header .search-open{color:#333;line-height:70px;width:30px;text-align:center;margin-left:10px;transition:all .3s;-webkit-transition:all .3s;cursor:pointer;position:relative}
#searchBox{display:none;width:0;height:0;overflow:hidden}
/* ===== 搜索弹窗（按设计稿重做）=====
   样式目标：一块白色圆角面板，左边是「输入框」，右边是「搜索按钮」。
   按钮为浅灰底 + 细边 + 深色文字，整体不抢眼、干净。
   重要：面板高度必须由 JS 的 area 给定固定像素值，不能用 auto —— 弹窗打开时
   #searchBox 还是 display:none，layui 量不到内容高度会算成 0，弹窗就“隐形”了。 */
#search{position:relative;width:100%;height:100%;box-sizing:border-box;display:flex;align-items:center;overflow:hidden;border-radius:8px;background:transparent;-webkit-user-select:none;z-index:99;padding:0 10px 0 18px}
/* 弹窗外框：layui 会把 skin 类加在外框自身，所以用 .layui-layer.searchskin（不能用后代选择器）。
   背景改成「半透明白 + 毛玻璃模糊」，和首页顶部搜索框保持同一套质感。 */
.layui-layer.searchskin{border:0;border-radius:8px;background:rgba(255,255,255,.5);background:rgb(255 255 255 / 50%);-webkit-backdrop-filter:saturate(2) blur(30px);backdrop-filter:saturate(2) blur(30px);box-shadow:0 5px 10px rgb(0 0 0 / 10%)}
.searchskin .layui-layer-close{display:none}
.searchskin .layui-layer-content{overflow:visible;padding:0;background:transparent}
/* 表单：横向排列「输入框 + 按钮」，整体等高撑满面板 */
#search .search{margin:0;width:100%;height:100%;display:flex;align-items:center}
/* 输入框：白底、无边框，只靠灰色占位文字提示 */
#search .search input.txt{flex:1;min-width:0;height:100%;box-sizing:border-box;padding:0 12px 0 4px;border:0;background:transparent;color:#222;font-size:15px;line-height:normal;outline:none}
#search .search input.txt::placeholder{color:#757575}
/* 搜索按钮：浅灰底 + 细边 + 深色图标/文字，鼠标悬停略微加深 */
#search .search .dag-search-btn{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:6px;width:118px;height:46px;border:1px solid #e0e0e0;border-radius:8px;background:#f6f6f6;color:#111;font-size:15px;cursor:pointer;transition:all .25s}
#search .search .dag-search-btn svg{width:18px;height:18px;flex:0 0 auto}
#search .search .dag-search-btn:hover{background:#efefef;border-color:#d5d5d5}
/* 手机端：面板变窄变矮，按钮同步缩小 */
@media screen and (max-width:640px){
    #search{padding:0 8px 0 14px}
    #search .search input.txt{font-size:14px;padding-right:8px}
    #search .search .dag-search-btn{width:84px;height:38px;font-size:13px;gap:4px}
    #search .search .dag-search-btn svg{width:15px;height:15px}
}


header .search-box.suo{top:50px;transition:all .3s;-webkit-transition:all .3s}
.title{font-size:20px;font-weight:800;margin-bottom:20px}
.title span{font-size:14px;color:#888;font-weight:100}
.title .more{font-size:14px;color:#888;font-weight:400;line-height: 30px;background: #fff; padding: 0 10px; border-radius: 5px;}
.title .more i{margin-left:10px;}
footer .footer{padding:30px 0 60px;text-align:center;color:#888}
footer .footer ul li{display:inline;padding:0 5px;border-right:1px solid #d2d2d2}
footer .footer ul li:last-child{border-right:0}
footer .footer ul li a{color:#888}
.pages{text-align:center;display:block;font-size:14px;margin:10px 0 0;color:#666}
.pages li{display:inline}
.pages li a{padding:unset;border:1px solid #007bf5;border-radius:21px;width:30px;height:30px;display:inline-block;line-height:30px;color:#007bf5;margin:15px 5px 0 5px}
.pages li a:hover{color:#1b8eff}
.pages .thisclass a{background:#1b8eff;color:#fff;border-color:#1b8eff}
.pages .thisclass a:hover{color:#fff}
.pages .no-result{min-height:300px;padding-top:70px}
.pages .no-result h2{display:block;text-align:center;line-height:40px;font-size:22px;font-weight:700;color:#333}
.pages .no-result h2 span{display:block;font-size:14px;font-weight:400}
.pages .no-result .search-box{margin:20px auto;position:relative;width:50%}
.pages .no-result .search-box input.txt{height:40px;width:100%;text-indent:30px;line-height:40px;border:0;border-radius:5px;color:#5f5f5f;background:#fff;border:1px solid #f1f1f1;font-size:14px}
.pages .no-result .search-box input[type=submit]{position:absolute;top:1px;right:10px;background:0 0;border:0;width:30px;height:40px;line-height:40px;cursor:pointer;font-size:16px;color:#888}
.right.public{position: sticky;top:50px;width:370px}
.right.public .ad{width:100%;border-radius:5px;background:#fff;overflow:hidden;transition:all .3s;margin-bottom:20px}
.right.public .ad:hover{-webkit-box-shadow:0 34px 20px -24px rgba(0,0,0,.1);box-shadow:0 34px 20px -24px rgba(0,0,0,.1);-webkit-transform:translateY(-5px)}
.right.public .ad img{width:100%}
.right.public .cnxh {
    border-radius: 5px;
    background: #fff;
    padding: 15px;
    margin-bottom: 20px;
}
.right.public .title {
    border-bottom: 1px solid #f6f6f6;
    font-size: 15px;
    line-height: 35px;
    height: 35px;
    padding-bottom: 8px;
    position: relative;
    font-weight: 400;
}
.right.public .title:after {
    content: " ";
    position: absolute;
    height: 2px;
    width: 30px;
    background: #007bf5;
    left: 0;
    top: 42px;
    border-radius: 5px;
    transition: all .5s;
}
.right.public .cnxh li:first-child {
    margin-top: 0;
}
.right.public .cnxh li {
    overflow: hidden;
    margin: 15px 0;
    border-radius: 10px;
}
.right.public .cnxh li .img {
    width: 90px;
    height: 70px;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #f1f1f1;
    float: right;
}
.right.public .cnxh li .img img {
    width: 100%;
    height: 100%;
}
.right.public .cnxh li .tit {
    float: left;
    width: calc(100% - 105px);
    padding-top: 6px;
}
.right.public .cnxh li .tit h4 {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 5px;
    font-weight: 400;
    min-height: 40px;
}
.right.public .cnxh li .tit span {
    font-size: 12px;
    color: #999;
    line-height: 20px;
}
/* 顶部「关闭广告」开关：所有广告位都带 .ad 类。
   这里用 body 上的 noad 类做服务端渲染时的即时隐藏（避免页面先闪出广告再消失），
   前台点开关时再由 public.js 加/减这个类。 */
body.noad .ad {
    display: none !important;
}
.index-ad-text {
    margin-top: 15px;
    padding: 10px;
    border-radius: 5px;
    background: #fff;
}
/* ===== 文字广告 =====
   后台「每个内容块」= 前台的一行；每行最多 6 条广告。
   这里用 flex 平分整行宽度：写 6 条就是 6 等分，写 3 条就是 3 等分，
   不会再出现原来 float 浮动导致的错位、贴边问题。 */
.dag-ad-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.dag-ad-row:first-child {
    margin-top: 0;
}
.dag-ad-item {
    flex: 1 1 0;
    min-width: 0;
    display: block;
    height: 30px;
    line-height: 30px;
    padding: 0 8px;
    border-radius: 5px;
    background: #fbfcfe;
    color: #007bf5;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .25s;
}
.dag-ad-item:hover {
    background: #eef4ff;
}
/* 文字广告 · 黑夜模式：
   底色跟着其他夜间模块一起压暗（#323335），默认文字色换成亮蓝，避免深色底上发闷。
   注意：如果你在后台给某条广告单独设了颜色，那条是行内样式，优先级比这里高，不会被覆盖 ——
   所以白天/黑夜用同一个颜色，建议挑亮一点的色值（比如 #4d9bff），两种模式都能看清。 */
body.night .dag-ad-item {
    background: #323335;
    color: #7aa7ff;
}
body.night .dag-ad-item:hover {
    background: #3c3d40;
}
/* 顶部大横幅（①首页顶部大横幅）：电脑端一行 1 个，占满整行 */
.index-ad li {
    overflow: hidden;
    height: 70px;
    width: 100%;
    position: relative;
    border-radius: 5px;
    margin: 0 0 10px;
}
.index-ad li:last-child {
    margin-bottom: 0;
}
.index-ad li:before {
    position: absolute;
    content: " AD";
    width: 35px;
    height: 20px;
    background:#007bf5;
    right: 0;
    font-size: 12px;
    bottom: 0;
    color: #fff;
    border-radius: 5px 0 0;
    line-height: 20px;
    text-align: center;
}
.index-ad li img {
    width: 100%;
    height: 100%;
}
.right.public .rmrj li{overflow:hidden;margin:5px 0;padding-bottom:5px}
.right.public .rmrj li .img{width:40px;height:40px;overflow:hidden;border-radius:10px;border:1px solid #f1f1f1;float:left;margin-right:10px;margin-left:5px}
.right.public .rmrj li .img img{width:100%;height:100%}
.right.public .rmrj li .tit{float:left;width:calc(100% - 70px);padding-top:4px}
.right.public .rmrj li .tit h4{font-size:14px;line-height:18px;margin-bottom:0;font-weight:400;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.right.public .rmrj li .tit span{font-size:12px;color:#999;line-height:20px}
.right.public .rmrj li:last-child{border-bottom:0;padding-bottom:0}
.right.public .r-list{border-radius:5px;background:#fff;padding:15px;margin-bottom:20px}
.right.public .r-list .bar{height:35px;border-bottom:1px solid #fbfbfb}
.right.public .r-list .bar li{float:left;height:34px;padding:0 5px;margin-right:20px;cursor:pointer;font-size:16px;line-height:29px}
.right.public .r-list .bar li.sel{border-bottom:2px solid #007bf5}
.right.public .r-list .bd{display:none;margin-top:10px;height: 360px}
.right.public .r-list .bd.sel{display:block}
.right.public .r-list .order li{height:30px;line-height:30px}
.right.public .r-list .order li a{width:calc(100% - 65px);text-overflow:ellipsis;white-space:nowrap;overflow:hidden;position:relative;font-size:14px}
.right.public .r-list .order li:nth-child(1) a i{background:#007bf5;color:#fff}
.right.public .r-list .order li:nth-child(2) a i{background:#389cff;color:#fff}
.right.public .r-list .order li:nth-child(3) a i{background:#87c3ff;color:#fff}
.right.public .r-list .order li:nth-child(4) a i{background:#bedfff;color:#fff}
.right.public .r-talk{border-radius:5px;background:#fff;padding:15px;margin-bottom: 20px}
.right.public .r-talk ul li{padding:0 0 12px;border-bottom:1px solid #f6f6f6;margin-bottom:5px!important;padding-right:0!important}
.right.public .r-talk ul li:last-child{border:none;margin-bottom:0!important;padding:0}
.right.public .r-talk ul .right.public .r-talk ul .info{padding:0!important;line-height:32px}
.right.public .r-talk ul .info img{width:30px;height:30px;margin-right:6px;border-radius:50%;border:1px solid #fbfbfb}
.right.public .r-talk ul .info span:nth-child(2){vertical-align:top;line-height:32px;color:#666}
.right.public .r-talk ul .info span:last-child{float:right;line-height:32px;color:#999;font-size:13px}
.right.public .r-talk ul .excerpt{position:relative;padding:5px 10px;background:#f6f6f6;color:#666;margin-top:8px;border-radius:5px}
.right.public .r-talk ul .excerpt:before{position:absolute;left:10px;top:-10px;content:'';width:0;height:0;line-height:0;border:5px solid transparent;border-bottom-color:#f5f5f5}
.right.public .r-talk ul .excerpt p{margin:0;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:normal;-webkit-box-orient:vertical;display:-webkit-box;-webkit-line-clamp:2}
.right.public .r-talk ul .excerpt p a{font-size:15px!important;line-height:25px!important;height:25px!important}
.right.public .r-talk ul .excerpt p img{width:30px;}
.right.public .r-talk ul .post{color:#999;margin-top:9px;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}
.right.public .r-talk ul .post a{color:#999;display:inline!important;font-size:13px!important}
.right.public .r-list .order a i{display:inline-block;vertical-align:middle;font-style:normal;margin-right:5px;background:#fbfbfb;width:20px;text-align:center;border-radius:5px;color:#696969;font-size:12px;height:20px;line-height:20px;margin-top:-2px}
.fix-bottom{position:fixed;bottom:20px;left:50%;z-index:1000;margin-left:280px;width:370px}
.at-bottom{position:absolute;bottom:0;top:initial;z-index:1000;right:0;width:370px}
body .backtop{
    width: 40px;
    line-height: 40px;
    display: block;
    font-size: 1.4em;
    background: #fff;
    position: relative;
    color: #999;
    margin-top: 6px;
    border-radius: 8px;
}
body .side_diamond {
    width: 40px;
    line-height: 40px;
    display: block;
    font-size: 1.4em;
    background: #fff;
    position: relative;
    color: #999;
    margin-top: 6px;
    border-radius: 8px;
}
body .side_diamond a{
    color: #999;
}
body .diamond{position: fixed;
    bottom: 60px;
    right: 20px;
    z-index: 1030;
    text-align: center;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    transition: .3s;}
.loadding{width:57px;z-index:98;text-align:center;transform:translate(-50%,-50%);margin:auto}
.loadding span{display:inline-block;width:8px;height:100%;border-radius:4px;background:#007bf5;-webkit-animation:load 1.04s ease infinite}
@-webkit-keyframes load{0%,100%{height:10px;background:#007bf5}
50%{height:30px;margin-top:-20px;background:#7bf}
}
.loadding span:nth-child(2){-webkit-animation-delay:.13s}
.loadding span:nth-child(3){-webkit-animation-delay:.26s}
.loadding span:nth-child(4){-webkit-animation-delay:.39s}
.loadding span:nth-child(5){-webkit-animation-delay:.52s}
.google-ad{text-align:center;margin:10px 0;}
@media screen and (max-width:800px){body{min-width:100%}
.container{width:98%;margin:auto}
/* 注意：搜索弹窗的尺寸统一由 JS（public.js 的 opensearchbox）用固定像素控制，
   这里不要再写 height:15rem 之类的覆盖，否则会把弹窗撑成旧样式。 */
#search p{display:none}
header .logo{float: left;
    margin: auto;
    padding: 0;
    width: 7rem;
    height: 70px;
    box-sizing: border-box;
    display: flex;
    align-items: center;}
header .logo img{display: block;
    margin: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;}
header.su .logo{padding: 0;
    width: 6rem;
    height: 50px;}
/* 手机端：设置弹窗贴齐右边缘、略收窄，避免超出屏幕产生横向滚动 */
header .set-open .set-open-box{right: 0}
header .set-open .set-open-info{width: 190px;
    padding: 16px 14px}
header .set-open .set-open-info>i{right: 20px}
header .menu{width:30px;display:block;font-size:15px;margin:0;line-height:70px;text-align:center}
header .menu.xz{transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg)}
header .login-open{display:none}
header .search-open{margin-right:0;width:15%;font-size:15px;margin:0}
header .search-box .search,header .search-box p{width:90%}
header .search-box p{margin:3rem auto 0}
header .search-box p a{display:inline-block;height:1rem;line-height:1rem;margin:5px}
header .search-box .search input[type=text]{line-height:3rem;height:3rem}
header nav{background:#fff;width:100%;padding:0;position:absolute;left:0;top:71px;box-shadow:3px 3px 3px rgba(0,0,0,.1);border-radius:0 0 5px 5px;transition:all .3s ease-in-out}
header .layui-nav{padding:10px 5px;display:none}
header.su nav{top:51px;transition:all .3s}
.layui-nav .layui-nav-item{line-height:30px!important;background:#f6f6f6;margin:5px;border-radius:5px}
header .layui-nav .layui-this{background:#007bf5!important}
header .layui-nav .layui-this a{color:#fff!important}
.pages{margin:0}
.pages li a{margin:5px}
footer{margin-top:10px}
footer .footer ul li{padding:2px;border:0;}
body .backtop{display:none}
footer .footer p{margin-bottom:10px;width: 100%;}
footer .footer ul{margin-bottom:15px;width:100%}
header .layui-nav .layui-nav-item a:hover{color:#fff}
body.night .article-about .menu li,body.night .layui-nav .layui-nav-item,body.night .list-nav li,body.night .site-nav li{background:#252525}
.pages .no-result .search-box{width:90%}
.m-hidde{display:none;}
    .index-ad-text {
        margin-top: 10px;
    }
    /* 手机端：一行最多 3 条，字小一点，方便点按 */
    .dag-ad-row {
        flex-wrap: wrap;
        gap: 6px;
    }
    .dag-ad-item {
        flex: 1 1 calc(33.33% - 6px);
        height: 28px;
        line-height: 28px;
        font-size: 12px;
        padding: 0 6px;
    }
    header .user-open {
        margin-right: 15px;
    }
    header .user-open .user-open-box {
        right: -19px;
    }
}
@font-face {
    font-family: iconfont;
    src: url(//at.alicdn.com/t/font_2372324_s97n7d7gd08.woff2?t=1634995217645) format("woff2"),url(//at.alicdn.com/t/font_2372324_s97n7d7gd08.woff?t=1634995217645) format("woff"),url(//at.alicdn.com/t/font_2372324_s97n7d7gd08.ttf?t=1634995217645) format("truetype")
}
.iconfont{font-family:iconfont!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.icon-guanbi:before{content:"\e608"}
.icon-sousuo:before{content:"\e658"}
.icon-nightmode:before{content:"\e764"}
.icon-Daytimemode:before{content:"\e821"}
body.night,body.night #search,body.night #searchBox .layui-layer,body.night .article-body blockquote,body.night .article-body h5,body.night .article-down ul li,body.night .article-foot a,body.night .article-tags a,body.night .copyright,body.night .index-news-list ul li,body.night .list-article-plate .fr li:hover a,body.night .list-main .article>ul .tit span,body.night .list-main .left>ul li span,body.night .list-main .left>ul li:after,body.night .night-black,body.night .qy-comment .b-box-textarea .b-box-textarea-body,body.night .right.public .r-talk ul .excerpt,body.night .site-body p.image b,body.night .site-info .body article,body.night .site-info .data,body.night .site-info .link .url,body.night .site-info .link .zan,body.night .site-info .tit span a,body.night .site-info .web .fl li span,body.night .site-menu li a.hover,body.night .site-menu li a:hover,body.night .site-more ul li,body.night .tool-video .layui-input,body.night .user-box .layui-input,body.night .user-comment .list ul li p,body.night .user-info .data ul li,body.night .user-info .list li span,body.night .index-user-info ul,body.night .hot-soft .plate-list li p span a,body.night .list-main .soft.list>ul li:after,body.night .list-main .soft.list>ul li span,body.night .qy-comment .comm_list ul.list li.entry ul.reply,body.night .article-down ul li a,body.night .site-menu a:hover{background:#323335}
body.night #search .search input.txt,body.night #search p a,body.night .article-about .menu,body.night .article-about .right,body.night .article-body,body.night .article-main .left,body.night .article-tit,body.night .backtop,body.night .index-link ul,body.night .index-list .list-article-main,body.night .index-list .list-soft-main,body.night .index-login,body.night .index-news .page,body.night .index-news-list,body.night .index-quan .li-quan,body.night .index-tool-list,body.night .list-main .fl,body.night .list-main .left,body.night .list-main .soft>ul .list-btn,body.night .list-nav,body.night .night-bg,body.night .right.public .cnxh ul,body.night .right.public .r-list,body.night .right.public .r-talk,body.night .right.public .rmrj ul,body.night .shop-list .li-quan,body.night .site-body,body.night .site-info,body.night .site-list ul li,body.night .site-list-box ul li,body.night .site-list-box ul li a,body.night .site-menu,body.night .site-more,body.night .site-nav,body.night .site-pinglun,body.night .user-box,body.night .user-login .layui-input,body.night .user-login .login,body.night .user-menu li.hover,body.night header,body.night header nav,body.night .title .more,body.night header .set-open .set-open-info,body.night .index-news .title .mun,body.night .index-info .r-list{background:#292a2d}
body.night .side_diamond,body.night .side_diamond a,body.night .cnxh .right_tag a,body.night .right.public .cnxh ul li a,body.night header .user-open a,body.night header .set-open a,body.night,body.night .article-about .menu li a,body.night .article-about .right h2,body.night .list-cover-main .tit h3,body.night .article-body h2,body.night .article-body h3,body.night .article-body h5,body.night .article-body p,body.night .article-down ul li a,body.night .article-foot a,body.night .article-tags a,body.night .article-tit h1,body.night .hot-soft .plate-list li .txt,body.night .index-ad-txt ul a,body.night .index-login .wdl,body.night .index-news-list ul li .tit,body.night .index-quan .li-quan .desc-wrap .product-title-wrap .product-title,body.night .index-tool-list li a,body.night .list-article-plate .fr li a,body.night .list-article-tab .type a,body.night .list-main .article>ul .info .detail,body.night .list-main .article>ul .tit a,body.night .list-main .left>ul li .tit,body.night .list-main .soft>ul .soft-title,body.night .list-nav li a,body.night .list-nav,body.night .list-soft-plate .plate-list li .fr h3 a,body.night .list-soft-tab .type a,body.night .night-color,body.night .qy-comment .qy-comment-title,body.night .right.public .cnxh ul li a,body.night .right.public .r-list .order li a,body.night .right.public .r-talk ul .excerpt a,body.night .right.public .rmrj ul,body.night .right.public .rmrj ul a,body.night .shop-list .li-quan .desc-wrap .product-title-wrap .product-title,body.night .site-info .link a,body.night .site-info .tit span a,body.night .site-info .web .fl li,body.night .site-info .web .fl li a,body.night .site-list ul li a h3,body.night .site-list-box ul li a,body.night .site-menu li a,body.night .site-more ul li h3,body.night .site-nav li a,body.night .tags-page h2,body.night .title,body.night .tool-video .layui-input,body.night .user-box .layui-input,body.night .user-login .layui-input,body.night .user-menu li a,body.night header .layui-nav .layui-nav-item a,body.night header .night-open a,body.night header .search-open,body.night .user-stow .list .txt .tit,body.night .list-main .soft.list>ul li .tit,body.night .site-menu a,body.night header .set-open .set-open-info,body.night .backtop,body.night .index-info .r-list .order li a{color:#c0c4cc}
body.night .right.public .title,body.night #newdigg a,body.night #search .search input.txt,body.night .article-down .title,body.night .article-down ul li,body.night .article-pinglun .title,body.night .article-tags,body.night .article-tit .info,body.night .copyright,body.night .hot-soft .type,body.night .index-news-list ul li font,body.night .index-news-list ul li span,body.night .list-article-plate .fr,body.night .list-article-plate .fr li:hover a,body.night .list-article-tab .type,body.night .list-main .article>ul .tit span,body.night .list-main .article>ul li,body.night .list-main .left>ul li,body.night .list-main .left>ul li span,body.night .list-main .soft>ul .list-img,body.night .list-main .soft>ul li,body.night .list-soft-plate .plate-list li,body.night .list-soft-plate .plate-list li .fl,body.night .list-soft-tab .type,body.night .night-border,body.night .right.public .r-list .bar,body.night .right.public .r-talk ul li,body.night .right.public .rmrj ul .img,body.night .site-info .tit,body.night .site-info .web .fl li,body.night .site-list ul li a .img,body.night .site-list-box ul li .tit,body.night .site-more .title,body.night .site-more ul li,body.night .site-more ul li .tit,body.night .site-more ul li a .img,body.night .site-nav li a,body.night .site-pinglun .title,body.night .tool-video .layui-input,body.night .user-box .layui-input,body.night .user-login .layui-input,body.night footer .footer ul li, body.night .user-stow .list ul li, body.night .user-stow .list .img,body.night .index-user-info li,body.night .list-main .soft.list>ul li,body.night .list-main .soft.list>ul li,body.night .list-main .soft.list>ul li span,body.night .list-main .soft.list>ul li .img,body.night .hot-soft .plate-list li .img,body.night .index-tool-list li img,body.night .index-info .r-list .bar,body.night .list-cover .list-cover-main>ul>li,body.night .qy-comment .comm_list ul.list li.entry,body.night.qy-comment .qy-comment-titlebody.night .list-cover-main ul li .tit h3{border-color:#565656}
body.night .qy-comment .b-emote-submit,body.night .user{background:#3a3a3a}
body.night .right.public .r-talk ul .excerpt:before{border-bottom-color:#252525}
body.night .side_diamond,body.night.right.public .cnxh,body.night #search .search input.txt, body.night #search p a, body.night .article-about .menu, body.night .article-about .right, body.night .article-body, body.night .article-main .left, body.night .article-tit, body.night .backtop, body.night .index-link ul, body.night .index-list .list-article-main, body.night .index-list .list-soft-main, body.night .index-login, body.night .index-news .page, body.night .index-news-list, body.night .index-quan .li-quan, body.night .index-tool-list, body.night .list-main .fl, body.night .list-main .left, body.night .list-main .soft>ul .list-btn, body.night .list-nav, body.night .right.public .cnxh ul, body.night .shop-list .li-quan, body.night .site-info, body.night .site-list ul li, body.night .site-more, body.night .site-nav, body.night .site-pinglun, body.night header, body.night header nav, body.night .right.public .rmrj ul, body.night .right.public .r-list, body.night .right.public .r-talk, body.night .index-news-list ul li, body.night .night-bg, body.night .user-box, body.night .user-menu li.hover, body.night .user-login .login, body.night .user-login .layui-input, body.night .article-tags a,body.night .right.public .cnxh, body.night .article-filepage, body.night .index-news .title .mun, body.night .title .more, body.night .index-news .news-type a.hover, body.night .right .sjmh, body.night .right .sjmh .search input.txt, body.night .layui-layer, body.night .layui-layer-title, body.night .layui-layer, body.night .list-cover-main {
    background: #292a2d;
}
body.night .left .soft-info{
    background:#323335;
}
.right .sjmh {
    width: 290px;
    background: #fff;
    margin: 0 auto 20px;
    position: relative;
    z-index: 999;
    border-radius: 10px;
    padding: 40px;
    text-align: center;
}
.right .sjmh h4 {
    font-size: 20px;
    font-weight: bold;
}
.right .sjmh .search {
    margin: 20px auto;
    position: relative;
}
.right .sjmh .search input.txt {
    height: 40px;
    width: 100%;
    text-indent: 30px;
    line-height: 40px;
    border: 0;
    border-radius: 5px;
    color: #5f5f5f;
    background: #fff;
    border: 1px solid #f1f1f1;
    font-size: 14px;
}
.right .sjmh .search input[type=submit] {
    position: absolute;
    top: 1px;
    right: 10px;
    background: 0 0;
    border: 0;
    width: 30px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    font-size: 16px;
    color: #888;
    display: none;
}
.right .sjmh #btn {
    border: 0;
    padding: 5px 30px;
    line-height: 30px;
    border-radius: 5px;
    background: #007bf5;
    color: #fff;
    margin: 20px 0px 0px 0px;
}
video{
    border-radius: 10px;
    margin: 10px 0px;
}
header .night-open, header .search-open, header .user-open {
    position:relative;
    margin-left:10px;
    width:30px;
    color:#333;
    text-align:center;
    line-height:70px;
    cursor:pointer;
    -webkit-transition:all .3s;
    transition:all .3s
}
header .user-open .tx {
    width:25px;
    height:25px;
    border-radius:50%;
    border:1px solid #f6f6f6;
    padding:2px;
    transition:all .3s
}
header .user-open .tx.hover {
    border:1px solid #007bf5
}
header .user-open .user-open-box {
    padding-top:14px;
    position:absolute;
    z-index:100001;
    right:-20px;
    top:60px;
    -webkit-transition:all .3s;
    line-height:20px
}
header.su .user-open .user-open-box {
    top:40px
}
header .user-open .user-open-box {
    padding-top: 14px;
    position: absolute;
    z-index: 100001;
    right: -20px;
    top: 60px;
    -webkit-transition: all .3s;
    line-height: 20px;
}
header .user-open .user-open-info {
    width: 375px;
    background: #fff;
    box-shadow: 0 10px 30px rgb(15 23 42 / 10%);
    border-radius: 14px;
    padding: 18px 16px;
    display: none;
    text-align: left;
}
header .user-open .user-open-info, header .user-open .user-open-info.hover {
    animation: pop-in;
    transform-origin: 50% top;
    animation-duration: .15s;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
}
header .user-open .user-open-info.hover {
    display: block;
}
/* 下拉面板里的用户信息条：与下面的分段控件同一套底色和描边，整体风格统一 */
header .user-open .user-open-info .user-open-name {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 20px;
    padding: 10px 12px;
    border: 1px solid #dbe7ff;
    border-radius: 14px;
    background: #f5f7fb;
}
header .user-open .user-open-info .user-open-name .face {
    width: 40px;
    height: 40px;
    border-radius: 50px;
}
header .user-open .user-open-info .user-open-name .xm {
    text-align: left;
    margin-left: 10px;
}
header .user-open .user-open-info .user-open-name .xm em {
    font-style: inherit;
    font-size: 12px;
    color: #888;
}
header .user-open .user-open-info .user-open-name .logined_btn a {
    display: block;
    color: #5b6472;
    font-size: 12px;
    margin: 0;
    height: auto;
    padding: 4px 10px;
    border: 1px solid #dbe7ff;
    border-radius: 999px;
    background: #fff;
    transition: all .25s;
}
header .user-open .user-open-info .user-open-name .logined_btn a:hover {
    color: #345ffd;
}
/* 用户中心下拉里的四个入口：做成「分段控件」的样式
   横向圆角长外框 + 极浅灰白底 + 细淡蓝描边 + 柔和外阴影，
   四个入口统一样式，不做选中高亮，只保留鼠标悬停变色 */
header .user-open .user-open-info .user-open-ul {
    display: flex;
    align-items: center;
    gap: 4px;
    height: auto;
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    border: 1px solid #dbe7ff;
    border-radius: 999px;
    background: #f5f7fb;
    box-shadow: 0 4px 12px rgba(52, 95, 253, .08);
    padding: 4px;
    margin-top: 15px;
    color: #5b6472;
}
header .user-open .user-open-info .user-open-ul li {
    flex: 1 1 0;
    min-width: 0;
    float: none;
    width: auto;
    margin: 0;
}
header .user-open .user-open-info .user-open-ul a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 32px;
    padding: 0 6px;
    margin: 0;
    border-radius: 999px;
    background: transparent;
    color: #5b6472;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    float: none;
    white-space: nowrap;
    transition: all .25s;
}
header .user-open .user-open-info .user-open-ul a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
header .user-open .user-open-info .user-open-ul .dag-uc-ico {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    display: block;
}
header .user-open .user-open-info .user-open-ul a:hover {
    color: #345ffd;
}
/* 手机端：下拉面板整体收窄、分段控件字号和图标缩一档，保证四个入口一行放得下 */
@media screen and (max-width:800px){
    header .user-open .user-open-info {
        width: calc(100vw - 44px);
        max-width: 360px;
        padding: 16px 14px;
    }
    header .user-open .user-open-info .user-open-ul a {
        font-size: 11px;
        gap: 3px;
        padding: 0 4px;
    }
    header .user-open .user-open-info .user-open-ul .dag-uc-ico {
        width: 12px;
        height: 12px;
    }
}
.icon-yonghu:before {
    content: "\e607";
}
.icon-xiugai:before {
    content: "\e65b";
}
.icon-shoucang1:before {
    content: "\e663";
}
.icon-pinglun:before {
    content: "\e61c";
}
.icon-user:before {
    content: "\e63c";
}
.icon-shezhi:before {
    content: "\e654";
}
header .user-open .user-open-info .user-open-ul li:last-child {
    margin-right: 0;
}
header.su .user-open {
    line-height: 50px;
    -webkit-transition: all .3s;
    transition: all .3s;
}
header .set-open{
    position: relative;
    margin-left: 10px;
    width: 30px;
    color: #333;
    text-align: center;
    line-height: 70px;
    cursor: pointer;
    -webkit-transition: all .3s;
    transition: all .3s;
}
header .set-open .fa-gear{
    font-size: 16px;
}
header .set-open .set-open-box {
    position: absolute;
    top: 50px;
    right: -20px;
    z-index: 100001;
    padding-top: 14px;
    line-height: 20px;
    -webkit-transition: all .3s;
}
/* 设置弹窗：与用户中心下拉面板（user-open-info）保持同一套风格
   大圆角 + 柔阴影 + 细淡蓝描边 + 同款弹出动画 */
header .set-open .set-open-info {
    display: none;
    padding: 18px 16px;
    width: 200px;
    box-sizing: border-box;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 30px rgb(15 23 42 / 10%);
    text-align: left;
}
/* 与用户中心下拉面板同款弹出动画（从顶部轻微放大淡入） */
header .set-open .set-open-info, header .set-open .set-open-info.hover {
    transform-origin: 50% top;
    animation: pop-in;
    animation-duration: .15s;
    animation-fill-mode: both;
    animation-timing-function: ease-out;
}
header .set-open .set-open-info .layui-form-switch {
    margin-top: 3px;
}
header .set-open .set-open-info .layui-form-item {
    margin-bottom: 0;
}
header .set-open .set-open-info>i {
    position: absolute;
    top: 0px;
    right: 27px;
    z-index: 1;
    width: 0;
    height: 0;
    border-right: 7px solid transparent;
    border-bottom: 14px solid #fff;
    border-left: 7px solid transparent;
}
header .set-open .set-open-info .layui-form-label {
    padding: 5px 0;
    text-align: left;
}
header .set-open .set-open-info .layui-input-block {
    margin-left: 80px;
    min-height: 30px;
}
header .set-open .set-open-info.hover {
    display: block;
}
header .set-open .set-open-info .layui-form-onswitch {
    border-color: #007bf5;
    background: #007bf5;
}
body.night header .set-open .set-open-info>i {
    border-bottom: 14px solid #292a2d;
}
header .set-open a{
    font-size: 16px;
}
.cnxh .right_tag{
    background: rgba(136, 136, 136, .1);
    padding: 5px;
    margin: 2px;
    border-radius: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.calendar_body{
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;border-radius: 8px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

}
.today-schedule, .toweek-schedule, .tomonth-schedule, .toyear-schedule {
    display: inline-block;
    width: 50px;
    height: 100px;
    background-color: white;
    border: 1px solid #eee;
    border-radius: 99px;
}
.wiiuii-schedule-item {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 99px;
}
.time-schedule-main {
    border-radius:8px;
    display:flex;
    justify-content:space-evenly;
    align-items:center;
}
.today-schedule, .toweek-schedule, .tomonth-schedule, .toyear-schedule {
    display:inline-block;
    width:50px;
    height:100px;
    background-color:white;
    border:1px solid #eee;
    border-radius:99px;
}
.wiiuii-schedule-item {
    position:relative;
    width:100%;
    height:100%;
    overflow:hidden;
    border-radius:99px;
}
.today-item, .toweek-item, .tomonth-item, .toyear-item {
    position:absolute;
    background-image:linear-gradient(to right, #a18cd1 0%, #fbc2eb 100%);
    width:100%;
    height:109%;
    bottom:0;
    transition:all 1s;
}
.schedule-info {
    display:flex;
    color:#ff5991;
    position:absolute;
    margin:auto;
    top:0;
    left:0;
    right:0;
    bottom:0;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.schedule-tilte {
    font-size:12px;
    font-weight:700;
}
.time-schedule-main img {
    background-repeat:no-repeat;
    max-width:unset !important;
    max-height:unset !important;
    width:200px;
    height:10px;
    top:0;
    left:0;
    position:absolute;
    animation:wiiuii_move_wave 2s linear infinite;
    -webkit-animation:wiiuii_move_wave 2s linear infinite;
}
@-webkit-keyframes wiiuii_move_wave {
    0% {
        -webkit-transform:translateX(0)
    }
    50% {
        -webkit-transform:translateX(-25%)
    }
    100% {
        -webkit-transform:translateX(-50%)
    }
}
@keyframes wiiuii_move_wave {
    0% {
        transform:translateX(0)
    }
    50% {
        transform:translateX(-25%)
    }
    100% {
        transform:translateX(-50%)
    }
}
.today-item {
    background-image:linear-gradient(to right, #a18cd1 0%, #fbc2eb 100%);
}
.toweek-item {
    background-image:linear-gradient(to right, #ff9a9e 0%, #fad0c4 100%);
}
.tomonth-item {
    background-image:linear-gradient(to right, #fbc2eb 0%, #a6c1ee 100%);
}
.toyear-item {
    background-image:linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
}
.calendar_body img {
    background-repeat: no-repeat;
    max-width: unset !important;
    max-height: unset !important;
    width: 200px;
    height: 10px;
    top: 0;
    left: 0;
    position: absolute;
    animation: wiiuii_move_wave 2s linear infinite;
    -webkit-animation: wiiuii_move_wave 2s linear infinite;
}
.side_user .user-cover{
    border-radius: 8px 8px 0 0;
    text-shadow: 0 0 5px rgba(0,0,0,.2);
    --main-color: #fff;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(116, 116, 116, 0.08);
    padding: 0 0 70%;
}
.side_user .user-cover .fit-cover{
    position: absolute;
    width: 100%;
    height: 100%;
}
.paddno{
    padding: 0!important;
}
.side_user .side_user_content{
    padding: 18px 15px 22px;
    margin-top: -65px;
}
.side_user .side_user_content .user-avatar{
    text-align: center;
}

.side_user .side_user_content .avatar-img{
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    padding: 3px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(52,95,253,.16);
}
.side_user .side_user_content .avatar, .radius-cover {
    border-radius: 999px;
    display: inline-block;
}
.side_user .side_user_content .avatar, .fit-cover, .radius-cover {
    width: 100%;
    height: 100%;
    transition: all .2s;
    overflow: hidden;
    -o-object-fit: cover;
    object-fit: cover;
}
.text-center {
    text-align: center;
    margin-bottom: 20px;
}
.pd_small{
    padding:  .3em 1em .3em 1em!important;

}
.mar_left{
    margin-left: 10px;
}
.padd{
    padding: 0.5em 2em;
}
.user_text_style{
    padding: 12px 15px;
    font-size: 1.15em;
    font-weight: 600;
    color: #1f2937;
}
.side_user .side_user_content .user_btn{

    border-radius: 999px;
    display: inline-block;
    transition: .2s;
    vertical-align: middle;
    text-align: center;
    font-weight: 600;
    text-shadow: 0 0 0;
    line-height: 1.5;
    border: 1px solid #dbe7ff;
    box-shadow: 0 4px 12px rgba(52,95,253,.08);
    background: #f5f7fb;
    color: #345ffd;
}
.side_user .side_user_content .user_btn:hover{
    background: #fff;
    border-color: #b7d6ff;
}
.btn_blue{
    color: #fff!important;
    background: #345ffd!important;
    border-color: #345ffd!important;
    box-shadow: 0 6px 16px rgba(52,95,253,.28)!important;
}
.btn_blue:hover{
    background: #2b53e0!important;
    border-color: #2b53e0!important;
}
.btn_yellow{
    color: #345ffd!important;
    background: #f5f7fb!important;
    border-color: #dbe7ff!important;
    box-shadow: 0 4px 12px rgba(52,95,253,.08)!important;
}
.btn_yellow:hover{
    background: #fff!important;
    border-color: #b7d6ff!important;
}
.side_user .side_user_content .user_btn .fa{
    margin-right: 0.25em;
}
/* ===== 侧边栏「用户会员」卡片 =====
   统一 UI 风格：白底、淡蓝描边、圆角、柔阴影；不使用封面图片。
   对应 module.php 里的 widget_blogger()。 */
.side_member{
    border-radius: 12px;
    background: #fff;
    border: 1px solid #dbe7ff;
    box-shadow: 0 4px 12px rgba(52,95,253,.08);
    padding: 26px 18px 22px;
    margin-bottom: 20px;
}
/* 原来的样式为了压住封面图做了 -65px 上移，去掉封面图后这里还原为正常间距 */
.side_member .side_user_content{
    margin-top: 0;
    padding: 0;
}
.side_member .side_user_content .avatar-img{
    width: 88px;
    height: 88px;
}
.side_member .user_text_style{
    padding: 14px 0 0;
    text-align: center;
}
.side_member .member-btns{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 16px 0 0;
}
.side_member .member-btns .user_btn{
    flex: 1 1 0;
    min-width: 0;
    padding: .5em 0;
}
body.night .side_member{
    background: #292a2d;
    border-color: #3a3a3a;
    box-shadow: none;
}
body.night .side_member .user_text_style{
    color: #c0c4cc;
}
.jump.jump-pic {
    display: grid;
    grid-row-gap: 5px;
}
.jump:nth-of-type(1) {
    /* margin-top: 20px; */
}
.jump {
    display: grid;
    grid-row-gap: 5px;
    margin-top: 5px;
    width: 100%;
}
.jump.jump-pic>a {
    display: block;
    position: relative;
}
.jump.jump-pic>a>img {
    display: block;
    width: 100%;

}

.jump.jump-pic>a>img {
    width: 100%;
    height: 70px;
    border-radius: 5px;
}
@media screen and (max-width: 992px){
    .jump.jump-pic>a>img {
    height: 50px;
    border-radius: 6px;
}
}

/* ==========================================================================
   列表页新样式（分类页 / 搜索页 / 标签页 / 作者页 共用）
   由 module.php 的 dagang_list_render() 输出 HTML，这里负责外观。
   4 种样式由容器 class 区分：
     .dag-cards 默认（图文卡片网格）
     .dag-rows  图文列表（左图右文大卡片）
     .dag-dls   下载列表（小图 + 标题）
     .dag-pics  瀑布流列表（纯图片墙）
     .dag-simples 简洁列表（只有文字，没有缩略图）
   布局：没有侧边栏时 .dag-list-col 自动占满整行；
         开启侧边栏时 .dag-list-wrap 会多一个 .dag-has-side，列表变窄给右侧栏让位。
   ========================================================================== */

/* ---------- 1. 布局骨架 ---------- */
.dag-list-wrap{margin-top:30px;position:relative}
.dag-list-wrap:after{content:"";display:block;clear:both}
/* 列表主列：默认占满整行（这样「没有侧边栏」时内容就是撑满屏幕的） */
.dag-list-col{float:none;width:100%;box-sizing:border-box;min-height:200px}
/* 有侧边栏：左列表 + 右侧栏 */
.dag-list-wrap.dag-has-side .dag-list-col{float:left;width:calc(100% - 390px)}
.dag-list-wrap .dag-list-side{float:right;width:370px}
/* 分页单独留点上间距 */
.dag-list-wrap .pages{margin-top:24px}

/* ---------- 2. 每篇文章都用到的公共小零件 ---------- */
.dag-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:12px;color:#9aa3b2}
.dag-meta-item{display:inline-flex;align-items:center;gap:4px;color:#9aa3b2;font-style:normal}
.dag-meta-right{margin-left:auto;display:inline-flex;align-items:center;gap:12px}
/* 作者头像 + 作者名字（列表里代替原来的「分类」小标签） */
.dag-author{display:inline-flex;align-items:center;gap:6px;color:#9aa3b2;font-size:12px;transition:color .25s}
.dag-author img{flex:0 0 auto;width:22px;height:22px;border-radius:50%;object-fit:cover;border:1px solid #f1f1f1;background:#fff}
.dag-author span{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dag-author:hover{color:#007bf5}
/* 今天发布的文章，日期标红 */
.dag-today{color:#ff3b30!important;font-weight:700}

/* ---------- 3. 空状态 ---------- */
.dag-empty{background:#fff;border-radius:10px;padding:80px 0;text-align:center;color:#9aa3b2}
.dag-empty i{display:block;font-size:46px;color:#cfd8e3;margin-bottom:14px}
.dag-empty p{margin:0;font-size:15px}

/* ---------- 4. 默认样式：图文卡片网格 ---------- */
.dag-list{display:grid;gap:20px}
.dag-list.dag-cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.dag-card{display:flex;flex-direction:column;background:#fff;border:1px solid #f0f2f5;border-radius:10px;overflow:hidden;transition:all .25s}
.dag-card:hover{transform:translateY(-4px);border-color:#d3e7ff;box-shadow:0 12px 24px rgba(0,123,245,.12)}
.dag-card-img{display:block;width:100%;height:170px;overflow:hidden;background:#f2f5f9}
.dag-card-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.dag-card:hover .dag-card-img img{transform:scale(1.06)}
.dag-card-body{display:flex;flex-direction:column;flex:1;padding:14px 16px 16px}
.dag-card-tit{margin:0 0 8px;font-size:16px;font-weight:700;line-height:24px;height:48px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;box-orient:vertical;-webkit-box-orient:vertical}
.dag-card-tit a{color:#1f2329;transition:color .25s}
.dag-card-tit a:hover{color:#007bf5}
.dag-card-desc{margin:0 0 12px;font-size:13px;line-height:22px;height:44px;overflow:hidden;color:#8a94a6;display:-webkit-box;-webkit-line-clamp:2;box-orient:vertical;-webkit-box-orient:vertical}
.dag-card-body .dag-meta{margin-top:auto}

/* ---------- 5. 图文列表：左图右文大卡片 ---------- */
.dag-list.dag-rows{grid-template-columns:1fr;gap:16px}
.dag-row{display:flex;gap:18px;padding:16px;background:#fff;border:1px solid #f0f2f5;border-radius:10px;transition:all .25s}
.dag-row:hover{transform:translateY(-3px);border-color:#d3e7ff;box-shadow:0 12px 24px rgba(0,123,245,.12)}
.dag-row-img{flex:0 0 240px;width:240px;height:158px;border-radius:8px;overflow:hidden;background:#f2f5f9;display:block}
.dag-row-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.dag-row:hover .dag-row-img img{transform:scale(1.06)}
.dag-row-body{flex:1;min-width:0;display:flex;flex-direction:column}
.dag-row-tit{margin:2px 0 10px;font-size:18px;font-weight:700;line-height:26px;height:52px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;box-orient:vertical;-webkit-box-orient:vertical}
.dag-row-tit a{color:#1f2329;transition:color .25s}
.dag-row-tit a:hover{color:#007bf5}
.dag-row-desc{margin:0 0 12px;font-size:13px;line-height:24px;height:48px;overflow:hidden;color:#8a94a6;display:-webkit-box;-webkit-line-clamp:2;box-orient:vertical;-webkit-box-orient:vertical}
.dag-row-body .dag-meta{margin-top:auto}

/* ---------- 6. 简洁列表：沿用旧版主题的老样式（一行一条，只有文字，没有缩略图） ---------- */
/* 整个列表是一块白色圆角面板；每行从左到右依次是「作者头像+名字、标题、日期、查看按钮」 */
.dag-list.dag-simples{display:block;gap:0;background:#fff;border-radius:5px;padding:10px 0}
.dag-simple{position:relative;display:flex;align-items:center;padding:18px 20px;border-bottom:1px solid #f6f6f6}
.dag-simple:last-child{border-bottom:0}
/* 鼠标移上去时，从左边开始铺一层浅灰（宽度 0 → 100%），这是旧版主题的经典效果 */
.dag-simple:before{content:"";position:absolute;left:0;top:0;width:0;height:100%;background:#fbfbfb;transition:width .3s;z-index:0}
.dag-simple:hover:before{width:100%}
.dag-simple>*{position:relative;z-index:1}
.dag-simple-tit{flex:1;min-width:0;margin:0 16px;font-size:16px;line-height:24px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .25s}
.dag-simple-tit:hover{color:#007bf5}
.dag-simple-date{flex:0 0 auto;font-size:12px;color:#999}
.dag-simple-view{flex:0 0 auto;margin-left:16px;padding:5px 15px;border-radius:5px;background:#1b8eff;color:#fff;font-size:12px;line-height:16px;transition:all .25s}
.dag-simple-view:hover{background:#007bf5;color:#fff}

/* ---------- 7. 下载列表：小图 + 标题（无「查看」按钮） ---------- */
.dag-list.dag-dls{grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.dag-dl{display:flex;align-items:center;gap:12px;padding:12px;background:#fff;border:1px solid #f0f2f5;border-radius:10px;transition:all .25s}
.dag-dl:hover{transform:translateY(-3px);border-color:#d3e7ff;box-shadow:0 10px 22px rgba(0,123,245,.12)}
.dag-dl-img{flex:0 0 84px;width:84px;height:84px;border-radius:8px;overflow:hidden;background:#f2f5f9;display:block}
.dag-dl-img img{display:block;width:100%;height:100%;object-fit:cover}
.dag-dl-body{flex:1;min-width:0}
.dag-dl-tit{margin:0 0 8px;font-size:15px;font-weight:700;line-height:22px;height:44px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;box-orient:vertical;-webkit-box-orient:vertical}
.dag-dl-tit a{color:#1f2329;transition:color .25s}
.dag-dl-tit a:hover{color:#007bf5}
.dag-dl .dag-meta{gap:10px}

/* ---------- 8. 瀑布流列表：真·瀑布流（图片多大，这个模块就多大） ----------
   用 CSS 多列布局（columns）实现，不用 grid：
   grid 会把每张图裁成统一高度，而 columns 是按图片「原始宽高比」撑开，
   一列里的卡片高矮错落，才是真正的瀑布流效果。
   加载方式不是翻页，而是向下滚动自动加载下一页（见页面底部 .dag-more 和 public.js）。 */
.dag-list.dag-pics{display:block;columns:4;column-gap:14px}
.dag-pic{position:relative;break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;margin:0 0 14px;border-radius:10px;overflow:hidden;background:#f2f5f9;transition:box-shadow .25s,transform .25s}
.dag-pic:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(0,0,0,.16)}
.dag-pic>a{display:block;position:relative;width:100%;overflow:hidden}
/* 关键一行：宽度撑满列宽、高度 auto → 高度完全按图片真实比例来 */
.dag-pic>a>img{display:block;width:100%;height:auto;transition:transform .4s}
.dag-pic:hover>a>img{transform:scale(1.05)}
/* 遮罩层跟「图片链接」是平级的两个元素（因为 a 标签不能嵌套 a 标签，
   作者的 a 标签要放在遮罩层里），位置都靠这里定位。
   pointer-events:none 让遮罩层不挡住图片的点击，里面可点的标题/作者再单独打开。 */
.dag-pic-mask{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));pointer-events:none}
.dag-pic-tit{display:-webkit-box;-webkit-line-clamp:2;box-orient:vertical;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;font-weight:700;line-height:20px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.45);pointer-events:auto}
.dag-pic-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;pointer-events:auto}
.dag-pic-date{flex:0 0 auto;font-size:12px;color:rgba(255,255,255,.85)}
.dag-pic-date.dag-today{color:#ffd166!important}
/* 图片压在深色遮罩上，作者信息要用浅色才看得清 */
.dag-pic-foot .dag-author{color:rgba(255,255,255,.9)}
.dag-pic-foot .dag-author img{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.2)}
.dag-pic-foot .dag-author:hover{color:#fff}
/* JS 接管布局时用（见 public.js 的瀑布流部分）：关掉 CSS 多列，改成绝对定位、自己算坐标。
   为什么要这样：CSS 多列的阅读顺序是「先第 1 列从上到下、再第 2 列」，不是从左到右一行一行；
   而且每次追加新文章，浏览器都会把整块内容重新平衡一次，已经看到的文章会在列之间乱跳。
   自己算坐标就没这两个问题：顺序从左到右、从上到下，追加时老文章的位置也不动。
   （如果浏览器禁用了 JS，这段不生效，会自动退回上面的 CSS 多列布局，照样能看。） */
.dag-list.dag-pics.dag-masonry{columns:auto;position:relative}
.dag-masonry>.dag-pic{position:absolute;top:0;left:0;margin:0 0 14px;contain:layout}
/* 瀑布流的「向下滚动加载更多」提示条 */
.dag-more{clear:both;margin-top:4px;padding:18px 0;text-align:center;font-size:13px;color:#9aa3b2}
.dag-more.dag-more-end{color:#c2cad6}
.dag-more.dag-more-loading span:before{content:"";display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-2px;border:2px solid #d3e7ff;border-top-color:#007bf5;border-radius:50%;animation:dagSpin .7s linear infinite}
@keyframes dagSpin{to{transform:rotate(360deg)}}

/* ---------- 9. 手机 / 平板适配 ---------- */
@media screen and (max-width:1100px){
    /* 屏幕变窄时侧边栏自动落到列表下方，列表重新占满整行 */
    .dag-list-wrap.dag-has-side .dag-list-col{float:none;width:100%;margin-bottom:20px}
    .dag-list-wrap .dag-list-side{float:none;width:100%;position:static}
    .dag-list.dag-cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
    .dag-list.dag-dls{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
    /* 瀑布流：窄屏列数从 4 列减到 3 列 */
    .dag-list.dag-pics{columns:3}
}
@media screen and (max-width:800px){
    .dag-list-wrap{margin-top:14px}
    .dag-list.dag-cards{gap:14px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
    .dag-list.dag-dls{gap:12px;grid-template-columns:1fr}
    /* 瀑布流：改用 CSS 多列布局后，列数用 columns 控制（手机 2 列） */
    .dag-list.dag-pics{columns:2;column-gap:10px}
    .dag-card-img{height:150px}
    .dag-card-body{padding:12px}
    .dag-card-tit{font-size:15px;line-height:22px;height:44px}
    .dag-card-desc{display:none}
    .dag-row{gap:12px;padding:12px}
    .dag-row-img{flex:0 0 150px;width:150px;height:100px}
    .dag-row-tit{margin-bottom:6px;font-size:16px;line-height:23px;height:46px}
    .dag-row-desc{display:none}
}
@media screen and (max-width:640px){
    .dag-list.dag-cards{gap:12px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
    .dag-list.dag-pics{columns:2;column-gap:8px}
    .dag-card-img{height:110px}
    .dag-card-tit{font-size:14px;line-height:20px;height:40px}
    .dag-meta{gap:8px;font-size:11px}
    .dag-dl-img{flex:0 0 68px;width:68px;height:68px}
    .dag-dl-tit{font-size:14px;line-height:20px;height:40px}
    .dag-simple{padding:12px 14px}
    .dag-simple-tit{font-size:14px;line-height:20px;margin:0 10px}
    .dag-simple-view{margin-left:10px;padding:4px 10px}
    /* 手机上位置紧张，作者名字藏起来只留头像，避免把标题挤没了 */
    .dag-simple .dag-author span{display:none}
    .dag-pic-tit{font-size:13px;line-height:18px}
}

/* ---------- 10. 夜间模式 ---------- */
body.night .dag-card,
body.night .dag-row,
body.night .dag-dl,
body.night .dag-list.dag-simples,
body.night .dag-empty{background:#292a2d;border-color:#3a3b3f}
body.night .dag-simple{border-bottom-color:#3a3b3f}
body.night .dag-simple:before{background:#323335}
body.night .dag-card-img,
body.night .dag-row-img,
body.night .dag-dl-img,
body.night .dag-pic{background:#323335}
body.night .dag-card-tit a,
body.night .dag-row-tit a,
body.night .dag-dl-tit a,
body.night .dag-simple-tit{color:#c0c4cc}
body.night .dag-card-tit a:hover,
body.night .dag-row-tit a:hover,
body.night .dag-dl-tit a:hover,
body.night .dag-simple-tit:hover{color:#1b8eff}
body.night .dag-simple-date{color:#8a8f99}
body.night .dag-card-desc,
body.night .dag-row-desc,
body.night .dag-meta,
body.night .dag-meta-item{color:#8a8f99}
body.night .dag-author{color:#8a8f99}
body.night .dag-author img{border-color:#3f4045;background:#323335}
body.night .dag-author:hover{color:#1b8eff}
body.night .dag-empty i{color:#4a4b50}

/* ==========================================================================
   11. 所有分类聚合页（页面模板 page_allcats.php）
   首页「最近更新」右下角的「查看更多」会跳到这里。
   顶部那条分类导航刻意做成和「分类列表页」顶部导航（list.css 里的 .list-nav）
   一样的观感：白条 + 文字链接 + 鼠标悬停时蓝色下划线。
   ========================================================================== */
/* margin-top 100px 是为了避开固定在顶部的导航栏（导航栏高 70px） */
.dag-allcats{margin-top:100px;padding-bottom:40px}

/* 顶部白卡片：标题 + 分类总数 + 分类导航 */
.dag-allcats-top{background:#fff;border-radius:10px;padding:20px 20px 0;margin-bottom:20px}
.dag-allcats-hd{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px}
.dag-allcats-hd h1{font-size:22px;font-weight:800;line-height:32px;color:#1f2329}
.dag-allcats-count{font-size:13px;color:#8a94a6}
.dag-allcats-count b{color:#007bf5;font-weight:800}

/* 分类导航：与分类列表页顶部导航同一套观感 */
.dag-allcats-nav{margin-top:10px;padding-bottom:6px;border-top:1px solid #f2f5f9;line-height:52px;overflow:hidden}
.dag-allcats-nav li{display:inline}
.dag-allcats-nav li a{display:inline-block;line-height:52px;font-size:14px;color:#333;margin:0 12px 0 0;position:relative;transition:all .5s}
.dag-allcats-nav li a:after{position:absolute;content:"";left:calc(50% - 10px);bottom:0;width:0;height:3px;background-color:#007bf5;border-radius:20px;transition:all .2s}
.dag-allcats-nav li a:hover{color:#1b8eff}
.dag-allcats-nav li a:hover:after{width:20px}

/* 每个一级分类一块 */
.dag-allcat{background:#fff;border-radius:10px;padding:18px 20px 6px;margin-bottom:20px}
.dag-allcat-hd{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding-bottom:14px;border-bottom:1px solid #f2f5f9}
.dag-allcat-hd h2{position:relative;padding-left:12px;font-size:18px;font-weight:700;line-height:26px}
.dag-allcat-hd h2:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:16px;border-radius:2px;background:#007bf5}
.dag-allcat-hd h2 a{color:#1f2329;transition:color .25s}
.dag-allcat-hd h2 a:hover{color:#007bf5}
.dag-allcat-sub{display:flex;flex-wrap:wrap;gap:8px}
.dag-allcat-sub a{font-size:12px;color:#8a94a6;transition:color .25s}
.dag-allcat-sub a:hover{color:#007bf5}
.dag-allcat-more{margin-left:auto;font-size:13px;color:#007bf5;transition:color .25s}
.dag-allcat-more i{margin-left:4px}
.dag-allcat-more:hover{color:#0068d6}
/* 文章列表：左边小图 + 右边标题，宽屏一行两篇 */
.dag-allcat-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px;padding:6px 0 12px}
.dag-allcat-list li{display:flex;align-items:center;gap:12px;padding:10px 8px;border-bottom:1px solid #f6f7f8;border-radius:6px;transition:background .25s}
.dag-allcat-list li:hover{background:#f7fbff}
.dag-allcat-img{flex:0 0 90px;width:90px;height:60px;border-radius:8px;overflow:hidden;background:#f2f5f9;display:block}
.dag-allcat-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.dag-allcat-list li:hover .dag-allcat-img img{transform:scale(1.06)}
.dag-allcat-body{flex:1;min-width:0}
.dag-allcat-meta{margin-top:6px}
.dag-allcat-tit{display:block;font-size:14px;font-weight:700;line-height:22px;color:#1f2329;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:color .25s}
.dag-allcat-tit:hover{color:#007bf5}

/* 手机 / 平板适配 */
@media screen and (max-width:1100px){
    .dag-allcat-list{grid-template-columns:1fr}
}
@media screen and (max-width:800px){
    .dag-allcats{margin-top:80px;padding-bottom:20px}
    .dag-allcats-top{padding:14px 14px 0}
    .dag-allcats-hd h1{font-size:19px;line-height:28px}
    /* 分类导航改成和分类列表页手机端一样的「小方块」排布（一行 3 个） */
    .dag-allcats-nav{line-height:normal;padding-bottom:4px}
    .dag-allcats-nav li{display:block;float:left;width:31.33%;text-align:center;background:#f6f6f6;margin:1%;border-radius:5px}
    .dag-allcats-nav li a{display:block;line-height:34px;margin:0;font-size:13px;color:#666}
    .dag-allcats-nav li a:after{display:none}
    .dag-allcats-nav li a:hover{color:#fff}
    .dag-allcats-nav li:hover{background:#007bf5}
    .dag-allcat{padding:14px 14px 4px}
    .dag-allcat-hd h2{font-size:16px}
    .dag-allcat-img{flex:0 0 74px;width:74px;height:52px}
}
@media screen and (max-width:640px){
    .dag-allcat-more{margin-left:0}
}

/* 夜间模式 */
body.night .dag-allcats-top,
body.night .dag-allcat{background:#292a2d}
body.night .dag-allcats-nav{border-top-color:#3a3b3f}
body.night .dag-allcats-hd h1,
body.night .dag-allcat-hd h2 a,
body.night .dag-allcat-tit,
body.night .dag-allcats-nav li a{color:#c0c4cc}
body.night .dag-allcat-tit:hover,
body.night .dag-allcat-hd h2 a:hover{color:#1b8eff}
body.night .dag-allcat-hd{border-bottom-color:#3a3b3f}
body.night .dag-allcat-list li{border-bottom-color:#34353a}
body.night .dag-allcat-list li:hover{background:#323335}
body.night .dag-allcat-img{background:#323335}
@media screen and (max-width:800px){
    body.night .dag-allcats-nav li{background:#323335}
    body.night .dag-allcats-nav li:hover{background:#345ffd}
    body.night .dag-allcats-nav li a:hover{color:#fff}
}
