/* ============================================================
   VPNWS — home.css
   首页专属样式:分区节奏 / 卖点三卡补充件 / 用途详情面板 /
   选型参考 / 线路状态容器 / 小注与链接行
   ============================================================ */

/* ---------- 分区节奏 ---------- */
.home-sec{position:relative;overflow-x:clip}
.home-sec .wrap{position:relative;z-index:1}

/* ---------- 首屏补充:旗帜行 ---------- */
.flag-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;
  margin:0 auto 22px;position:relative;z-index:3;
 :0;
}
.flag-item{
  display:inline-flex;align-items:center;gap:7px;
  min-height:30px;padding:0 12px 0 10px;
  border:1px solid var(--border);border-radius:var(--r-pill);
  background:var(--bg-panel);box-shadow:var(--hl-edge);
  font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;
}
.flag-item .flag{width:18px;height:13px}
.flag-item .flag svg{width:18px;height:13px}

/* ---------- 卖点三卡内的白色小组件 ---------- */
.feature-widget .fw-list{display:flex;flex-direction:column;gap:6px}
.fw-row{
  display:flex;align-items:center;gap:8px;
  min-height:28px;padding:0 10px;
  background:var(--bg-side);border-radius:var(--r-sm);
  font-size:12.5px;color:var(--text);min-width:0;
}
.fw-row .flag{width:16px;height:11px}
.fw-row .flag svg{width:16px;height:11px}
.fw-row b{font-weight:600;white-space:nowrap}
.fw-row .tag{
  margin-left:auto;font-family:var(--font-mono);font-size:10.5px;
  color:var(--accent-dark);letter-spacing:.02em;white-space:nowrap;
}
.fw-chips{display:flex;flex-wrap:wrap;gap:6px}
.fw-note{font-size:11.5px;color:var(--text-soft);line-height:1.5;margin-top:8px}
.fw-platforms{display:flex;flex-direction:column;gap:5px}
.fw-plat{
  display:flex;align-items:center;gap:7px;
  min-height:26px;font-size:12.5px;font-weight:600;color:var(--text);
}
.fw-plat svg{width:15px;height:15px;color:var(--text-muted);flex-shrink:0}
.fw-plat small{margin-left:auto;font-size:11px;color:var(--text-soft);font-weight:400;white-space:nowrap}

/* ---------- 第二段:用途详情面板 ---------- */
.detail-panel{
  margin-top:var(--sp-6);
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-soft),var(--hl-edge);
  overflow:hidden;
}
.detail-panel .side{background:var(--bg-side)}
.detail-panel .side-item{
  width:100%;justify-content:flex-start;text-align:left;
  font-family:inherit;cursor:pointer;
}
.detail-panel .side-item[aria-selected="true"]{
  background:var(--bg-panel-2);font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(184,81,42,.12);
}

/* ---------- 选型参考 ---------- */
.why-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-4);
}
.why-item{
  background:var(--bg-panel);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:var(--sp-5);
  box-shadow:var(--hl-edge);min-width:0;
  transition:transform .16s,box-shadow .16s;
}
.why-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft)}
.why-item h3{font-size:17px;margin-bottom:8px}
.why-item p{font-size:15px;color:var(--text-muted);line-height:1.75}

/* ---------- 小注与链接行 ---------- */
.note-line{
  margin-top:var(--sp-5);
  font-size:14.5px;line-height:1.8;color:var(--text-muted);
  max-width:88ch;
}
.note-line strong{color:var(--text);font-weight:600}
.link-row{margin-top:var(--sp-4)}

/* ---------- 线路状态容器(servers.js 注入) ---------- */
.server-status{
  display:block;position:relative;overflow:hidden;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--hl-edge);
  padding:var(--sp-4) var(--sp-5);
  min-height:140px;
}
.server-status:empty{display:none}
.server-status .srv-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:4px 18px;
}
.server-status .srv-row{
  display:flex;align-items:center;gap:10px;
  min-height:34px;min-width:0;
  border-bottom:1px solid var(--border);
  font-size:13.5px;
}
.server-status .srv-row:last-child{border-bottom:0}
.server-status .srv-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:var(--success);
  animation:srv-breathe 2.4s ease-in-out infinite;
}
@keyframes srv-breathe{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.82)}
}
.server-status .srv-flag{
  width:18px;height:13px;border-radius:3px;overflow:hidden;
  display:inline-flex;flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(38,35,31,.10);
}
.server-status .srv-flag svg{width:18px;height:13px}
.server-status .srv-name{font-weight:600;color:var(--text);white-space:nowrap}
.server-status .srv-type{
  font-family:var(--font-mono);font-size:11px;line-height:1;
  padding:4px 7px;border:1px solid var(--border-strong);
  border-radius:var(--r-pill);color:var(--text-muted);white-space:nowrap;
}
.server-status .srv-ms{
  margin-left:auto;font-family:var(--font-mono);font-size:12.5px;
  color:var(--text);white-space:nowrap;
}
.server-status .srv-bw{
  font-family:var(--font-mono);font-size:12.5px;
 :0;color:var(--);
}

/* ---------- 断点 ---------- */
@media (max-width:960px){
  .why-grid{grid-template-columns:1fr}
  .server-status .srv-grid{grid-template-columns:1fr}
}
@media (max-width:768px){
  .flag-row{gap:8px 12px}
  .detail-panel{grid-template-columns:1fr}
}
@media (max-width:640px){
  .flag-row{gap:8px 10px}
  .flag-item{font-size:12.5px;padding:0 10px 0 8px}
  .note-line{font-size:14px}
  .server-status{padding:var(--sp-3) var(--sp-4)}
}
@media (prefers-reduced-motion:reduce){
  .server-status .srv-dot{animation:none}
}