/* 版权所有 © 八艾云 (www.8a.hk) 保留所有权利 */
/* server-plans.css — 云服务器产品页 (/server/ 推荐配置) 与套餐云列表 (/cloud/) 共用的套餐卡: 标题+说明+分隔线 / 图标盒规格行 / 浅灰价格面板 (首月橙+红标, 首年蓝+紫标) / 44px 按钮 / 热门卡描边+胶囊。 */

/* 云服务器套餐卡片 — 参照云服务器配置器横排布局 (名称+场景+CPU/内存/硬盘/带宽+月年双价) */
.byc-svr-plans { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 768px)  { .byc-svr-plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .byc-svr-plans { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) {
  .byc-svr-plans.is-single { grid-template-columns: minmax(0, 420px); justify-content: center; }
  .byc-svr-plans.is-pair { grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; }
}
/* 推荐配置卡 —— 参考稿逐项对齐:
   ① 整节浅灰底, 卡片白底无边、只留轻投影, 圆角 16, 内边距 30
   ② 标题 + 场景句 + 分隔线 (标题下留足空气)
   ③ 规格行 64px: 36px 浅蓝图标盒 | 标签次级灰 | 值右对齐常规字重, 细线分隔
   ④ 浅灰价格面板: 首月橙 (数字+单位同色) + 红色折扣标, 首年蓝 + 紫色折扣标 (站内 red / purple token)
   ⑤ 52px 通栏渐变按钮
   ⑥ 热门卡 = 2px 主蓝描边 + 顶部居中悬浮「👍 热门推荐」胶囊
   字号按站内尺度 (标题 18 / 场景 13 / 行 13-14 / 价格 28 / 按钮 44), 参考稿只借版式与比例; 防御行不显示 */
.byc-svr-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 2px solid transparent; border-radius: 16px; padding: 30px 30px 28px; box-shadow: 0 2px 14px rgba(31,44,74,.06); transition: var(--byc-trans); }
.byc-svr-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(31,44,74,.10); }
.byc-svr-card.is-hot { border-color: var(--byc-primary); box-shadow: 0 8px 30px rgba(43,109,232,.14); }
.byc-svr-tag { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 16px; background: var(--byc-primary); color: #fff; font-size: 13px; font-weight: 700; border-radius: 999px; box-shadow: 0 4px 12px rgba(43,109,232,.3); white-space: nowrap; }
.byc-svr-tag::before { content: ''; width: 14px; height: 14px; background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M2 10h4v11H2zM22 11c0-1.1-.9-2-2-2h-5.3l.9-4.3v-.3c0-.4-.2-.8-.4-1.1L14.2 2 7.6 8.6c-.4.4-.6.9-.6 1.4v9c0 1.1.9 2 2 2h8c.8 0 1.5-.5 1.8-1.2l3-7.1c.1-.2.2-.5.2-.7v-1z'/%3E%3C/svg%3E"); }
.byc-svr-plans { padding-top: 16px; }   /* 给热门胶囊向上溢出的 15px 留位 */
.byc-svr-sec { padding-top: 24px; }
@media (max-width: 639px) { .byc-svr-card { padding: 22px 20px 20px; } .byc-svr-plans { gap: 16px; } }   /* 手机端: 卡内边距 30 → 20, 卡间距 24 → 16 */   /* 切换栏紧接着卡片: 节顶部留白 64 → 24 (「间距太高」), 切换栏到卡顶 40px */
.byc-svr-name { font-size: 18px; font-weight: 700; color: var(--byc-text); margin: 0 0 8px; line-height: 1.4; }
.byc-svr-scene { font-size: 13px; color: var(--byc-text-mut); padding-bottom: 20px; margin-bottom: 4px; border-bottom: 1px solid var(--byc-border); }
.byc-svr-specs { list-style: none; padding: 0; margin: 0; }
.byc-svr-specs li { display: flex; align-items: center; gap: 12px; padding: 13px 0; font-size: 13px; border-bottom: 1px solid var(--byc-border); }
.byc-svr-specs li:last-child { border-bottom: 0; }
.byc-svr-ico { flex-shrink: 0; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--byc-primary-50); color: var(--byc-primary); border-radius: 9px; }
.byc-svr-ico svg { width: 18px; height: 18px; }
.byc-svr-lab { color: var(--byc-text-sec); min-width: 44px; }
.byc-svr-val { color: var(--byc-text); font-size: 14px; font-weight: 500; flex: 1; text-align: right; }
.byc-svr-price { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 12px; padding: 16px 18px; margin: 16px 0 16px; background: var(--byc-bg-light); border-radius: 12px; }   /* 四位数价格 (2,388) 并排放不下时年价整块换行, 单位不拆字 */
.byc-svr-pr { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 2px 8px; }
.byc-svr-pr-now { font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.byc-svr-pr--m .byc-svr-pr-now { color: var(--byc-accent); }
.byc-svr-pr--y .byc-svr-pr-now { color: var(--byc-primary); font-size: 24px; }
.byc-svr-pr-u { font-size: 13px; font-weight: 500; white-space: nowrap; }
.byc-svr-pr--m .byc-svr-pr-u { color: var(--byc-accent); }
.byc-svr-pr--y .byc-svr-pr-u { color: var(--byc-primary); }
.byc-svr-disc { align-self: center; margin-left: 2px; padding: 4px 8px; font-size: 12px; font-weight: 700; color: #fff; border-radius: 5px; line-height: 1.2; white-space: nowrap; }
.byc-svr-pr--m .byc-svr-disc { background: var(--byc-red); box-shadow: 0 3px 8px rgba(239,68,68,.25); }
.byc-svr-pr--y .byc-svr-disc { background: var(--byc-purple); box-shadow: 0 3px 8px rgba(139,92,246,.25); }
.byc-svr-price.is-single-period { justify-content: center; }
/* 平板及以下: 卡片 2 列时月/年价格块并排过窄 → 上下堆叠 */
@media (max-width: 1199px) {
  .byc-svr-price { flex-direction: column; align-items: flex-start; gap: 12px; }
}
.byc-svr-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 44px; padding: 0 16px; background: var(--byc-grad-primary); color: #fff; font-size: 15px; font-weight: 600; border-radius: 8px; margin-top: auto; box-shadow: 0 4px 12px rgba(43,109,232,.2); transition: var(--byc-trans); }
.byc-svr-btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(43,109,232,.35); }
.byc-svr-custom { text-align: center; margin-top: 28px; padding: 16px 20px; background: var(--byc-primary-50); border-radius: 12px; font-size: 14px; color: var(--byc-text-sec); }
.byc-svr-custom a { color: var(--byc-primary); font-weight: 600; }
.byc-svr-empty { grid-column: 1 / -1; text-align: center; padding: 42px 20px; color: var(--byc-text-mut); background: #fff; border-radius: 16px; box-shadow: 0 2px 14px rgba(31,44,74,.06); }
.byc-svr-empty a { color: var(--byc-primary); font-weight: 600; }
.byc-guide-head { display: flex; align-items: center; gap: 10px; }
.byc-guide-head h3 { flex: 1; font-size: 16px; font-weight: 600; }   /* 整页字号审计: 指南栏标题之前没设字号, 浏览器默认 16.38px/700; 与「为什么选择」卡标题统一 16/600 */
.byc-scene h3 { font-size: 16px; }   /* product.css 写的 17, 本页三组卡片标题统一 16 */
.byc-guide-more { color: var(--byc-text-mut); font-size: 12px; white-space: nowrap; }
.byc-guide-list { list-style: none; padding: 0; margin: 16px 0 0; }
.byc-guide-list li { border-top: 1px dashed var(--byc-border); }
.byc-guide-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; color: var(--byc-text-sec); font-size: 13px; }
.byc-guide-list a::after { content: "→"; color: var(--byc-text-mut); }
.byc-guide-list a:hover { color: var(--byc-primary); }