:root { --color-primary: #00c07c; --color-primary-dark: #00a86b; --color-text: #333; --color-text-light: #666; --color-text-muted: #999; --color-border: #e8e8e8; --color-bg: #fff; --color-bg-gray: #f5f7fa; --color-footer: #1a1a1a; --color-green: #52c41a; --color-blue: #1890ff; --color-yellow: #faad14; --color-purple: #722ed1; --color-cyan: #13c2c2; --color-pink: #eb2f96; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 24px; --shadow-sm: 0 2px 8px rgba(0,0,0,.06); --shadow-md: 0 4px 16px rgba(0,0,0,.1); }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
* { margin: 0; }
body { font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif; color: var(--color-text); background: var(--color-bg); line-height: 1.6; font-size: 14px; }
a { text-decoration: none; color: inherit; transition: color .2s, background .2s, border-color .2s, box-shadow .2s, transform .2s; }
ul { padding-left: 0; list-style: none; }
img { max-width: 100%; vertical-align: middle; }
.flexRow { display: flex; flex-direction: row; }
.flexColumn { display: flex; flex-direction: column; }
.flexcenter { align-items: center; justify-content: center; }
.overflowclass { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; }
.overflowclassone { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
.container { width: 1366px; margin: 0 auto; }

/* ===== 顶部导航 ===== */
.site-header { position: sticky; top: 0; z-index: 100; background:#FFFFFF; box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.06);}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.logo { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; color: var(--color-text); }
.logo-img { width:207px; height: 38px;}
.logo-text em { font-style: normal; color: var(--color-primary); font-weight: 400; font-size: 14px; margin-left: 4px; }
.main-nav {   gap: 10px;margin:0 0 0 80px;}
.headin-left{align-items: center;}
.main-nav a { font-size: 18px; color: var(--color-text);display: flex;align-items: center;justify-content: center;padding:6px 12px;}
.main-nav a:hover { color:#28A878; }
.main-nav a.check { font-weight: bold; color: #28A878; background: rgba(241, 249, 243, 0.6); border-radius: 8px; }
.header-actions { display: flex; align-items: center; gap:10px; }
.btn-search { display: flex; align-items: center; padding:10px 16px;background: #FFFFFF;border-radius: 17px;border: 1px solid #F6F6F6;}
.btn-search:hover{border: 1px solid #28A878;}
.btn-search b{ background:url(../image/icon1.png) no-repeat;background-size: contain;width:14px;height:14px;} 
.btn-search:hover b{ background:url(../image/icon3.png) no-repeat;background-size: contain;width:14px;height:14px;}
.link-login { font-size: 14px; color:#070707;padding:6px 16px;background: #FFFFFF;border-radius: 17px;border: 1px solid #F6F6F6;}
.link-login:hover { color:#28A878;border: 1px solid #28A878;}
.btn-trial { display: inline-flex; align-items: center; padding:6px 16px; background:linear-gradient( 270deg, #39C491 0%, #28A878 100%); color: #fff; border-radius: var(--radius-lg); font-size: 14px;}
.btn-trial b{ background:url(../image/icon2.png) no-repeat;background-size: contain;width:10px;height:10px;margin:0 0 0 4px;transition: all .5s;}
.btn-trial:hover b{transform: translate(2px,-2px);}

/* Keep the shared iPython header stable on pages that also load legacy CSS. */
body > .site-header { height:auto; }
body > .site-header .container.header-inner { display:flex; height:64px; min-height:64px; gap:0; }
body > .site-header .logo { width:auto; height:auto; }
body > .site-header .logo .logo-img { width:207px; height:38px; }



/* ===== Hero 区域 ===== */
/* ===== Hero 背景区（含课程体系） ===== */
.hero-bg-wrap { position: relative; min-height: calc(100vw * 1168 / 2048); background: #fff url("../image/hero-bg.jpg") no-repeat top center; background-size: 100% auto; }
.hero { position: relative; padding:60px 0 60px; }
.curriculum { padding-top: 0; padding-bottom: 35px; background: transparent; }
.hero-inner { position: relative; text-align: center; z-index: 1; }
.hero-title { font-size:68px;line-height:78px; margin-bottom: 16px; color: #1a1a1a;font-family: FZLTCHK--GBK1, FZLTCHK--GBK1;align-items: center;}
.hero-title .highlight { color: var(--color-primary);font-size:58px;letter-spacing: 10px;width: 360px;
  background: linear-gradient(270deg,#236CEE 0%, #3CDF78 100%);
    background-clip: text;-webkit-text-fill-color: transparent;color: transparent;
}
.hero-subtitle { font-size: 18px; color: #555555; margin-bottom: 32px; letter-spacing:2px;font-weight: 500;}
.hero-btns { display: flex; justify-content: center; gap:40px; }
.btn-primary {width:200px;height: 50px; display: flex; align-items: center;justify-content: center; background: linear-gradient( 270deg, #39C491 0%, #28A878 100%); color: #fff; border-radius: var(--radius-lg); font-size: 18px; font-weight: 500;transition: all .3s ease;}

.btn-primary:hover {background: linear-gradient( 270deg, #19895F 0%, #00BF79 100%);transition: all .3s ease;}
@keyframes btn-outline-hue { to { filter: hue-rotate(360deg); } }
.btn-outline { --border-width: 2px; --border-radius: 44px; position: relative; isolation: isolate; width: 200px; height: 50px; display: flex; align-items: center; justify-content: center; background: #fff; color: #08754C; border-radius: var(--border-radius); border: none; font-size: 18px; font-weight: 500; transition: color .3s ease, box-shadow .3s ease; }
.btn-outline::after { --m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: var(--border-width); border-radius: var(--border-radius); background-image: linear-gradient(120deg, #3CE079, #24A979); -webkit-mask-image: var(--m-i), var(--m-i); mask-image: var(--m-i), var(--m-i); -webkit-mask-origin: var(--m-o); mask-origin: var(--m-o); -webkit-mask-clip: var(--m-o); mask-clip: var(--m-o); -webkit-mask-composite: destination-out; mask-composite: exclude; z-index: -1; pointer-events: none; filter: hue-rotate(0deg); }
.btn-outline:hover { color:#08754C;}
.btn-outline:hover::after { background-image: conic-gradient(from 0deg, #37C98F, #2DAFAA, #2366F5, #2DAFAA, #37C98F); animation: btn-outline-hue 2s linear infinite; }

/* ===== 通用区块 ===== */
 
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom:17px; }
.section-title { font-size: 24px; font-weight: 500; color: #222222; }
.section-more { font-size: 16px; color:#28A878;display:flex;align-items: center;}
.section-more b{background:url(../image/icon4.png) no-repeat;background-size: contain;width:10px;height:10px;margin:0 0 0 3px;transition: all .5s;}
.section-more:hover b{transform: translate(2px,-2px);}


/* ===== Python 课程体系 ===== */
.curriculum-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.curriculum-card {box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.1);height:auto;border-radius: 8px; overflow: hidden;width:249px;padding-bottom: 15px;}
.card-green{background: linear-gradient( 180deg, #CEF9ED 0%, #FFFFFF 20%);}
.card-blue{  background: linear-gradient( 180deg, #CDDFFF 0%, #FFFFFF 20%); }
.card-yellow{ background: linear-gradient( 180deg, #FFEDCD 0%, #FFFFFF 20%); }
.card-purple{background: linear-gradient( 180deg, #D8CDFF 0%, #FFFFFF 20%);   }
.card-cyan{background: linear-gradient( 180deg, #CDF3FF 0%, #FFFFFF 20%);   }


.card-green .card-head{border-bottom:  1px solid rgba(26,199,134,0.19);}
.card-blue .card-head{border-bottom:1px solid rgba(26,56,199,0.19);}
.card-yellow .card-head{border-bottom:1px solid rgba(199,119,26,0.19);}
.card-purple .card-head{border-bottom:1px solid rgba(146,26,199,0.19); }
.card-cyan .card-head{border-bottom:1px solid rgba(26,199,159,0.19);}

.card-green .card-head h3{color: #0D6443;}
.card-blue .card-head h3{color: #1B46B4;}
.card-yellow .card-head h3{color: #B4801B;}
.card-purple .card-head h3{color: #6E1BB4;}
.card-cyan .card-head h3{color: #1A95B7;}

.card-green .card-head span{color:#3CA07A;}
.card-blue .card-head span{color:#6192D6;}
.card-yellow .card-head span{color: #D6AC61;}
.card-purple .card-head span{color: #8161D6;}
.card-cyan .card-head span{color: #59C3D0;}
.cardhd-left{display: flex;flex-direction: column;justify-content: flex-end;height: 100%;max-width: 162px;overflow: hidden;}
.products{ margin:35px 0 0 0;}


.card-head { display: flex; align-items: center;justify-content: space-between; gap: 8px;margin:7px 10px 0 10px;height:77px;padding:0 0 15px 0;}
.card-icon { width:60px; height:60px;}
.card-head h3 { font-size: 18px; font-weight:500;margin:3px 0 5px 0;white-space: nowrap;}
.cardhd-left span{ font-size: 14px;}

.card-links li { line-height: 2; min-width: 0; }
.card-links a { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; font-size: 14px; color: #555555; padding: 0 4px 0 0; }
.card-links a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-links a b { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width:8px; height:8px; border: 1px solid transparent; border-radius: 50%; box-sizing: border-box; }
.card-links a b::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #28A878; }
.card-links a:hover b { border-color: #28A878; }
.cdlt-title{ font-weight: bold;font-size: 16px;color: #000000;margin:0 10px;}
.card-list{margin:13px 10px 0 10px;}
.card-links {margin:8px 10px 0 10px;gap:7px;display: flex;flex-direction: column;}

.card-blue .card-links a:hover b{border-color: #1B46B4;}
.card-yellow .card-links a:hover b{border-color: #B4801B;}
.card-purple .card-links a:hover b{border-color: #6E1BB4;}
.card-cyan .card-links a:hover b{border-color: #1A95B7;}

.card-blue .card-links a b::before{background: #1B46B4; }
.card-yellow .card-links a b::before{background:#B4801B; }
.card-purple .card-links a b::before{background: #6E1BB4;}
.card-cyan .card-links a b::before{background: #1A95B7;}



/* ===== 热搜字词 ===== */
.hot-tags { padding-top: 0; }
.hot-tags-row { margin-bottom:35px; }
.hot-tags-row:last-child { margin-bottom: 0; }
.hot-tags-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tags-list { display: flex; flex-wrap: wrap; gap: 10px; }
.tag { display: inline-block; max-width: 161px; padding:5px 15px 6px 15px; background: #FFFFFF; border: 1px solid #E7E7E7; border-radius:19px; font-size: 16px; color:#333333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag:hover { background: #FFFFFF; border: 1px solid #28A878; border-radius: 19px; color: #28A878; }
.schjg .tag{background:#F9FDFC;font-size: 12px;color: #666666;border:none;}
.schjg .tag:hover{ background: #FFFFFF;color: #28A878;border:none;}

/* ===== 产品应用网格 ===== */
.products-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }

.page-detail .products-grid{grid-template-columns: repeat(5, 1fr);}
.page-detail .product-card {width:193px;height: 302px;padding:11px;}
.page-detail .detail-download-grid .product-card {min-width:0;height:auto;min-height:302px;overflow:hidden;}
.page-detail .detail-download-grid .product-tags {min-height:17px;}
.page-detail .detail-download-grid .product-thumb {width:100%;height:auto;aspect-ratio:1;}
.page-detail .detail-download-grid .product-rating {align-items:flex-start;min-width:0;line-height:1.4;}
.page-detail .detail-download-grid .product-rating span {display:-webkit-box;min-width:0;overflow:hidden;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;}

.product-card { position: relative; display: block; padding:20px 17px 17px 18px; background: #fff; border: 1px solid transparent;
  border-radius:8px;transition: box-shadow .25s, background .25s;box-shadow: 0px 0px 4px 0px rgba(203,203,203,0.42);
  width:211px;height:auto;
}
.product-card:hover { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(126deg, #3CE079, #24A979) border-box; border: 1px solid transparent; box-shadow: 0px 0px 4px 0px rgba(203,203,203,0.42); }
.product-card-detail-link { position:absolute; inset:0; z-index:1; border-radius:inherit; }
.product-card .product-tags { position:relative; z-index:2; }
 
.product-tags{gap:7px;min-width:0;overflow:hidden;}
.tagsa{padding:1.5px 5px;font-size: 10px;color: #FFFFFF; border-radius: 10px;transition: all .3s ease;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:1;}
.tag-blue{ background: linear-gradient( 270deg, #5A72FA 0%, #4488F6 100%);}
.tag-purple{background: linear-gradient( 270deg, #A483FF 0%, #9076F5 100%); }
.tag-green{background: linear-gradient( 270deg, #3EC4A0 0%, #40C5C5 100%); }
.tag-origin{background: linear-gradient( 270deg, #F89A76 0%, #F66F5E 100%); }
.tag-blue:hover{ background: linear-gradient( 270deg, #44AEF6 0%, #4964FF 100%);}
.tag-purple:hover{background: linear-gradient( 270deg, #8567F7 0%, #C483FF 100%); }
.tag-green:hover{background: linear-gradient( 270deg, #28CECE 0%, #42DDB3 100%); }
.tag-origin:hover{background: linear-gradient( 270deg, #FF604C 0%, #FF8F65 100%); }


 
.product-thumb { width:171px;height: 171px; aspect-ratio: 1; border-radius:8px; overflow: hidden;margin:11px 0 0 0;}
.product-thumb img { width: 100%; height: 100%; object-fit: cover; background: #eee; }
.products .product-thumb img {object-fit:contain;padding:38px;box-sizing:border-box;background:#f5f7fa;}
.product-name { font-size: 16px; color: #000000; margin:10px 0 8px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-meta { font-size: 12px; color:#999999; margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.product-rating { width: 100%; min-width: 0; font-size: 12px; align-items: center; color: #999999; line-height: 12px; }
.product-rating b { flex-shrink: 0; display: inline-block; background: url(../image/icon10.png) no-repeat; width: 10px; height: 10px; margin: 0 2px 0 0; background-size: contain; }
.product-rating span:nth-of-type(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-rating span:nth-of-type(1){color:#FAAD14;margin:0 3px 0 0;}
.products .product-rating span {display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* ===== 文章列表 + 侧边栏 ===== */
.feed-layout { display: flex; gap: 32px;margin:40px auto 60px auto;}
.feed-main { flex: 1; min-width: 0; }
.feed-sidebar { width: 280px; flex-shrink: 0; height: auto; align-self: flex-start; box-shadow: 0px 0px 4px 0px rgba(203,203,203,0.42); border-radius: 8px; }
.feed-tabs { position: relative; display: flex; flex-wrap: wrap; gap: 10px; padding-right: 117px; max-height: 36px; overflow: hidden;}
.feed-tabs.is-open { max-height: none; overflow: visible;}
.feed-tabs .tab {padding:0 22px; height: 36px; border-radius:22px; font-size: 14px; color: #1C1C1C; border: 1px solid #E5E5E5; display: flex; align-items: center; justify-content: center; }
.feed-tabs .tab:hover { color: #28A878; border: 1px solid #FFFFFF;background: #F1F9F3;}
.feed-tabs .tab.active { background: linear-gradient( 270deg, #39C491 0%, #28A878 100%);color: #fff; border: none; }
.feed-tabs .tab.more { position: absolute; right: 0; top: 0; z-index: 2; }
.feed-tabs .tab.more b { display: inline-block; background: url(../image/icon11.png) no-repeat; width: 9px; height: 5px; background-size: contain; margin: 0 0 0 4px;flex-shrink: 0;}
.feed-tabs .tab.more:hover b { background: url(../image/icon13.png) no-repeat; background-size: contain; transform: rotate(180deg); }
.feed-tabs .tab.more.open b { background: url(../image/icon12.png) no-repeat; background-size: contain; transform: none; }
.feed-tabs .tab.more.open:hover { color: #28A878; border: 1px solid #28A878; }
.ztlist .paglist-sec > .feed-tabs { max-height:none; overflow:visible; padding-right:0; margin-bottom:20px; }
.feed-tabs .tab.more.open:hover b { background: url(../image/icon13.png) no-repeat; background-size: contain; transform: none; }
.idx .main-feed .feed-tabs {flex-wrap:nowrap;max-height:none;overflow-x:auto;overflow-y:hidden;padding-right:0;padding-bottom:4px;}
.idx .main-feed .feed-tabs .tab {min-width:100px;white-space:nowrap;flex:0 0 auto;box-sizing:border-box;}
.sidiv{margin:10px 15px 20px 15px;}


.article-list { display: flex; flex-direction: column; gap: 0;margin:6px 0 0 0;}
.dynamic-list-empty { width:100%; box-sizing:border-box; padding:48px 0 58px; }
.dynamic-list-empty .empty-img { width:360px; height:240px; margin-bottom:10px; }
.sch-list .article-list[data-panel] { display: none; }
.sch-list .article-list[data-panel].is-active { display: flex; }
.article-item { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid #E5E5E5; transition: background .2s; }
.article-item:hover { background: rgba(0,192,124,.02); }
.article-body { flex: 1; min-width: 0; }
.article-title { font-size: 18px; font-weight:500; margin-bottom: 8px; line-height: 1.4; overflow: hidden; }
.article-title a { display: block; color: #222222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article-title a:hover { color:  #28A878; }
.sch-list.schjg .article-title a span { color: #28A878; }
.sch-list.schjg .article-title a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.article-summary { font-size: 14px; color:#555555;height: 48px;line-height: 24px; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all;}
.article-tags { display: flex; flex-wrap: wrap; gap:10px;}
.article-tag { display:block; max-width:140px; padding:1px 10px; background:#FFFFFF; border-radius:12px; font-size:12px; color:#28A878; border:1px solid #FFFFFF; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.article-tag:hover { background:#FFFFFF; color:#146245;border:1px solid #28A878; }
.ztlist .article-tag,.page-list .article-tag{background: #F6FBF5;color:#146245;}
.idx .article-tag,.artdtl .article-tag,.schjg .article-tag{background: #F6FBF5;color:#146245; padding:2px 10px;}
.idx .article-tag:hover,.artdtl .article-tag:hover,.schjg .article-tag:hover{ border: 1px solid rgba(40,168,120,0.4);background: #FFFFFF;color:#146245;}
.article-info { font-size: 12px; color:#999999;gap:20px;}
.article-info div{display:flex;align-items: center;}
.article-thumb { width:202px; height: 114px; flex-shrink: 0; border-radius:5px; overflow: hidden; }
.article-thumb img { width: 100%; height: 100%; object-fit: cover; background: #eee; }
.article-thumb-small{width:114px; height: 114px;  }
.btn-more-info { display: flex; align-items: center; justify-content: center; gap: 4px;height: 48px; width: 100%; margin-top: 20px;border-radius:24px; font-size: 16px; color: #666666; background: #F3F3F3; transition: all .2s; }
.btn-more-info:hover {color: #28A878; background:#F1F9F3; }
.icon-more{ background: url(../image/icon17.png) no-repeat; background-size: contain;width:16px;height: 16px; }
.btn-more-info:hover .icon-more{background: url(../image/icon18.png) no-repeat;background-size: contain;}

.art-left-down{justify-content: space-between;}

.info-name b{background: url(../image/icon14.png) no-repeat; background-size: contain; transform: none;margin:0 3px 0 0 ;width:12px;height: 12px;}
.info-time b{background: url(../image/icon15.png) no-repeat; background-size: contain; transform: none;margin:0 3px 0 0 ;width:12px;height: 12px;}
.info-watch b{ background: url(../image/icon16.png) no-repeat; background-size: contain; transform: none;margin:0 3px 0 0 ;width:12px;height: 12px;}


/* ===== 侧边栏 ===== */
.sidebar-title { font-size:21px; font-weight:500;color: #333333; }
.sidebar-list li { border-bottom: 1px solid #F6F6F6;padding:10px 0 8px 0 ;}
.sidebar-list a { display: block; font-size: 16px; line-height: 1.5; color: #444444; transition: color .2s; }
.sidebar-list a:hover { color: #28A878; }
.sidebar-icon { display: inline-block; width: 18px; height: 18px; object-fit: cover; margin: 0 4px 0 0; vertical-align: -2px; }
.sidebar-text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-word; }
.sidebar-text > span { display: inline; }
.sidebar-views { flex-shrink: 0; font-size: 12px; color: var(--color-text-muted); }
.sidebar-more {text-align: center; margin-top: 16px; padding: 7px 0; font-size: 14px; color:#666666; border-radius: 18px;background: #F3F3F3;}
.sidebar-more:hover { color: #28A878; background: #F1F9F3;}
.sidebar-more b{background: url(../image/icon25.png) no-repeat; background-size: contain;margin:0 0 0 4px;width:10px;height: 10px;transition: all .3s ease;}
.sidebar-more:hover b{background: url(../image/icon26.png) no-repeat; background-size: contain;margin:0 0 0 4px;width:10px;height: 10px;transform: translate(2px,-2px);}
.widgetbx-rs .sidebar-more{margin-top: 10px;}
.zxwz .sidebar-more,.xgxz .sidebar-more,.kjzx .sidebar-more{margin-top: 14px;}

.sidebar-down{font-size: 12px;color: #999999;justify-content: space-between;margin:4px 0 0 0;}
/* ===== 页脚 ===== */
.site-footer { background: var(--color-footer); color: rgba(255,255,255,.7);}
.footer-inner { display: flex; gap: 48px; padding: 40px 0 23px; }
.footer-brand {width:380px;margin:0 55px 0 0; }
.footer-logo { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; color: #fff; margin-bottom: 12px; }
.footer-logo-img {width: 248px;height:46px; }
.footer-desc { font-size: 16px; line-height: 1.8; margin-bottom: 16px; color:#B7B7B7;width:382px;}
.footer-social { display: flex; gap: 12px; }
.footer-social a img { width:36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.1); opacity: .7; transition: opacity .2s; }
.footer-social a:hover img { opacity: 1; }
.footer-links { display: flex; gap:130px; flex: 1; }
.footer-col h4 { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 16px; }
.footer-col ul{gap:16px;}
.footer-col li { line-height:1.2; }
.footer-col a { font-size: 16px; color: #B7B7B7; }
.footer-qrcode { text-align: center; flex-shrink: 0; width: 136px; height: 136px; background: #FFFFFF url("../image/qrcode.png") no-repeat center center; background-size: cover; border-radius: 4px; margin-bottom: 8px; }
.qrcode-img { width:48px; height: 48px; }
.footer-qrcode p { font-size: 16px; color:#B7B7B7; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 15px 0 20px 0; text-align: center; }
.footer-bottom p { font-size: 12px; color:#B7B7B7; }
.footer-bottom a { color:#B7B7B7; }
.gh{ width:14px;height: 15px;margin:0 4px 0 50px;}
.foot-qrcode {align-items: center;}
.foot-qrcode p{ font-size: 16px;color: #B7B7B7;}
/* ===== 搜索页 ===== */
.search-hero { padding: 60px 0 40px; background: linear-gradient(180deg, #e8f8f2 0%, #f0f5ff 40%, #fff 100%); text-align: center; }
.schjg .search-hero { background: url(../image/icon70.webp) no-repeat center; background-size: cover;padding: 37px 0 50px 0;}
.search-brand img{height: 53px;object-fit: cover;}
.search-box { display: flex; max-width:1030px; margin:32px auto 20px; background: #fff; border-radius: 28px;overflow: hidden;padding:4px;height: 56px;box-shadow: 0px 0px 4px 0px rgba(40,168,120,0.21);}
.search-input { flex: 1; padding: 16px 24px 16px 28px; border: none; outline: none; font-size: 18px; background: transparent; }
.search-input::placeholder{color: #333333;}
.search-submit { padding: 12px 19px;border-radius: 24px; background: linear-gradient( 270deg, #37C18F 0%, #28A777 100%);color: #fff; border: none; font-size: 16px; font-weight:bold; cursor: pointer; white-space: nowrap;align-items: center;}
.search-right{font-size: 16px;color: #AAABB7;}
.search-right span{color:#28A878;}

.search-submit b{background: url(../image/icon73.png) no-repeat center; background-size: cover;width:18px;height: 18px;margin:0 4px 0 0;}
.hot-keywords { display: flex; flex-wrap: wrap; align-items: center;gap: 10px;margin:0 0 0 170px;}
.hot-label { font-size: 14px; color:#AEAEAE; }
.search-main { padding-top: 20px; }
.search-tabs-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; box-shadow: 0px 0px 4px 0px #F3EEFC;border-radius: 8px;padding:18px 20px 14px 30px;}
.search-tabs { display: flex; width:560px; max-width:calc(100% - 210px); justify-content:space-between; gap:48px; }
.search-tab { font-size:20px; color:#444444; padding-bottom: 16px; position: relative; margin-bottom: -14px; }
.search-tab:hover { color:#28A878; }
.search-tab.active { color: #28A878; font-weight:500; }
.search-tab.active::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height:1px; background:#28A878; }
@media (max-width: 768px) {
  .search-tabs-bar { align-items:flex-start; gap:12px; padding-left:18px; padding-right:18px; }
  .search-tabs { width:100%; max-width:none; gap:20px; }
  .search-right { flex-shrink:0; }
}
.search-count { font-size: 13px; color: var(--color-text-muted); }
.search-count em { color: var(--color-primary); font-style: normal; font-weight: 600; }
.empty-state { text-align: center; padding:157px 0 200px; }
.empty-img { width:398px; height:246px; margin-bottom:14px; object-fit: contain; }
.empty-title { font-size: 16px;color: #333333;margin-bottom: 8px; }
.empty-title em { color:#28A878; font-style: normal; }
.empty-desc { font-size: 16px; color:#999999; }

/* ===== 分页 ===== */
.schjg .pagination{ margin:4px 0 44px 0;}
.pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 32px; padding: 16px 0; }
.page-btn, .page-num { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 32px; padding: 0 12px; border: 1px solid #F2F2F2; border-radius: 4px; font-size: 13px; color: #000000; background: #fff; }
.page-btn:hover, .page-num:hover { border-color: #28A878; color: #28A878; }
.page-num.active { background: #28A878; color: #fff; border-color: #28A878; }
.page-num.active:hover { background: #28A878; color: #fff; border-color: #28A878; }
.page-btn.disabled, .page-btn.disabled:hover { color: #8D9099; border-color:#F0F0F3; background:#F7F8FC; cursor: not-allowed; pointer-events: none; }
.page-ellipsis { color: var(--color-text-muted); padding: 0 4px; }
.page-total, .page-jump { font-size: 14px; color: #0E0E0E;}
.page-total{margin-left:16px; }
.page-input { width:34px; height:32px; border: 1px solid #F2F2F2; border-radius:4px; text-align: center; font-size: 13px; margin: 0 4px; }

/* ===== 列表页三栏布局 ===== */
.page-list { padding: 0 0 48px; min-height: calc(100vh - 64px); }
.page-list-layout { display: flex; gap: 0; align-items: stretch; min-height: calc(100vh - 64px); }
.topic-detail .page-list-layout{gap:40px;}
.page-list-inner { padding: 0; margin-top: 0; }
.page-main { flex: 1; min-width: 0; padding-top: 24px; }
.topic-detail .page-main{padding:0;}
.page-main-full { width: 100%; }
.artlist.page-main{padding-top: 14px;width:805px;max-width: 805px;margin:0 22px 0 0;}
.page-sidebar { width: 280px; flex-shrink: 0; }
.page-list .page-sidebar{margin-top: 44px;}
.artdtl .page-sidebar{margin-top:53px;}
.topic-detail .page-list .page-sidebar,.topic-detail .page-main{margin-top:20px;}
.left-nav { width:240px; flex-shrink: 0; align-self: stretch; background: #FFFFFF; box-shadow: 1px 0 0 0 rgba(0,0,0,0.06); border-radius: 0px 0px 0 8px; margin: 0 20px 0 0; padding: 12px 0; overflow: visible; border: none; }
.left-nav-list { overflow: hidden; border-radius: 0 0 8px 8px;gap:10px;display: flex;flex-direction: column;}
.left-nav-list > li { position: relative; }
.left-nav-list > li > .nav-parent { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 16px; color: #000000; position: relative; }
.left-nav-list > li > .nav-parent:hover { color: #28A878; background: #F1F9F3; }
.left-nav-list > li.active > .nav-parent { color: #28A878; background:  #F1F9F3; }
.left-nav-list > li.active::before { content: ""; position: absolute; left: 0; top: 0; z-index: 1; width:2px; height: 40px; background: #28A878; border-radius: 4px;}
.left-nav .nav-icon { width: 18px; height: 18px; flex-shrink: 0; object-fit: contain; }
.left-nav .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.left-nav .nav-arrow { display: inline-block; width: 10px; height: 10px; margin-left: auto; padding: 0; border: 0; outline: 0; box-shadow: none; appearance: none; -webkit-appearance: none; cursor: pointer; flex-shrink: 0; background: transparent url(../image/icon59.png) no-repeat center; background-size: contain; transform: none; filter: none; }
.left-nav .nav-arrow:focus, .left-nav .nav-arrow:focus-visible, .left-nav .nav-arrow:active { border: 0; outline: 0; box-shadow: none; }
.left-nav-list > li:not(.open) > .nav-parent:hover .nav-arrow { background-image: url(../image/icon60.png); transform: rotate(180deg); }
.left-nav-list > li.open > .nav-parent .nav-arrow,
.left-nav-list > li.open > .nav-parent:hover .nav-arrow { background-image: url(../image/icon60.png); transform: none; }
.left-nav .sub-nav { display: none; padding: 4px 0 8px 0; gap: 2px; }
.left-nav-list > li.open > .sub-nav { display: flex; }
.left-nav .sub-nav a { display: block; position: relative; padding: 8px 16px 8px 42px; font-size: 16px; color: #444444; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.left-nav .sub-nav a::before { content: ""; position: absolute; left: 26px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background: #C1C1C1; border-radius: 50%; }
.left-nav .sub-nav li.active a, .left-nav .sub-nav a:hover { color: #28A878; }
.left-nav .sub-nav li.active a::before, .left-nav .sub-nav a:hover::before { background: #28A878; }
.newgx .nav-icon {width:18px;height: 18px;}


.breadcrumb img{width:10px;height: 12px;margin:0 3px 0 0;}
.breadcrumb,.breadcrumb a{font-size: 12px;color: #999999;}
.breadcrumb .lastbreada{color:#333333;}
.breadcrumb{margin:18px 0 10px 0;align-items: center;}
.artlist .breadcrumb{margin:0 0 14px 0;}
.topic-detail .topic-hero .breadcrumb,.topic-detail .topic-hero .breadcrumb a{padding:14px 0 6px;color:#28A878;}

.topic-detail .topic-hero .breadcrumb .lastbreada{color:#333333;}

.topic-banner { display: flex; align-items: center;padding:14px 0 20px 20px; background: url(../image/icon67.png) no-repeat center; background-size: cover;margin-bottom: 20px;border-radius:5px;height: 163px;}
.banner-blue { background: url(../image/icon67.png) no-repeat center; background-size: cover; }
.banner-body { flex: 1; min-width: 0; }
.banner-title { font-size: 24px; font-weight:500; color: #333333; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;width: 520px;}
.banner-desc { font-size: 16px; color:#4F5C7B; line-height:26px; margin:12px 0 10px 0; width: 520px; max-width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
.banner-meta { font-size: 12px; color: #606673; }
.banner-meta span { margin-right: 16px; }
.info-name,.info-time,.info-watch,.bninfo-num,.bninfo-gx{align-items: center;}
.bninfo-num b{background: url(../image/icon69.png) no-repeat; background-size: contain; transform: none;margin:0 3px 0 0 ;width:12px;height: 12px;}
.bninfo-gx b{background: url(../image/icon68.png) no-repeat; background-size: contain; transform: none;margin:0 3px 0 0 ;width:12px;height: 12px;}
.paglist-sec{background: #FFFFFF;box-shadow: 0px 0px 4px 0px rgba(203,203,203,0.42);border-radius: 8px;padding:20px 17px 25px 22px;}

.ztlist .topic-banner{background: url(../image/icon76.png) no-repeat center; background-size: cover; }



.banner-img { width: 220px; height: 130px; margin:0 34px 0 24px; object-fit: contain; background:transparent; flex-shrink: 0; }
.category-banner-image[src$="/generic-tech-learning.png"] { width: 280px; height: 145px; margin-right: 30px; }
.artlist .topic-banner.has-custom-icon {
  background:
    radial-gradient(circle at 92% 18%, rgba(107,126,255,.14) 0 6%, transparent 26%),
    radial-gradient(circle at 72% 112%, rgba(73,214,223,.16) 0 12%, transparent 34%),
    linear-gradient(110deg,#eef8ff 0%,#ddf7fb 56%,#d8e5ff 100%);
}
.category-banner-image[src$="/python.svg"] { filter:invert(42%) sepia(58%) saturate(819%) hue-rotate(165deg) brightness(88%) contrast(88%); }
.topic-header { display: flex; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--color-border); margin-bottom: 20px; }
.topic-header-body { flex: 1; }
.topic-header-title { font-size: 28px; font-weight: 700; margin-bottom: 12px; color: #1a1a1a; }
.topic-header-desc { font-size: 14px; color: var(--color-text-light); line-height: 1.8; margin-bottom: 12px; }
.topic-header-meta { font-size: 13px; color: var(--color-text-muted); }
.topic-header-meta span { margin-right: 16px; }
.topic-header-img { width: 160px; height: 120px; object-fit: contain; flex-shrink: 0; background: var(--color-bg-gray); border-radius: var(--radius-md); }
.topic-hero { width: 100%; background: url(../image/icon74.webp) no-repeat center top; background-size:cover;height: 229px;}
.topic-hero .breadcrumb { margin: 0; padding: 18px 0 10px; }
.topic-hero .topic-header {gap: 40px; padding: 0 0 24px; margin: 0; border-bottom: none; }
.topic-hero .topic-header-body { flex: 1; min-width: 0;}
.topic-hero .topic-header-title { font-size: 24px; font-weight: 500; color: #222222; margin: 0; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-hero .topic-header-desc { font-size: 16px; color: #444444; line-height: 26px; margin:8px 0 10px 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
.topic-hero .topic-header-meta { align-items: center; gap: 24px; font-size: 14px; color: #666666; margin: 0; }
.topic-hero .topic-header-meta span { margin-right: 0; }
.topic-hero .topic-header-tags { align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.topic-hero .topic-header-tags .tags-label { font-size: 14px; color: #444444;}
.topic-hero .topic-header-cover { width: 288px; height: 162px; flex-shrink: 0; border-radius: 8px; border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(154deg, rgba(40, 168, 120, 1), rgba(56, 194, 144, 1)) border-box; overflow: hidden; box-sizing: border-box; }
.topic-hero .topic-header-img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; background: transparent; }

/* ===== 侧边栏 Widget ===== */
.widget-box { background: #fff; box-shadow: 0px 0px 4px 0px rgba(203,203,203,0.42);
  border-radius: 8px; padding:10px 15px 16px 15px; margin-bottom:20px; 
}
.widget-title { font-size:21px; font-weight:500; margin-bottom: 10px;color: #333333; }
.widget-list li { border-bottom: 1px solid var(--color-border); }
.widget-list li:last-child,.widget-links li,.widget-topics li{ border-bottom: none; }
.widget-list a { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-size: 13px; color: var(--color-text); }
.widget-list a:hover { color: var(--color-primary); }
.widget-icon { width: 18px; height: 18px; background: #fff3e0; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.widget-thumb { width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--color-bg-gray); flex-shrink: 0; object-fit: cover; }
.widget-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-meta { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; justify-content: space-between;}
.widget-picks a { flex-wrap: wrap; }
.widget-picks .widget-text { flex: 1 1 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.widget-topics a { align-items: flex-start; }
.widget-topics .widget-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.widget-hot-topics { gap: 16px; }
.widget-hot-topics li { border-bottom: 1px solid #F6F6F6; padding-bottom: 16px; }
.widget-hot-topics li:last-child { border-bottom: 1px solid #F6F6F6;}
.widget-hot-topics .widget-topic-link { display: flex; align-items: flex-start; padding: 0; gap: 0; width: 100%; }
.widget-hot-topics .widget-thumb { width: 110px; height: 62px; border-radius: 4px; margin: 0 9px 0 0; object-fit: cover; flex-shrink: 0; background: #F5F5F5; }
.widget-hot-topics .widget-topic-body { flex: 1; min-width: 0; gap: 8px; }
.widget-hot-topics .widget-text { font-size: 16px; color: #000000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;line-height:18px;min-height: 36px;}
.widget-hot-topics .widget-topic-link:hover .widget-text { color: #28A878; }
.widget-hot-topics .widget-meta { align-items: center; gap: 16px; font-size: 12px; color: #999999;line-height: 16px;}
.widget-hot-topics .widget-date, .widget-hot-topics .widget-view { display: inline-flex; align-items: center; gap: 4px; }
.widget-hot-topics .widget-date b { display: inline-block; width: 14px; height: 14px; background: url(../image/icon57.png) no-repeat center; background-size: contain; flex-shrink: 0; }
.widget-hot-topics .widget-view b { display: inline-block; width: 14px; height: 14px; background: url(../image/icon58.png) no-repeat center; background-size: contain; flex-shrink: 0; }
.widget-courses { gap: 16px; }
.widget-courses li { border-bottom: 1px solid #F6F6F6; padding-bottom: 16px; }
.widget-courses li:last-child { border-bottom: none; }

.jxkc .widget-courses li:last-child { border-bottom: 1px solid #F6F6F6;}

.widget-courses .widget-topic-link { display: flex; align-items: flex-start; padding: 0; gap: 0; width: 100%; }
.widget-courses .widget-thumb { width: 110px; height: 62px; border-radius: 4px; margin: 0 9px 0 0; object-fit: cover; flex-shrink: 0; background: #F5F5F5; }
.widget-courses .widget-topic-body { flex: 1; min-width: 0; gap: 8px; }
.widget-courses .widget-text { font-size: 16px; color: #000000; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; line-height: 18px;min-height: 36px;}
.widget-courses .widget-topic-link:hover .widget-text { color: #28A878; }
.widget-courses .widget-meta { align-items: center; gap: 16px; font-size: 12px; color: #999999; line-height: 16px; }
.widget-courses .widget-author, .widget-courses .widget-view { display: inline-flex; align-items: center; gap: 4px; }
.widget-courses .widget-author b { display: inline-block; width: 12px; height: 12px; background: url(../image/icon14.png) no-repeat center; background-size: contain; flex-shrink: 0; }
.widget-courses .widget-view b { display: inline-block; width: 12px; height: 12px; background: url(../image/icon16.png) no-repeat center; background-size: contain; flex-shrink: 0; }
.widget-downloads { gap: 13px; }
.widget-downloads li { border-bottom: 1px solid #F6F6F6; padding-bottom: 15px; }
.widget-downloads li:last-child { border-bottom: 1px solid #F6F6F6; }
.widget-downloads .widget-dl-link { display: flex; align-items: center; padding: 0; gap: 10px; width: 100%; }
.widget-downloads .widget-dl-link:hover { color: inherit; }
.widget-downloads .widget-app-icon { width: 48px; height: 48px; border-radius: 55px; object-fit: cover; flex-shrink: 0; background: #F5F5F5; }
.widget-downloads .widget-dl-body { flex: 1; min-width: 0; gap: 4px; }
.widget-downloads .widget-text { font-size: 16px; color: #000000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; }
.widget-downloads .widget-dl-link:hover .widget-text { color: #28A878; }
.widget-downloads .widget-desc { display: block; font-size: 14px; color: #6E6E6E; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-downloads .widget-dl-link:hover .widget-desc { color: #6E6E6E; }
.widget-downloads .btn-dl { display: inline-flex; align-items: center; justify-content: center; gap: 2px; width: 57px; height: 27px; padding: 0; background: #FFFFFF; border-radius: 14px; border: 1px solid #28A878; font-size: 12px; color: #28A878; flex-shrink: 0; }
.widget-downloads .btn-dl b { display: inline-block; width: 12px; height: 12px; background: url(../image/icon46.png) no-repeat center; background-size: contain; flex-shrink: 0; }
.widget-links li { min-width: 0; list-style: none; }
.widget-links a { display: block; position: relative; padding: 4px 0 4px 18px; font-size: 16px; color: #444444; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-links a::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border: 3px solid #BFBFBF; border-radius: 50%; box-sizing: border-box; }
.widget-links a:hover { color: #28A878; }
.widget-links a:hover::before { border-color: #28A878; }
.widget-more { display: block; text-align: center; margin-top: 12px; padding: 8px 0; font-size: 13px; color: var(--color-text-muted); border-top: 1px solid var(--color-border); }
.widget-more:hover { color: var(--color-primary); }
.tags-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* ===== 最新更新页 ===== */
.page-latest { padding:20px 0 60px; }
.latest-layout { display: flex; gap:40px; align-items: flex-start; }
.latest-nav { width: 240px; flex-shrink: 0; height: auto; align-self: flex-start; background: #fff; border-radius: 8px; box-shadow: 0px 0px 4px 0px rgba(203,203,203,0.42); }
.latest-nav-list a { display: flex; align-items: center; gap: 8px; padding: 16px 0 16px 22px; font-size: 16px; color:#222222; }
.latest-nav-list li.active a { color: #28A878; background: #F1F9F3; border-radius: 4px; position: relative; }
.latest-nav-list li.active a::after { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 58px; background: #28A878; border-radius: 4px; }
 .latest-nav-list a:hover{ background: #F1F9F3;border-radius: 4px;}
.latest-main { flex: 1; min-width: 0; height: auto; align-self: flex-start; background: #fff; border-radius: 8px;overflow: hidden; }
.latest-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.latest-table thead { background: #F9FAFD; }
.latest-table th { padding: 18px 0; color: #323740; font-size: 16px; font-weight: 500; text-align: left; border-bottom: 1px solid #EBEEF5; }
.latest-table td { padding: 18px 0; font-size: 14px; color: #666666; border-bottom: 1px solid #E5E5E5; vertical-align: middle; }
.latest-table tbody tr:hover { background: rgba(0,192,124,.02); }
.latest-table td a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #333333; font-size: 16px; }
.latest-table td a:hover { color:#28A878; }
.latest-table th:nth-child(1){ padding-left: 68px; width:160px; white-space: nowrap; }
.latest-table td:nth-child(1) { padding-left: 50px; width:160px; white-space: nowrap; }
.latest-table th:nth-child(2){ padding-left: 150px; width:560px; }
.latest-table td:nth-child(2) { padding-left: 30px; width:580px; overflow: hidden; }
.latest-table th:nth-child(3), .latest-table td:nth-child(3) { width: 70px; text-align: left; padding-right:90px; padding-left:60px ;color:#323740;white-space: nowrap;font-size: 16px;}
.latest-table th:nth-child(4){ padding-right:30px;    text-align: center;}
.latest-table td:nth-child(4) { width: 130px; text-align: right; padding-right:70px; color: #333333;white-space: nowrap;font-size: 16px;}
.cat-tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 14px; white-space: nowrap; }
.cat-ai { background:#EDEFFA; color:#004BD2; }
.cat-browser { background: #FAF3ED; color:#FC6700; }
.cat-mobile { background:#EDF8FA; color:#50E3E3; }
.cat-java { background: #EDFAF1; color:#00BE50; }
.cat-sql { background: #FAF9ED; color: #FFBB16; }
.cat-cpp { background: #FAF9ED; color: #FFBB16; }
.cat-zone { background:#FAEDED; color: #FE2D4A; }
.latest-main .pagination { padding: 20px 0 0 0; margin-top: 0;margin:0 auto;}

.latest-nav-list{margin:20px;}


/* ===== 文章详情页 ===== */
.share-bar { position: fixed; left: max( calc(50% - 770px)); top:295px; transform: translateY(-50%); z-index: 50; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.share-item { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 52px; }
.share-bar button.share-item { padding:0; border:0; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.share-icon { display: block; width: 38px; height: 38px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.share-num, .share-txt { font-size: 14px; color: #666666; line-height: 1.2; }
.share-like .share-icon { background-image: url(../image/icon48.png); }
.share-fav .share-icon { background-image: url(../image/icon49.png); }
.share-share .share-icon { background-image: url(../image/icon50.png); }
.share-like:hover .share-icon { background-image: url(../image/icon51.png); }
.share-fav:hover .share-icon { background-image: url(../image/icon52.png); }
.share-share:hover .share-icon { background-image: url(../image/icon53.png); }
.share-like.active .share-icon, .share-like.active:hover .share-icon { background-image: url(../image/icon54.png); }
.share-fav.active .share-icon, .share-fav.active:hover .share-icon { background-image: url(../image/icon55.png); }
.share-share.active .share-icon, .share-share.active:hover .share-icon { background-image: url(../image/icon56.png); }
.share-item.active .share-num, .share-item.active .share-txt { color: #28A878; }
.share-copy-notice { position:fixed; left:50%; top:72px; z-index:9999; transform:translate(-50%,-12px); padding:10px 22px; border-radius:20px; color:#fff; background:rgba(34,43,39,.92); font-size:15px; line-height:1.4; opacity:0; pointer-events:none; transition:opacity .2s ease,transform .2s ease; }
.share-copy-notice.show { opacity:1; transform:translate(-50%,0); }
.page-detail { padding: 24px 0 48px; }
.artdtl .page-detail { padding: 0 0 48px; }
.detail-layout { display: flex; gap: 37px; align-items: flex-start; }
.detail-main { flex: 1; min-width: 0;max-width:1047px;width:1047px;}
.detail-title { font-size: 28px; font-weight:bold; line-height: 1.4; margin-bottom: 16px; color: #000000; }
.detail-meta { display: flex; align-items: center;padding-bottom: 20px; border-bottom: 1px solid #EEEEEE; margin-bottom: 20px;}
.author-avatar { width:52px; height:52px; border-radius: 50%;object-fit: cover;margin:0 10px 0 0;}
.dtlmt-left{align-items: center;}
.dtlmltdd{font-size: 12px;color: #888888;gap:25px;margin:4px 0 0 0;}


.author-name { font-size: 16px;color: #222222;}
.btn-copy { margin-left: auto; padding:6px 18px; border-radius: 4px; font-size: 16px; color:#28A878; background:#F1F9F3; cursor:default; user-select:none; }
.detail-content { font-size: 15px; line-height: 1.9; margin-bottom:30px; }
.detail-content h2 { font-size: 22px; font-weight:500; margin:18px 0 9px; color: #000000;line-height: 24px;}
.detail-content p { margin-bottom: 16px; }
.detail-figure { margin: 24px 0; text-align: center; }
.detail-figure img { max-width: 100%; background: var(--color-bg-gray); border-radius: var(--radius-md); }
.detail-figure figcaption { font-size: 13px; color: var(--color-text-muted); margin-top: 8px; }
.related-box{ margin-bottom:17px; }
.box-title { font-size:24px; font-weight:500; margin-bottom:10px; color: #333333; }
.box-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.box-header .box-title { margin-bottom: 0; }
.art-topdes{ position: relative; font-size: 16px; color: #666F6D; padding:13px 22px 13px 18px; background: #F5F8F7; border-radius: 0px 8px 8px 0px; }
.art-topdes::after{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #28A878; }




.related-list{gap:10px;}
.related-list li { line-height:22px; min-width: 0; list-style: none; }
.related-list a { display: block; position: relative; padding-left: 12px; font-size: 16px; color: #444444; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.related-list a::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; background: #333333; border-radius: 50%; }
.related-list a:hover { color: #28A878; }
.related-list a:hover::before { background: #28A878; }
.tool-card { display: flex; align-items: stretch; gap: 0; padding: 16px 20px; background: #FFFFFF; box-shadow: 0px 0px 4px 0px rgba(203,203,203,0.42); border-radius: 8px; margin-bottom: 20px; border: none; }
.tool-icon { width: 78px; height: 78px; border-radius: 8px; margin: 0 11px 0 0; object-fit: cover; flex-shrink: 0; }
.tool-body { flex: 1; min-width: 0; }
.tolbdd { width: 100%; min-width: 0; overflow: hidden; }
.tolbdd > div { flex: 1 1 0; min-width: 0; max-width: 100%; overflow: hidden; }
.tool-name { font-size: 18px; font-weight: 600; color: #191919; margin: 0 0 4px 0; line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-author { font-size: 16px; color: #444444; margin: 0 0 4px 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-meta { align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 10px 0; min-width: 0; max-width: 100%; }
.tool-stars { align-items: center; gap: 2px; }
.tool-stars b { display: inline-block; width: 14px; height: 14px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.tool-stars .star-full { background-image: url(../image/icon40.png); }
.tool-stars .star-half { background-image: url(../image/icon41.png); }
.tool-stars .star-empty { background-image: url(../image/icon42.png); }
.tool-score { font-size: 16px; color: #444444; }
.tool-score span{color:#C5C5C5;}
.tool-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; color: #444444; }
.tool-badge b { display: inline-block; width: 14px; height: 14px; background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0; }
.tool-badge-safe b { background-image: url(../image/icon43.png); }
.tool-badge-ima b { background-image: url(../image/icon44.png); }
.tool-badge-safe{margin:0 40px 0 30px;}
.tool-desc { font-size: 16px; color: #444444; margin: 0; line-height: 1.7; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
.tool-btns { display: flex; flex-direction: column; justify-content:end; flex-shrink: 0; margin-left: 20px; align-self: stretch;gap:20px;}
.tool-btn-copy { width: 210px; height: 42px; border-radius: 21px; display: flex; align-items: center; justify-content: center; background: linear-gradient(270deg, #39C491 0%, #28A878 100%); color: #fff; font-size: 15px; font-weight: 500; border: none; }
.tool-btn-copy:hover { background: linear-gradient(270deg, #19895F 0%, #00BF79 100%); color: #fff; }
.tool-btn-down { width: 210px; height: 42px; border-radius: 21px; display: flex; align-items: center; justify-content: center; gap: 6px; background: #FFFFFF; color: #333333; font-size: 15px; border: 1px solid #E5E5E5; }
.tool-btn-down:hover { border-color: #28A878; color: #28A878; }
.tool-btn-down b { display: inline-block; width: 16px; height: 16px; background: url(../image/icon45.png) no-repeat center; background-size: contain; }
.tool-btn-down:hover b { background-image: url(../image/icon46.png); filter: none; }
.tool-res-card { align-items: flex-start; gap:20px;padding:20px;}
.tool-res-thumb { width: 138px; height: 138px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #F5F5F5; }
.tool-res-body { flex: 1; min-width: 0; gap: 8px; }
.tool-res-card1 .tool-res-thumb{width:245px; height: 138px; }


.tool-res-head { align-items: center; justify-content: space-between; gap: 16px; }
.tool-res-title { font-size: 18px; font-weight: 600; color: #191919; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.tool-res-date { align-items: center; gap: 4px; flex-shrink: 0; font-size: 16px; color: #888888; }
.tool-res-date b { display: inline-block; width: 14px; height: 14px; background: url(../image/icon47.png) no-repeat center; background-size: contain; }
.tool-res-desc { font-size: 14px; color:#444444; margin: 0; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-res-tags { align-items: center; flex-wrap: wrap; gap: 8px; }
.tool-res-tag { display: inline-block; padding: 2px 10px; background:#F2F2F2; border-radius: 12px; font-size: 12px; color: #222222; }
.tool-res-btn { align-self: flex-start; height:42px; padding: 0 18px; border-radius:21px;background: linear-gradient( 270deg, #39C491 0%, #28A878 100%);color: #FFFFFF; font-size: 16px; gap: 6px;width:210px; }

.tool-res-btn b { display: inline-block; width: 16px; height: 16px; background: url(../image/icon87.png) no-repeat center; background-size: contain; flex-shrink: 0; }
.btn-sm { padding: 8px 20px; font-size: 13px; }
.detail-tags { margin-bottom: 15px; }
.artdtl .detail-tags {display:flex;align-items:center;flex-wrap:wrap;gap:8px;}
.artdtl .detail-tags .tags-label {flex:0 0 auto;}
.artdtl .detail-tags .article-tag {display:inline-flex;align-items:center;flex:0 1 auto;width:auto;max-width:min(140px,100%);margin:0;}
.tags-label { font-size: 16px; color:#444444;}
.detail-disclaimer { font-size: 16px; color:#222222;margin-bottom:18px; }
.detail-nav { display: flex; justify-content: space-between; gap:20px;font-size: 14px;margin:0 0 33px 0;}
.detail-nav a { color:#333333;width:50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;padding:15px 20px; 
  height: 52px;background: #FFFFFF;box-shadow: 0px 0px 8px 0px rgba(119,118,118,0.08);border-radius: 8px;border: 1px solid rgba(119,118,118,0.08);
}
.detail-nav a:hover  { color:#28A878;border: 1px solid #28A878;box-shadow: 0px 0px 8px 0px rgba(119,118,118,0.08); }
.detail-nav a span:nth-child(1){color:#888888;}
.detail-nav a:hover span:nth-child(1){color:#28A878;}
.author-list { gap:8px; }
.author-list li { display: flex; align-items: center; min-width: 0; gap: 16px; }
.author-list a { position: relative; flex: 1; min-width: 0; padding-left: 18px; font-size: 16px; color: #444444; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.author-list a::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border: 3px solid #BFBFBF; border-radius: 50%; }
.author-list a:hover { color: #28A878; }
.author-list a:hover::before { border-color: #28A878; }
.author-list .author-time { display: inline-flex; align-items: center; flex-shrink: 0; gap: 4px; font-size: 16px; color: #999999; }
.author-list .author-time b { display: inline-block; width: 14px; height: 14px; background: url(../image/icon47.png) no-repeat center; background-size: contain; }
.author-articles{margin:0 0 28px 0;}
.products-grid-sm { grid-template-columns: repeat(5, 1fr); }



.artcons h1::before, .artcons h2::before {
    content: "";
    display: inline-block;
    width:3px;
    height:16px;
    background: url(../image/icon39.png) no-repeat center center;
    background-size: contain;
    margin-right: 10px;
    vertical-align: middle;margin-top: -3px;
}
.artcons .artdp span,.artcons .artptit pspan,.artcons .artptitp span{display: flex;margin:0 10px 0 0;
    background:url(../image/icon6.png) no-repeat ;   width: 14px;    background-size: contain;
    height: 14px;
}
.artcons .artdp,.artcons .artptit,.artcons .artptitp{display:flex;align-items: center;}
.artcons .artdp p,.artcons .artptit p,.artcons .artptitp p{
    font-weight:bold;font-size: 22px;color: #333333;line-height:1em;margin:12px 0;
}
.artcons .hp{ font-weight:bold;font-size: 18px;color: #333333;margin:12px 0;line-height: 1em;}

.artcons table {
    margin-bottom: 15px;
    max-width: 100%;
    width: 100%
}

.artcons table th {
    font-weight: 700
}

.artcons table td,.artcons table th {
    border: 1px solid #e9ebec;
    padding: .5rem 1rem
}
table td {
    min-width: 1.8rem!important
}

.artcons table td,.artcons table th,.artcons table td,.artcons table th {
    border: 1px solid #ddd;
    padding: 5px
}

.artcons table {
    border-collapse: collapse;
    border-radius: 4px;
    border-spacing: 0;
    display: block;
    margin-bottom: 16px;
    margin-top: 16px;
    max-width: 100%;
    overflow: auto;
    width: 100%
}

.artcons table td,.artcons table th {
    border: 1px solid #ddd;
    line-height: 20px;
    padding: 8px
}

.artcons table tr {
    background-color: none;
    line-height: 20px
}

.artcons table thead,.artcons table tr:nth-child(2n) {
    background-color: rgba(102,128,153,.05)
}

.artcons table thead {
    line-height: 20px
} 
 
 

.artcons pre {
    background: #f7f7f7;
    position: relative;   /* ✅ 关键 */
    width: 100%;
    max-width: 100%;
    overflow-x: auto;     /* 横向滚动 */
    overflow-y: hidden;
    box-sizing: border-box;
    padding: 15px;
    background: #f7f7f7;
}

.artcons .pre-numbering {
    top: 0!important;
    padding-top: 15px;
    padding-bottom: 17px;
    background: #e9e9e9;
    box-sizing: border-box;
    display: none;
    margin-bottom: 0!important;
    position: absolute
}

.artcons .pre-numbering li {
    list-style: none!important
}

.artcons pre.has-pre-numbering {
    position: relative;
    padding: 15px 0 17px 55px!important
}

.artcons ul.pre-numbering {
    position: absolute;
    top: 10px;
    left: 0;
    width: 40px;
    text-align: center;
    margin-left: 0
}

.artcons .CodeMirror {
    background: #f7f7f7;
    box-sizing: border-box;
    margin-bottom: 1em;
    padding: 0!important
}

.artcons .CodeMirror-scroll {
    min-height: 300px
}

.artcons .CodeMirror-fullscreen {
    background: #fff;
    position: fixed!important;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    z-index: 9
}

.artcons .CodeMirror-sided {
    width: 50%!important
}

.artcons .hljs-cto {
    position: relative
}
.artcons pre code{
    white-space: pre;
    display: block;
}
.artcons .copy_btn {
    position: relative;
    padding: 5px 10px;
    background-color: #666;
    border: none;
    color: #FFF;
    font-size: 12px;
    cursor: pointer;
    border-radius: 5px;
    position: relative;
    top:5px;
    right: 5px;
    z-index: 99;
    float: right;

    display: block;
    margin-bottom: -35px; 
    margin-left: auto; 
    width: max-content;
}

/* 文章详情增强：目录、代码块与按需求隐藏的推广模块 */
.artcons .rewrite-toc,
.artcons .article-toc {
    margin: 0 0 30px;
    padding: 24px 28px 26px;
    border: 1px solid #dce5ec;
    border-top: 7px solid #83b8e8;
    border-radius: 18px;
    background: #f5f7f9;
}
.artcons .toc-header { display:flex; align-items:center; justify-content:space-between; padding-bottom:18px; border-bottom:2px dashed #dce5ec; }
.artcons .rewrite-toc h2,
.artcons .article-toc h2 { margin:0; padding:0; color:#20262c; font-size:22px; line-height:1.4; font-weight:700; }
.artcons .rewrite-toc h2::after,
.artcons .article-toc h2::after { content:none; }
.artcons .rewrite-toc h2::before,
.artcons .article-toc h2::before { content:'📑'; display:inline-block; position:static; width:auto; height:auto; margin-right:10px; background:none; font-size:20px; }
.artcons .toc-toggle { padding:4px 0; border:0; color:#3ca9dc; background:transparent; font-size:16px; font-weight:700; cursor:pointer; }
.artcons .toc-body { padding-top:14px; }
.artcons .article-toc.is-collapsed .toc-body { display:none; }
.artcons .article-toc.is-collapsed .toc-header { padding-bottom:0; border-bottom:0; }
.artcons .rewrite-toc ol,
.artcons .article-toc ol { margin:0; padding:0; list-style:none; }
.artcons .article-toc .toc-tree { column-count:2; column-gap:56px; }
.artcons .rewrite-toc li,
.artcons .article-toc li { margin:0; color:#157fb8; line-height:1.5; break-inside:avoid-column; }
.artcons .rewrite-toc a,
.artcons .article-toc a { position:relative; display:flex; align-items:center; min-width:0; padding:9px 8px 9px 25px; border-bottom:1px solid #e7edf1; color:#157fb8; text-decoration:none; }
.artcons .article-toc a::before { content:'◆'; position:absolute; left:2px; top:11px; color:#249bd3; font-size:10px; }
.artcons .rewrite-toc a:hover,
.artcons .article-toc a:hover { color:#075f91; background:#edf5fa; }
.artcons .article-toc .toc-level-3 > a,
.artcons .article-toc .toc-level-4 > a { padding-left:48px; }
.artcons .article-toc .toc-level-3 > a::before,
.artcons .article-toc .toc-level-4 > a::before { content:'◇'; left:27px; top:10px; font-size:12px; }
.artcons .article-toc .toc-level-4 > a { padding-left:68px; font-size:14px; }
.artcons .article-toc .toc-level-4 > a::before { left:47px; }
.artcons .toc-number { flex:0 0 auto; margin-right:8px; font-weight:700; }
.artcons .toc-text { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width: 768px) {
    .artcons .rewrite-toc,
    .artcons .article-toc { padding:18px 16px 20px; border-radius:12px; }
    .artcons .article-toc .toc-tree { column-count:1; }
}
.artcons .code-block-wrap {
    overflow: hidden;
    margin: 22px 0;
    border: 1px solid #273143;
    border-radius: 10px;
    background: #151b27;
    box-shadow: 0 8px 24px rgba(23, 34, 49, .10);
}
.artcons .code-block-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 0 14px 0 18px;
    color: #aeb9c8;
    font-size: 13px;
    background: #202838;
}
.artcons .code-copy-btn {
    padding: 6px 12px;
    border: 1px solid #46536a;
    border-radius: 6px;
    color: #ecf4f1;
    background: transparent;
    cursor: pointer;
}
.artcons .code-copy-btn:hover { border-color: #35c792; color: #62ddb0; }
.artcons .code-block-wrap pre {
    margin: 0 !important;
    padding: 18px 20px !important;
    border: 0;
    border-radius: 0;
    color: #e8edf5;
    background: #151b27 !important;
    overflow: auto;
}
.artcons .code-block-wrap pre code { color: inherit; font: 14px/1.75 SFMono-Regular, Consolas, "Liberation Mono", monospace; }
.artcons [id] { scroll-margin-top: 84px; }
.search-type-badge { display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:14px;background:#eaf8f3;color:#218a65;font-size:13px;white-space:nowrap; }



.artcons h1 {
    margin: .67em 0
}
 

.artcons h3 {
    margin: 1em 0
}

.artcons h4 {
    margin: 1.33em 0
}

.artcons h5 {
    margin: 1.67em 0
}

.artcons h6 {
    margin: 2.33em 0
}

 

.artcons pre {
    overflow-y: auto
}

.artcons img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(90%, 900px);
    margin: 24px auto 0;
    border-radius: 8px;
}

.artcons a {
    color: #3e71f6
}

.artcons a:hover {
    color: #01B277;
}


.artcons blockquote {
    background: linear-gradient(180deg, #E1FCF3 0%, #F1FDF9 100%);
 
}


.artcons h3 {
    font-size: 20px!important
}

.artcons h4 {
    font-size: 18px!important
}

.artcons h5 {
    font-size: 16px!important
}

.artcons h6 {
    font-size: 14px!important
}

.artcons p {
    line-height:26px;color:#333333;
    font-size: 16px;margin:9px 0;
}
 
 
.artcons a em,.artcons blockquote em,.artcons h1 em,.artcons h2 em,.artcons h3 em,.artcons h4 em,.artcons h5 em,.artcons h6 em,.artcons li em,.artcons p em,.artcons sub em,.artcons sup em,.artcons table em {
    font-style: normal!important
}

.artcons a del,.artcons a u,.artcons blockquote del,.artcons blockquote u,.artcons h1 del,.artcons h1 u,.artcons h2 del,.artcons h2 u,.artcons h3 del,.artcons h3 u,.artcons h4 del,.artcons h4 u,.artcons h5 del,.artcons h5 u,.artcons h6 del,.artcons h6 u,.artcons li del,.artcons li u,.artcons p del,.artcons p u,.artcons sub del,.artcons sub u,.artcons sup del,.artcons sup u,.artcons table del,.artcons table u {
    text-decoration: none!important
}

.artcons a {
    color: #333!important;
    padding-bottom: 2px
}

.artcons a:hover {
    color: #acacac!important
}

.artcons p>code {
    color: #128b4e;
    background-color: #e7f3ed!important
}

.artcons p>code span {
    font-size: 12px!important;
    color: #128b4e!important
}

.artcons p>code em {
    font-style: normal
}

.artcons p>code del,.artcons p>code u {
    text-decoration: none
}

.artcons pre .language- {
    color: #595959!important;
    background: none!important;
    font-size: 13px!important
}

.artcons pre .language- span {
    font-size: 13px!important
}
 

.artcons a,.artcons blockquote,.artcons blockquote span,.artcons table,.artcons table span {
    font-size: 16px!important
}

.artcons a span {
    font-size: 16px!important;
    color: #333!important
}

.artcons ul.pre-numbering {
    height: 100%
}


.newsArticle .artcons {
    margin-bottom: 120px
}

.newsArticle .artcons img {
    display: block
}

.artcons {
    word-wrap: break-word;
 
    font-size: 16px
}