* { margin: 0; padding: 0; box-sizing: border-box; }  body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f5f5f5; font-family: system-ui, -apple-system, BlinkMacSystemFont; }  /* ===== 圆环容器 ===== */ .social-circle { position: relative; width: 380px; height: 380px; }  /* ===== 每一项（图标 + 文字） ===== */ .social-item { position: absolute; top: 50%; left: 50%; width: 70px; margin: -35px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; transition: all 0.25s ease; }  .social-item i { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 22px; transition: all 0.25s ease; }  .social-item span { margin-top: 6px; font-size: 11px; white-space: nowrap; transition: all 0.25s ease; }  /* ===== 10 个均匀分布（文字也需要反向旋转保持正向） ===== */ .social-item:nth-child(1)  { transform: rotate(0deg)    translate(160px) rotate(0deg); } .social-item:nth-child(2)  { transform: rotate(36deg)   translate(160px) rotate(-36deg); } .social-item:nth-child(3)  { transform: rotate(72deg)   translate(160px) rotate(-72deg); } .social-item:nth-child(4)  { transform: rotate(108deg)  translate(160px) rotate(-108deg); } .social-item:nth-child(5)  { transform: rotate(144deg)  translate(160px) rotate(-144deg); } .social-item:nth-child(6)  { transform: rotate(180deg)  translate(160px) rotate(-180deg); } .social-item:nth-child(7)  { transform: rotate(216deg)  translate(160px) rotate(-216deg); } .social-item:nth-child(8)  { transform: rotate(252deg)  translate(160px) rotate(-252deg); } .social-item:nth-child(9)  { transform: rotate(288deg)  translate(160px) rotate(-288deg); } .social-item:nth-child(10) { transform: rotate(324deg)  translate(160px) rotate(-324deg); }  /* ===== 各平台品牌色 + hover ===== */ .item-tg       { color: #26A5E4; } .item-tg:hover i { background: #26A5E4; color: #fff; } .item-tg:hover span { color: #26A5E4; }  .item-github   { color: #24292e; } .item-github:hover i { background: #24292e; color: #fff; } .item-github:hover span { color: #24292e; }  .item-fb       { color: #1877F2; } .item-fb:hover i { background: #1877F2; color: #fff; } .item-fb:hover span { color: #1877F2; }  .item-ig       { color: #E4405F; } .item-ig:hover i { background: #E4405F; color: #fff; } .item-ig:hover span { color: #E4405F; }  .item-x        { color: #000; } .item-x:hover i { background: #000; color: #fff; } .item-x:hover span { color: #000; }  .item-wechat   { color: #07C160; } .item-wechat:hover i { background: #07C160; color: #fff; } .item-wechat:hover span { color: #07C160; }  .item-qq       { color: #12B7F5; } .item-qq:hover i { background: #12B7F5; color: #fff; } .item-qq:hover span { color: #12B7F5; }  .item-linkedin { color: #0A66C2; } .item-linkedin:hover i { background: #0A66C2; color: #fff; } .item-linkedin:hover span { color: #0A66C2; }  .item-mail     { color: #EA4335; } .item-mail:hover i { background: #EA4335; color: #fff; } .item-mail:hover span { color: #EA4335; }  .item-feedback { color: #FF6C00; } .item-feedback:hover i { background: #FF6C00; color: #fff; } .item-feedback:hover span { color: #FF6C00; }  /* ===== 弹窗遮罩 ===== */ .overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 9998; }  /* ===== 弹窗本体 ===== */ .popup { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; padding: 24px 28px; border-radius: 10px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); z-index: 9999; width: 320px; font-size: 14px; color: #333; text-align: center; }  .popup button { margin-top: 14px; padding: 6px 16px; border: none; border-radius: 4px; cursor: pointer; background: #07C160; color: #fff; font-size: 13px; }  .popup button:hover { opacity: 0.85; }