/* =========================================================
* BGP Server System - 前台样式 (v3)
* 全部需求已对齐：
* 公告对齐 / 图2卡片格式 / 卡片仅按钮可点 / 机房分类按钮 /
* 查看所有按钮化 / footer贴底 / 导航选中 / logo文字 /
* 备案号可点击 / 工具图标前置 / 取消浏览量 /
* 立即购买图6样式 / 价格红色 / 首页取消右上查看所有
* ========================================================= */
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-y:scroll;scrollbar-gutter:stable}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;background:#f5f7fb;color:#222;line-height:1.6}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
code{font-family:Consolas,Menlo,"Courier New",monospace}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
/* --- 贴底：flex column + footer margin-top:auto --- */
body.page-body{min-height:100vh;display:flex;flex-direction:column}
/* --- 顶部联系栏 --- */
.top-bar{background:#1a2332;color:#aab;font-size:12px;padding:6px 0}
.top-bar .bar-inner{display:flex;justify-content:space-between;align-items:center}
.top-bar a{color:#aab;transition:.2s}
.top-bar a:hover{color:#fff}
/* --- 主导航栏 --- */
.main-header{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.05);position:sticky;top:0;z-index:99}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{display:flex;align-items:center}
/* Logo 文字特效：流光渐变 + 悬浮发光（老浏览器回退为纯蓝，不会消失） */
.logo-text{
font-size:22px;font-weight:700;letter-spacing:1px;line-height:1.2;
color:#0c3483;transition:filter .3s ease;
}
.logo-text:hover{filter:drop-shadow(0 0 10px rgba(47,125,225,.65))}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.logo-text{
background:linear-gradient(90deg,#0c3483,#2f7de1,#6a82fb,#0c3483);
background-size:300% 100%;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
animation:logoShine 4.5s linear infinite;
}
}
@keyframes logoShine{
0%{background-position:0% 50%}
100%{background-position:300% 50%}
}
.nav{display:flex;gap:6px}
.nav-link{padding:10px 18px;font-size:14px;color:#555;transition:.25s;position:relative;font-weight:500;border-radius:6px}
.nav-link:hover{color:#0c3483;background:#f2f6ff}
/* 导航选中：色块 + 下划线特效 */
.nav-link.active{
color:#0c3483;font-weight:600;
background:linear-gradient(180deg,#eaf1ff,#dce8ff);
}
.nav-link.active::after{
content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
width:60%;height:3px;background:linear-gradient(135deg,#0c3483,#6a82fb);border-radius:2px;
animation:navUnderline .3s ease;
}
@keyframes navUnderline{
from{width:0;opacity:0}
to{width:60%;opacity:1}
}
/* --- 公告滚动条（与 label 横排对齐） --- */
.announcement-bar{background:#fffbe6;border-top:1px solid #ffe58f;border-bottom:1px solid #ffe58f;padding:10px 0;font-size:13px}
.ann-wrapper{display:flex;align-items:center;gap:14px}
.ann-label{background:#fa8c16;color:#fff;font-size:12px;font-weight:700;padding:5px 12px;border-radius:4px;white-space:nowrap;flex-shrink:0;line-height:22px}
.ann-track{flex:1;overflow:hidden;position:relative;height:22px}
/* 提速 + 单向向上滚动（内容重复两遍，-50% 落在整数像素，避免模糊） */
.ann-content{display:flex;flex-direction:column;animation:annScroll 5.5s linear infinite;backface-visibility:visible}
.ann-item{display:block;height:22px;line-height:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.ann-content .ann-item a{text-decoration:underline dotted}
@keyframes annScroll{
0% {transform:translate3d(0,0,0)}
100% {transform:translate3d(0,-50%,0)}
}
/* --- Hero 区 --- */
.hero{background:linear-gradient(135deg,#0c3483,#3b6fb0,#6a82fb);color:#fff;padding:50px 0;text-align:center}
.hero h1{font-size:30px;font-weight:700;margin-bottom:10px;letter-spacing:1px}
.hero p{font-size:15px;opacity:.9;margin-bottom:22px}
/* --- Hero 按钮（独立 class，不受 .btn 影响） --- */
.hero-btn{
display:inline-block;padding:13px 44px;border-radius:30px;
background:#fff;color:#0c3483;font-size:15px;font-weight:700;
text-decoration:none;letter-spacing:1px;
box-shadow:0 6px 18px rgba(0,0,0,.18);
transition:transform .22s ease,box-shadow .22s ease,background .22s ease,color .22s ease;
}
.hero-btn:hover{
transform:translateY(-3px);
box-shadow:0 12px 28px rgba(0,0,0,.28);
background:#f7faff;color:#0a2864;
}
/* 按下点燃效果 */
.hero-btn:active{
transform:translateY(0) scale(.95);
background:linear-gradient(135deg,#ff7a45,#ff4d4f);color:#fff;
box-shadow:0 0 0 3px rgba(255,122,69,.5),0 6px 18px rgba(255,77,79,.5);
}
/* --- 通用区 --- */
.section{padding:56px 0}
.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:12px}
.section-title{font-size:20px;font-weight:700;color:#1a2332;margin-bottom:28px}
/* --- 服务器说明（背景铺满整宽；图片缺失时自动退化为渐变，不会变空白） --- */
.server-notice-wrap{
background-color:#f4f8ff;
background-image:url('../images/product-overview.jpg'),linear-gradient(135deg,#f4f8ff 0%,#ffffff 50%,#eaf1ff 100%);
background-size:cover,cover;
background-position:center center,center center;
background-repeat:no-repeat,no-repeat;
padding:24px 0;border-bottom:1px solid #e6ebf5;
}
.server-notice{font-size:13px;line-height:1.9;padding:6px 0}
.server-notice+.server-notice{border-top:1px dashed #d8e0ee}
/* --- 机房分类按钮条（统一蓝色底 + 白色文字 + 明显线条框） --- */
.cat-btn-bar-wrap{background:#fff;border-bottom:1px solid #eef0f5}
.cat-btn-bar{display:flex;flex-wrap:wrap;gap:10px;padding:16px 0}
.cat-btn{
display:inline-block;padding:9px 24px;border-radius:4px;
background:#1e6fd9;color:#fff;font-size:13px;font-weight:500;
border:1px solid #0d4fa8;cursor:pointer;
transition:background .2s ease,box-shadow .2s ease,border-color .2s ease;
white-space:nowrap;
}
.cat-btn:hover{
background:#2a80ea;border-color:#0d4fa8;
box-shadow:0 3px 12px rgba(30,111,217,.35);
}
/* 激活：背景保持统一蓝色，用白色内框区分 */
.cat-btn.active{
background:#1e6fd9;border-color:#0d4fa8;
box-shadow:inset 0 0 0 2px #fff,0 3px 12px rgba(30,111,217,.35);
}
/* --- 筛选栏 --- */
.filter-section{padding:24px 0 40px}
/* 机房分类与服务器列表之间的分割线 */
.list-divider{height:1px;background:#e3e6ec;margin:0 0 24px}
.filter-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.filter-bar label{font-size:13px;color:#555;display:flex;align-items:center;gap:4px}
.filter-bar select,.filter-bar input[type=text]{padding:8px 12px;border:1px solid #e0e0e6;border-radius:6px;font-size:13px;outline:none;background:#fff}
.filter-bar select:focus,.filter-bar input[type=text]:focus{border-color:#0c3483}
.filter-bar input[type=text]{flex:1;min-width:200px;max-width:280px}
.sort-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.sort-tabs{display:flex;gap:6px}
.sort-tabs a{padding:6px 14px;border-radius:20px;font-size:12px;color:#888;transition:.2s}
.sort-tabs a:hover{color:#0c3483}
.sort-tabs a.active{background:#0c3483;color:#fff}
/* =========================================================
* 服务器卡片（图1/图2 格式）—— block div，只有卡片-CTA 是
* ========================================================= */
.srv-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.srv-card{
background:#fff;border-radius:10px;padding:16px 18px;
box-shadow:0 1px 6px rgba(0,0,0,.06);transition:.25s;
display:flex;flex-direction:column;gap:6px;
cursor:default;border:1.5px solid transparent;
}
/* 悬停点燃色（火焰橙红发光） */
.srv-card:hover{
transform:translateY(-3px);
border-color:#ff7a45;
box-shadow:0 0 0 2px rgba(255,122,69,.35),0 10px 28px rgba(255,110,60,.35);
}
.srv-card:hover .card-cta{background:linear-gradient(135deg,#0a2864,#5b7ee8);transform:translateY(-1px)}
.card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:22px}
.status-dot{width:9px;height:9px;border-radius:50%;background:#ccc}
.status-dot.status-1{background:#22c55e;box-shadow:0 0 6px #22c55e}
.status-dot.status-2{background:#f97316}
.status-dot.status-0{background:#94a3b8}
.top-tag{background:linear-gradient(135deg,#ff6b6b,#ffa502);color:#fff;font-size:11px;padding:2px 8px;border-radius:4px;font-weight:600}
.top-badge-large{background:linear-gradient(135deg,#ff6b6b,#ffa502);color:#fff;font-size:12px;padding:3px 10px;border-radius:4px;font-weight:600}
.cat-badge{background:#e8f0fe;color:#0c3483;font-size:11px;padding:2px 8px;border-radius:4px}
.bgp-line{font-size:11px;padding:2px 8px;border-radius:4px;font-weight:600}
.bgp-all{background:#ffe5e5;color:#d63031}
.bgp-single{background:#e0f7fa;color:#006064}
.bgp-163{background:#e3f2fd;color:#1565c0}
.bgp-992{background:#fff3e0;color:#e65100}
.bgp-cn2{background:#fce4ec;color:#c2185b}
.bgp-gia{background:#f3e5f5;color:#6a1b9a}
.bgp-mix{background:#fff9c4;color:#f57f17}
.bgp-default{background:#f0f0f0;color:#666}
.card-title{font-size:15px;font-weight:700;color:#0560f9;line-height:1.3;margin-top:2px}
/* 配置项（严格按用户格式：标签含冒号，固定宽度，值与标签间距 +3px） */
.card-configs{
display:flex;flex-direction:column;gap:2px;margin:6px -10px 0;padding:7px 10px;
border-radius:8px;transition:background .2s ease,box-shadow .2s ease;
}
/* 鼠标移入配置信息框显示背景色 */
.card-configs:hover{
background:#fff7f2;
box-shadow:inset 0 0 0 1px #ffddc9;
}
.card-conf-item{display:flex;font-size:12px;line-height:1.85;align-items:baseline}
.card-conf-key{
color:#555454;flex-shrink:0;width:50px;font-weight:500;
white-space:pre;
}
.card-conf-val{color:#141414;font-weight:500;word-break:break-all}
/* 价格左对齐 */
.card-bottom{display:flex;justify-content:flex-start;align-items:flex-end;margin-top:4px;padding-top:10px;border-top:1px dashed #eef0f5}
.card-price strong{font-size:20px;color:#e74c3c;font-weight:700} /* 价格红色 */
.card-price small{font-size:12px;color:#888;margin-left:2px}
.card-price em{display:block;font-size:11px;color:#aaa;font-style:normal;margin-top:2px;font-weight:400}
/* 立即订购按钮（卡片内唯一的 链接） */
.card-cta{
text-align:center;margin-top:8px;
padding:10px;border-radius:8px;
background:linear-gradient(135deg,#0c3483,#6a82fb);color:#fff;
font-size:13px;font-weight:600;transition:.25s;cursor:pointer;
}
/* 空状态 */
.empty-box{text-align:center;padding:60px 20px;color:#999}
.empty-box p{margin-bottom:16px}
/* --- 按钮 --- */
.btn{display:inline-block;padding:9px 18px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;border:none;text-decoration:none;transition:.25s;line-height:1.5}
.btn-primary{background:linear-gradient(135deg,#0c3483,#6a82fb);color:#fff}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(12,52,131,.35);color:#fff}
.btn-outline{background:#fff;color:#0c3483;border:1px solid #0c3483}
.btn-outline:hover{background:#eef3ff}
.btn-lg{padding:12px 28px;font-size:15px;border-radius:8px}
/* --- 工具入口 --- */
.tools-entry-section{padding:24px 0 40px}
.tools-entry-inner{background:linear-gradient(135deg,#0c3483,#6a82fb);border-radius:14px;padding:28px 36px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.tools-entry-text h2{font-size:20px;margin-bottom:4px}
.tools-entry-text p{opacity:.85;font-size:14px}
.tools-entry-inner .btn{background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.5);color:#fff}
.tools-entry-inner .btn:hover{background:#fff;color:#0c3483;border-color:#fff}
/* =========================================================
* 详情页
* ========================================================= */
.detail-head{background:linear-gradient(135deg,#0c3483,#3b6fb0);color:#fff;padding:36px 0 40px}
.dh-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.detail-head h1{font-size:24px;font-weight:700;margin-bottom:4px}
.dh-price{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap;margin-top:14px}
/* 详情页价格红色 */
.dh-price .price-main{font-size:30px;font-weight:700;color:#ff6b6b}
.dh-price .price-main em{font-size:13px;font-style:normal;opacity:.8;margin-left:4px;color:#fff}
.price-year{font-size:14px;opacity:.9;color:#fff}
/* 立即购买按钮 —— 图2 样式：蓝色渐变、大圆角、居中、阴影 */
.buy-btn-wrap{text-align:center;margin-top:22px}
.buy-btn{
display:inline-block;padding:14px 60px;
background:linear-gradient(135deg,#0c3483,#6a82fb);
color:#fff;font-size:16px;font-weight:700;
border-radius:30px;cursor:pointer;text-decoration:none;
transition:.25s;box-shadow:0 6px 20px rgba(12,52,131,.4);
}
.buy-btn:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(12,52,131,.5);color:#fff}
.detail-main{padding:26px 0 50px}
.dm-grid{display:grid;grid-template-columns:2fr 1fr;gap:22px;align-items:flex-start}
.dm-card{background:#fff;border-radius:10px;padding:18px 22px;box-shadow:0 2px 8px rgba(0,0,0,.04);margin-bottom:16px}
.dm-card h3{font-size:15px;color:#1a2332;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid #f0f2f7}
.specs{display:flex;flex-direction:column;gap:8px}
.spec-row{display:flex;align-items:baseline;font-size:13px;border-bottom:1px dashed #f5f5f8;padding-bottom:6px}
.spec-row:last-child{border-bottom:none}
.spec-row span:first-child{
color:#888;width:76px;flex-shrink:0;
white-space:nowrap;margin-right:13px;
}
.spec-row strong{color:#222;font-weight:500}
.spec-row strong.code{font-family:Consolas,monospace;color:#0c3483}
.content-body img{max-width:100%;border-radius:8px;margin:10px 0}
.contact-list{list-style:none}
.contact-list li{padding:8px 0;font-size:13px;border-bottom:1px dashed #f5f5f8}
.contact-list li:last-child{border-bottom:none}
.contact-list a{color:#0c3483}
.contact-list a:hover{text-decoration:underline}
.stat-list{display:flex;flex-direction:column;gap:10px}
.stat-list>div{display:flex;justify-content:space-between;align-items:center}
.stat-list strong{font-size:17px;color:#0c3483;font-weight:700}
.stat-list span{font-size:12px;color:#999}
.rel-list{list-style:none}
.rel-list li{border-bottom:1px dashed #f5f5f8}
.rel-list li:last-child{border-bottom:none}
.rel-list a{display:flex;justify-content:space-between;padding:10px 0;font-size:13px}
.rel-list em{font-style:normal;color:#e74c3c;font-weight:600}
/* --- 徽章 --- */
.badge{font-size:11px;padding:2px 8px;border-radius:4px;font-weight:600}
.badge-green{background:#dcfce7;color:#15803d}
.badge-orange{background:#ffedd5;color:#c2410c}
.badge-gray{background:#e5e7eb;color:#6b7280}
.badge-blue{background:#dbeafe;color:#1d4ed8}
/* --- 分页 --- */
.pagination{display:flex;justify-content:center;gap:6px;margin:28px 0 10px;flex-wrap:wrap}
.page-btn{padding:7px 14px;border:1px solid #e5e7eb;border-radius:6px;font-size:13px;color:#555;background:#fff;transition:.2s}
.page-btn:hover{border-color:#0c3483;color:#0c3483}
.page-btn.active{background:#0c3483;color:#fff;border-color:#0c3483}
.page-ellipsis{color:#aaa;padding:0 4px}
/* =========================================================
* 工具下载页 —— 图标位置：在标题前面（inline row）
* ========================================================= */
.dl-page{padding:28px 0 40px}
.tl-bar{display:flex;gap:12px;margin-bottom:16px;align-items:center;flex-wrap:wrap}
.tl-bar input{flex:1;max-width:360px;padding:10px 14px;border:1px solid #e0e0e0;border-radius:6px;outline:none}
.tl-bar input:focus{border-color:#0c3483}
.tl-sort a{padding:7px 14px;border-radius:20px;color:#888;font-size:12px;margin-left:4px;transition:.2s}
.tl-sort a.active{background:#0c3483;color:#fff}
.tl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.tl-card{background:#fff;border-radius:10px;padding:18px;box-shadow:0 2px 10px rgba(0,0,0,.05);transition:.25s;display:flex;flex-direction:column}
.tl-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(12,52,131,.14)}
/* 图标 + 标题 同一行（需求10：图标放标题前面） */
.tl-title-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.tl-icon-big{font-size:28px;flex-shrink:0;line-height:1}
.tl-title-text{flex:1;min-width:0;position:relative}
.tl-title-text h4{font-size:14px;font-weight:700;color:#1a2332;margin-right:36px;line-height:1.3}
.tl-ver{color:#999;font-size:11px;font-weight:400;margin-left:6px}
.tl-top{position:absolute;top:0;right:0;background:#ff6b6b;color:#fff;font-size:10px;padding:1px 6px;border-radius:3px;font-weight:600}
.tl-desc{font-size:12px;color:#777;line-height:1.5;flex:1;margin-bottom:12px;min-height:34px}
.tl-meta{display:flex;justify-content:space-between;font-size:11px;color:#999;padding-top:8px;border-top:1px solid #f0f0f0;margin-bottom:12px}
.tl-meta .size{color:#0c3483;font-weight:600}
.tl-dl{display:block;background:linear-gradient(135deg,#0c3483,#6a82fb);color:#fff;padding:9px 16px;border-radius:7px;font-size:13px;text-align:center;transition:.2s}
.tl-dl:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(12,52,131,.4);color:#fff;text-decoration:none}
.tl-dl.disabled{background:#ddd;pointer-events:none}
/* =========================================================
* Footer —— 图5 样式：深色横条 + 左 logo + 右侧两行链接/版权
* 贴底：margin-top:auto + flex column 父
* ========================================================= */
.footer{
background:#1e1e1e;border-top:3px solid #2b2b2b;
color:#8a8a8a;font-size:12px;margin-top:auto;flex-shrink:0;
padding:26px 0;
}
.footer-main{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
/* 底部 logo 文字特效：黄绿流光 + 呼吸发光（老浏览器自动回退为纯黄绿，不会消失） */
.footer-brand{
font-size:24px;font-weight:700;letter-spacing:1px;flex-shrink:0;line-height:1.2;
color:#cde800;transition:transform .3s ease;
}
.footer-brand:hover{transform:scale(1.06)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.footer-brand{
background:linear-gradient(90deg,#cde800 0%,#ffffff 28%,#7ccf00 58%,#cde800 100%);
background-size:300% 100%;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;color:transparent;
animation:logoShine 3.2s linear infinite,brandPulse 2.6s ease-in-out infinite alternate;
will-change:background-position,filter;
}
}
@keyframes brandPulse{
0% {filter:drop-shadow(0 0 3px rgba(205,232,0,.3))}
100%{filter:drop-shadow(0 0 14px rgba(205,232,0,.85))}
}
.footer-info{flex:1;min-width:260px}
.footer-links{display:flex;flex-wrap:wrap;align-items:center;gap:0;margin-bottom:10px}
.footer-links a{color:#9a9a9a;font-size:12px;padding:0 11px;transition:.2s;line-height:1.9}
.footer-links a:first-child{padding-left:0}
.footer-links a:hover{color:#fff}
.fl-sep{color:#4a4a4a;font-size:11px}
.footer-copy{display:flex;flex-wrap:wrap;align-items:center;gap:2px;color:#777;font-size:12px}
.footer-copy a{color:#777;transition:.2s}
.footer-copy a:hover{color:#cde800;text-decoration:underline}
.fc-sep{color:#4a4a4a;padding:0 4px}
/* --- 响应式 --- */
@media(max-width:1040px){
.srv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
.dm-grid{grid-template-columns:1fr}
.srv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.footer-main{gap:20px}
}
@media(max-width:768px){
.nav{gap:2px}
.nav-link{padding:6px 12px;font-size:13px}
.hero h1{font-size:22px}
.hero-btn{padding:11px 32px;font-size:14px}
.srv-grid{grid-template-columns:1fr}
.filter-bar{flex-direction:column;align-items:stretch}
.filter-bar input[type=text]{max-width:none}
.sort-bar{flex-direction:column;gap:10px;align-items:flex-start}
.tools-entry-inner{flex-direction:column;text-align:center}
.buy-btn{width:220px}
.footer-main{flex-direction:column;align-items:flex-start;gap:14px}
}