:root {
  color-scheme: dark;
  font-family: var(--contact-font, -apple-system, BlinkMacSystemFont, "PingFang SC", Arial, sans-serif);
  --red: var(--contact-accent, #dc2626);
  --red-hover: #b91c1c;
  --gray-900: #111827;
  --gray-800: var(--contact-border, #1f2937);
  --gray-400: var(--contact-muted, #9ca3af);
  --cream: var(--contact-card, #111827);
  --ink: var(--contact-text, #f9fafb);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--contact-background, #000); color: var(--contact-text, #fff); -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }

.link-page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  padding: max(28px, env(safe-area-inset-top)) 28px max(56px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 18%, rgba(220, 38, 38, 0.08), transparent 28rem),
    var(--contact-background, #000);
  background-image: var(--contact-background-image, none), radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--red) 8%, transparent), transparent 28rem);
  background-size: cover;
  background-position: center;
}

.link-page::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background: linear-gradient(180deg, transparent 65%, rgba(17, 24, 39, 0.18));
}

.top-actions, .profile, .link-list, .toast {
  position: relative;
  z-index: 1;
  width: min(100%, var(--contact-width, 680px));
  margin-inline: auto;
}

.top-actions { display: flex; align-items: center; justify-content: space-between; }
.brand-mark, .share-button {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 0;
  border-radius: 17px;
  border: 1px solid var(--gray-800);
  background: color-mix(in srgb, var(--cream) 90%, transparent);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(10px);
}
.brand-mark { color: var(--red); font-size: 42px; font-weight: 900; line-height: 1; }
.share-button { cursor: pointer; transition: transform 160ms ease, background 160ms ease; }
.share-button:hover { border-color: var(--red); background: var(--gray-800); transform: translateY(-2px); }
.share-button:active { transform: scale(0.96); }
.share-button svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.profile { display: flex; align-items: center; flex-direction: column; padding-top: var(--contact-profileTop, 96px); text-align: center; }
.reference-crop { display: block; flex: 0 0 auto; background-image: url("../assets/link-page-reference.jpg"); background-repeat: no-repeat; }
.avatar {
  width: var(--contact-avatar, 156px);
  height: var(--contact-avatar, 156px);
  border: 3px solid var(--red);
  border-radius: 50%;
  /* 独立头像图（不再从 link-page-reference.jpg 切片） */
  background-image: url("../assets/avatar.jpg");
  background-position: center;
  background-size: cover;
  box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.1), 0 18px 40px rgba(0, 0, 0, 0.5);
}
.profile h1 { margin: 30px 0 6px; color: var(--contact-text, #fff); font-size: var(--contact-heading, 50px); font-weight: 680; letter-spacing: -0.045em; line-height: 1.05; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.bio { max-width: 620px; margin: 0; color: var(--gray-400); font-size: var(--contact-body, 31px); line-height: 1.32; text-wrap: balance; }
.instagram { margin-top: 34px; }
.instagram svg { width: 48px; height: 48px; fill: none; stroke: var(--red); stroke-width: 1.8; }
.instagram .dot { fill: currentColor; stroke: none; }

.link-list { display: grid; gap: var(--contact-gap, 22px); margin-top: var(--contact-linksTop, 70px); }
.link-card {
  display: grid;
  min-height: 105px;
  align-items: center;
  grid-template-columns: 76px minmax(0, 1fr) 28px;
  gap: 18px;
  padding: 13px 22px 13px 14px;
  border: 1px solid var(--gray-800);
  border-radius: var(--contact-radius, 20px);
  background: var(--cream);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}
.link-card:hover { border-color: var(--red); background: var(--gray-800); box-shadow: 0 16px 38px rgba(220, 38, 38, 0.12); transform: translateY(-3px); }
.link-card:active { transform: scale(0.985); }
.thumb { width: 76px; height: 76px; overflow: hidden; border-radius: 8px; background-color: #d8c1ae; box-shadow: inset 0 0 0 1px rgba(55, 27, 28, 0.1); }
.thumb-one { background-position: -40px -870px; background-size: 718px 1556px; }
.thumb-two { background-position: -39px -1001px; background-size: 718px 1556px; }
.thumb-three { background-position: -39px -1129px; background-size: 718px 1556px; }
.thumb-custom { background-position: center; background-repeat: no-repeat; background-size: cover; }
.thumb-none { display: grid; place-items: center; background: #172033; color: #ef4444; font-size: 28px; font-weight: 800; }
.link-label { text-align: center; font-size: var(--contact-button, 26px); font-weight: 540; line-height: 1.25; }
.more { color: var(--gray-400); font-size: 30px; line-height: 1; }

.toast {
  position: fixed;
  right: 0;
  bottom: max(22px, env(safe-area-inset-bottom));
  left: 0;
  width: max-content;
  max-width: calc(100% - 40px);
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(220, 38, 38, 0.35);
  background: color-mix(in srgb, var(--cream) 94%, transparent);
  color: white;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 560px) {
  .link-page { padding: max(24px, env(safe-area-inset-top)) 15px max(42px, env(safe-area-inset-bottom)); }
  .brand-mark, .share-button { width: 48px; height: 48px; border-radius: 14px; }
  .brand-mark { font-size: 34px; }
  .share-button svg { width: 25px; height: 25px; }
  .profile { padding-top: var(--contact-profileTopMobile, 68px); }
  .avatar { width: var(--contact-avatarMobile, 118px); height: var(--contact-avatarMobile, 118px); }
  .profile h1 { margin-top: 22px; font-size: var(--contact-headingMobile, 35px); }
  .bio { font-size: var(--contact-bodyMobile, 22px); }
  .instagram { margin-top: 24px; }
  .instagram svg { width: 38px; height: 38px; }
  .link-list { gap: var(--contact-gapMobile, 14px); margin-top: var(--contact-linksTopMobile, 48px); }
  .link-card { min-height: 80px; grid-template-columns: 58px minmax(0, 1fr) 16px; gap: 10px; padding: 10px 13px 10px 10px; border-radius: var(--contact-radiusMobile, 15px); }
  .thumb { width: 58px; height: 58px; border-radius: 6px; }
  .thumb-one { background-position: -31px -665px; background-size: 548px 1188px; }
  .thumb-two { background-position: -30px -764px; background-size: 548px 1188px; }
  .thumb-three { background-position: -30px -862px; background-size: 548px 1188px; }
  .link-label { font-size: var(--contact-buttonMobile, 16px); }
  .more { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

[hidden] { display: none !important; }
.profile h1, .bio, .link-label { overflow-wrap: anywhere; }
.brand-mark { background-size: cover; background-position: center; text-decoration: none; }
.instagram { color: var(--red); }
.instagram img { width: 48px; height: 48px; object-fit: contain; }