@charset "utf-8";
/* ===========================================================
   云图壁纸 - 壁纸站模板
   主色 #2673e8  浅蓝白底 #f5f8fc  圆角 10px  柔阴影
   =========================================================== */

:root{
    --blue:        #2673e8;
    --blue-dark:   #1c5fc4;
    --blue-light:  #5b96f0;
    --blue-soft:   #eaf2fe;
    --blue-glow:   rgba(38,115,232,.16);
    --ink:         #1f2430;
    --ink-2:       #4a5163;
    --ink-3:       #8b92a5;
    --ink-4:       #b6bcc9;
    --line:        #e8ecf3;
    --bg:          #f5f8fc;
    --white:       #fff;
    --r-sm:        6px;
    --r:           10px;
    --r-lg:        14px;
    --sh:          0 2px 12px rgba(31,45,80,.06);
    --sh-hover:    0 8px 28px rgba(31,45,80,.12);
    /* 效果图是 1920 宽的大屏稿，容器要够宽才能把「左1大图 + 右2x2四张小图」完整放下来 */
    --w:           1600px;
    /* --hero-img 由 system/head.htm 的 <style> 注入真实路径。
       这里只给兜底默认值，防止脱离 head.htm 单独引用样式表时 Hero 空白。
       ⚠ 必须写成完整 url("...")：background 简写里的裸字符串是非法值，
         整条声明会被浏览器丢弃，表现为图片静默消失、只剩容器兜底色。 */
    --hero-img:    url("/template/wallpaper/pc/skin/images/hero.jpg");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
    margin:0;
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
    font-size:14px;line-height:1.6;color:var(--ink-2);
    background:var(--bg);
    min-width:320px;
}
body *{min-width:0}
img{border:0;vertical-align:middle;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol,li,dl,dd,dt{padding:0;margin:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;font-weight:700;color:var(--ink)}
input,button,textarea,select{font-family:inherit;font-size:inherit;outline:0;border:0;background:none;color:inherit}
button{cursor:pointer}
iframe,embed,object,img,video{max-width:100%}

/* 滚动条 */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#cbd5e6;border-radius:9px}
::-webkit-scrollbar-thumb:hover{background:#a9b8cf}
::-webkit-scrollbar-track{background:transparent}

.wrap{width:100%;max-width:var(--w);margin:0 auto;padding:0 24px}

/* ========== 顶部导航 ==========
   效果图顶栏是压在通栏图上的一层淡蓝白半透明白底，文字为深色（不是白字）。
   所以默认就是深色文字，不需要为首页单独做白色态。 */
.wp-header{
    position:absolute;left:0;right:0;top:0;z-index:60;
    height:64px;
    background:rgba(255,255,255,.72);
    -webkit-backdrop-filter:saturate(180%) blur(16px);
    backdrop-filter:saturate(180%) blur(16px);
    box-shadow:0 1px 0 rgba(31,45,80,.05);
    transition:background .3s,box-shadow .3s;
}
/* 内页（栏目/详情/单页/搜索）顶栏与首页**完全一致**：
   同样是半透明毛玻璃 + absolute 压在通栏图上，不再用实色底 + sticky。
   通栏图是沉浸式的（图从页面最顶端开始、穿过顶栏），顶栏如果改成实色就会把图割断。
   滚动 60px 后 main.js 加 .solid 变 fixed 白底，两种页面行为统一。
   搜索框外观全部由 .hd-search input 控制，这里不要再覆盖底色，
   否则内页会变成浅灰蓝、看着像换了个控件。 */
.wp-header.solid{
    position:fixed;
    background:rgba(255,255,255,.92);
    box-shadow:0 1px 0 rgba(31,45,80,.07),0 2px 14px rgba(31,45,80,.05);
    animation:wpDrop .3s ease;
}
@keyframes wpDrop{from{transform:translateY(-100%)}to{transform:translateY(0)}}
.wp-header .wrap{display:flex;align-items:center;height:64px;gap:30px}

.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
/* 后台上传的站点 logo */
.brand-logo{height:34px;width:auto;display:block;object-fit:contain}
.brand-mark{
    width:32px;height:32px;border-radius:9px;flex-shrink:0;
    background:linear-gradient(140deg,#4c96ff,#2673e8 62%,#1248b0);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 3px 10px rgba(38,115,232,.32);
}
.brand-mark svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.brand-name{font-size:19px;font-weight:800;color:#1b2a44;letter-spacing:.5px;white-space:nowrap}
.brand-slogan{
    font-size:11.5px;color:#93a6c2;padding-left:10px;margin-left:2px;
    border-left:1px solid var(--line);white-space:nowrap;
}

/* 主导航：紧跟 Logo 排布，不再用 margin-left:auto 推到最右
   （原来靠 auto 撑开，导致 Logo 右边缘到导航左边缘空了 330px） */
.wp-nav{margin-left:24px}
.wp-nav ul{display:flex;align-items:center;gap:2px}
.wp-nav a{
    display:block;padding:0 17px;height:64px;line-height:64px;
    font-size:15px;font-weight:600;color:#2f3d55;
    position:relative;white-space:nowrap;
    transition:color .2s;
}
.wp-nav a::after{
    content:"";position:absolute;left:50%;bottom:15px;
    width:0;height:2.5px;border-radius:2px;background:currentColor;
    transform:translateX(-50%);transition:width .22s;
}
.wp-nav a:hover::after,.wp-nav a.on::after{width:24px}
.wp-nav a:hover{color:var(--blue)}
.wp-nav a.on{color:var(--blue);font-weight:700}
.wp-nav .has-sub{position:relative}
.wp-nav .sub{
    position:absolute;left:0;top:64px;min-width:132px;
    background:#fff;border-radius:var(--r);box-shadow:var(--sh-hover);
    padding:6px;opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:all .2s;
}
.wp-nav .has-sub:hover .sub{opacity:1;visibility:visible;transform:translateY(0)}
.wp-nav .sub a{height:36px;line-height:36px;padding:0 12px;font-size:13.5px;color:var(--ink-2);border-radius:var(--r-sm)}
.wp-nav .sub a::after{display:none}
.wp-nav .sub a:hover{background:var(--blue-soft);color:var(--blue)}

/* 头部右侧 */
/* 原来 margin-left:auto 把这块顶到最右，导航右边缘到搜索框空了 374px，
   视觉上「导航挤左边、搜索框贴右边」。这里保留 auto 顶住右边距，
   改用 transform 整体左移 120px —— 用 transform 而不是 padding-left，
   因为 padding 会把元素撑宽（auto 余量被吃掉后内容反而回到原位）。
   元素 transform 不影响布局宽度，所以左移是真实位移且不会撑破顶栏。 */
.wp-head-right{
    display:flex;align-items:center;gap:10px;flex-shrink:0;
    margin-left:auto;transform:translateX(-170px);
}
.hd-search{position:relative;width:250px}
.hd-search input{
    width:100%;height:36px;border-radius:18px;padding:0 36px 0 16px;
    background:rgba(255,255,255,.86);border:1px solid rgba(31,45,80,.08);
    color:var(--ink);font-size:13px;transition:all .25s;
}
.hd-search input::placeholder{color:#9aa9c0}
.hd-search input:focus{background:#fff;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-glow)}
/* 内页搜索框保持与首页一致的白色半透 + 18px 圆角。
   原来这里改成 #f4f7fc 浅灰蓝，视觉上像"变了一个控件"，去掉。 */
.wp-header.has-bg .hd-search input{background:rgba(255,255,255,.9);border-color:rgba(31,45,80,.08);color:var(--ink)}
.hd-search button{
    position:absolute;right:4px;top:4px;width:28px;height:28px;border-radius:50%;
    background:var(--blue);display:flex;align-items:center;justify-content:center;
    transition:background .2s;
}
.hd-search button:hover{background:var(--blue-dark)}
.hd-search button svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round}
.hd-ico{
    width:36px;height:36px;border-radius:50%;
    background:var(--blue-soft);
    display:flex;align-items:center;justify-content:center;
    transition:all .22s;
}
.hd-ico svg{width:17px;height:17px;stroke:var(--blue);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hd-ico:hover{background:var(--blue)}
.hd-ico:hover svg{stroke:#fff}
.hd-toggle{display:none;width:36px;height:36px;border-radius:9px;background:var(--blue-soft);flex-direction:column;justify-content:center;align-items:center;gap:4px}
.hd-toggle i{display:block;width:18px;height:2px;background:var(--blue);border-radius:2px;transition:all .25s}
.hd-toggle.on i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hd-toggle.on i:nth-child(2){opacity:0}
.hd-toggle.on i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.wp-mask{display:none;position:fixed;inset:0;background:rgba(20,30,50,.42);z-index:55}

/* ========== Hero ==========
   效果图的大通栏图底边不是硬边，而是向下羽化融进页面底色 #f5f8fc。
   做法：.wp-hero-bg 自身在底部 160px 用页面底色做一层纵向遮罩（::after），
   同时 hero 容器去掉硬底色，露出遮罩后的融合效果。 */
.wp-hero{position:relative;min-height:660px;display:flex;align-items:center;overflow:hidden;background:#cfe2f5}
.wp-hero-bg{
    position:absolute;inset:0;
    /* 绝对路径：CSS 在 skin/css/ 下，写 "images/hero.jpg" 会被解析成 skin/css/images/ 导致 404。
       真实路径由 head.htm 注入 --hero-img，这里用 var 引用，换模板目录名也不会失效。 */
    background:var(--hero-img) center 30%/cover no-repeat;
}
/* 底部羽化：把通栏图的下缘溶进页面底色 */
.wp-hero-bg::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:210px;
    background:linear-gradient(180deg,
        rgba(245,248,252,0) 0%,
        rgba(245,248,252,.18) 26%,
        rgba(245,248,252,.52) 52%,
        rgba(245,248,252,.82) 76%,
        #f5f8fc 100%);
}
.wp-hero::after{
    content:"";position:absolute;inset:0;
    background:
        linear-gradient(90deg,rgba(240,247,255,.94) 0%,rgba(232,243,254,.8) 30%,rgba(226,239,252,.26) 56%,rgba(210,228,246,0) 82%);
}
.wp-hero-in{position:relative;z-index:2;width:100%;max-width:var(--w);margin:0 auto;padding:142px 24px 176px}
/* Hero 手写体：LongCang 龙藏体（已子集化到 12.8KB）
   这套字体字形本身就是右倾的行书，斜度是字体带出来的，
   所以这里只用很轻的 skewX(-3deg) 补一点斜势，不能给大角度——
   大角度 skew 会把行书的连带笔画拉断、变成机械倾斜。
   客户主机不一定装了这套字体，必须内置 woff2。 */
@font-face{
    font-family:"HeroHand";
    src:url("../fonts/hero-handwriting.woff2") format("woff2");
    font-weight:400;font-style:normal;font-display:swap;
}

.hero-h1{
    font-family:"HeroHand","楷体","STKaiti","KaiTi",serif;
    font-size:70px;line-height:1.24;font-weight:400;letter-spacing:3px;
    color:#3978eb;
    transform:skewX(-3deg);transform-origin:left bottom;
    margin-bottom:2px;
}
.hero-en{
    font-family:"HeroHand","Brush Script MT","Segoe Script",Georgia,serif;
    font-size:27px;color:#5b7fb8;font-weight:400;
    /* LongCang 的西文字形窄且天然连笔，字间距太小字母会粘成一团。
       参考图里英文是舒展的手写体，所以字间距给到 4.5px、词间距再补 2.5px。 */
    letter-spacing:4.5px;word-spacing:2.5px;
    transform:skewX(-3deg);transform-origin:left center;
    margin:10px 0 16px 62px;
}
.hero-desc{font-size:15px;color:#5f7796;margin-bottom:24px;letter-spacing:.4px}
.hero-desc b{color:var(--blue);font-weight:700;padding:0 2px}

/* Hero 搜索 */
.hero-search{display:flex;max-width:760px;height:56px;background:#fff;border-radius:28px;box-shadow:0 8px 26px rgba(31,60,120,.14);overflow:hidden;margin-bottom:18px}
.hero-search input{flex:1;padding:0 12px 0 26px;font-size:15px;color:var(--ink)}
.hero-search input::placeholder{color:var(--ink-4)}
.hero-search button{
    width:56px;height:56px;flex-shrink:0;
    background:linear-gradient(140deg,#4a92fb,#2673e8);
    display:flex;align-items:center;justify-content:center;
    transition:filter .2s;
}
.hero-search button:hover{filter:brightness(1.08)}
.hero-search button svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round}

.hero-hot{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:13px;color:#6b83a6}
.hero-hot span{color:#8aa0bd}
.hero-hot a{
    padding:3px 12px;border-radius:13px;
    background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.86);
    color:#5c789f;transition:all .2s;
}
.hero-hot a:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ========== 快捷分类条 ==========
   效果图：淡蓝白半透明卡片，7 列均分，每格「图在左 + 标题/副标题在右 + 末尾箭头」。
   定位：分类条「骑」在通栏图底边与正文之间——卡片中线对齐 Hero 底边，
   上一半压在通栏图上、下一半压在白底和首个区块头上。
   上移量 = 自身高度的一半。高度随列数变化（7 列 110px / 3 列 260px / 2 列 296px），
   写死会在某些断点错位，所以由 main.js 实测后写入 --catsH，CSS 只做兜底默认值。 */
.wp-cats{
    position:relative;z-index:6;
    margin-top:calc(var(--catsH, 110px) / -2);
}
.wp-cats-in{
    display:grid;grid-template-columns:repeat(7,1fr);gap:0;
    background:rgba(238,246,255,.82);
    -webkit-backdrop-filter:saturate(160%) blur(14px);
    backdrop-filter:saturate(160%) blur(14px);
    border:1px solid rgba(255,255,255,.9);
    border-radius:var(--r-lg);
    box-shadow:0 8px 34px rgba(31,60,120,.10);
    padding:12px 0;
}
.cat-item{
    display:flex;align-items:center;gap:10px;
    /* 右侧多留 32px 给绝对定位的箭头（箭头自身占 right12 + 宽14）。
       上下内边距收到 6px：分类图加高后要保持整条高度不变，
       110 = 容器上下 12*2 + 边框 2 + 格内上下 6*2 + 图 72。 */
    padding:6px 32px 6px 12px;transition:background .22s;position:relative;
    min-width:0;
}
.cat-item+.cat-item::before{
    content:"";position:absolute;left:0;top:22%;height:56%;width:1px;background:rgba(31,45,80,.08);
}
/* 悬停不要白色底块（整条分类栏本身已是毛玻璃白底），也不要左侧色条——
   用户反馈那条蓝竖线很突兀。只保留文字变蓝、图标微放大、箭头右移。 */
.cat-item:hover{background:none}
.cat-thumb{
    width:72px;height:72px;border-radius:10px;overflow:hidden;flex-shrink:0;
    background:#dbe8fb;box-shadow:0 3px 10px rgba(31,60,120,.14);
}
.cat-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.cat-item:hover .cat-thumb img{transform:scale(1.09)}
.cat-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cat-name{
    font-size:15.5px;font-weight:700;color:#1e2c44;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    transition:color .2s;
}
.cat-item:hover .cat-name{color:var(--blue)}
.cat-sub{
    font-size:12px;color:#8fa3c0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 箭头绝对定位：不占文字的横向空间。
   7 列均分时每格只有 200px 出头，箭头若在流内会把「二次元 · 动漫壁纸」这类
   长副标题挤成省略号。整格本身就是链接，点击区不受影响。 */
.cat-arrow{
    position:absolute;right:12px;top:50%;margin-top:-7px;
    width:14px;height:14px;
    stroke:#b3c2d8;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
    transition:all .22s;
}
.cat-item:hover .cat-arrow{stroke:var(--blue);transform:translateX(2px)}

/* ========== 主体两栏 ========== */
/* 列表页正文顶部只留 8px：通栏图已经做了羽化收底，
   再叠 44px 会让图和排序条之间空出一大片。 */
.wp-main{padding:8px 0 0}
/* 列表页：排序条已经骑到通栏图上去了，正文顶部不能再留 padding，
   否则工具条会被顶回图里、图下缘又露出一条白边。 */
.wp-list-main{padding-top:0}
.sec{margin-bottom:44px}
.sec-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
/* 区块标题：文字本身保持干净，装饰放在标题「下方」——
   两个不规则小色块（淡蓝 + 淡绿），淡淡的，像水彩点一下。 */
.sec-t{
    font-size:24px;font-weight:800;color:#1b3a6b;letter-spacing:1px;
    position:relative;display:inline-flex;align-items:baseline;gap:1px;
    padding-bottom:9px;
}
/* 淡蓝色不规则色块：在标题下方左侧 */
.sec-t::before{
    content:"";position:absolute;left:1px;bottom:-2px;
    width:30px;height:9px;
    background:rgba(90,150,246,.34);
    border-radius:62% 38% 55% 45% / 70% 62% 38% 30%;
    transform:rotate(-1.5deg);
}
/* 淡绿色不规则色块：紧挨蓝块右侧，稍小一点 */
.sec-t::after{
    content:"";position:absolute;left:36px;bottom:-1px;
    width:17px;height:8px;
    background:rgba(96,196,164,.32);
    border-radius:45% 55% 38% 62% / 62% 42% 58% 38%;
    transform:rotate(2deg);
}
.sec-sub{font-size:13px;color:#9db0c8}
.sec-more{margin-left:auto;font-size:13.5px;color:#7b8ca6;transition:color .2s;display:flex;align-items:center;gap:4px}
.sec-more:hover{color:var(--blue)}
.sec-more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* 精选推荐 + 排行榜 */
.feat-wrap{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:stretch}
/* 左列：标题栏 + 卡片网格；右列：标题栏 + 排行榜白盒。
   两列都用 flex 列向容器，stretch 后左右两块整体等高。 */
.feat-wrap > div{display:flex;flex-direction:column;min-width:0}
/* 大屏精选区：整体 4 列。大图占左侧 2 列 2 行，右侧 2 列正好排下 4 张小图（2×2），
   3 列会导致第 3、4 张小图换行掉到左下，右下角空一块。 */
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:240px;gap:14px}
.feat-grid .big{grid-column:span 2;grid-row:span 2}

.wp-card{
    position:relative;display:block;border-radius:var(--r);overflow:hidden;
    background:#dde5ef;box-shadow:var(--sh);transition:transform .28s,box-shadow .28s;
}
.wp-card:hover{transform:translateY(-3px);box-shadow:var(--sh-hover)}
/* 精选区是 1 大 + 4 小的网格，任一张卡抬升都会与相邻卡上下边缘错位，
   看起来像没对齐。整个网格内取消位移，保留阴影加深 + 图片缩放。 */
.feat-grid .wp-card:hover{transform:none;box-shadow:var(--sh-hover)}
.wp-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.wp-card:hover img{transform:scale(1.06)}
.wp-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,24,48,0) 38%,rgba(12,24,48,.76) 100%)}
.wp-card-in{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 16px;color:#fff}
.card-badges{position:absolute;left:13px;top:13px;z-index:3;display:flex;gap:6px}
.badge{
    /* 圆角要够大才像胶囊（参考图是长条药丸形），5px 太方；
       不要描边——半透明底色上白色描边会显出一圈亮边，看着脏。 */
    padding:3px 10px;border-radius:9px;font-size:11.5px;font-weight:600;color:#fff;
    background:rgba(30,40,64,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    border:0;
}
.badge-blue{background:rgba(38,115,232,.92)}
.badge-pink{background:rgba(240,110,170,.92)}
.badge-cyan{background:rgba(28,178,190,.92)}
.badge-gold{background:rgba(238,168,58,.94)}
.card-t{
    font-size:16px;font-weight:700;color:#fff;line-height:1.35;
    overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;
    text-shadow:0 1px 4px rgba(0,0,0,.3);
}
.card-m{display:flex;align-items:center;gap:13px;margin-top:7px;font-size:11.5px;color:rgba(255,255,255,.9)}
.card-m span{display:flex;align-items:center;gap:3px}
.card-m svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.card-m .fav{margin-left:auto}
.card-m .fav svg{fill:none;transition:fill .2s,stroke .2s}
.wp-card:hover .card-m .fav svg{fill:#ff5d7a;stroke:#ff5d7a}
.feat-grid .big .card-t{font-size:23px}
.feat-grid .big .card-in{padding:22px 26px}
.feat-grid .big .card-m{font-size:13px;margin-top:11px;gap:18px}

/* 排行榜 */
.rank-side{display:flex;flex-direction:column;min-width:0}
.rank-box{
    background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh);padding:18px;
    flex:1;display:flex;flex-direction:column;min-height:0;
}
.rank-hd{display:flex;align-items:center;gap:7px;margin-bottom:12px;font-size:15px;font-weight:800;color:var(--ink);flex-shrink:0}
.rank-hd i{
    width:18px;height:18px;border-radius:5px;background:linear-gradient(140deg,#ff9a4d,#ff5f6d);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.rank-hd i svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* 详情页侧栏热门排行榜标题栏的「更多」已按要求去掉，
   这条只作用于 .rank-hd 内的更多链接，现在全站已无此类元素，规则清除。
   首页的「查看更多」挂在 .sec-h 标题层上，走 .sec-more 基础规则，不受影响。 */
.rank-list{flex:1;display:flex;flex-direction:column;justify-content:space-between;min-height:0}
.rank-list li{
    display:flex;align-items:center;gap:12px;
    padding:10px 0;border-bottom:1px dashed var(--line);
    /* 行高由 flex 分配；padding 用相对值随高度收缩，避免超出白盒 */
    flex:1 1 0;min-height:0;padding:min(10px, 8%) 0;
}
.rank-list li:last-child{border-bottom:0}
.rk-no{
    width:20px;height:20px;border-radius:5px;flex-shrink:0;
    font-size:12px;font-weight:700;color:#fff;
    background:#c3cbda;display:flex;align-items:center;justify-content:center;
}
.rank-list li:nth-child(1) .rk-no{background:linear-gradient(140deg,#ffb03a,#ff8a2b)}
.rank-list li:nth-child(2) .rk-no{background:linear-gradient(140deg,#8fc0ff,#5b9bfa)}
.rank-list li:nth-child(3) .rk-no{background:linear-gradient(140deg,#ffc08a,#ff9a5a)}
.rk-thumb{
    width:74px;border-radius:var(--r-sm);overflow:hidden;flex-shrink:0;background:#e4eaf3;
    /* 行高由 flex 分配，缩略图跟随行高自适应，左列变矮时榜单不外溢 */
    height:auto;align-self:stretch;max-height:50px;min-height:38px;
}
.rk-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.rank-list li:hover .rk-thumb img{transform:scale(1.08)}
.rk-info{flex:1;min-width:0}
.rk-t{
    font-size:13.5px;color:var(--ink);font-weight:500;line-height:1.4;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rank-list li:hover .rk-t{color:var(--blue)}
.rk-m{font-size:11.5px;color:var(--ink-4);display:flex;align-items:center;gap:4px;margin-top:2px}
.rk-m svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.2}

/* ========== 壁纸网格 ========== */
.wp-tabs{display:flex;align-items:center;gap:2px;margin-bottom:16px;flex-wrap:wrap}
.wp-tabs a{
    padding:6px 18px;font-size:14.5px;color:#8593aa;border-radius:16px;transition:all .2s;font-weight:500;
}
.wp-tabs a:hover{color:var(--blue)}
.wp-tabs a.on{color:var(--blue);font-weight:700;background:var(--blue-soft)}

.wp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
/* 标签切换时的加载态：半透明 + 轻微降饱和，避免内容已换但用户以为是旧缓存 */
.wp-grid-loading{opacity:.45;filter:saturate(.7);transition:opacity .15s ease}
/* 片段模式下分类无内容时的占位 */
.wp-empty{grid-column:1/-1;padding:38px 0;text-align:center;color:var(--ink-3);font-size:14px}
.wp-grid.g6{grid-template-columns:repeat(6,1fr);gap:16px}

/* 壁纸卡：标题压在图上（效果图就是这样），底部不挂白条 */
.wall{
    position:relative;display:block;border-radius:var(--r);overflow:hidden;
    background:#dde5ef;box-shadow:var(--sh);transition:transform .3s,box-shadow .3s;
}
.wall:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(31,60,120,.15)}
.wall-img{position:relative;aspect-ratio:16/10;overflow:hidden;background:#e4eaf3}
.wall-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s}
.wall:hover .wall-img img{transform:scale(1.07)}
.wall-badges{position:absolute;left:11px;top:11px;z-index:3;display:flex;gap:5px}
.wall-fav{
    position:absolute;right:11px;top:11px;z-index:3;
    width:29px;height:29px;border-radius:50%;
    background:rgba(16,26,48,.38);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    display:flex;align-items:center;justify-content:center;
    transition:all .28s;
}
.wall-fav svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2;transition:fill .2s,stroke .2s}
.wall-fav:hover svg,.wall-fav.on svg{fill:#ff5d7a;stroke:#ff5d7a}
/* 提交收藏期间：禁用点击 + 半透明，避免连点产生多次写入 */
.wall-fav.loading{pointer-events:none;opacity:.55}
/* 收藏结果的轻提示（收藏是高频操作，不引 layer） */
#wpTip{
    position:fixed;left:50%;bottom:80px;z-index:120;
    transform:translate(-50%,10px);
    padding:10px 20px;border-radius:22px;
    background:rgba(20,32,56,.9);color:#fff;font-size:13.5px;
    opacity:0;pointer-events:none;transition:all .26s;
    box-shadow:0 8px 24px rgba(15,30,60,.24);
}
#wpTip.on{opacity:1;transform:translate(-50%,0)}
/* 图上的标题遮罩层 */
.wall-cap{
    position:absolute;left:0;right:0;bottom:0;z-index:2;
    padding:26px 14px 12px;
    background:linear-gradient(180deg,rgba(10,20,40,0),rgba(10,20,40,.72) 62%,rgba(10,20,40,.86));
    display:flex;align-items:flex-end;gap:10px;
}
.wall-t{
    font-size:14.5px;color:#fff;font-weight:600;flex:1;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    text-shadow:0 1px 4px rgba(0,0,0,.34);
}
.wall-cap .wall-m{font-size:11.5px;color:rgba(255,255,255,.86);display:flex;align-items:center;gap:4px;flex-shrink:0}
.wall-cap .wall-m svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.1}
.wall-res{
    font-size:11px;color:rgba(255,255,255,.9);padding:2px 7px;border-radius:4px;
    background:rgba(255,255,255,.18);flex-shrink:0;
}
/* 底部信息条（最新上传小卡用） */
.wall-foot{
    display:flex;align-items:center;gap:10px;
    padding:9px 12px;background:#fff;
}
.wall-foot .wall-m{font-size:11.5px;color:var(--ink-4);display:flex;align-items:center;gap:3px;flex-shrink:0}
.wall-foot .wall-m svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2.1}

/* 最新上传（小卡） */
.wall-sm .wall-img{aspect-ratio:4/3}
.wall-sm .wall-foot{padding:8px 11px}
.wall-sm .wall-cap{padding:22px 11px 9px}
.wall-sm .wall-t{font-size:13px}
.wall-sm .wall-badges{left:9px;top:9px}
.wall-sm .badge{font-size:10.5px;padding:2px 8px;border-radius:7px}
.wall-sm .wall-fav{width:26px;height:26px;right:9px;top:9px}

/* ========== CTA ========== */
/* 底部整块蓝色底块换成通栏雪山图，文字与按钮直接写在图上 */
.wp-cta{
    position:relative;overflow:hidden;border-radius:var(--r-lg);
    min-height:172px;
    display:flex;align-items:center;gap:24px;
    /* 上间距：上一个 .sec 有 margin-bottom:44px，用负 margin 把它抵消到 24px（紧贴但不粘连）。
       下间距：自己的 12px + 页脚 8px = 20px。原来是 44px / 54px，两侧都太松。 */
    margin:-20px 0 12px;
    padding:38px 46px;
    background:url(../images/cta-bg.jpg) center 42%/cover no-repeat #eaf3fd;
    box-shadow:0 10px 34px rgba(31,60,120,.14);
}
/* 左侧提亮层，保证文字在云海上的对比度；右侧保持通透 */
.wp-cta::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
        linear-gradient(100deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.82) 30%,rgba(255,255,255,.52) 52%,rgba(214,232,252,.16) 78%,rgba(190,218,250,0) 100%),
        linear-gradient(0deg,rgba(96,156,232,.22) 0%,rgba(96,156,232,0) 62%);
}
.wp-cta::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(120% 180% at 6% 50%,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 58%);
}
.wp-cta-in{position:relative;z-index:2;flex:1;text-align:left}
.wp-cta-t{
    font-size:29px;font-weight:800;color:#14498f;letter-spacing:2px;margin-bottom:5px;
    font-family:"HeroHand","STKaiti","KaiTi","楷体",serif;
    text-shadow:0 2px 14px rgba(255,255,255,.98),0 0 30px rgba(255,255,255,.9);
}
.wp-cta-en{
    font-size:14px;color:#4f7bb8;letter-spacing:1.4px;font-style:italic;
    font-family:"Brush Script MT","Segoe Script",Georgia,serif;
    text-shadow:0 1px 12px rgba(255,255,255,.98);
}
.wp-cta .btn-primary{
    position:relative;z-index:3;   /* 必须高于两层白色提 ::before/::after，否则白底会把白字按钮盖掉 */
    display:inline-flex;align-items:center;gap:7px;
    padding:12px 30px;border-radius:24px;
    background:linear-gradient(140deg,#4a92fb,#2673e8);
    color:#fff;font-size:14px;font-weight:600;
    box-shadow:0 8px 20px rgba(38,115,232,.3);transition:all .25s;flex-shrink:0;
}
.wp-cta .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(38,115,232,.38)}
.wp-cta .btn-primary svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ========== 页脚 ========== */
.wp-footer{background:#fff;border-top:1px solid var(--line);padding:34px 0 20px;margin-top:8px}
.wp-foot-in{display:flex;align-items:flex-start;gap:40px;flex-wrap:wrap}
.wp-foot-brand{flex-shrink:0;min-width:210px}
/* 页脚 Logo：优先用后台上传的 logo 图（与顶栏同一张），没上传才回退内置图形标。
   高度单独设小一号——顶栏 34px 放到页脚视觉偏重。 */
.wp-foot-brand .brand-logo{height:28px}
.wp-foot-brand .brand-name{color:var(--ink);text-shadow:none}
.wp-foot-brand .brand-slogan{color:var(--ink-4);border-color:var(--line)}
.wp-foot-desc{font-size:12.5px;color:var(--ink-4);margin-top:9px;line-height:1.8}
.wp-foot-nav{display:flex;gap:56px;flex-wrap:wrap;flex:1}
.foot-col h4{font-size:13.5px;color:var(--ink);margin-bottom:11px;font-weight:700}
.foot-col a{display:block;font-size:13px;color:var(--ink-3);padding:4px 0;transition:color .2s}
.foot-col a:hover{color:var(--blue)}
/*当前页就在这个单页里时高亮，位置与导航 .on 一致 */
.foot-col a.on{color:var(--blue);font-weight:600}
/*分组下还没有子栏目时的占位，避免标题孤零零顶着空块 */
.foot-col .foot-none{font-size:12.5px;color:var(--ink-4)}
.wp-foot-bar{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    margin-top:26px;padding-top:16px;border-top:1px solid var(--line);
    font-size:12.5px;color:var(--ink-4);
}
.wp-foot-bar .copy{color:var(--ink-4)}
/* 备案号：后台填了才出现，链接到工信部查询页 */
.foot-record{margin-left:auto;display:flex;align-items:center;gap:6px}
.foot-record a{color:var(--ink-4);transition:color .2s}
.foot-record a:hover{color:var(--blue)}
.foot-record b{font-weight:400;color:#c8d2e0}

/* 页脚右侧二维码区：贴右对齐，跟左边的品牌和分类列同一行。
   二维码固定 92px 见方 + 8px 内白边，底衬白卡并描浅边，
   在浅灰页脚底上留出呼吸感；文字压在图下方，10px 灰色。 */
.foot-qr{display:flex;gap:18px;margin-left:auto;align-self:flex-start;padding-top:2px}
.qr-item{display:flex;flex-direction:column;align-items:center;gap:7px}
.qr-box{
    display:flex;align-items:center;justify-content:center;
    width:92px;height:92px;padding:7px;
    background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
}
.qr-box img{width:100%;height:100%;object-fit:contain;display:block}
.qr-t{font-size:11.5px;color:var(--ink-4);white-space:nowrap}
.to-top{
    position:fixed;right:26px;bottom:30px;z-index:50;
    width:42px;height:42px;border-radius:50%;
    background:#fff;box-shadow:var(--sh-hover);
    display:flex;align-items:center;justify-content:center;
    opacity:0;visibility:hidden;transform:translateY(12px);
    transition:all .28s;
}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--blue)}
.to-top svg{width:18px;height:18px;stroke:var(--ink-3);fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s}
.to-top:hover svg{stroke:#fff}

/* ========== 列表页 / 详情页 / 单页 头图 ==========
   沉浸式通栏：从页面最顶端开始（负 margin 把 64px 顶栏高度吃掉），
   图片一路穿过顶栏往下延展，底边羽化融进页面底色。
   通栏图来自后台「广告管理 → pid=7 栏目通栏背景图」，站长可自行替换；
   .page-hd-bg 的 hero.jpg 只是广告没配图时的兜底底色。

   图片完整显示的做法：JS 读图片 naturalWidth/naturalHeight 写入 --hdAr，
   容器按这个比例撑高（aspect-ratio），图片 object-fit:cover 就等于 contain —— 不裁切。
   换任何尺寸的广告图都自适应，不用改模板也不用改这里的数字。
   --hdAr 的兜底值 3.187 对应默认图 956x300。

   ⚠ width:100% 必须显式写：aspect-ratio + max-height 同时存在时，
   浏览器会用「被 max-height 压住后的高度」反推宽度，
   导致 2560 宽屏下容器只有 1785px、右侧空出一大块（实测过的坑）。 */
.page-hd{
    position:relative;overflow:hidden;
    display:flex;align-items:center;
    width:100%;
    /* 顶到页面最顶端：顶栏是 absolute 不占文档流，这里负 64 让图片从 y=0 开始；
       padding-top 补回 64 + 呼吸位，标题不会被顶栏压住。 */
    margin-top:-64px;
    /* 底部只留 46px：通栏图本身有完整内容，底部留白一大块会显得空。 */
    padding:118px 0 46px;
    aspect-ratio:var(--hdAr,3.187);
    /* 超宽屏按比例会算出过高（2560 宽 → 803px），这里封顶；
       1600/1920 档刚好在封顶内，图片完整不裁。 */
    max-height:640px;
    background:#d7e7f8;
}
.page-hd-bg{
    position:absolute;inset:0;
    background:var(--hero-img) center 40%/cover no-repeat;
}
/* 广告位图片：铺满并按比例裁切。用 object-fit 而不是 background-size，
   这样换任何尺寸的广告图都不会变形，也不用在模板里拼 style。
   容器已按图片比例撑高（aspect-ratio），这里 cover 实际不产生裁切。 */
.page-hd-img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;object-position:center center;
    z-index:0;
}
/* 左侧提亮层：只给标题区一点柔和过渡，保证深色标题可读。
   不能给太重 —— pid=7 的图本身是鲜亮通栏图，铺满整屏，
   早先0.95/.86 的白色蒙版会在左侧糊一大片白雾，把图吃掉一大半。 */
.page-hd-bg::after{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(90deg,rgba(238,246,255,.62) 0%,rgba(230,242,254,.34) 34%,rgba(220,236,252,.12) 62%,rgba(210,228,246,0) 100%);
}
/* 底部羽化：同样从 132px 收到 96px，并压低中间不透明度，
   避免把通栏图下缘一大片溶成纯色显得空。 */
.page-hd-bg::before{
    content:"";position:absolute;left:0;right:0;bottom:0;height:96px;z-index:2;
    background:linear-gradient(180deg,
        rgba(245,248,252,0) 0%,
        rgba(245,248,252,.22) 38%,
        rgba(245,248,252,.58) 70%,
        #f5f8fc 100%);
}
.page-hd .wrap{position:relative;z-index:3}
/* ---- 详情页通栏图：纯装饰，不放任何文字 ----
   标题 + meta + 信息条已经在图下方那张白卡里了，图上再摆一份标题和描述
   是重复信息，而且两张标题纵向只隔一百多像素，看着像出了 bug。
   所以详情页用 .page-hd--plain：
   去掉左侧提亮层（那是给压在图上的标题补对比度用的，没文字就不需要），
   只留底部羽化衔接正文。 */
.page-hd--plain .page-hd-bg::after{display:none}
/* ---- 单页 / 意见反馈：标题整体右移 + 下沉 ----
   这两个页面通栏图上没有别的内容，标题贴左悬在图中央会显得很空。
   1) 右移：给 .wrap 加左内边距（原来靠 wrap 的 padding:0 24px 只有 24px，
      1600 视口下标题几乎顶在屏幕左沿）；
   2) 下沉：标题底距图底 = 图高的 30%（红框位置）。
      图高由 JS 实测写入 --hdH —— 因为 aspect-ratio 算出的高度会被
      max-height:640px 截断（超宽屏），纯 vw 换算在 2560 上会算出 235px
      把标题压出图外，必须按实测高度按比例算。
   /*   列表页/搜索页/详情页不用这个修饰类 —— 它们通栏图下缘还有卡片骑线，
   标题下沉会和下面的卡片打架。
   3) 30% 也是上限：正文卡骑线上提 bodyH/2 后顶边在图底上方约 130px，
      标题再下沉就会被卡片压住（实测 0.4 时标题被白卡盖掉一半）。 */
.page-hd--low{align-items:flex-end;padding-bottom:calc(var(--hdH, 500px) * .3)}
.page-hd--low .wrap{padding-left:clamp(24px,5.6vw,96px)}
/* 内页通栏标题：全站 18 个 page-h1 都是纯文字，
   所以这里只保留文字排版，不再为图标预留 img/svg 规则。 */
.page-h1{font-size:34px;color:#16305c;font-weight:800;display:flex;align-items:center;gap:12px;letter-spacing:1px}
.page-desc{font-size:14px;color:#5c7799;margin-top:10px;max-width:760px}
/* ========== 单页正文 ==========
   单页（关于我们 / 常见问题等）正文是后台富文本 HTML，
   排版由后台决定，这里只兜住可读性：正文容器、基础字号行高、
   标题/段落/列表/表格/链接/图片的默认样式，
   并限制图片最大宽度防止溢出。 */
.single-body{
    position:relative;z-index:6;
    /* 单页正文卡片骑在通栏图底边上，与列表页排序条/详情页标题卡同一套做法：
       上移自身高度的一半，中线落在图底。上移量由 JS 实测写入 --bodyH
       （单页正文长度差异极大，写死必然在长短页之间错位）。

       min() 是必需的几何保护：标题下沉了图高的 30%，卡片上移量一旦
       超过这个值就会把标题压住。窄屏（800px 图高只有 233px）必炸，
       实测标题被白卡盖掉 60px。所以上移量取「自身一半」和
       「图高 30% 减 20px 安全距」里的小值。
       --hdH 写在 .page-hd--low 上，单页正文卡是它的后代，能继承到。 */
    margin-top:calc(min(var(--bodyH, 320px) / 2, var(--hdH, 500px) * .3 - 20px) * -1);
    background:#fff;border:1px solid var(--line);
    border-radius:var(--r-lg);box-shadow:var(--sh);
    padding:34px 40px 38px;margin-bottom:44px;
}
.single-meta{
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    padding-bottom:18px;margin-bottom:24px;
    border-bottom:1px solid var(--line);
}
.single-time{
    display:inline-flex;align-items:center;gap:6px;
    font-size:12.5px;color:var(--ink-4);
}
.single-time svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
.single-content{
    font-size:15px;line-height:1.95;color:var(--ink-2);
    word-break:break-word;
}
/* 后台富文本常见标签兜底 */
.single-content h1{font-size:26px;color:var(--ink);font-weight:800;margin:6px 0 18px;line-height:1.45}
.single-content h2{font-size:21px;color:var(--ink);font-weight:800;margin:30px 0 14px;line-height:1.5}
.single-content h3{font-size:17.5px;color:var(--ink);font-weight:700;margin:24px 0 10px;line-height:1.6}
.single-content h4,
.single-content h5,
.single-content h6{font-size:15.5px;color:var(--ink);font-weight:700;margin:20px 0 8px}
.single-content p{margin:0 0 14px}
.single-content ul,
.single-content ol{margin:0 0 16px;padding-left:24px}
.single-content li{margin-bottom:7px}
.single-content img{max-width:100%;height:auto;border-radius:var(--r);display:block;margin:8px 0 16px}
.single-content a{color:var(--blue);text-decoration:none;border-bottom:1px solid rgba(38,115,232,.3);transition:border-color .2s}
.single-content a:hover{border-bottom-color:var(--blue)}
.single-content strong{color:var(--ink);font-weight:700}
.single-content blockquote{
    margin:0 0 16px;padding:12px 18px;
    background:#f5f8fd;border-left:3px solid var(--blue);border-radius:0 var(--r) var(--r) 0;
    color:var(--ink-3);
}
.single-content table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14px}
.single-content th,
.single-content td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.single-content th{background:#f5f8fd;color:var(--ink);font-weight:700}
.single-content pre{
    background:#1e2c44;color:#e6eefb;padding:14px 16px;border-radius:var(--r);
    overflow:auto;font-size:13px;line-height:1.7;margin:0 0 16px;
}
.single-content code{background:#f2f6fc;padding:1px 6px;border-radius:4px;font-size:13px;color:#c0392b}
.single-content pre code{background:none;color:inherit;padding:0}
.single-content hr{border:none;border-top:1px solid var(--line);margin:24px 0}
.single-empty{color:var(--ink-4);text-align:center;padding:30px 0;margin:0}

/* 同级单页互链 */
.single-sib{
    display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;
    margin-top:30px;padding-top:24px;border-top:1px solid var(--line);
}
.sib-label{font-size:13px;color:var(--ink-4);flex-shrink:0;padding-top:7px}
.sib-list{display:flex;flex-wrap:wrap;gap:9px;flex:1}
.sib-list a{
    display:inline-block;padding:6px 15px;border-radius:15px;
    background:#f2f6fc;font-size:13px;color:var(--ink-3);
    transition:all .2s;
}
.sib-list a:hover{background:var(--blue-soft);color:var(--blue)}
.sib-list a.on{background:var(--blue);color:#fff}

/* 排序工具条：和首页分类条一样「骑」在通栏图底边
   （上一半压图、下一半压白底），把下方网格整体提上来，
   消掉图与工具条之间那一大片空白。
   上移量 = 工具条自身高度，由 main.js 实测写入 --toolsH，
   换断点、改内边距都不用回来改数字。 */
.list-tools{
    position:relative;z-index:6;
    display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px;
    background:rgba(255,255,255,.86);
    -webkit-backdrop-filter:saturate(160%) blur(14px);
    backdrop-filter:saturate(160%) blur(14px);
    border:1px solid rgba(255,255,255,.9);
    border-radius:var(--r);padding:14px 18px;box-shadow:var(--sh);
    margin-top:calc(var(--toolsH, 62px) / -2);
}
/* 工具条上移后紧跟的子分类 Tab 也要贴上来，否则中间会留一条白缝 */
.list-tools + .wp-tabs{margin-top:-8px}
.list-tools input[type=text]{
    height:38px;border:1px solid var(--line);border-radius:19px;
    padding:0 18px;font-size:13.5px;color:var(--ink);background:#fafcff;
}
.list-tools input[type=text]:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px var(--blue-glow)}
.tools-label{font-size:13px;color:var(--ink-3)}
.list-tools select,.list-tools input[type=text]{
    height:32px;border:1px solid var(--line);border-radius:16px;
    padding:0 14px;font-size:13px;color:var(--ink-2);background:#fafcff;
}
.list-tools select:focus,.list-tools input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px var(--blue-glow)}
.tools-count{margin-left:auto;font-size:13px;color:var(--ink-4)}
.tools-count b{color:var(--blue)}

.pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:28px;flex-wrap:wrap}
.pager a,.pager span{
    min-width:34px;height:34px;padding:0 11px;border-radius:var(--r-sm);
    background:#fff;box-shadow:var(--sh);
    display:flex;align-items:center;justify-content:center;
    font-size:13.5px;color:var(--ink-2);transition:all .2s;
}
.pager a:hover{background:var(--blue);color:#fff;box-shadow:0 4px 12px var(--blue-glow)}
.pager .cur{background:var(--blue);color:#fff;font-weight:700;box-shadow:0 4px 12px var(--blue-glow)}
.pager svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ========== 详情页 ========== */
/* 参考图布局：标题 / meta / 信息条 全宽在最上，
   下面才是「左侧大图 + 右侧热门排行榜」两栏。 */
.view-wrap{display:grid;grid-template-columns:1fr 302px;gap:20px;align-items:start;margin-bottom:44px}
/* 左栏纵向两段：大图卡 + 相似推荐；右栏下载/最新/排行榜/标签云。
   grid-row / grid-column 显式写死，不靠源码顺序自动排 ——
   以后在中间插模块也不会把推荐区挤到右栏去。 */
.view-main{grid-column:1;grid-row:1;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh);overflow:hidden}
.view-rel{grid-column:1;grid-row:2;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh);padding:16px 18px 18px}
.view-side{grid-column:2;grid-row:1 / span 2}
/* ---- 右侧栏热门排行榜 ----
   li{flex:1 1 0} 是首页 .rank-box「拉伸填满等高」的设计，
   侧栏容器是 auto 高度，套过来会把每行压成 0、六条全叠在一起。
   这里解除 flex 拉伸，让行高由内容决定。 */
.side-box .rank-list{flex:none;justify-content:flex-start}
.side-box .rank-list li{flex:none;padding:10px 0}
.side-box .rk-thumb{align-self:stretch;width:74px;height:auto;max-height:52px;min-height:42px}

/* ---- 详情页头部：标题 + meta + 信息条 ----
   整块上移自身高度的一半，中线骑在通栏图底边上（与首页 .wp-cats、
   列表页 .list-tools 同一套做法）。上移量由 JS 实测写入 --headH，
   不写死是因为「来源」字段有无会影响卡片高度。 */
.view-head{
    position:relative;z-index:6;
    background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh);
    padding:20px 26px 18px;
    margin-top:calc(var(--headH, 150px) / -2);
    margin-bottom:20px;
}
.view-head .view-h1{margin-bottom:11px}
.view-head .view-meta{padding-bottom:0;margin-bottom:16px;border-bottom:0}
/* 蓝色信息条：不再出血到卡片外，两侧留边距由白卡包住；
   高度也收紧，padding 从 18/20 降到 11/16，只把文字裹住。 */
.view-head .view-dl{
    margin:0;
    padding:11px 16px;
    border-radius:var(--r);
    background:linear-gradient(120deg,#eef5ff,#e6efff);
}

/* 大图容器：不再限死高度，改成按图片自身比例自适应宽度撑满。
   原来 max-height:74vh + img{max-height:74vh} 是为竖图设计的，
   遇到 1920x1080 这类宽图会按高度缩放，两侧露出一大片黑边。
   现在容器 padding-top 用 JS 写入图片真实宽高比，宽图撑满不留边；
   但宽图按比例会太高（1080p 全宽能撑到 900px+），所以再用 max-height 封顶，
   超出部分由 object-fit:contain 居中留黑边 —— 这时的黑边是上下、且很窄，
   比之前左右两大片好得多。 */
.view-pic{
    background:#0f1420;position:relative;width:100%;
    padding-top:var(--picAr,56.25%);
    min-height:220px;max-height:min(78vh,820px);overflow:hidden;
}
.view-pic img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:contain;display:block;
}
/* 只有一张图时不显示缩略图条（.view-nav:has(> img:only-child) 兼容性一般，用 JS 加类更稳） */
.view-nav{display:flex;gap:8px;padding:12px 15px;background:#fff;border-top:1px solid var(--line);overflow-x:auto}
.view-nav.hide{display:none}
.view-nav img{width:88px;height:58px;object-fit:cover;border-radius:var(--r-sm);cursor:pointer;opacity:.65;transition:all .22s;border:2px solid transparent;flex-shrink:0}
.view-nav img:hover{opacity:1}
.view-nav img.on{opacity:1;border-color:var(--blue)}
.view-body{padding:24px 28px 28px}
.view-h1{font-size:25px;color:var(--ink);font-weight:800;line-height:1.35;margin-bottom:11px}
.view-meta{display:flex;flex-wrap:wrap;gap:9px 20px;font-size:13px;color:var(--ink-3);padding-bottom:17px;border-bottom:1px solid var(--line);margin-bottom:19px}
.view-meta span{display:flex;align-items:center;gap:5px}
.view-meta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.view-meta b{color:var(--ink);font-weight:600}
.view-dl{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;
    background:var(--blue-soft);border-radius:var(--r);padding:18px 20px;margin-bottom:22px;
}
.view-dl div{font-size:13.5px;color:var(--ink-2);line-height:1.4}
.view-dl div span{display:block;font-size:11.5px;color:var(--ink-4);margin-bottom:4px;line-height:1.3}
.view-dl div b{color:var(--ink);font-weight:600}
.view-act{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:24px}
.btn-dl{
    display:inline-flex;align-items:center;gap:7px;
    padding:12px 34px;border-radius:24px;
    background:linear-gradient(140deg,#4a92fb,#2673e8);
    color:#fff;font-size:14px;font-weight:600;
    box-shadow:0 6px 18px rgba(38,115,232,.3);transition:all .25s;
}
.btn-dl:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(38,115,232,.4)}
.btn-dl svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.btn-fav{
    display:inline-flex;align-items:center;gap:7px;
    padding:12px 26px;border-radius:24px;
    background:#fff;border:1px solid var(--line);color:var(--ink-2);
    font-size:14px;transition:all .25s;
}
.btn-fav:hover,.btn-fav.on{border-color:#ff5d7a;color:#ff5d7a;background:#fff5f7}
.btn-fav.on svg{fill:#ff5d7a;stroke:#ff5d7a}
.btn-fav svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.btn-fav.loading{pointer-events:none;opacity:.6}
.view-desc{font-size:14.5px;color:var(--ink-2);line-height:1.9}
.view-desc p{margin-bottom:12px}
/* ---- 相似壁纸推荐（已移入左栏，贴在大图卡下方）----
   原来这块是整幅通栏放在页面最底部，左边被侧栏拉得很空、
   右边的排行榜/标签云又多又长，两边高度差一大截。
   现在它占左栏宽度、与右栏顶部对齐，两栏底部也基本齐平。
   标题栏复用 .rank-hd 的图标块样式，两边观感统一。 */
.rel-hd{display:flex;align-items:center;gap:7px;margin-bottom:12px;font-size:15px;font-weight:800;color:var(--ink);flex-shrink:0}
.rel-hd i{
    width:18px;height:18px;border-radius:5px;
    background:linear-gradient(140deg,#4a92fb,#2673e8);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.rel-hd i svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* 标题栏右边的「更多」已按要求去掉，原来那条 .rel-hd .sec-more 规则一并清除。
   侧栏 .rank-hd 里的「更多」不受影响，它走的是 .rank-hd .sec-more。 */
/* 左栏宽度约 1230px（1600 视口减去 302 右栏和 20 间距），
   固定 4 列：数据取 8 条，正好排成两排四列。
   5 列会把每张压到 220px 以下、标题挤成省略号；3 列 8 条排不满两排会留空位。
   行间距比列间距大一档，两排之间才分得开、不会看成一片。 */
.wp-grid--rel{grid-template-columns:repeat(4,1fr);gap:14px 14px;row-gap:18px}

.side-box{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh);padding:16px;margin-bottom:16px}

/* ---- 侧栏下载卡：按钮 + 提示，骑在排行榜上方 ---- */
.side-dl{
    background:linear-gradient(150deg,#4a92fb,#2673e8 55%,#1c5fc4);
    border-radius:var(--r-lg);padding:18px 16px 15px;margin-bottom:16px;
    box-shadow:0 6px 20px rgba(38,115,232,.26);
    display:flex;flex-direction:column;align-items:center;gap:10px;
}
.side-dl .btn-dl{
    width:100%;justify-content:center;
    background:#fff;color:var(--blue);box-shadow:none;
    font-size:14.5px;font-weight:700;padding:12px 0;
}
.side-dl .btn-dl:hover{background:#f4f8ff;box-shadow:none;transform:translateY(-1px)}
.side-dl .btn-fav{
    width:100%;justify-content:center;
    background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5);
    color:#fff;font-size:13.5px;padding:10px 0;
}
.side-dl .btn-fav:hover{background:rgba(255,255,255,.26);border-color:#fff;color:#fff}
.side-dl-tip{margin:2px 0 0;font-size:12px;color:rgba(255,255,255,.82);text-align:center;line-height:1.5}

/* ---- 侧栏迷你列表（最新发布）---- */
.mini-list li{
    display:flex;align-items:center;gap:11px;
    padding:9px 0;border-bottom:1px solid var(--line);
}
.mini-list li:last-child{border-bottom:0;padding-bottom:0}
.mini-list li:first-child{padding-top:0}
.mini-thumb{
    flex-shrink:0;width:62px;height:40px;border-radius:var(--r-sm);
    overflow:hidden;background:#e4eaf3;display:block;
}
.mini-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.mini-list li:hover .mini-thumb img{transform:scale(1.08)}
.mini-info{flex:1;min-width:0}
.mini-t{
    display:block;font-size:13px;color:var(--ink);line-height:1.45;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:3px;
}
.mini-list li:hover .mini-t{color:var(--blue)}
.mini-m{font-size:11.5px;color:var(--ink-4)}

/* ---- 侧栏标签云 ---- */
.side-tags{padding-bottom:18px}
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px}
.tag-pill{
    display:inline-block;padding:5px 11px;border-radius:13px;
    background:var(--blue-soft);color:var(--blue-dark);
    line-height:1.4;transition:all .2s;
    border:1px solid transparent;
}
.tag-pill:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.side-h{
    display:flex;align-items:center;gap:6px;font-size:15.5px;font-weight:800;
    color:var(--ink);margin-bottom:13px;padding-bottom:11px;
    border-bottom:1px solid var(--line);
}
.side-h svg{width:15px;height:15px;fill:var(--blue)}
.side-h .sec-more{font-size:12px}

/* ========== 空状态 ========== */
.empty{padding:70px 20px;text-align:center}
.empty-ico{
    width:78px;height:78px;border-radius:50%;margin:0 auto 18px;
    background:var(--blue-soft);display:flex;align-items:center;justify-content:center;
}
.empty-ico svg{width:36px;height:36px;stroke:var(--blue-light);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.empty h3{font-size:17px;color:var(--ink);margin-bottom:8px}
.empty p{font-size:13.5px;color:var(--ink-4);margin-bottom:18px}
.empty .btn-primary{
    display:inline-flex;align-items:center;gap:6px;padding:10px 26px;border-radius:22px;
    background:var(--blue);color:#fff;font-size:13.5px;font-weight:600;transition:all .25s;
}
.empty .btn-primary:hover{background:var(--blue-dark)}
.empty .btn-primary svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}

/* ========== 通用动效 ========== */
.wp-anim{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.wp-anim.in{opacity:1;transform:translateY(0)}

/* ========== 响应式 ==========
   容器最大 1600px，所以断点整体上移：
   1500 以下先收窄边距，1360 以下分类条换 4 列，1100 以下导航收进汉堡菜单。 */
@media (max-width:1500px){
    .feat-grid{grid-auto-rows:215px}
    .wp-grid.g6{grid-template-columns:repeat(5,1fr)}
}
/* 顶栏右侧区：导航项宽度随视口变窄而占满，固定左移会把搜索框顶到导航身上
   （实测 1366px 下 gap=-30px、1280px 下 gap=-98px，直接压字）。
   所以位移和搜索框宽度必须跟着断点阶梯式收缩，保证导航右边缘到搜索框左边缘
   始终留正间距：
     >1400px  位移 -170px / 宽 250px（gap 约 200px）
     ≤1400px 位移 -60px  / 宽 190px（gap 约 90px）
     ≤1240px 位移 -40px  / 宽 176px（gap 约 60px）
     ≤1100px 导航收进汉堡，位移归零 / 宽 168px */
@media (max-width:1400px){
    .wp-head-right{transform:translateX(-60px)}
    .hd-search{width:190px}
}
@media (max-width:1360px){
    .wrap{padding:0 20px}
    .wp-cats-in{grid-template-columns:repeat(4,1fr)}
    .cat-item:nth-child(5)::before{display:none}
    .wp-grid.g6{grid-template-columns:repeat(4,1fr)}
    .hero-h1{font-size:54px}
    .feat-wrap{grid-template-columns:1fr 300px}
    .feat-grid{grid-auto-rows:200px}
}
@media (max-width:1240px){
    .wp-grid{grid-template-columns:repeat(3,1fr)}
    .hero-h1{font-size:46px}
    .brand-slogan{display:none}
    .wp-head-right{transform:translateX(-40px)}
    .hd-search{width:176px}
}
@media (max-width:1100px){
    .feat-wrap{grid-template-columns:1fr}
    /* 单列布局下排行榜在精选区下方，脱离对齐约束，恢复自然高度。
       必须同时解除 li 的 flex:1 1 0，否则条目会被压扁到 20px、缩略图溢出。 */
    .rank-box{flex:none}
    .rank-list{justify-content:flex-start}
    .rank-list li{flex:none;padding:10px 0}
    .rk-thumb{align-self:auto;height:50px;min-height:0}
    /* 右侧栏在单列布局下落到榜单下方，脱离等高约束后恢复两栏折行 */
    .view-wrap{grid-template-columns:1fr}
    /* 单列后显式定位必须全部解除：grid-row/grid-column 留着会让侧栏
       被钉在第 2 列（不存在的列）而消失。顺序恢复成
       大图 → 相似推荐 → 侧栏。 */
    .view-main,.view-rel,.view-side{grid-column:auto;grid-row:auto}
    .wp-nav{display:none}
    .hd-toggle{display:flex}
    /* 导航收进汉堡菜单后，右侧区不再需要左移让位，
       位移归零、搜索框继续收窄，保证小屏下不挤压登录按钮。 */
    .wp-head-right{transform:none}
    .hd-search{width:168px}
    .wp-header.nav-open .wp-nav{
        display:block;position:fixed;left:0;right:0;top:64px;
        background:#fff;box-shadow:var(--sh-hover);padding:8px 0;
        max-height:calc(100vh - 64px);overflow-y:auto;
    }
    .wp-header.nav-open .wp-nav ul{flex-direction:column;align-items:stretch}
    .wp-header.nav-open .wp-nav a{height:44px;line-height:44px;color:var(--ink-2);padding:0 22px}
    .wp-header.nav-open .wp-nav a.on{color:var(--blue)}
    .wp-header.nav-open .wp-nav .has-sub .sub{
        position:static;opacity:1;visibility:visible;transform:none;
        box-shadow:none;padding:0 0 0 30px;background:transparent;display:none;
    }
    .wp-header.nav-open .wp-nav .has-sub:hover .sub{display:block}
    .wp-header.nav-open .wp-mask{display:block}
}
@media (max-width:900px){
    .hd-search{display:none}
    .wp-cats-in{grid-template-columns:repeat(3,1fr);padding:10px 0}
    .cat-item{padding:6px 30px 6px 14px}
    .cat-item:nth-child(4)::before{display:none}
    .wp-grid,.wp-grid.g6{grid-template-columns:repeat(3,1fr)}
    /* 平板单列后 4 列太窄，精选区降为 2 列 + 大图通栏 */
    .feat-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
    .feat-grid .big{grid-column:span 2;grid-row:span 1}
    .hero-h1{font-size:38px}
    .hero-en{font-size:16px;letter-spacing:2.6px;word-spacing:1.6px}
    /* 窄屏按比例撑高会把通栏压到150px 以下，标题和描述挤在一起。
       这里关掉 aspect-ratio，改用固定 padding 定高，图片照旧 cover（此时允许轻微裁切）。
       padding-top 必须 > 64px（顶栏高度）—— 因为 .page-hd 有 margin-top:-64px，
       标题的实际位置 = padding-top - 64，写 104 会让标题被顶栏压住 24px。 */
    .page-hd{padding:132px 0 58px;aspect-ratio:auto;max-height:none}
    /* 窄屏下 aspect-ratio 已关掉，图高由 padding 固定（132+58-64=126px 可见区），
       .page-hd--low 的 --hdH 比例下沉会把标题压出图外，这里退回居中。 */
    .page-hd--low{align-items:center;padding-bottom:58px}
    .page-h1{font-size:27px}
    .wp-cta{padding:30px 24px;flex-direction:column;align-items:center;text-align:center;min-height:210px;background-position:center 60%;margin:-14px 0 8px}
    /* 单列后左右提亮层失效，改整体压一层薄白，既保证文字可读又透得出云海 */
    .wp-cta::before{background:linear-gradient(0deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.6) 52%,rgba(255,255,255,.44) 100%)}
    .wp-cta::after{background:radial-gradient(120% 130% at 50% 62%,rgba(255,255,255,.72) 0%,rgba(255,255,255,0) 72%)}
    .wp-cta-in{text-align:center}
    /* 窄屏英文换行后居中会歪，改左对齐与中文标题同一起始线 */
    .wp-cta-en{text-align:left}
    .wp-foot-nav{gap:30px}
    /* 平板档二维码跟着缩小，给左边三列链接让出宽度 */
    .foot-qr{gap:12px}
    .qr-box{width:76px;height:76px;padding:6px}
    .qr-t{font-size:11px}
    .single-body{padding:26px 24px 30px;margin-top:0}
    .single-content{font-size:14.5px;line-height:1.9}
    .single-content h1{font-size:22px}
    .single-content h2{font-size:19px}
    .single-content h3{font-size:16.5px}
}
@media (max-width:680px){
    .wrap{padding:0 16px}
    .wp-cats-in{grid-template-columns:repeat(2,1fr);padding:9px 0}
    .cat-item{padding:6px 28px 6px 11px;gap:9px}
    .cat-item:nth-child(odd)::before{display:none}
    .cat-thumb{width:64px;height:64px;border-radius:9px}
    .cat-arrow{right:10px}
    .cat-name{font-size:14.5px}
    .cat-sub{font-size:11.5px}
    .feat-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px}
    .feat-grid .big{grid-column:span 2;grid-row:span 1}
    .wp-grid,.wp-grid.g6{grid-template-columns:repeat(2,1fr);gap:12px}
    /* 热门推荐横排条：窄屏 3 列，卡片内边距收紧 */
    .hot-list{grid-template-columns:repeat(3,1fr);gap:10px}
    .hot-item{padding:6px}
    .hot-thumb{margin-bottom:7px}
    .view-hot{padding:14px 14px 16px;margin-bottom:14px}
    .hero-h1{font-size:29px;letter-spacing:1px}
    .hero-en{font-size:14px;letter-spacing:1.8px;word-spacing:1px}
    .hero-desc{font-size:13px}
    .hero-search{height:46px}
    .hero-search button{width:46px;height:46px}
    .hero-search input{padding-left:18px;font-size:14px}
    .wp-hero{min-height:520px}
    .wp-hero-in{padding:112px 16px 120px}
    .sec-t{font-size:20px}
    .sec-sub{display:none}
    .page-h1{font-size:22px}
    .view-body{padding:18px 16px 22px}
    .view-h1{font-size:20px}
    .wp-cta-t{font-size:20px}
    .wp-foot-nav{gap:22px;width:100%}
    /* 二维码在窄屏没法继续贴右，改为左对齐排在新行 */
    .foot-qr{margin-left:0;width:100%;justify-content:flex-start}
    .pager a,.pager span{height:30px;min-width:30px;padding:0 8px;font-size:12.5px}
    .to-top{right:14px;bottom:16px;width:38px;height:38px}
}
@media (max-width:420px){
    .wp-grid,.wp-grid.g6{grid-template-columns:1fr}
    .wp-header .wrap{gap:12px}
}
/* ========== 登录弹层 ========== */
.wp-login{position:fixed;inset:0;z-index:80;display:none}
.wp-login.show{display:block}
.wl-mask{position:absolute;inset:0;background:rgba(20,32,56,.46);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.wl-box{
    position:relative;width:100%;max-width:400px;margin:9vh auto 0;
    background:#fff;border-radius:var(--r-lg);box-shadow:0 24px 60px rgba(15,30,60,.26);
    padding:28px 30px 26px;animation:wlIn .28s ease;
}
@keyframes wlIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.wl-close{
    position:absolute;right:14px;top:10px;width:30px;height:30px;border-radius:50%;
    font-size:23px;line-height:1;color:var(--ink-4);transition:all .2s;
}
.wl-close:hover{background:var(--blue-soft);color:var(--blue)}
.wl-tabs{display:flex;gap:6px;margin-bottom:20px;background:#f4f7fc;padding:4px;border-radius:22px}
.wl-tab{
    flex:1;height:34px;border-radius:18px;font-size:14px;color:var(--ink-3);
    font-weight:600;transition:all .24s;
}
.wl-tab.on{background:#fff;color:var(--blue);box-shadow:0 2px 8px rgba(31,60,120,.1)}
/* 三个面板（登录/注册/找回密码）默认隐藏，靠 .on 切换。
   缺这段会导致三个 form 同时渲染、全部堆在弹窗里。 */
.wl-pane{display:none}
.wl-pane.on{display:block;animation:wlPane .26s ease}
@keyframes wlPane{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.wl-field{
    display:flex;align-items:center;gap:10px;height:44px;margin-bottom:13px;
    padding:0 14px;border-radius:var(--r);
    background:#f7f9fc;border:1.5px solid transparent;transition:all .22s;
}
.wl-field:focus-within{background:#fff;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-glow)}
.wl-ico{width:16px;height:16px;stroke:var(--ink-4);fill:none;stroke-width:2;flex-shrink:0;transition:stroke .22s}
.wl-field:focus-within .wl-ico{stroke:var(--blue)}
.wl-field input{flex:1;font-size:14px;color:var(--ink)}
.wl-field input::placeholder{color:var(--ink-4)}
.wl-eye{cursor:pointer;display:flex;flex-shrink:0}
.wl-eye svg{width:16px;height:16px;stroke:var(--ink-4);fill:none;stroke-width:2}
.wl-eye:hover svg{stroke:var(--blue)}
.wl-field-code .wl-send{
    flex-shrink:0;font-size:12.5px;color:var(--blue);padding:5px 11px;
    border-radius:14px;background:var(--blue-soft);transition:all .2s;
}
.wl-field-code .wl-send:hover{background:var(--blue);color:#fff}
.wl-field-code .wl-send:disabled{color:var(--ink-4);background:#f0f3f8;cursor:not-allowed}
.wl-agree{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;color:var(--ink-3);margin-bottom:14px;cursor:pointer}
.wl-agree input{margin-top:3px;accent-color:var(--blue)}
.wl-msg{font-size:13px;color:#e8514a;min-height:19px;margin-bottom:9px}
.wl-submit{
    width:100%;height:44px;border-radius:var(--r);
    background:linear-gradient(140deg,#4a92fb,#2673e8);
    color:#fff;font-size:15px;font-weight:600;letter-spacing:2px;
    box-shadow:0 6px 18px rgba(38,115,232,.28);transition:all .24s;
}
.wl-submit:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(38,115,232,.36)}
.wl-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.wl-foot{display:flex;align-items:center;gap:13px;font-size:12.5px;color:var(--ink-4);margin-top:15px}
.wl-foot a{color:var(--blue)}
.wl-forgot{margin-left:auto}
@media (max-width:480px){
    .wl-box{margin:5vh 16px 0;padding:24px 20px 22px}
}

/* ========== 列表页排序按钮 ========== */
.tool-btn{
    height:32px;padding:0 15px;border-radius:16px;
    background:#f2f5fa;font-size:13px;color:var(--ink-3);
    display:inline-flex;align-items:center;transition:all .22s;
}
.tool-btn:hover{color:var(--blue);background:var(--blue-soft)}
.tool-btn.on{background:var(--blue);color:#fff;font-weight:600;box-shadow:0 4px 12px var(--blue-glow)}

/* ========== 留言板 ==========
   栏目 current_channel=8（留言模型），数据在 ey_guestbook / ey_guestbook_attr，
   不走 archives，所以这里不套 .wp-grid。
   布局：左侧提交表单 + 右侧留言列表，和「详情页两栏」的视觉节奏一致。 */
.gb-bar{
    position:relative;z-index:6;
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    margin-top:calc(var(--toolsH, 62px) / -2);
    margin-bottom:26px;
    background:rgba(255,255,255,.86);
    -webkit-backdrop-filter:saturate(160%) blur(14px);
    backdrop-filter:saturate(160%) blur(14px);
    border:1px solid rgba(255,255,255,.9);
    border-radius:var(--r);padding:15px 20px;box-shadow:var(--sh);
}
.gb-bar-t{font-size:17px;font-weight:800;color:#1b3a6b;letter-spacing:.5px}
.gb-bar-d{font-size:13px;color:var(--ink-3)}

.gb-wrap{display:grid;grid-template-columns:400px 1fr;gap:26px;align-items:start}
/* 联系页反过来：联系方式在左，留言在右 */
.ct-wrap{display:grid;grid-template-columns:1fr 420px;gap:26px;align-items:start}
@media (max-width:1100px){.ct-wrap{grid-template-columns:1fr}}

.gb-form-box,.gb-list-box{
    background:#fff;border:1px solid var(--line);
    border-radius:var(--r-lg);box-shadow:var(--sh);
    padding:24px 26px 26px;
}
.gb-card-h{
    display:flex;align-items:center;gap:9px;
    font-size:16px;font-weight:700;color:#1b3a6b;
    padding-bottom:16px;margin-bottom:20px;
    border-bottom:1px solid var(--line);
}
.gb-card-h svg{width:19px;height:19px;fill:none;stroke:var(--blue);flex-shrink:0}

/* 联系页联系方式卡片 */
.ct-list{display:flex;flex-direction:column;gap:2px}
.ct-row{display:flex;align-items:flex-start;gap:13px;padding:13px 0;border-bottom:1px dashed var(--line)}
.ct-row:last-child{border-bottom:0}
.ct-ico{
    flex:0 0 38px;width:38px;height:38px;border-radius:10px;
    background:var(--blue-soft);color:var(--blue);
    display:flex;align-items:center;justify-content:center;
}
.ct-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ct-body{min-width:0;flex:1}
.ct-label{font-size:12.5px;color:var(--ink-4);margin-bottom:3px}
.ct-val{font-size:14.5px;color:var(--ink);line-height:1.6;word-break:break-all}
.ct-val a{color:var(--blue);transition:color .2s}
.ct-val a:hover{color:var(--blue-dark);text-decoration:underline}
.ct-qr{margin-top:22px;padding-top:20px;border-top:1px solid var(--line);text-align:center}
.ct-qr img{width:150px;height:150px;object-fit:contain;border:1px solid var(--line);border-radius:12px;background:#fff}
.ct-qr span{display:block;margin-top:10px;font-size:12.5px;color:var(--ink-4)}

/* 表单自动回退提示（联系页自动借用其他栏目的留言字段时显示） */
.gb-hint{
    font-size:12.5px;line-height:1.6;color:#8a6a1f;
    background:#fff8e8;border:1px solid #f5e0ab;
    border-radius:8px;padding:9px 12px;margin-bottom:16px;
}

/* 表单字段 */
.gb-field{margin-bottom:16px}
.gb-label{
    display:block;font-size:13px;color:var(--ink-2);
    margin-bottom:7px;font-weight:600;
}
.gb-ctrl{position:relative}
/* 官方 guestbookform 标签输出的 .eyou_form_* 是裸标签没有样式，
   这里统一接管：必须给明确边框和背景，否则输入框在白底上完全看不见。 */
.gb-ctrl .eyou_form_attr{display:block}
.gb-ctrl .eyou_form_text,
.gb-ctrl .eyou_form_select,
.gb-ctrl input[type=text],
.gb-ctrl input[type=tel],
.gb-ctrl input[type=email],
.gb-ctrl textarea{
    width:100%;height:42px;
    border:1px solid #d6e0ee;border-radius:var(--r-sm);
    padding:0 14px;font-size:14px;color:var(--ink);
    background:#fafcff;transition:all .22s;
    font-family:inherit;
}
.gb-ctrl textarea{
    height:auto;min-height:132px;padding:12px 14px;
    line-height:1.75;resize:vertical;
}
.gb-ctrl .eyou_form_text:focus,
.gb-ctrl .eyou_form_select:focus,
.gb-ctrl input:focus,
.gb-ctrl textarea:focus{
    outline:none;border-color:var(--blue);background:#fff;
    box-shadow:0 0 0 3px var(--blue-glow);
}
.gb-ctrl label{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-2);margin-right:18px}
.gb-ctrl input[type=radio],
.gb-ctrl input[type=checkbox]{width:15px;height:15px;accent-color:var(--blue);cursor:pointer}
.gb-ctrl input[type=file]{
    font-size:13px;color:var(--ink-2);padding:9px 0;
}
/* 单行文本的留言字段给足高度感：只有一个文本框时页面不至于太空 */
.gb-input{width:100%;height:42px;border:1px solid #d6e0ee;border-radius:var(--r-sm);padding:0 14px;font-size:14px;background:#fafcff;font-family:inherit;transition:all .22s}
.gb-input:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px var(--blue-glow)}

.gb-vcode{display:flex;align-items:center;gap:12px}
.gb-vcode img{height:42px;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer}
.gb-novcode{font-size:13px;color:var(--ink-4)}

.gb-submit{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:22px}
.gb-btn{
    height:46px;padding:0 30px;border:none;border-radius:var(--r-sm);
    background:var(--blue);color:#fff;font-size:15px;font-weight:600;
    display:inline-flex;align-items:center;gap:9px;cursor:pointer;
    font-family:inherit;transition:all .22s;
    box-shadow:0 6px 18px var(--blue-glow);
}
.gb-btn svg{width:17px;height:17px;fill:none;stroke:currentColor}
.gb-btn:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 9px 24px var(--blue-glow)}
.gb-btn:active{transform:translateY(0)}
.gb-tip{font-size:12.5px;color:var(--ink-4)}
.gb-empty{
    font-size:13.5px;color:var(--ink-4);text-align:center;
    padding:30px 10px;background:#f7fafe;border-radius:var(--r-sm);
}

/* 留言列表 */
.gb-list{display:flex;flex-direction:column;gap:14px;max-height:none}
.gb-item{
    padding:16px 18px;
    background:#f8fbff;border:1px solid #e8f0fb;border-radius:var(--r);
    transition:border-color .22s,box-shadow .22s;
}
.gb-item:hover{border-color:#d3e3f8;box-shadow:0 4px 16px rgba(31,60,120,.06)}
.gb-item-h{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.gb-item-ava{
    width:32px;height:32px;border-radius:50%;flex-shrink:0;
    background:var(--blue-soft);color:var(--blue);
    display:flex;align-items:center;justify-content:center;
}
.gb-item-ava svg{width:17px;height:17px;fill:none;stroke:currentColor}
.gb-item-no{font-size:13.5px;font-weight:700;color:#1e2c44}
.gb-item-time{margin-left:auto;font-size:12.5px;color:var(--ink-4)}
.gb-item-b{display:flex;flex-direction:column;gap:7px}
.gb-item-txt{font-size:14px;color:var(--ink-2);line-height:1.8;word-break:break-word}
.gb-item-tag{
    display:inline-block;align-self:flex-start;
    font-size:12.5px;color:var(--ink-3);
    background:#fff;border:1px solid var(--line);
    border-radius:13px;padding:3px 11px;
}
.gb-item-reply{
    margin-top:12px;padding:11px 14px;
    background:#fff;border-left:3px solid var(--blue);
    border-radius:0 var(--r-sm) var(--r-sm) 0;
    font-size:13.5px;color:var(--ink-2);line-height:1.75;
}
.gb-item-reply b{color:var(--blue);font-weight:700}

.gb-none{text-align:center;padding:56px 20px;color:var(--ink-4)}
.gb-none svg{width:52px;height:52px;fill:none;stroke:#c8d8ee;margin-bottom:14px}
.gb-none p{font-size:15px;color:var(--ink-3);margin-bottom:6px}
.gb-none span{font-size:13px}

.gb-count{
    margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
    font-size:13px;color:var(--ink-4);text-align:center;
}
@media (max-width:1100px){
    .gb-wrap{grid-template-columns:1fr}
}
@media (max-width:680px){
    .gb-bar-t{font-size:15.5px}
    .gb-bar-d{font-size:12.5px}
    /* 窄屏图高只有 126px，标题已退回居中，横条再上移就会盖住标题 */
    .gb-bar{margin-top:0}
    .gb-form-box,.gb-list-box{padding:20px 18px 22px}
}

/* ========== 分页（EyouCMS pagelist 输出 <li><a>，外层由 .pagination 承载） ========== */
.wp-main .pagination,
.pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:28px;flex-wrap:wrap;padding:0;list-style:none}
.pagination li{min-width:34px}
.pagination li a{
    min-width:34px;height:34px;padding:0 11px;border-radius:var(--r-sm);
    background:#fff;box-shadow:var(--sh);
    display:flex;align-items:center;justify-content:center;
    font-size:13.5px;color:var(--ink-2);transition:all .2s;
}
.pagination li a:hover{background:var(--blue);color:#fff;box-shadow:0 4px 12px var(--blue-glow)}
.pagination li.active a{background:var(--blue);color:#fff;font-weight:700;box-shadow:0 4px 12px var(--blue-glow)}
.pagination li a.s-disabled,.pagination li.s-disabled a{color:var(--ink-4);pointer-events:none;box-shadow:none;background:#fff}