/* ===================================================================
   server.css —— 云服务器（展示页 + 结账页）浅色 Techvia 风
   展示页：default.asp（hero 复用 custom.css 的 .page-hero/.hero-copy）
   结账页：buy.asp（.server-buy-* 段，见文件后半）
   设计令牌：主色#2563eb 标题#0b1f4d 正文#5f5f5f 边框#e6e9ef 浅底#f5f7fa；直角
=================================================================== */

.server-page{ background:#fff; }
.server-page .container-1200{ max-width:1200px; margin:0 auto; padding:0 20px; }

/* 通用区块标题 */
.server-section-title{ text-align:center; max-width:680px; margin:0 auto 44px; }
.server-section-title h2{ font-size:32px; font-weight:700; color:#0b1f4d; margin-bottom:12px; }
.server-section-title p{ color:#7a8699; font-size:16px; margin:0; }

/* ===== 爆款推荐横幅 ===== */
.server-hot-banner{ max-width:1200px; margin:24px auto 0; padding:0 20px; }
.server-hot-card{ display:flex; align-items:center; gap:24px; flex-wrap:wrap;
  background:linear-gradient(110deg,#0b2a6b 0%,#1457c8 100%); color:#fff;
  padding:22px 28px; position:relative; overflow:hidden; }
.server-hot-card::after{ content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%); pointer-events:none; }
.server-hot-info{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; flex:1; min-width:260px; position:relative; z-index:1; }
.server-hot-tag{ display:inline-flex; align-items:center; gap:6px; font-size:15.5px; font-weight:700; letter-spacing:.5px;
  background:#ffd24a; color:#5a3d00; padding:7px 15px; white-space:nowrap; }
.server-hot-tag i{ color:#e11d2a; font-size:16px; }
.server-hot-specs{ display:flex; flex-wrap:wrap; gap:8px; flex:1; justify-content:center; }
.server-hot-chip{ font-size:14.5px; color:#eaf1ff; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); padding:6px 13px; }
.server-hot-price{ font-size:31px; font-weight:800; white-space:nowrap; position:relative; z-index:1; color:#ffd24a; }
.server-hot-price small{ font-size:15px; font-weight:500; opacity:.85; }
.server-hot-btn{ display:inline-flex; align-items:center; background:#fff; color:#1457c8; font-weight:700; font-size:16px;
  padding:13px 28px; text-decoration:none; transition:.25s; position:relative; z-index:1; white-space:nowrap; }
.server-hot-btn:hover{ background:#0b1f4d; color:#fff; }

/* ===== 产品区 ===== */
.server-regions{ max-width:1200px; margin:0 auto; padding:80px 20px; }
.server-regions-title{ text-align:center; margin-bottom:36px; }
.server-regions-title h2{ font-size:32px; font-weight:700; color:#0b1f4d; margin-bottom:12px; }
.server-regions-title p{ color:#7a8699; font-size:16px; margin:0; }

/* 区域标签 */
.server-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:36px; }
.server-tab{ display:inline-flex; align-items:center; font-size:15px; font-weight:600; color:#44516a;
  background:#fff; border:1px solid #e6e9ef; padding:10px 20px; cursor:pointer; transition:.2s; }
.server-tab:hover{ border-color:#2563eb; color:#2563eb; }
.server-tab.active{ background:linear-gradient(135deg,#2563eb,#1d4ed8); border-color:transparent; color:#fff; box-shadow:0 8px 20px rgba(37,99,235,.28); }

/* 产品网格 */
.server-products{ display:none; }
.server-products.active{ display:block; animation:srvFade .35s ease; }
@keyframes srvFade{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.server-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.server-empty{ grid-column:1/-1; text-align:center; color:#9aa6b4; padding:60px 0; }

/* 产品卡 */
.server-card{ position:relative; background:#fff; border:1px solid #e6e9ef; display:flex; flex-direction:column;
  transition:transform .25s, box-shadow .25s, border-color .25s; }
.server-card:hover{ transform:translateY(-6px); box-shadow:0 18px 44px rgba(20,40,80,.12); border-color:#cdd9f5; }
.server-badge{ position:absolute; top:0; right:0; background:linear-gradient(135deg,#10b981,#059669); color:#fff;
  font-size:12px; font-weight:600; padding:5px 12px; }
/* 推荐配置（4核8G）：发光边框 + 角标 */
.server-card.server-card-rec{ border-color:#6366f1; box-shadow:0 0 0 1px #6366f1, 0 10px 30px rgba(99,102,241,.28);
  animation:srvRecGlow 2.2s ease-in-out infinite; }
.server-card.server-card-rec:hover{ border-color:#6366f1; box-shadow:0 0 0 1px #818cf8, 0 18px 46px rgba(99,102,241,.4); }
@keyframes srvRecGlow{ 0%,100%{ box-shadow:0 0 0 1px #6366f1, 0 8px 24px rgba(99,102,241,.22); }
  50%{ box-shadow:0 0 0 1px #818cf8, 0 12px 38px rgba(99,102,241,.45); } }
.server-rec-badge{ position:absolute; top:-12px; left:16px; z-index:3; background:linear-gradient(135deg,#6366f1,#8b5cf6);
  color:#fff; font-size:11px; font-weight:600; letter-spacing:0; padding:4px 12px; line-height:1.4;
  box-shadow:0 4px 12px rgba(99,102,241,.45); }
.server-rec-badge i{ margin-right:3px; font-size:10px; }
.server-card-header{ padding:22px 24px 16px; border-bottom:1px solid #eef1f6; }
.server-card-name{ font-size:21px; font-weight:700; color:#0b1f4d; }
.server-card-desc{ font-size:14px; color:#8a98a8; margin-top:5px; min-height:18px; }
.server-card-body{ padding:18px 24px; }
.server-spec-row{ display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-bottom:1px dashed #eef1f6; }
.server-spec-row:last-child{ border-bottom:none; }
.server-spec-label{ display:inline-flex; align-items:center; gap:8px; font-size:15px; color:#7a8699; }
.server-spec-label svg{ width:18px; height:18px; color:#2563eb; }
.server-spec-value{ font-size:15px; font-weight:600; color:#27344a; }
.server-card-features{ padding:4px 24px 16px; display:flex; flex-direction:column; gap:8px; }
.server-feature{ display:flex; align-items:center; gap:8px; font-size:14px; color:#5f6b7e; }
.server-feature svg{ width:15px; height:15px; color:#10b981; flex:0 0 auto; }
.server-card-footer{ margin-top:auto; padding:18px 24px 22px; border-top:1px solid #eef1f6; background:#fafbfd; }
.server-price-group{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; margin-bottom:14px; }
.server-price-main{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.server-price-amount{ font-size:31px; font-weight:800; color:#2563eb; }
.server-price-period{ font-size:15px; color:#8a98a8; }
.server-price-discount{ font-size:13px; font-weight:700; color:#dc2626; background:#fff0f0; border:1px solid #fbcbcb; padding:2px 8px; }
.server-price-yearly{ font-size:14px; color:#8a98a8; margin-left:auto; }
.server-buy-btn{ display:block; text-align:center; background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff;
  font-size:16px; font-weight:700; padding:14px; text-decoration:none; transition:.25s; }
.server-buy-btn:hover{ color:#fff; box-shadow:0 10px 24px rgba(37,99,235,.34); transform:translateY(-2px); }

/* IP 数量下拉（卡内） */
.server-ip-select{ background:#fff; border:1px solid #dfe5ef; padding:5px 26px 5px 10px; font-size:13px; color:#27344a;
  cursor:pointer; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; transition:.2s; }
.server-ip-select:hover{ border-color:#2563eb; }
.server-ip-select:focus{ outline:none; border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.12); }

/* ===== 特点与优势 ===== */
.server-features-section{ background:#f5f7fa; padding:80px 0; }
.server-features-container{ max-width:1200px; margin:0 auto; padding:0 20px; }
.server-features-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.server-feature-card{ background:#fff; border:1px solid #e6e9ef; padding:30px 26px; transition:transform .25s, box-shadow .25s; }
.server-feature-card:hover{ transform:translateY(-5px); box-shadow:0 16px 38px rgba(20,40,80,.1); }
.server-feature-icon{ width:54px; height:54px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#2563eb,#1d4ed8); margin-bottom:18px; }
.server-feature-icon svg{ width:26px; height:26px; color:#fff; }
.server-feature-card h3{ font-size:18px; font-weight:700; color:#0b1f4d; margin-bottom:10px; }
.server-feature-card p{ font-size:14px; color:#7a8699; line-height:1.8; margin:0; }

/* ===== 强大功能 + 控制面板 ===== */
.srv-cap-section{ background:#fff; padding:80px 0; }
.srv-cap-wrap{ max-width:1200px; margin:0 auto; padding:0 20px; display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }
.srv-cap-card{ background:#fbfcfe; border:1px solid #e6e9ef; padding:34px 32px; }
.srv-cap-card > h2{ font-size:23px; font-weight:700; color:#0b1f4d; margin-bottom:8px; }
.srv-cap-card > p{ font-size:14px; color:#7a8699; margin-bottom:24px; }
/* 左卡：功能宫格 */
.srv-feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.srv-feat{ display:flex; flex-direction:column; align-items:center; text-align:center; background:#fff; border:1px solid #eef1f6; padding:22px 12px; transition:.2s; }
.srv-feat:hover{ border-color:#cdd9f5; box-shadow:0 10px 24px rgba(20,40,80,.08); transform:translateY(-3px); }
.srv-feat-ico{ width:56px; height:56px; margin:0 0 14px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; background:#eaf1ff; color:#2563eb; }
.srv-feat-ico i{ font-size:24px; line-height:1; width:1.25em; text-align:center; }
.srv-feat b{ display:block; font-size:15px; color:#27344a; font-weight:700; margin-bottom:3px; }
.srv-feat span:not(.srv-feat-ico){ display:block; font-size:12px; color:#9aa6b4; line-height:1.5; }
/* 右卡：控制面板 */
.srv-panel-body{ display:grid; grid-template-columns:1fr 1.05fr; gap:26px; align-items:center; }
.srv-panel-list{ list-style:none; padding:0; margin:0; }
.srv-panel-list li{ display:flex; align-items:center; gap:9px; font-size:15px; color:#44516a; padding:9px 0; border-bottom:1px dashed #eef1f6; }
.srv-panel-list li:last-child{ border-bottom:none; }
.srv-panel-list li i{ color:#2563eb; font-size:16px; }
.srv-panel-btn{ display:inline-flex; margin-top:22px; background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff; font-weight:700; font-size:14px; padding:12px 26px; text-decoration:none; transition:.25s; }
.srv-panel-btn:hover{ color:#fff; box-shadow:0 10px 24px rgba(37,99,235,.34); transform:translateY(-2px); }
.srv-panel-mock{ background:linear-gradient(160deg,#0b1f4d 0%,#0a1635 100%); padding:16px; }
.srv-panel-mock .pm-bar{ display:block; height:9px; width:62%; background:rgba(255,255,255,.2); margin-bottom:14px; }
.srv-panel-mock .pm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.srv-panel-mock .pm-tile{ height:52px; background:linear-gradient(135deg,rgba(37,99,235,.55),rgba(99,102,241,.22)); position:relative; overflow:hidden; }
.srv-panel-mock .pm-tile::after{ content:""; position:absolute; left:8px; right:8px; bottom:8px; height:3px; background:rgba(255,255,255,.4); }

/* ===== 全球优质网络节点 ===== */
.srv-nodes-section{ background:#f5f7fa; padding:80px 0; }
.srv-nodes-card{ max-width:1200px; margin:0 auto; padding:0 20px; }
.srv-nodes-inner{ background:#fff; border:1px solid #e6e9ef; padding:34px 32px; }
.srv-nodes-inner > h2{ font-size:23px; font-weight:700; color:#0b1f4d; margin-bottom:8px; }
.srv-nodes-inner > p{ font-size:14px; color:#7a8699; margin-bottom:24px; }
.srv-node-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.srv-node{ display:flex; align-items:center; gap:14px; background:#f7f9fc; border:1px solid #eef1f6; padding:18px; transition:.2s; }
.srv-node:hover{ border-color:#cdd9f5; background:#fff; box-shadow:0 10px 24px rgba(20,40,80,.08); }
.srv-node-flag{ flex:0 0 auto; }
.srv-node-flag img{ width:34px; height:24px; object-fit:cover; display:block; border:1px solid #e6e9ef; }
.srv-node-info{ flex:1; min-width:0; }
.srv-node-info b{ display:block; font-size:15px; color:#27344a; font-weight:700; }
.srv-node-info span{ display:block; font-size:12px; color:#9aa6b4; margin-top:2px; }
.srv-node-ping{ flex:0 0 auto; font-size:13px; font-weight:700; color:#2563eb; background:#eaf1ff; padding:4px 10px; white-space:nowrap; }

/* ===== 响应式（展示页） ===== */
@media (max-width:992px){
  .server-grid,.server-features-grid{ grid-template-columns:repeat(2,1fr); }
  .srv-cap-wrap{ grid-template-columns:1fr; }
  .srv-node-grid{ grid-template-columns:1fr; }
}
@media (max-width:768px){
  .server-regions{ padding:54px 16px; }
  .server-regions-title h2,.server-section-title h2{ font-size:26px; }
  .server-grid,.server-features-grid{ grid-template-columns:1fr; }
  .server-features-section,.srv-cap-section,.srv-nodes-section{ padding:54px 0; }
  /* 爆款推荐 banner 手机版：标签+配置竖排整行，价格(左)+按钮(右)同一行 */
  .server-hot-card{ padding:18px; gap:14px; }
  .server-hot-info{ flex:1 1 100%; min-width:0; flex-direction:column; align-items:flex-start; gap:11px; }
  .server-hot-specs{ flex:none; justify-content:flex-start; gap:7px; }
  .server-hot-chip{ font-size:13px; padding:5px 10px; }
  .server-hot-price{ font-size:26px; flex:1; }
  .server-hot-btn{ padding:12px 22px; font-size:15px; }
  .srv-panel-body{ grid-template-columns:1fr; }
  .srv-feat-grid{ grid-template-columns:repeat(2,1fr); }
}