:root{
  --blue:#007AFF;
  --green:#34C759;
  --pink:#FF2D55;
  --orange:#FF9F0A;
  --purple:#AF52DE;
  --teal:#30D158;
  --ink:#1c1c1e;
  --sub:#6c6c70;
  --bg:#f2f2f7;
  --card:#ffffff;
  --line:rgba(60,60,67,.12);
  --fill:rgba(118,118,128,.12);
  --safe-b:env(safe-area-inset-bottom,0px);
  --c1:#007AFF;
  --c2:#5AC8FA;
  --spring:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body,h1,h2,h3,h4,h5,p,ul,li,a,img{margin:0;padding:0;border:0}
ul,li{list-style:none}
a{text-decoration:none;color:inherit}
html,body{overflow-x:hidden;max-width:100%;-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:var(--bg);
  color:var(--ink);
  min-height:100%;
  padding-bottom:88px;
  padding-bottom:calc(88px + var(--safe-b));
}
.glow{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(720px 420px at 8% -8%, rgba(88,86,214,.28), transparent 58%),
    radial-gradient(560px 360px at 100% 6%, rgba(255,45,85,.16), transparent 52%),
    radial-gradient(520px 340px at 70% 100%, rgba(10,132,255,.16), transparent 55%),
    radial-gradient(400px 260px at 0% 70%, rgba(255,159,10,.12), transparent 60%);
  animation:glow 10s ease-in-out infinite alternate;
}
img{max-width:100%;height:auto}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 14px;position:relative;z-index:1}

.nav{
  position:sticky;top:0;z-index:40;
  padding-top:env(safe-area-inset-top,0px);
  background:rgba(242,242,247,.72);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  height:56px;
}
.brand{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.brand img.logo{
  width:34px;height:34px;border-radius:10px;object-fit:cover;flex:none;
  box-shadow:0 4px 12px rgba(88,86,214,.35);
  animation:pop .5s var(--spring) both;
}
.brand h1{
  font-size:15px;font-weight:700;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1;
}
.nav-cta{display:flex;gap:8px;flex:none}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:34px;padding:0 14px;border-radius:980px;border:0;
  font-size:13px;font-weight:650;cursor:pointer;font-family:inherit;
  transition:transform .18s var(--spring),opacity .16s,box-shadow .18s;
}
.btn:active{transform:scale(.92)}
.btn-blue{background:linear-gradient(180deg,#3d9eff,#007AFF);color:#fff;box-shadow:0 6px 14px rgba(0,122,255,.28)}
.btn-white{background:#fff;color:var(--blue);box-shadow:0 1px 0 var(--line)}

.hero{padding:14px 0 6px}
.search{
  display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;
  border-radius:980px;background:rgba(118,118,128,.16);
  transition:box-shadow .2s,background .2s,transform .2s var(--spring);
}
.search:focus-within{background:#fff;box-shadow:0 0 0 4px rgba(0,122,255,.16);transform:scale(1.01)}
.search input{
  width:100%;height:100%;border:0;outline:0;background:transparent;
  font-size:16px;font-family:inherit;color:var(--ink);
}
.search input::placeholder{color:#8e8e93}
.notice{
  margin-top:10px;height:36px;display:flex;align-items:center;gap:8px;
  padding:0 12px;border-radius:980px;
  background:linear-gradient(90deg,#fff7ed,#fff);
  box-shadow:0 1px 0 var(--line);
}
.notice b{
  width:8px;height:8px;border-radius:50%;background:#ff9f0a;flex:none;
  box-shadow:0 0 0 4px rgba(255,159,10,.18);
  animation:dot 1.6s ease-in-out infinite;
}
.notice-track{overflow:hidden;flex:1}
.notice-in{display:flex;gap:36px;width:max-content;animation:slide 16s linear infinite;font-size:13px;font-weight:650;color:#c93400}
.notice a{color:#c93400}

.block{margin-top:22px}
.block-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.block-hd h2{font-size:20px;font-weight:760;letter-spacing:-.03em}
.block-hd span{
  font-size:12px;color:#fff;background:linear-gradient(180deg,#5ac8fa,#007AFF);
  padding:4px 10px;border-radius:980px;font-weight:700;
}

.dock{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px;
  background:rgba(255,255,255,.86);
  border-radius:22px;padding:16px 10px 14px;
  box-shadow:0 10px 30px rgba(88,86,214,.08);
  animation:up .45s var(--spring) both;
}
.ico{
  appearance:none;border:0;background:none;font:inherit;color:inherit;
  display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;padding:0;
  animation:pop .45s var(--spring) both;
}
.ico:nth-child(1){animation-delay:.02s}.ico:nth-child(2){animation-delay:.04s}.ico:nth-child(3){animation-delay:.06s}.ico:nth-child(4){animation-delay:.08s}
.ico:nth-child(5){animation-delay:.1s}.ico:nth-child(6){animation-delay:.12s}.ico:nth-child(7){animation-delay:.14s}.ico:nth-child(8){animation-delay:.16s}
.ico:nth-child(9){animation-delay:.18s}.ico:nth-child(10){animation-delay:.2s}.ico:nth-child(11){animation-delay:.22s}.ico:nth-child(12){animation-delay:.24s}
.ico:nth-child(13){animation-delay:.26s}.ico:nth-child(14){animation-delay:.28s}.ico:nth-child(15){animation-delay:.3s}.ico:nth-child(16){animation-delay:.32s}
.ico-ring{
  width:54px;height:54px;border-radius:16px;padding:3px;flex:none;
  background:linear-gradient(135deg,var(--c1),var(--c2));
  box-shadow:0 8px 16px rgba(0,122,255,.22);
  transition:transform .2s var(--spring),box-shadow .2s;
}
.ico img{
  width:100%;height:100%;border-radius:13px;object-fit:cover;display:block;background:#fff;
}
.ico:active .ico-ring{transform:scale(.86)}
.ico.on .ico-ring{transform:scale(1.08);box-shadow:0 0 0 3px #fff,0 0 0 5px var(--c1),0 10px 18px rgba(0,0,0,.12)}
.ico em{font-style:normal;font-size:11px;font-weight:650;color:#3a3a3c;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:none;height:32px;padding:0 13px;border:0;border-radius:980px;
  background:#fff;color:#1c1c1e;font-size:13px;font-weight:650;font-family:inherit;cursor:pointer;
  box-shadow:0 1px 0 var(--line);
  transition:transform .16s var(--spring),background .16s,color .16s,box-shadow .16s;
}
.chip.on{background:linear-gradient(180deg,var(--c2,#3d9eff),var(--c1,#007AFF));color:#fff;box-shadow:0 6px 14px rgba(0,122,255,.28)}
.chip:active{transform:scale(.94)}

.list{display:grid;grid-template-columns:1fr;gap:12px}
.list.one{grid-template-columns:1fr}
.card{
  background:rgba(255,255,255,.92);
  border-radius:20px;overflow:hidden;
  box-shadow:0 10px 24px rgba(28,28,30,.06);
  animation:up .5s var(--spring) both;
  transition:transform .2s var(--spring),box-shadow .2s;
  position:relative;
}
.card:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--c1),var(--c2));
}
.card.hide{display:none}
.card-hd{display:flex;gap:12px;align-items:flex-start;padding:14px 14px 8px 16px}
.card-hd > div{min-width:0;flex:1}
.card-hd img{
  width:46px;height:46px;border-radius:13px;object-fit:cover;flex:none;background:#f2f2f7;
  box-shadow:0 6px 14px rgba(88,86,214,.16);
}
.card-hd h1{font-size:16px;font-weight:740;letter-spacing:-.02em;line-height:1.3;word-break:break-word}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.tags h2{
  font-size:11px;font-weight:650;color:var(--c1);line-height:1.35;
  background:rgba(0,122,255,.1);
  padding:3px 8px;border-radius:980px;
}
.links{padding:0 10px 10px 16px}
.links ul{display:block}
.links li{margin:0 0 8px}
.links a{
  display:flex;align-items:center;gap:8px;min-height:48px;padding:10px 12px;border-radius:14px;
  background:linear-gradient(180deg,#f7f7fa,#f2f2f7);
  transition:transform .16s var(--spring),background .16s;
}
.links a:active{transform:scale(.98);background:#e8e8ed}
.links a img{width:22px;height:22px;border-radius:7px;object-fit:cover;flex:none}
.links a h1{flex:1;min-width:0;font-size:14px;font-weight:700;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chev{color:var(--c1);font-size:20px;font-weight:600;line-height:1}

.empty{display:none;text-align:center;padding:28px 16px;background:#fff;border-radius:20px}
.empty.show{display:block;animation:up .35s var(--spring) both}
.empty strong{display:block;margin-bottom:6px}
.empty p{color:var(--sub);font-size:14px}

.foot{margin:20px 0 8px;padding:16px 14px;background:rgba(255,255,255,.92);border-radius:20px;text-align:center}
.foot h2 a{font-size:15px;font-weight:730}
.foot h5{margin-top:8px;font-size:13px;font-weight:700;animation:rain 1.2s linear infinite}
.foot h5 img{width:14px;height:14px;vertical-align:-2px;margin:0 4px}
.kf{margin-top:8px}
.kf a{color:#ff3b30;font-weight:760;font-size:13px}
.steps{margin-top:12px;padding:14px;border-radius:16px;background:linear-gradient(160deg,#2c2c2e,#1c1c1e);color:#f2f2f7}
.steps b{color:#ffd60a}
.flow{margin-top:8px;font-size:12px;font-weight:700;line-height:1.8;word-break:break-word}
.flow .a{color:#ff453a}.flow .b{color:#64d2ff}.flow .c{color:#30d158}.flow .d{color:#bf5af2}.flow .e{color:#ff9f0a}

.tab{
  position:fixed;left:12px;right:12px;bottom:calc(8px + var(--safe-b));z-index:50;
  height:58px;border-radius:980px;
  display:flex;background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  box-shadow:0 12px 32px rgba(0,0,0,.16);
  padding:4px;
}
.tab a,.tab button{
  flex:1;border:0;background:none;color:#8e8e93;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-size:10px;font-weight:700;cursor:pointer;border-radius:980px;
  transition:background .2s,color .2s,transform .16s var(--spring);
}
.tab .on{color:var(--blue);background:rgba(0,122,255,.12)}
.tab a:active,.tab button:active{transform:scale(.94)}
.tab img{width:22px;height:22px;border-radius:7px;transition:transform .18s var(--spring)}
.tab .on img{transform:scale(1.08)}

@keyframes up{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes slide{to{transform:translateX(-50%)}}
@keyframes dot{50%{transform:scale(1.25);opacity:.7}}
@keyframes glow{to{filter:hue-rotate(18deg) saturate(1.15)}}
@keyframes rain{
  0%{text-shadow:-.08rem .08rem #ffff8d}
  50%{text-shadow:-.08rem .08rem #b388ff}
  100%{text-shadow:-.08rem .08rem #ffff8d}
}
@media (min-width:520px){
  .links ul{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .links li{margin:0}
}
@media (min-width:768px){
  .wrap{padding:0 20px}
  .dock{grid-template-columns:repeat(4,1fr)}
  .ico-ring{width:56px;height:56px}
}
@media (min-width:980px){
  body{padding-bottom:36px}
  .tab{display:none}
  .nav-in{height:64px}
  .brand h1{font-size:18px;overflow:visible;text-overflow:clip}
  .dock{grid-template-columns:repeat(8,1fr);padding:20px 16px}
  .ico-ring{width:58px;height:58px;border-radius:18px}
  .list{grid-template-columns:1fr 1fr}
  .list.one{max-width:540px}
  .card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(28,28,30,.1)}
  .ico:hover .ico-ring{transform:translateY(-3px) scale(1.05)}
  .search:focus-within{transform:none}
}
@media (max-width:979px){
  .card:active{transform:scale(.985)}
}
@media (max-width:480px){
  .wrap{padding:0 12px}
  .brand h1{font-size:13px;max-width:38vw}
  .nav-cta{gap:6px}
  .nav-cta .btn{height:30px;padding:0 10px;font-size:12px}
  .dock{grid-template-columns:repeat(4,1fr);gap:12px 6px;padding:14px 6px 12px}
  .ico-ring{width:48px;height:48px;border-radius:14px}
  .ico em{font-size:10px}
  .block-hd{align-items:flex-start;gap:8px}
  .block-hd h2{font-size:18px}
  .links a{min-height:44px}
  .links a h1{white-space:normal}
  .tab{left:8px;right:8px}
}
@media (max-width:360px){
  .brand h1{max-width:34vw;font-size:12px}
  .nav-cta .btn{padding:0 8px;font-size:11px}
  .dock{gap:10px 4px}
}
@media (prefers-reduced-motion:reduce){
  *,.notice-in,.card,.glow,.brand img.logo{animation:none!important;transition:none!important}
}