/* =============== 主题变量 =============== */
:root{
  --bg:#0b1220; --panel:#0e1526; --panel-2:#0a1223;
  --text:#e9f0ff; --muted:#a9b7d5;
  --primary:#4da3ff; --primary-2:#6eb7ff;
  --ring-bg:#1b2842; --shadow:0 10px 30px rgba(0,0,0,.35);
  --topbar-bg: linear-gradient(180deg, rgba(6,10,19,.95), rgba(6,10,19,.75));
  --topbar-border: rgba(255,255,255,.06);
  --sticky: sticky;  /* 想取消吸顶，把 sticky 改成 static 即可 */
}
a{text-decoration:none}
/* 基础 */
html,body{margin:0;padding:0;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial;color:var(--text);background:var(--bg);}
html, body { margin: 0; background: #0b1220; }
.app{
  width: min(450px, 100vw);  /* 设计宽度 430 像素，PC 也按这个宽度显示 */
  margin: 0 auto;
}
/* 顶部（带底色且可切换是否吸顶） */
.topbar{position:var(--sticky);top:0;z-index:50;background:var(--topbar-bg);backdrop-filter: blur(6px);
  border-bottom:1px solid var(--topbar-border);}
.topbar-inner{display:flex;justify-content:center;align-items:center;padding:12px 16px;}
.logo{height: 17vw;max-height: 80px;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));}

/* Banner */
.banner{padding:12px 16px 6px;}
.banner .swiper{border-radius:16px;overflow:hidden;box-shadow:var(--shadow);background:#000;}
.banner img{display:block;width:100%;height:auto;}

/* 广播条 */
.ticker{margin:10px 16px 0;padding:10px 12px;background:var(--panel);border-radius:12px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow);}
.ticker .icon{font-size:18px;opacity:.9}
.ticker .marquee{overflow:hidden;white-space:nowrap;flex:1}
.ticker .marquee span{display:inline-block;padding-left:100%;animation:marq 14s linear infinite;color:var(--muted)}
@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* 标题 */
.section-title{padding:18px 16px 6px;text-align: center;}
.section-title h2{margin:0;font-size:20px;color:#fbbf24;letter-spacing:.06em;text-shadow:0 2px 6px rgba(0,0,0,.4);}

/* 始终 3 列；尺寸随列宽自动缩放 */
:root{ --pad:12px; --gap:12px; }

.links-grid{
  padding:8px var(--pad) 16px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--gap);
}

/* 防止子元素把卡片撑爆 */
.link-card{ min-width:0; overflow:hidden; }


/* 线路卡片（整卡可点） */
.link-card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border-radius:14px;padding:12px;box-shadow:var(--shadow);cursor:pointer;transition:transform .15s ease,box-shadow .2s ease;}
.link-card:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,0,0,.45);}
.meter{display:flex;justify-content:center;align-items:center;margin:8px 0 10px;}
/* 以列宽为基准做自适应：不会撑出屏幕，也不会太小 */
.ring{
  /* 每一列的实际宽：用 .app 的宽（min(430px,100vw)）来算更贴合视觉 */
  --colw: calc((min(430px, 100vw) - (var(--pad)*2) - (var(--gap)*2)) / 3);

  --size: clamp(72px, calc(var(--colw) * 0.72), 110px);
  --th:   clamp( 8px, calc(var(--colw) * 0.10),  12px);

  inline-size: var(--size);
  block-size: var(--size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
}
.ring::before{
  content:""; position:absolute; inset: var(--th);
  border-radius:50%; background: var(--ring-bg);
}

.ring .value{ position:relative; font-size: clamp(18px, calc(var(--colw)*0.18), 26px); font-weight:800; }
.ring .unit { position:relative; margin-left:4px; font-size: clamp(10px, calc(var(--colw)*0.08), 13px); color: var(--muted); }

.link-name{
  text-align:center; margin: 2px 0 8px; color: var(--muted); font-weight:700;
  font-size: clamp(12px, calc(var(--colw)*0.11), 15px);
}
.cta{
  display:block; width:100%; text-align:center;
  padding: clamp(8px, calc(var(--colw)*0.11), 12px) 0;
  border-radius:10px; color:#fff; font-weight:800; border:0; cursor:pointer;
  background: linear-gradient(90deg,var(--primary),var(--primary-2));
  box-shadow: 0 8px 18px rgba(59,130,246,.3);
}


/* 下载区（和你的参考图一致的三按钮布局） */
.downloads{padding:22px 16px 28px;}
.dl-box{position:relative;border-radius:16px;overflow:hidden;background:#0b111b;box-shadow:var(--shadow);}
.dl-bg{display:block;width:100%;height:auto;opacity:.95}

/* 按钮容器：让三个按钮在右侧排布，移动端自动占满换行 */
.dl-btns{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-end;padding:20px 24px;gap:16px;}
.dl-btn img{display:block;height:auto}

/* 顶部大按钮 */
.btn-quick img{width:40px;max-width:48vw}

/* 底部两按钮一行排布 */
.dl-row{display:flex;gap:16px;flex-wrap:wrap}
.btn-store img{width:50px;max-width:42vw}

/* 小屏尺寸微调 */
@media (max-width:860px){
  .dl-btns{align-items:center;gap:12px;padding:16px}
  .btn-quick img{width:300px;max-width:100%}
  .btn-store img{width:260px;max-width:40%}
}
@media (max-width:520px){
  .btn-quick img{width:280px}
  .dl-row{gap:10px;justify-content:center}
  .btn-store img{width:240px;max-width:100%}
}
.link-card.neo{
  position:relative;
  background: radial-gradient(120% 120% at 10% 0%, #1a2237 0%, #0e1422 60%, #0b1220 100%);
  border:1px solid rgba(88,120,255,.18);
  border-radius:18px; padding:14px 14px 16px;
  box-shadow: inset 0 0 20px rgba(0,0,0,.35), 0 6px 20px rgba(32,62,146,.35);
  transition: transform .2s ease, box-shadow .25s ease;
}
.link-card.neo:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(32,62,146,.45); }

/* 序号徽章（可选） */
.link-card.neo .badge{
  position:absolute; left:10px; top:10px;
  width:26px; height:26px; line-height:26px; text-align:center;
  font-weight:800; font-size:12px; color:#fff;
  background:linear-gradient(180deg,#54f3a8,#2dd1ff);
  border-radius:9px; box-shadow:0 0 10px rgba(45,209,255,.45);
}

/* 圆环测速 */
.link-card.neo .meter{ display:flex; justify-content:center; margin:12px 0 8px; }
.link-card.neo .ring{
  /* 同样基于列宽计算 */
  --colw: calc((min(430px, 100vw) - (var(--pad)*2) - (var(--gap)*2)) / 3);
  --size: clamp(86px, calc(var(--colw) * 0.80), 120px);
  --th:   clamp( 9px, calc(var(--colw) * 0.11),  12px);

  width:var(--size); height:var(--size); border-radius:50%;
  display:grid; place-items:center; position:relative;
  background:
    radial-gradient(closest-side,#0b1220 calc(var(--size)/2 - var(--th) - 2px),transparent calc(var(--size)/2 - var(--th))),
    conic-gradient(#4da3ff 0turn, #4da3ff 0turn);
  box-shadow:0 0 25px rgba(77,163,255,.25);
}
.link-card.neo .ring::before{
  content:""; position:absolute; inset:calc(var(--th) + 2px);
  background: radial-gradient(120% 120% at 30% 20%, #16213a 0%, #0f1a30 60%, #0b1220 100%);
  border-radius:50%; box-shadow: inset 0 0 12px rgba(0,0,0,.5);
}
.link-card.neo .ring .value{
  position:relative; font-weight:900; color:#eaf2ff; text-shadow:0 2px 10px rgba(45,125,255,.45);
  font-size: clamp(22px, calc(var(--colw) * 0.20), 28px);
}
.link-card.neo .ring .unit{
  position:absolute; bottom: clamp(12px, calc(var(--colw)*0.06), 18px);
  font-size: clamp(10px, calc(var(--colw) * 0.085), 12px);
  color:#90a3d4; font-weight:700;
}


/* 标题 + 按钮 */
.link-card.neo .link-name{ text-align:center; margin:4px 0 10px; color:#b8c6ea; font-weight:800; letter-spacing:.02em; }
.link-card.neo .cta.neon{
  display:block; text-align:center; font-weight:900; color:#0a1430;
  padding:10px 0; border-radius:12px;
  background: linear-gradient(90deg,#56ffa5,#6be8ff);
  box-shadow: 0 0 0 2px rgba(255,255,255,.06) inset, 0 8px 22px rgba(52,211,153,.35);
}

/* 卡片状态（给点不同光晕） */
.link-card.neo[data-state="fast"]   .ring{ box-shadow:0 0 25px rgba(16,185,129,.45); }
.link-card.neo[data-state="normal"] .ring{ box-shadow:0 0 25px rgba(245,158,11,.45); }
.link-card.neo[data-state="slow"]   .ring{ box-shadow:0 0 25px rgba(239,68,68,.45); }

/* 底部社交/版权（如果有） */
.footer{padding:16px;text-align:center;color:var(--muted)}