/* ==========================================================================
   VPNVO · 首页专属样式
   核心卖点清单 + 详情面板 · 线路状态组件 · 小节说明块
   所有取值引用 base.css 的设计令牌
   ========================================================================== */

/* ---- hero 装置内小图标着色 ---- */
.hexchip svg{color:var(--accent)}

/* ---- 小节脚注与说明块 ---- */
.sec-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:var(--sp-5)}
.sec-foot .link{display:inline-flex;align-items:center;min-height:32px;font-size:13.5px;font-weight:600}

.note-block{display:grid;gap:10px;max-width:76ch;min-width:0;margin-top:var(--sp-6)}
.note-block h3{font-size:16px;font-weight:700;letter-spacing:-.01em}
.note-block p{font-size:14px;line-height:1.8;color:var(--text-muted)}

/* ---- 核心卖点:组件清单 + 详情面板 ---- */
.feat{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);gap:var(--sp-5);align-items:start;min-width:0}
.feat-list{display:grid;gap:6px;min-width:0}
.feat-tab{
  display:flex;align-items:center;gap:10px;width:100%;min-width:0;min-height:46px;
  padding:11px 14px;text-align:left;cursor:pointer;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);
  font-size:14px;font-weight:600;color:var(--text-muted);
  box-shadow:var(--hi);
  transition:color .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
.feat-tab:hover{color:var(--text);border-color:var(--border-strong)}
.feat-dot{width:6px;height:6px;border-radius:var(--r-pill);background:var(--border-strong);flex:none}
.feat-tab[aria-selected="true"]{color:var(--text);border-color:var(--accent-24);background:var(--bg);box-shadow:var(--shadow-1),var(--hi)}
.feat-tab[aria-selected="true"] .feat-dot{background:var(--accent);box-shadow:0 0 0 3px var(--accent-12)}

.feat-panels{min-width:0}
.feat-panel{
  min-width:0;padding:22px;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2),var(--hi);
}
.feat-panel[hidden]{display:none}
.feat-panel h3{font-size:17px}
.feat-panel p{margin-top:10px;font-size:14.5px;line-height:1.8;color:var(--text-muted)}
.feat-panel .badge{margin-top:14px}

/* ---- 线路状态(数据由 servers.js 注入) ---- */
.status-block{margin-top:var(--sp-6);min-width:0}
.status-cap{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;color:var(--text-muted);
}
.status-cap .dot{width:5px;height:5px}
#server-status:empty{display:none}
.server-status{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}
.srv-row{
  display:flex;align-items:center;gap:8px;min-width:0;
  padding:8px 10px;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-sm);box-shadow:var(--hi);
}
.srv-dot{
  width:6px;height:6px;border-radius:var(--r-pill);flex:none;
  background:var(--success);box-shadow:0 0 0 3px var(--success-14);
  animation:srv-breathe 2.6s ease-in-out infinite;
}
@keyframes srv-breathe{0%,100%{opacity:.5}50%{opacity:1}}
.srv-flag{flex:none;display:inline-flex;width:18px;height:12px;border-radius:var(--r-2xs);overflow:hidden;background:var(--bg-panel-2)}
.srv-flag svg{width:100%;height:100%}
.srv-name{min-width:0;font-size:12.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srv-type{
  flex:none;font-family:var(--font-mono);font-size:9.5px;color:var(--text-muted);
  background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-xs);
  padding:1px 5px;white-space:nowrap;
}
.srv-ms{margin-left:auto;flex:none;font-family:var(--font-mono);font-size:11px;color:var(--success);white-space:nowrap}
.srv-bw{flex:none;font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);white-space:nowrap}

/* ---- 客户端说明 ---- */
.client-note{margin-top:var(--sp-5);max-width:72ch;font-size:13.5px;line-height:1.8;color:var(--text-muted)}

/* ---- 套餐区补充块 ---- */
.pack-block{margin-top:var(--sp-6);min-width:0}
.pack-block h3{font-size:16px}
.pack-sub{margin-top:6px;font-size:13.5px;line-height:1.7;color:var(--text-muted)}
.pack-block .pack-grid{margin-top:var(--sp-3)}

/* ---- 响应式 ---- */
@media (max-width:900px){
  .feat{grid-template-columns:1fr;gap:var(--sp-4)}
  .feat-list{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:4px}
  .feat-tab{width:auto;flex:none;white-space:nowrap;min-height:40px;padding:9px 14px;font-size:13.5px}
  .server-status{grid-template-columns:1fr}
}

@media (max-width:640px){
  .feat-panel{padding:18px}
  .note-block{margin-top:var(--sp-5)}
}