:root{
  --bg: #eaf2fa;
  --card: #0f1115;
  --text: #0f172a;
  --muted:#475569;
  --brand:#4f46e5;
  --ring: rgba(79,70,229,.35);
  --shadow: 0 10px 30px rgba(2,6,23,.12);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b1220;
    --card: #0f1117;
    --text: #e5e7eb;
    --muted:#9aa4b2;
    --brand:#8b5cf6;
    --ring: rgba(139,92,246,.35);
    --shadow: 0 10px 30px rgba(0,0,0,.45);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC","Microsoft YaHei";
  color:var(--text);
  background: radial-gradient(1200px 600px at 20% -10%, rgba(79,70,229,.08), transparent 55%),
              radial-gradient(900px 500px at 95% 10%, rgba(16,185,129,.06), transparent 40%),
              var(--bg);
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
}
.page-enter{opacity:0; transform:translateY(10px); animation:fadeUp .8s ease-out .05s forwards;}
@keyframes fadeUp{to{opacity:1; transform:translateY(0)}}
.delay-1{animation-delay:.12s}
.delay-2{animation-delay:.18s}
.delay-3{animation-delay:.24s}
.delay-4{animation-delay:.30s}

.center-wrapper{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.container{
  max-width:1100px;
  width:100%;
  display:grid;
  grid-template-columns: 1fr;
  gap:28px;
  padding: 0 18px; /* 新增：两侧安全间距（移动端更友好） */
}
@media(min-width:900px){.container{grid-template-columns: 420px 1fr; align-items:center}}

.avatar-wrap{display:flex; flex-direction:column; align-items:flex-start; gap:16px;}
.avatar{width:120px; height:120px; border-radius:50%; overflow:hidden; transform: translateZ(0); transition: transform .35s ease;}
.avatar:hover{ transform: translateY(-3px) scale(1.02) }

.name{font-size:22px; font-weight:800; letter-spacing:.2px}
.subtitle{color:var(--muted); margin-top:4px}

.social{display:flex; gap:14px; margin-top:18px; flex-wrap:wrap;}
.icon-btn{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--card); box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.06); color:#fff; text-decoration:none; transform:translateZ(0); transition: transform .25s ease, box-shadow .25s ease; position:relative; outline:none;}
.icon-btn:hover{ transform:translateY(-4px)}
.icon{width:22px; height:22px; display:block}

.code-card{background:var(--card); color:#e5e7eb; border-radius:18px; padding:18px 18px 22px; box-shadow: var(--shadow); border:1px solid rgba(255,255,255,.06);}
.dots{display:flex; gap:8px; padding:8px}
.dot{width:10px; height:10px; border-radius:50%}
.d-red{background:#ff5f56}.d-yellow{background:#ffbd2e}.d-green{background:#27c93f}
pre{margin:0; padding:14px 18px 8px; overflow:auto; font-size:15px; line-height:1.7}
code{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace}

.sites{display:grid; grid-template-columns: 1fr; gap:16px; margin-top:16px;}
@media(min-width:680px){.sites{grid-template-columns: repeat(3, 1fr)}}
.site{position:relative; border-radius:18px; padding:18px; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); border:1px solid rgba(255,255,255,.08); box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease; text-decoration:none; color:inherit; display:flex; flex-direction:column; gap:8px; min-height:120px;}
.site:hover{ transform: translateY(-6px); box-shadow: 0 16px 40px rgba(2,6,23,.18)}
.site h3{margin:0; font-size:18px}
.site p{margin:0; color:var(--muted); font-size:14px}

.footer{text-align:center; padding:12px 0; color:var(--muted); font-size:13px;}
[data-anim]{opacity:0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease}
[data-anim].show{opacity:1; transform:translateY(0)}

/* 动效样式 */
.hidden { visibility: hidden; }
.fade-in {
  animation: fadeIn 0.6s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ======= 移动端优化（整合） ======= */
@media (max-width: 680px) {
  .avatar-wrap {
    align-items: center;
    text-align: center;
  }
  .name { font-size: 20px; }
  .subtitle { font-size: 14px; }

  .social {
    justify-content: center;
    gap: 12px;
  }
  .icon-btn {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }
  .icon {
    width: 24px;
    height: 24px;
  }

  .sites { gap: 12px; }
  .site { min-height: 108px; }
  .site h3 { font-size: 16px; }
  .site p { font-size: 13px; }

  .code-card { padding: 14px; }
  pre {
    font-size: 13px;
    word-break: break-word;
    white-space: pre-wrap; /* 防止小屏横向滚动条过长 */
  }
}
@media (max-width: 420px) {
  .name { font-size: 18px; }
  .subtitle { font-size: 13px; }
  .icon-btn { width: 44px; height: 44px; }
  .icon { width: 22px; height: 22px; }
  .container { gap: 22px; padding: 0 14px; } /* 超小屏稍微收紧间距 */
}

/* footer small tweaks */
.footer .dot {
  opacity: .7;
  margin: 0 .25em;
}
.footer .footer-link {
  color: var(--muted);
  text-decoration: none;
  padding: 0 .15em;
  border-bottom: 1px dashed rgba(255,255,255,.35);
  transition: border-color .2s, opacity .2s;
}
.footer .footer-link:hover {
  border-bottom-color: #fff;
  opacity: .95;
}



/* === Fix mobile overflow & footer bleed === */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: hidden; }

/* Ensure footer and cards don't exceed viewport */
.footer, .container, .sites, .site { width: 100%; }

/* Safer padding on very narrow screens */
@media (max-width: 420px){
  .container{ padding-left: 14px; padding-right: 14px; }
  .site{ min-height: 104px; }
  .footer{ padding-left: 14px; padding-right: 14px; }
}

/* Avoid long strings breaking layout */
.footer, .site p, .site h3, .footer a{
  word-wrap: break-word;
  overflow-wrap: anywhere;
}