/* =========================================================================
   VPNAJ · home.css
   Page-scoped styles for the zh-CN home page: rhythm helpers, the shared
   server-status skin, the traffic-pack tiles and small note blocks.
   Every colour / radius / shadow comes from the :root token set in base.css.
   ========================================================================= */

/* ── rhythm helpers ─────────────────────────────────────────────────── */

.sec--tight{padding-block:clamp(10px,2vw,22px)}

.sec-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:var(--sp-3);
  margin-top:var(--sp-6);
}
.sec-actions .btn{flex-shrink:0;white-space:nowrap}

.note-block{
  max-width:74ch;
  margin:var(--sp-6) auto 0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.note-block h3{
  font-family:var(--font-body);
  font-size:15.5px;
  font-weight:600;
  line-height:1.5;
  color:var(--text);
}
.note-block p{
  font-size:14.5px;
  line-height:1.85;
  color:var(--text-muted);
}
.note-block strong{color:var(--text);font-weight:600}
.note-block a,
.feature-panel a{
  color:var(--accent-dark);
  text-decoration:underline;
  text-underline-offset:2px;
}
.note-block a:hover,
.feature-panel a:hover{color:var(--accent)}

/* ── shared server-status component (data injected by servers.js) ────── */

#server-status{
  position:relative;
  display:block;
  width:100%;
  max-width:100%;
  overflow:hidden;
  margin-block:var(--sp-4) var(--sp-5);
}
#server-status:empty{display:none}

.server-status{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px 12px;
  width:100%;
  max-width:100%;
}
.server-status > *{max-width:100%;min-width:0}

.srv-row{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:9px 12px;
  border-radius:var(--r-tile);
  background:var(--bg-panel);
  box-shadow:inset 0 0 0 1px var(--border);
  font-size:12.5px;
  color:var(--text-muted);
}

.srv-dot{
  flex:none;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 3px var(--ok-08);
  animation:srv-breathe 2.6s ease-in-out infinite;
}

.srv-flag{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  font-size:12px;
  line-height:1;
}

.srv-name{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text);
  font-weight:500;
}

.srv-type{
  flex:none;
  padding:2px 7px;
  border-radius:var(--r-pill);
  background:var(--bg-panel-2);
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.02em;
  color:var(--text-muted);
  white-space:nowrap;
}

.srv-ms,
.srv-bw{
  flex:none;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.01em;
  white-space:nowrap;
}
.srv-ms{color:var(--text);font-weight:600}
.srv-bw{color:var(--text-muted)}

@keyframes srv-breathe{
  0%,100%{opacity:.55;transform:scale(.85)}
  50%{opacity:1;transform:scale(1)}
}

@media (prefers-reduced-motion:reduce){
  .srv-dot{animation:none}
}

@media (max-width:640px){
  .server-status{grid-template-columns:1fr}
  .srv-row{font-size:12px}
}

/* ── traffic packs ──────────────────────────────────────────────────── */

.pack-block{margin-top:var(--sp-6)}
.pack-block h3{font-size:clamp(18px,2.1vw,21px);margin-bottom:8px}
.pack-block > p{
  font-size:14px;
  line-height:1.8;
  color:var(--text-muted);
  max-width:70ch;
}

.pack-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  gap:12px;
  margin-top:var(--sp-4);
}
.pack-grid > *{min-width:0}

.pack-item{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:16px 18px;
  border-radius:var(--r-panel);
  background:var(--bg-panel);
  box-shadow:inset 0 0 0 1px var(--border);
}
.pack-size{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.pack-price{
  font-family:var(--font-display);
  font-size:26px;
  line-height:1.15;
  color:var(--text);
}
.pack-note{
  font-size:12px;
  line-height:1.6;
  color:var(--text-muted);
}

/* ── narrow screens ─────────────────────────────────────────────────── */

@media (max-width:640px){
  .note-block{gap:8px}
  .note-block p{font-size:14px}
  .sec-actions .btn{width:100%}
  .pack-price{font-size:23px}
}