/* ==========================================================
   手工客 移动端  index.css —— 大图 Feed 流 + 移动公共 header/footer
   ========================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#dde1e6}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:#f3f5f8;color:#222;font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;word-break:break-word;max-width:640px;margin:0 auto;min-height:100vh;box-shadow:0 0 24px rgba(0,0,0,.08)}
a{text-decoration:none;color:inherit;-webkit-tap-highlight-color:rgba(0,0,0,0)}
img{display:block;border:0}
i,em{font-style:normal}
ul,ol{list-style:none}

/* ========== 公共 header ========== */
header{position:sticky;top:0;z-index:100;height:46px;padding:0 12px;background:#fff;border-bottom:1px solid #eef1f5;display:flex;align-items:center}
header .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#2f7fe8,#58b3ff);color:#fff;font-size:20px;font-weight:800;font-style:italic;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(47,127,232,.4),inset 0 1px 0 rgba(255,255,255,.4);position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
header .logo:hover{transform:scale(1.1) rotate(-6deg);box-shadow:0 4px 10px rgba(47,127,232,.5)}
header .logo::after{content:"";position:absolute;top:-50%;bottom:-50%;left:-70%;width:45%;transform:rotate(20deg);background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));animation:logoShine 3.2s ease-in-out infinite}
@keyframes logoShine{0%{left:-70%}55%{left:130%}100%{left:130%}}
header .head-txt{font-size:19px;font-weight:800;margin-left:10px;flex:1;letter-spacing:1px;background:linear-gradient(90deg,#2569d0,#5cb3ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
header #menuicon{display:block;width:24px;height:24px;cursor:pointer;position:relative;margin-left:12px;line-height:0}
header #menuicon::before,header #menuicon::after{content:"";position:absolute;left:1px;right:1px;height:2px;background:#2a6fd1;border-radius:1px}
header #menuicon::before{top:7px;box-shadow:0 6px 0 #2a6fd1}
header #menuicon::after{top:19px}
header #menuicon:hover::before,header #menuicon:hover::after{background:#1b52b8}
header #menuicon:hover::before{box-shadow:0 6px 0 #1b52b8}
header #searchicon{display:block;width:24px;height:24px;cursor:pointer;position:relative;margin-left:16px;line-height:0}
header #searchicon::before{content:"";position:absolute;top:1px;left:2px;width:12px;height:12px;border:2px solid #2a6fd1;border-radius:50%}
header #searchicon::after{content:"";position:absolute;top:13px;left:13px;width:10px;height:2px;background:#2a6fd1;transform:rotate(45deg);transform-origin:0 50%;border-radius:1px}
header #searchicon:hover::before{border-color:#1b52b8}
header #searchicon:hover::after{background:#1b52b8}

/* 分类导航 */
#nav{position:sticky;top:46px;z-index:90;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.05);overflow:hidden}
#nav ul{display:flex;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
#nav ul::-webkit-scrollbar{display:none}
#nav li a{display:inline-block;padding:0 14px;line-height:40px;font-size:14px;color:#444}
#nav li.on a{color:#358ff0;font-weight:600}
#nav li a:active{color:#358ff0;font-weight:600}
#nav li.navdown,#nav li.navup{} 

/* 菜单弹层 */
#menu{display:none;position:fixed;top:0;bottom:0;left:50%;right:auto;width:100%;max-width:640px;transform:translateX(-50%);z-index:200;background:#fff;overflow:auto}
#menu.active{display:block}
#menu .menu-grid{padding:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
#menu .menu-grid a{display:block;padding:12px;text-align:center;background:#f5f7fa;border-radius:8px;font-size:14px;color:#333}
#menu .menu-grid a:active{background:#358ff0;color:#fff}

/* 搜索弹层 */
#search{display:none;position:fixed;top:0;left:50%;right:auto;width:100%;max-width:640px;transform:translateX(-50%);z-index:300;background:#fff;padding:8px 12px;box-shadow:0 2px 8px rgba(0,0,0,.1)}
#search.active{display:block}
#search .searchbox{display:flex;align-items:center;height:38px;background:#f1f3f6;border-radius:19px;padding-left:14px}
#search .key{flex:1;border:0;outline:none;background:transparent;font-size:14px}
#search .searchsub{width:36px;height:34px;border:0;cursor:pointer;position:relative;background:transparent;margin-right:4px}
#search .searchsub::before{content:"";position:absolute;top:8px;left:9px;width:13px;height:13px;border:2px solid #358ff0;border-radius:50%}
#search .searchsub::after{content:"";position:absolute;bottom:6px;left:22px;width:9px;height:2px;background:#358ff0;transform:rotate(45deg);border-radius:1px}
#search #searchclose{flex:0 0 auto;padding:0 10px;color:#358ff0;font-size:14px;cursor:pointer}
#search .searchbg{display:none}

/* ========== 公共 footer ========== */
footer{background:#fff;border-top:1px solid #eef1f5;padding:22px 16px;text-align:center;color:#999;font-size:12px;line-height:1.9;margin-top:14px}
footer a{color:#666}
footer a:active{color:#358ff0}
#gotop{position:fixed;right:16px;bottom:60px;width:40px;height:40px;border-radius:50%;background:#358ff0;box-shadow:0 2px 6px rgba(0,0,0,.25);cursor:pointer;z-index:80;display:none}
#gotop::before{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;border-top:2px solid #fff;border-left:2px solid #fff;transform:translate(-50%,-30%) rotate(45deg)}
#gotop.show{display:block}
/* 宽屏(≥640px)下回到顶部相对内容区右侧 */
@media (min-width:640px){#gotop{left:50%;right:auto;margin-left:264px}}

/* ========== 首页 焦点大图 ========== */
.f-hero{display:block;position:relative;margin:10px;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.f-hero img{width:100%;aspect-ratio:16/8;object-fit:cover}
.f-hero .f-hero-mask{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff}
.f-hero h3{font-size:17px;font-weight:600;line-height:1.4}
.f-hero span{display:inline-block;margin-top:6px;font-size:11px;background:rgba(255,255,255,.22);padding:1px 8px;border-radius:10px}

/* ========== 首页 焦点轮播 ========== */
.banner{position:relative;margin:10px;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.banner-track{display:flex;transition:transform .5s ease}
.banner .f-hero{flex:0 0 100%;margin:0;border-radius:0}
.banner-dots{position:absolute;left:0;right:0;bottom:10px;z-index:6;display:flex;justify-content:center;gap:6px}
.banner-dots s{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.55);display:block;cursor:pointer}
.banner-dots s.on{background:#fff}

/* ========== 首页 分类 tab ========== */
.tab-bar{position:sticky;top:46px;z-index:70;background:#fff;display:flex;border-top:1px solid #f0f2f5;border-bottom:1px solid #f0f2f5;overflow-x:auto}
.tab-bar::-webkit-scrollbar{display:none}
.tab-bar a{flex:0 0 auto;padding:0 16px;line-height:40px;font-size:14px;color:#555}
.tab-bar a.on{color:#358ff0;font-weight:600;box-shadow:inset 0 -2px 0 #358ff0}
.tab-panel{display:none}
.tab-panel.on{display:block}
.tab-panel .feed:first-child{margin-top:12px}
.tab-panel .feed:last-child{margin-bottom:4px}

/* ========== Feed 大图卡片 ========== */
.feed{display:block;margin:10px;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.feed .f-img{position:relative;overflow:hidden;background:#e9edf2}
.feed .f-img img{width:100%;aspect-ratio:16/9;object-fit:cover}
.feed .f-img .f-cat{position:absolute;left:10px;top:8px;display:inline-block;background:rgba(53,143,240,.92);color:#fff;font-size:11px;line-height:1.4;padding:2px 9px;border-radius:10px;white-space:nowrap;cursor:pointer;z-index:2}
.feed .f-body{padding:13px 13px 14px}
.feed .f-body h3{font-size:16px;font-weight:600;line-height:1.45;color:#1f2329;margin-bottom:6px}
.feed .f-body p.desc{font-size:13px;color:#8a9099;line-height:1.5;height:3em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.feed .f-meta{display:flex;align-items:center;justify-content:space-between;margin-top:9px;color:#b1b7c0;font-size:11px}
.feed .f-meta em{color:#ff8a3d;font-weight:600}

/* ========== 阅读排行 ========== */
.rank-card{background:#fff;margin:14px 10px 10px;border-radius:12px;padding:12px 14px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.rank-card h2{font-size:16px;font-weight:700;color:#1f2329;padding-left:9px;border-left:3px solid #358ff0;margin-bottom:10px;line-height:1.2}
.rank-card ol li{display:flex;align-items:center;padding:9px 0;border-bottom:1px dashed #f0f2f5;font-size:14px}
.rank-card ol li:last-child{border-bottom:0}
.rank-card ol li i{flex:0 0 auto;width:20px;height:20px;line-height:20px;text-align:center;background:#eef2f6;color:#8a9099;border-radius:5px;font-size:12px;font-style:normal;margin-right:10px}
.rank-card ol li:nth-child(-n+3) i{background:#ff6b35;color:#fff}
.rank-card ol li a{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#333}

/* ========== 面包屑 ========== */
.classname{margin:10px 10px 12px;padding:10px 12px;background:#fff;border-radius:10px;font-size:13px;color:#8a9099;font-weight:400}
.classname a{color:#358ff0}

/* ========== 列表页 ========== */
main{padding-bottom:14px}

/* ========== 分页 ========== */
.page{margin:16px 10px 0;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-size:13px}
.page a,.page span{display:inline-block;min-width:32px;height:32px;line-height:30px;text-align:center;background:#fff;border:1px solid #e6eaf0;border-radius:6px;color:#555;padding:0 6px}
.page a:active,.page .current{background:#358ff0;color:#fff;border-color:#358ff0}
.page .disabled{color:#c2c8d0}

/* ========== 文章详情 ========== */
article,.article{background:#fff;margin:10px;border-radius:12px;padding:16px 14px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
article .position,.article .position{padding:4px 0 10px;font-size:12px;color:#8a9099}
article .position a,.article .position a{color:#358ff0}
article h1#title,.article h1#title{font-size:20px;font-weight:700;line-height:1.4;color:#1f2329}
article #info,.article #info{color:#b1b7c0;font-size:12px;padding:8px 0 12px;border-bottom:1px solid #f0f2f5}
article #info a,.article #info a{color:#358ff0}
article #info time,article #info em,article #info span,.article #info time,.article #info em,.article #info span{margin-right:10px}
#content{padding-top:16px;font-size:16px;line-height:1.85;color:#3a3a3a;word-break:break-word;overflow-wrap:break-word}
#content p{margin:0 0 18px}
#content p:last-child{margin-bottom:0}
#content img{max-width:100%;height:auto;margin:12px auto;display:block;border-radius:4px}
#content h1,#content h2,#content h3,#content h4,#content h5{margin:24px 0 12px;color:#1f2329;line-height:1.4;font-weight:700;word-break:break-word}
#content h1{font-size:20px}#content h2{font-size:19px}#content h3{font-size:18px}#content h4{font-size:17px}#content h5{font-size:16px}
#content ul,#content ol{margin:0 0 18px;padding-left:24px}
#content ul{list-style:none;padding-left:0}
#content ul>li{position:relative;padding-left:18px;line-height:1.8}
#content ul>li::before{content:'';position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:#358ff0}
#content ol{list-style:decimal inside;padding-left:0}
#content ol>li{line-height:1.8}
#content li{margin-bottom:6px}
#content blockquote{margin:0 0 18px;padding:10px 14px;border-left:4px solid #358ff0;background:#f5f7fa;color:#5a6472;border-radius:0 6px 6px 0}
#content strong{font-weight:700}
/* 正文表格 */
#content table{width:100%;margin:0 0 18px;border-collapse:collapse;font-size:13px;line-height:1.6;color:#3a3a3a;word-break:break-word}
#content table th,#content table td{border:1px solid #e3e7ee;padding:8px 10px;text-align:left;vertical-align:top}
#content table th{background:#f5f7fa;color:#1f2329;font-weight:700}
#content table tbody tr:nth-child(even){background:#fafbfd}
#content table tbody tr:hover{background:#f3f6fb}
#content table img{max-width:100%;margin:0 auto}
/* 正文链接：荧光笔划线效果 */
#content a{color:#333;text-decoration:none;padding:1px 2px;background:linear-gradient(transparent 55%,rgba(92,160,255,.55) 55%);box-shadow:inset 0 -2px 0 rgba(90,160,255,.45);transition:background .2s ease}
#content a:hover{background:linear-gradient(transparent 55%,rgba(70,140,255,.75) 55%)}
/* 正文图片查看器 */
.viewer{position:fixed;top:0;bottom:0;left:50%;right:auto;width:100%;max-width:640px;transform:translateX(-50%);z-index:9999;background:rgba(0,0,0,.92);align-items:center;justify-content:center;display:none;touch-action:pan-x pan-y}
.viewer.show{display:flex}
.viewer img{max-width:92%;max-height:82%;object-fit:contain;border-radius:4px}
.viewer .v-prev,.viewer .v-next{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;line-height:44px;text-align:center;background:rgba(255,255,255,.16);color:#fff;font-size:26px;border:none;border-radius:50%;cursor:pointer}
.viewer .v-prev{left:12px}.viewer .v-next{right:12px}
.viewer .v-close{position:absolute;top:10px;right:12px;width:40px;height:40px;line-height:38px;text-align:center;background:rgba(255,255,255,.16);color:#fff;font-size:24px;border:none;border-radius:50%;cursor:pointer}
.viewer .v-index{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#fff;font-size:13px;letter-spacing:1px}
/* ========== 下载列表 ========== */
.dl-list{display:flex;flex-direction:column;gap:10px;padding:0 10px}
.dl-item{display:flex;align-items:center;background:#fff;border-radius:12px;padding:12px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.dl-ico{width:60px;height:60px;border-radius:12px;overflow:hidden;background:#eef3fb;flex:none}
.dl-ico img{width:100%;height:100%;object-fit:cover}
.dl-mid{flex:1;min-width:0;margin-left:12px}
.dl-mid h3{font-size:15px;font-weight:700;color:#1f2329;display:flex;align-items:center;flex-wrap:wrap}
.dl-mid h3 .dl-v{font-style:normal;font-size:11px;font-weight:400;color:#2f7fe8;background:#eaf2ff;padding:1px 7px;border-radius:9px;margin-left:6px}
.dl-mid p{font-size:12px;color:#9aa2ad;margin-top:6px;display:flex;align-items:center;gap:10px}
.dl-arrow{flex:none;padding:6px 16px;border-radius:16px;background:linear-gradient(135deg,#358ff0,#58b3ff);color:#fff;font-size:13px;font-weight:700}
.dl-item:active{transform:scale(.98)}
/* ========== 下载详情 ========== */
.app-hero{display:flex;align-items:center;background:linear-gradient(135deg,#2f7fe8,#5cb3ff);padding:18px 14px;color:#fff}
.app-ico{width:86px;height:86px;border-radius:18px;overflow:hidden;background:#fff;flex:none;box-shadow:0 4px 12px rgba(21,83,155,.35)}
.app-ico img{width:100%;height:100%;object-fit:cover}
.app-meta{flex:1;min-width:0;margin-left:14px}
.app-meta h1{font-size:20px;font-weight:800;color:#fff;display:flex;align-items:center;flex-wrap:wrap}
.app-meta h1 .app-ver{font-style:normal;font-size:12px;font-weight:400;background:rgba(255,255,255,.25);padding:2px 8px;border-radius:10px;margin-left:8px}
.app-cat{font-size:12px;color:rgba(255,255,255,.92);margin:6px 0 10px}
#downlink.app-btns{display:flex;flex-wrap:wrap;gap:8px}
#downlink .dbtn{display:inline-block;padding:8px 16px;background:#fff;color:#2f7fe8;border-radius:20px;font-size:13px;font-weight:700;box-shadow:0 2px 6px rgba(21,83,155,.25)}
#downlink .dbtn:hover{background:#ffe17a;color:#333}
.app-info{display:grid;grid-template-columns:1fr 1fr;background:#fff;margin:10px 0 0;border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,.05);overflow:hidden}
.app-info li{padding:12px 14px;font-size:13px;color:#555;border-bottom:1px solid #f0f2f5;display:flex;align-items:center}
.app-info li:nth-child(odd){border-right:1px solid #f0f2f5}
.app-info li b{color:#8a9099;font-weight:400;width:44px;flex:none}
.app-info li a{color:#2f7fe8}
.dl-body{margin:0 0 10px;padding:0 14px;box-shadow:none}
#hotsoft{margin:0}
#hotsoft .swiper-slide a{display:block;background:#fff;border-radius:10px;padding:8px;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.05)}
#hotsoft img{width:52px;height:52px;border-radius:12px;margin:0 auto 6px;display:block}
#hotsoft span{font-size:12px;color:#333;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#shotslide{margin:0 0 10px;overflow:hidden}
#shotslide .swiper-slide{width:auto;flex:none}
#shotslide img{height:240px;width:auto;border-radius:8px;display:block}
#downother{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0}
#downother li{background:#fff;border-radius:10px;padding:8px;box-shadow:0 1px 4px rgba(0,0,0,.05)}
#downother a{display:block;text-align:center}
#downother img{width:52px;height:52px;border-radius:12px;margin:0 auto 6px;display:block}
#downother b{font-size:12px;color:#333;font-weight:600;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#downother em{display:inline-block;margin-top:6px;padding:2px 12px;border-radius:10px;background:linear-gradient(135deg,#358ff0,#58b3ff);color:#fff;font-size:11px;font-style:normal}
/* 小节标题 */
.artt{display:flex;align-items:center;font-size:16px;font-weight:700;color:#1f2329;margin:18px 0 8px;padding:0 14px}
.artt::before{content:"";width:4px;height:16px;border-radius:2px;background:#358ff0;margin-right:8px}
/* 运行截图头部 */
.shots-head{display:flex;align-items:center;justify-content:space-between}
.shots-head .artt{margin-top:18px}
.shots-tip{display:flex;align-items:center;font-size:12px;color:#8a9099;margin:18px 0 8px;padding-right:14px}
.shots-cur{font-size:14px;font-weight:700;color:#2f7fe8;margin-right:6px}

/* 相关推荐 */
aside{padding-bottom:14px}
.art_relevant{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 10px;align-items:start}
.art_relevant>li{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.art_relevant>li figure{position:relative;overflow:hidden;background:#e9edf2}
.art_relevant>li figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.art_relevant>li figcaption {padding:8px 10px;font-size:13px;color:#333;line-height:1.5;max-height:50px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.art_relevant>li span{display:block;padding:0 10px 10px;font-size:11px;color:#b1b7c0}
/* 图注改用 div 布局（figure/figcaption 截断兼容不稳） */
.art_relevant>li .rg-fig{display:flex;flex-direction:column;overflow:hidden;background:#e9edf2}
.art_relevant>li .rg-fig img{width:100%;aspect-ratio:4/3;object-fit:cover}
.art_relevant>li .rg-cap{padding:8px 10px;font-size:13px;color:#333;line-height:1.5;height:50px;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.art_relevant>li .rg-date{display:block;padding:0 10px 10px;font-size:11px;color:#b1b7c0}

/* 选集 / 播放器 */
.ep-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0 14px}
.ep-list a{display:inline-block;min-width:48px;padding:6px 10px;text-align:center;background:#f5f7fa;color:#358ff0;border:1px solid #e3e8ef;border-radius:5px;font-size:13px}
#plbox{width:100%;overflow:hidden;background:#000;margin:4px 0}
#plbox embed,#plbox iframe,#plbox video,#plbox object{width:100%!important;aspect-ratio:16/9}