/* 宸祥光宝代理 - 工业电子分销风格 v20261016a */
:root{
    --navy:#0a2138;
    --navy2:#0f3050;
    --navy3:#134063;
    --orange:#f26a1b;
    --orange-d:#d9530f;
    --amber:#ffb300;
    --ink:#1c2733;
    --steel:#8b98a8;
    --line:#e3e8ee;
    --bg:#eef1f4;
    --card:#ffffff;
    --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;font-size:15px;line-height:1.75;color:var(--ink);background:var(--bg)}
a{color:#0e5aa7;text-decoration:none}
a:hover{color:var(--orange-d)}
img{max-width:100%;height:auto;border:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 1px 3px rgba(10,33,56,.05)}

/* ---- 顶栏 ---- */
.topbar{background:var(--navy);color:#b9c6d4;font-size:12.5px}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;height:34px}
.topbar .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3ddc84;margin-right:8px;vertical-align:1px}
.topbar .date{font-family:var(--mono);font-size:12px;color:#7f8ea0}

/* ---- 头部 ---- */
.site-header{background:#fff;border-bottom:3px solid var(--orange)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 16px;gap:16px}
.logo a{display:flex;align-items:center;gap:12px}
.logo-chip{position:relative;flex:none;width:52px;height:52px;background:var(--navy);border-radius:6px;box-shadow:inset 0 0 0 2px var(--orange)}
.logo-chip::after{content:"";position:absolute;inset:14px 10px;background:var(--orange);border-radius:2px}
.logo-chip .pin{position:absolute;top:50%;width:8px;height:3px;background:var(--steel);transform:translateY(-50%)}
.logo-chip .pin:nth-child(1){left:-8px;top:34%}
.logo-chip .pin:nth-child(2){left:-8px;top:62%}
.logo-chip .pin:nth-child(3){right:-8px;top:34%}
.logo-chip .pin:nth-child(4){right:-8px;top:62%}
.logo-txt{display:flex;flex-direction:column}
.logo-main{font-size:27px;font-weight:800;color:var(--navy);letter-spacing:2px;line-height:1.25}
.logo-sub{font-family:var(--mono);font-size:10.5px;color:var(--steel);letter-spacing:1.5px}
.search{display:flex;flex:none}
.search input{width:250px;height:40px;border:2px solid var(--navy);border-right:0;border-radius:6px 0 0 6px;padding:0 12px;font-size:14px;outline:none}
.search input:focus{border-color:var(--orange)}
.search button{height:40px;padding:0 22px;background:var(--navy);color:#fff;border:2px solid var(--navy);border-radius:0 6px 6px 0;font-size:14px;cursor:pointer;font-weight:600}
.search button:hover{background:var(--orange);border-color:var(--orange)}
.mini-search input{width:100%;height:34px;font-size:13px}
.mini-search button{height:34px;padding:0 14px;font-size:13px}

/* ---- 主导航 ---- */
.main-nav{background:var(--navy);position:sticky;top:0;z-index:50}
.nav-list{list-style:none;display:flex;flex-wrap:wrap}
.nav-item a{display:block;padding:13px 26px;color:#dbe4ee;font-size:15.5px;font-weight:600;letter-spacing:1px;border-bottom:3px solid transparent}
.nav-item a:hover{color:#fff;background:var(--navy2)}
.nav-item.active a{color:#fff;border-bottom-color:var(--orange);background:var(--navy2)}

/* ---- Hero ---- */
.hero{background:var(--navy);background-image:radial-gradient(circle at 12% 30%,rgba(242,106,27,.16) 0,transparent 42%),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:auto,44px 44px,44px 44px;color:#e8eef5;margin-bottom:22px}
.hero-inner{display:flex;gap:32px;padding:44px 16px;align-items:stretch}
.hero-main{flex:1;min-width:0}
.hero-tag{display:flex;gap:10px;margin-bottom:16px}
.tag-mono{font-family:var(--mono);font-size:11.5px;letter-spacing:2px;color:var(--amber);border:1px solid rgba(255,179,0,.55);border-radius:3px;padding:4px 10px}
.hero-title{font-size:36px;line-height:1.4;font-weight:800;letter-spacing:3px;margin-bottom:14px;color:#fff}
.hero-desc{color:#aebdd0;max-width:640px;margin-bottom:22px}
.hero-links{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:760px}
.hero-cat{display:flex;flex-direction:column;gap:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:8px;padding:16px 18px;color:#fff;transition:.2s}
.hero-cat:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.hc-name{font-size:17px;font-weight:700}
.hc-go{font-size:12.5px;color:#9fb0c3}
.hero-cat:hover .hc-go{color:#fff}
.hero-side{width:320px;flex:none}
.spec-card{background:#fff;border-radius:10px;overflow:hidden;height:100%}
.spec-head{display:flex;justify-content:space-between;align-items:center;background:var(--navy2);color:#fff;padding:12px 18px;font-weight:700}
.spec-mono{font-family:var(--mono);font-size:11px;color:var(--amber);letter-spacing:2px}
.spec-list{list-style:none;padding:8px 18px}
.spec-list li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}
.spec-list li:last-child{border-bottom:0}
.pkg{font-family:var(--mono);font-size:13px;font-weight:700;background:var(--navy);color:#fff;border-radius:4px;padding:3px 10px;flex:none}
.pkg-desc{font-size:13px;color:var(--steel)}
.spec-foot{padding:10px 18px 14px;font-size:12.5px;color:var(--orange-d);border-top:1px solid var(--line)}

/* ---- 布局 ---- */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start;padding-bottom:28px}
.layout>.main{min-width:0}
.layout>.side{min-width:0}
.page-head{padding:22px 24px;margin:20px 0}
.page-head h1{font-size:25px;letter-spacing:2px;color:var(--navy);padding-left:12px;border-left:5px solid var(--orange)}
.crumb{margin-top:8px;font-size:13px;color:var(--steel)}
.crumb a{color:var(--steel)}
.crumb a:hover{color:var(--orange-d)}
.crumb .sep{margin:0 8px;color:#c3ccd6}

/* ---- 区块标题 ---- */
.sec-head{display:flex;align-items:center;gap:10px;margin:4px 0 16px}
.sec-title{font-size:21px;font-weight:800;color:var(--navy);letter-spacing:2px;flex:none}
.sec-en{font-family:var(--mono);font-size:11px;color:var(--steel);letter-spacing:2px;text-transform:uppercase;flex:none}
.sec-rule{flex:1;height:2px;background:linear-gradient(90deg,var(--orange),var(--line));border-radius:2px;min-width:20px}
.sec-more{flex:none;font-size:13px;color:var(--steel)}
.sec-more:hover{color:var(--orange-d)}
.sec-latest,.sec-chan{padding:22px 24px;margin-bottom:20px}

/* ---- 最新发布 ---- */
.news-list{list-style:none}
.news-list li{display:flex;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px dashed var(--line)}
.news-list li:last-child{border-bottom:0}
.nl-date{font-family:var(--mono);font-size:12.5px;color:var(--orange-d);flex:none}
.news-list a{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.news-list a:hover{color:var(--orange-d)}

/* ---- 栏目文章 ---- */
.chan-list{list-style:none}
.chan-list li{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.chan-list li:last-child{border-bottom:0}
.thumb{flex:none;width:150px;height:100px;overflow:hidden;border-radius:6px;border:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover}
.pinfo{min-width:0;flex:1}
.pinfo h2,.pinfo h3{font-size:16.5px;font-weight:700;line-height:1.5;margin-bottom:6px}
.pinfo h2 a,.pinfo h3 a{color:var(--ink)}
.pinfo h2 a:hover,.pinfo h3 a:hover{color:var(--orange-d)}
.desc{font-size:13.5px;color:var(--steel);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{margin-top:8px;font-size:12.5px;color:#a5b1bf}
.meta span{margin-right:14px}
.article-list{padding:6px 24px 12px}
.article-item{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.article-item:last-child{border-bottom:0}
.empty{padding:40px;text-align:center;color:var(--steel)}

/* ---- 分页 ---- */
.pagelist{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:20px 0}
.pagelist a,.pagelist span{display:inline-block;min-width:36px;height:36px;line-height:34px;text-align:center;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);font-size:14px;padding:0 10px}
.pagelist a:hover{border-color:var(--orange);color:var(--orange-d)}
.pagelist .current{background:var(--navy);border-color:var(--navy);color:#fff}

/* ---- 文章正文 ---- */
.article-detail{padding:26px 30px}
.article-detail h1{font-size:26px;line-height:1.5;color:var(--navy);letter-spacing:1px}
.art-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:14px 0 18px;padding:10px 14px;background:#f7f9fb;border:1px solid var(--line);border-radius:6px;font-size:13px;color:var(--steel)}
.art-meta .ch{background:var(--orange);color:#fff;border-radius:3px;padding:1px 10px;font-weight:600}
.content{font-size:16px;line-height:2;color:#2b3642;word-wrap:break-word;overflow:hidden}
.content p{margin:0 0 1em}
.content img{max-width:100%;height:auto;display:block;margin:12px auto;border:1px solid var(--line);border-radius:4px}
.content table{border-collapse:collapse;width:100%;margin:12px 0;font-size:14px}
.content table th,.content table td{border:1px solid var(--line);padding:8px 10px}
.content table th{background:var(--navy);color:#fff}
.prevnext{display:flex;flex-direction:column;gap:10px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:14px}
.prevnext .lbl{color:var(--steel);flex:none}
.pn-prev,.pn-next{display:flex;gap:6px;align-items:baseline}
.art-foot{margin-top:18px;padding-top:14px;border-top:1px dashed var(--line)}

/* ---- 相关推荐 ---- */
.rel{padding:22px 24px;margin-top:20px}
.rel-list{list-style:none}
.rel-list.cols2{display:grid;grid-template-columns:1fr 1fr;gap:4px 26px}
.rel-list.cols2 li{min-width:0}
.rel-list li{display:flex;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line)}
.rel-list li a{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.rel-list li a:hover{color:var(--orange-d)}
.rel-list .d{font-family:var(--mono);font-size:12px;color:#a5b1bf;flex:none}

/* ---- 侧栏 ---- */
.side .box{margin-bottom:18px;overflow:hidden}
.box-title{position:relative;font-size:16.5px;font-weight:800;color:var(--navy);letter-spacing:1px;padding:14px 18px;border-bottom:2px solid var(--line)}
.box-title::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;background:var(--orange)}
.agent-box .box-title::before{background:var(--amber)}
.agent-body{padding:16px 18px}
.agent-brand{font-size:20px;font-weight:800;color:var(--navy);letter-spacing:2px;margin-bottom:6px}
.agent-body p{font-size:13.5px;color:var(--steel);line-height:1.8;margin-bottom:12px}
.rank-list{list-style:none;padding:6px 18px 14px}
.rank-list li{border-bottom:1px dashed var(--line)}
.rank-list li:last-child{border-bottom:0}
.rank-list a{display:flex;gap:10px;align-items:baseline;padding:9px 0;color:var(--ink);font-size:13.5px}
.rank-list a:hover{color:var(--orange-d)}
.rank-list a span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.rank{flex:none;width:22px;height:22px;line-height:22px;text-align:center;font-family:var(--mono);font-size:12px;background:#eef1f4;color:var(--steel);border-radius:4px}
.rank.top{background:var(--orange);color:#fff}
.rec-pics{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 18px 18px}
.rec-pics a{display:block;color:var(--ink);font-size:12.5px;line-height:1.6}
.rec-pics .ph{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:6px;border:1px solid var(--line);margin-bottom:6px}
.rec-pics .ph img{width:100%;height:100%;object-fit:cover}
.rec-pics a span:last-child{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.txt-list{list-style:none;padding:6px 18px 14px}
.txt-list li{border-bottom:1px dashed var(--line)}
.txt-list li:last-child{border-bottom:0}
.txt-list a{display:block;padding:9px 0 9px 16px;position:relative;color:var(--ink);font-size:14px}
.txt-list a::before{content:"";position:absolute;left:2px;top:50%;width:6px;height:6px;margin-top:-3px;background:var(--orange);transform:rotate(45deg)}
.txt-list a:hover{color:var(--orange-d)}

/* ---- 搜索 ---- */
.search-form{display:flex;margin:6px 0 18px}
.search-form input{flex:1;height:42px;border:2px solid var(--navy);border-right:0;border-radius:6px 0 0 6px;padding:0 14px;font-size:14px;outline:none;min-width:0}
.search-form button{height:42px;padding:0 26px;background:var(--navy);color:#fff;border:2px solid var(--navy);border-radius:0 6px 6px 0;cursor:pointer;font-size:14px;font-weight:600}
.search-count{margin-bottom:10px;font-size:14px;color:var(--steel)}
.search-count b{color:var(--orange-d)}

/* ---- 页脚 ---- */
.site-footer{background:var(--navy);color:#9fb0c3;margin-top:8px}
.foot-trace{height:6px;background:repeating-linear-gradient(90deg,var(--orange) 0 26px,var(--navy2) 26px 40px)}
.foot-inner{padding:34px 16px 22px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;margin-bottom:22px}
.foot-logo{font-size:22px;font-weight:800;color:#fff;letter-spacing:3px;margin-bottom:8px}
.foot-slogan{font-family:var(--mono);font-size:11.5px;color:var(--amber);letter-spacing:1.5px;margin-bottom:10px}
.foot-brand p{font-size:13.5px;line-height:1.9}
.foot-title{font-size:15px;font-weight:700;color:#fff;margin-bottom:12px;letter-spacing:2px}
.foot-col nav{display:flex;flex-direction:column;gap:8px}
.foot-col nav a{color:#9fb0c3;font-size:13.5px}
.foot-col nav a:hover{color:var(--amber)}
.foot-pkg{font-family:var(--mono);font-size:12.5px;line-height:2.1;color:#7f8ea0}
.copyright{text-align:center;font-size:12.5px;color:#5f6f82;border-top:1px solid rgba(255,255,255,.1);padding-top:16px}

/* ---- 响应式 ---- */
@media (max-width:960px){
    .layout{grid-template-columns:minmax(0,1fr)}
    .hero-inner{flex-direction:column}
    .hero-side{width:100%}
    .hero-links{grid-template-columns:1fr 1fr}
    .hero-title{font-size:28px}
    .header-inner{flex-direction:column;align-items:stretch}
    .search input{flex:1;width:auto;min-width:0}
    .foot-grid{grid-template-columns:1fr}
    .rel-list.cols2{grid-template-columns:1fr}
}
@media (max-width:600px){
    .hero-links{grid-template-columns:1fr}
    .chan-list li,.article-item{flex-direction:column}
    .thumb{width:100%;height:auto;aspect-ratio:16/9}
    .article-detail{padding:20px 18px}
}