/* ============================================================
   server.html — 服务器运维服务页独有样式
   命名空间：body.page-server
   签名布局：机柜分段横栏 + 伪数据监控面板网格
   ============================================================ */

body.page-server .hero-note{margin-top:18px;font-size:13.5px;color:var(--c-muted)}
body.page-server .hero-note a{color:var(--c-purple-400);font-weight:600}

/* ---------- 机柜横栏 ---------- */
body.page-server .rack{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
body.page-server .rack-cell{position:relative;background:var(--grad-dark);color:#D9CCE2;border-radius:var(--radius-md);
  padding:26px 18px 22px;box-shadow:var(--shadow-card);transition:transform .35s var(--ease)}
body.page-server .rack-cell:hover{transform:translateY(-5px)}
body.page-server .rack-led{display:block;width:10px;height:10px;border-radius:50%;background:#7FE3B0;
  box-shadow:0 0 0 4px rgba(127,227,176,.2);margin-bottom:14px}
body.page-server .rack-cell h3{color:#fff;font-size:16px;margin-bottom:8px}
body.page-server .rack-cell p{font-size:13px;color:#B9A9C4;line-height:1.7}

/* ---------- 监控面板 ---------- */
body.page-server .dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:30px}
body.page-server .dash-card{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-md);
  padding:22px 24px;box-shadow:var(--shadow-card)}
body.page-server .dash-label{font-size:13px;color:var(--c-muted);display:block;margin-bottom:6px}
body.page-server .dash-num{font-size:26px;font-weight:800;color:var(--c-ink);display:block;margin-bottom:12px}
body.page-server .dash-bar{height:8px;border-radius:8px;background:var(--c-purple-100);overflow:hidden}
body.page-server .dash-bar i{display:block;height:100%;background:var(--grad-main);border-radius:8px}

/* 运维时间线横滑 */
body.page-server .dash-tl{flex:0 0 260px;background:#fff;border:1px solid var(--c-line);
  border-radius:var(--radius-md);padding:20px 22px;box-shadow:var(--shadow-card);border-left:4px solid var(--c-purple-300)}
body.page-server .tl-date{display:inline-block;font-size:12.5px;font-weight:800;color:var(--c-purple-400);margin-bottom:6px}
body.page-server .dash-tl p{font-size:13.5px;color:var(--c-text)}
body.page-server .h-scroll-hint{margin-top:12px;margin-left:2px}

/* ---------- 安全清单 ---------- */
body.page-server .safe-sec{display:grid;grid-template-columns:1fr 1.2fr;gap:50px;align-items:start}
body.page-server .safe-txt h2{margin:12px 0 14px}
body.page-server .safe-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:16px}
body.page-server .safe-list li{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-md);
  padding:20px 22px;box-shadow:var(--shadow-card)}
body.page-server .safe-list h3{font-size:15.5px;margin-bottom:8px}
body.page-server .safe-list p{font-size:13.5px;color:var(--c-text)}

/* ---------- 服务等级表 ---------- */
body.page-server .level-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--c-line);
  background:#fff;box-shadow:var(--shadow-card)}
body.page-server .level-table{width:100%;border-collapse:collapse;min-width:640px;font-size:14.5px}
body.page-server .level-table th{background:var(--grad-soft);padding:15px 18px;font-size:14px;color:var(--c-ink);text-align:left}
body.page-server .level-table td{padding:13px 18px;border-top:1px solid var(--c-line);color:var(--c-text)}
body.page-server .level-table tbody tr:hover{background:var(--c-bg-pink)}
body.page-server .rank-note{margin-top:16px;font-size:14px;color:var(--c-muted)}
body.page-server .rank-note a{color:var(--c-purple-400);font-weight:600}

/* ---------- FAQ ---------- */
body.page-server .faq-list{display:grid;grid-template-columns:1fr 1fr;gap:18px}
body.page-server .faq-item{background:#fff;border:1px solid var(--c-line);border-radius:var(--radius-md);padding:20px 24px}
body.page-server .faq-item summary{cursor:pointer;font-weight:700;color:var(--c-ink);font-size:15.5px;list-style:none;
  display:flex;justify-content:space-between;align-items:center}
body.page-server .faq-item summary::-webkit-details-marker{display:none}
body.page-server .faq-item summary::after{content:"+";font-size:20px;color:var(--c-purple-400)}
body.page-server .faq-item[open] summary::after{content:"−"}
body.page-server .faq-item p{margin-top:12px;font-size:14px;color:var(--c-text)}
body.page-server .faq-item a{color:var(--c-purple-400);font-weight:600}

/* ---------- CTA ---------- */
body.page-server .cta-band{background:var(--grad-soft);border-top:1px solid var(--c-line);padding:70px 0}
body.page-server .cta-in{text-align:center;max-width:760px;margin:0 auto}
body.page-server .cta-in img{border-radius:var(--radius-lg);margin:0 auto 26px;box-shadow:var(--shadow-soft)}
body.page-server .cta-in h2{margin-bottom:14px}
body.page-server .cta-in>p{margin-bottom:24px;color:var(--c-text)}

/* ---------- 响应式 ---------- */
@media (max-width:1100px){
  body.page-server .rack{grid-template-columns:repeat(3,1fr)}
  body.page-server .safe-sec{grid-template-columns:1fr;gap:30px}
}
@media (max-width:768px){
  body.page-server .dash-grid{grid-template-columns:1fr 1fr}
  body.page-server .safe-list{grid-template-columns:1fr}
  body.page-server .faq-list{grid-template-columns:1fr}
}
@media (max-width:360px){
  body.page-server .rack{grid-template-columns:1fr 1fr}
  body.page-server .dash-grid{grid-template-columns:1fr}
  body.page-server .dash-tl{flex:0 0 230px;padding:18px}
}