:root{
  --bg0:#050b1c;
  --bg1:#071a3a;

  --primary:#5c8efe;
  --primary2:#6ba3e6;
  --text:#eaf1ff;
  --muted:rgba(234,241,255,.70);

  --line:rgba(255,255,255,.10);
  --line2:rgba(255,255,255,.14);

  --shadow: 0 24px 70px rgba(0,0,0,.42);
  --radius: 20px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC","Hiragino Sans GB","Microsoft YaHei", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1100px 700px at 18% 20%, rgba(92,142,254,.18), transparent 55%),
    radial-gradient(900px 650px at 82% 30%, rgba(107,163,230,.14), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 48%, var(--bg0));
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }


.page{
  min-height:100vh;
  position:relative;
  display:grid;
  place-items: start center;
  padding: 90px 14px 34px;
}


.card{
  transform: translateY(-6px);
  animation: cardIn .45s ease both;
}

@keyframes cardIn{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(-6px); }
}


@media (max-width: 520px){
  .page{
    place-items: center;
    padding: 34px 14px;
  }
  .card{
    transform:none;
    animation:none;
  }
}


.bg{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.orb{ position:absolute; border-radius:999px; filter: blur(34px); opacity:.85; }
.orb-1{
  width:520px; height:520px; left:-220px; top:-210px;
  background: radial-gradient(circle at 30% 30%, rgba(92,142,254,.75), rgba(92,142,254,0) 65%);
}
.orb-2{
  width:420px; height:420px; right:-220px; top:120px;
  background: radial-gradient(circle at 40% 40%, rgba(107,163,230,.60), rgba(107,163,230,0) 70%);
}
.orb-3{
  width:560px; height:560px; left:40%; bottom:-320px;
  background: radial-gradient(circle at 50% 45%, rgba(92,142,254,.22), rgba(92,142,254,0) 70%);
}
.grid{
  position:absolute; inset:-1px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 35%, rgba(0,0,0,.72), transparent 65%);
  opacity:.18;
}
.noise{
  position:absolute; inset:0; opacity:.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}


.card{
  position:relative;
  width: min(420px, 100%);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.035));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 18px;
}


.card-hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.hd-left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width:0;
}
.logo{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: radial-gradient(circle at 30% 30%, rgba(92,142,254,.35), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(92,142,254,.12);
  flex: 0 0 auto;
}
.logo svg{ width: 32px; height: 32px; }
.logo .s1{ fill: var(--primary); }

.title{
  font-size: 18px;
  letter-spacing:.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.desc{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.badge{
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: rgba(234,241,255,.86);
}

.links{ display:grid; gap: 12px; }

.link-item{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(255,255,255,.03);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.link-item::before{
  content:"";
  position:absolute; inset:0;
  border-radius: 16px;
  background: radial-gradient(120px 80px at 20% 20%, rgba(92,142,254,.22), transparent 60%);
  opacity:.55;
  pointer-events:none;
}

.link-item:hover{
  transform: translateY(-1px);
  border-color: rgba(92,142,254,.28);
  background: rgba(255,255,255,.04);
  box-shadow: 0 10px 26px rgba(0,0,0,.20);
}

.link-item.primary{
  border-color: rgba(92,142,254,.30);
  background: linear-gradient(135deg, rgba(92,142,254,.12), rgba(255,255,255,.03));
}

.li-left{ display:flex; align-items:center; gap: 12px; min-width:0; }
.li-ico{
  width: 40px; height: 40px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  flex: 0 0 auto;
}

.li-txt{ min-width:0; }
.li-title{ font-size: 14px; letter-spacing:.2px; }
.li-sub{
  margin-top: 2px;
  font-size: 12px;
  color: rgba(234,241,255,.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.li-right{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
  color: rgba(234,241,255,.80);
}
.li-action{ font-size: 12px; }
.li-arrow{ opacity:.85; transform: translateY(-1px); }

.card-ft{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  display:grid;
  gap: 8px;
}
.hint{
  display:flex; gap:10px; align-items:flex-start;
  color: rgba(234,241,255,.76);
  font-size: 12px;
  line-height: 1.6;
}
.copyright{
  font-size: 11px;
  color: rgba(234,241,255,.50);
}

@media (max-width: 420px){
  .card{ padding: 14px; width: min(360px, 100%); }
  .link-item{ padding: 12px; }
  .li-sub{ max-width: 190px; }
}
.badge{
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
}
.link-item{
  will-change: transform;
}

.link-item::after{
  content:"";
  position:absolute; inset:-1px;
  border-radius:16px;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.10), transparent);
  transform: translateX(-60%);
  opacity:0;
  pointer-events:none;
}

.link-item:hover::after{
  opacity:.55;
  transform: translateX(60%);
  transition: transform .55s ease, opacity .25s ease;
}