:root{
  --bg:#f6f7fa;
  --card:#ffffff;
  --text:#17181a;
  --sub:#9aa0a8;
  --line:#e6e8ee;
  --cyan:#4dd7e5;
  --blue:#4a9dee;
  --purple:#8f8bf2;
  --grad:linear-gradient(135deg,var(--cyan),var(--blue) 55%,var(--purple));
  --shadow:0 10px 40px rgba(30,40,60,.08);
  --radius:16px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e1116; --card:#161a22; --text:#eef1f6; --sub:#8b93a1;
    --line:#252a35; --shadow:0 10px 40px rgba(0,0,0,.45);
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  min-height:100vh;
  display:flex;flex-direction:column;
  background:var(--bg);color:var(--text);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
::selection{background:rgba(74,157,238,.25)}

.page{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:26px;padding:40px 16px;
}

/* 卡片 */
.card{
  width:min(420px,100%);
  background:var(--card);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:28px 26px;
  animation:rise .5s ease-out both;
}
.card__header{display:flex;align-items:center;gap:16px}
.avatar{
  width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--grad); /* 图片缺失时兜底底色 */
}
.name{font-size:23px;font-weight:700;letter-spacing:.5px}
.group-id{margin-top:8px;font-size:15px;color:var(--sub)}
.copy-btn{
  margin-left:10px;padding:2px 12px;font-size:12px;cursor:pointer;
  color:var(--blue);background:transparent;
  border:1px solid currentColor;border-radius:999px;transition:.2s;
}
.copy-btn:hover{color:#fff;background:var(--blue)}
.copy-btn:focus-visible,.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.divider{border:none;border-top:1px dashed var(--line);margin:22px 0 24px}

/* 二维码（白底容器保证暗色模式下也可扫描） */
.qr-box{display:flex;justify-content:center}
.qr-frame{background:#fff;padding:14px;border-radius:14px}
.qr{display:block;width:min(320px,72vw);height:auto}

/* 卡片外文案与按钮 */
.tip{font-size:16px;text-align:center}
.actions{display:flex;justify-content:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 34px;border-radius:999px;
  font-size:15px;font-weight:600;text-decoration:none;color:#fff;
  background:var(--grad);box-shadow:0 6px 18px rgba(74,157,238,.35);
  transition:transform .15s,box-shadow .2s;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(74,157,238,.45)}
.btn:active{transform:translateY(0)}

/* 页脚 */
.footer{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:28px 0 44px;color:#71767f;font-size:20px;font-weight:600;
}
.qq-logo{width:26px;height:30px}

/* 提示条 */
.toast{
  position:fixed;left:50%;bottom:36px;z-index:99;
  transform:translateX(-50%) translateY(16px);
  background:rgba(23,24,26,.92);color:#fff;
  padding:10px 18px;border-radius:999px;font-size:14px;
  opacity:0;pointer-events:none;transition:.25s;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
@media (max-width: 380px){
  .card{padding:22px 18px}
  .name{font-size:20px}
}