:root {
  --bg-primary       : #fff5f8;
  --bg-secondary     : #ffe4ec;
  --bg-card          : #ffffff;
  --text-primary     : #58252e;
  --text-secondary   : #8b5e6b;
  --accent-pink      : #ff69b4;
  --accent-light-pink: #ffb6c1;
  --accent-deep-pink : #ff1493;
  --accent-soft-pink : #ffd1dc;
  --border-color     : #ffd6e0;
  --shadow-pink      : rgba(255, 105, 180, 0.2);
}

* {
  margin    : 0;
  padding   : 0;
  box-sizing: border-box;
}

body {
  background : linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-primary) 100%);
  min-height : 100vh;
  color      : var(--text-primary);
  font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
  overflow-x : hidden;
  line-height: 1.6;
  position   : relative;
}

body::before {
  content : '';
  position: fixed;
  top     : 0;
  left    : 0;
  width   : 100%;
  height  : 100%;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 182, 193, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255, 105, 180, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 218, 220, 0.35) 0%, transparent 60%);
  z-index  : -2;
  animation: pinkGlow 20s ease-in-out infinite;
}

body::after {
  content : '';
  position: fixed;
  top     : -50%;
  left    : -50%;
  width   : 200%;
  height  : 200%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0px,
      transparent 50px,
      rgba(255, 105, 180, 0.03) 50px,
      rgba(255, 105, 180, 0.03) 100px);
  z-index  : -1;
  animation: patternMove 60s linear infinite;
}

@keyframes patternMove {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  100% {
    transform: translate(50px, 50px) rotate(360deg);
  }
}

@keyframes pinkGlow {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 0.8;
  }
}

.container {
  min-height     : 100vh;
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  padding        : 2rem 1rem;
  position       : relative;
  z-index        : 5;
  max-width      : 1200px;
  margin         : 0 auto;
  pointer-events : none;
}

/* 悬浮萝莉图片容器 */
.loli-wrapper {
  position  : fixed;
  top       : 10%;
  right     : 5%;
  width     : 55%;
  max-width : 800px;
  max-height: 70vh;
  z-index   : 3;
}

/* 加载动画 */
.loading-spinner {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  padding        : 2rem;
  border         : 3px solid #ffb6c1;
  border-radius  : 20px;
  background     : rgba(255, 182, 193, 0.2);
  box-shadow     : 0 10px 40px rgba(255, 105, 180, 0.2);
  transition     : all 0.3s ease;
}

.loading-spinner.hidden {
  display: none;
}

.spinner-icon {
  font-size: 3rem;
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.loading-text {
  margin-top: 0.5rem;
  font-size : 0.9rem;
  color     : #ff69b4;
  animation : pulse 1s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }
}

/* 悬浮萝莉图片 */
.floating-loli {
  position     : absolute;
  top          : 0;
  left         : 0;
  width        : 100%;
  height       : auto;
  /* max-height   : 70vh; */
  object-fit   : contain;
  opacity      : 0;
  visibility   : hidden;
  user-select  : none;
  transform    : rotate(3deg);
  transition   : all 0.5s ease;
  border       : 3px solid #ffb6c1;
  border-radius: 20px;
  box-shadow   : 0 10px 40px rgba(255, 105, 180, 0.4), 0 0 20px rgba(255, 182, 193, 0.3);
}

.floating-loli.loaded {
  opacity   : 1;
  visibility: visible;
}

.floating-loli:hover {
  cursor    : pointer;
  box-shadow: 0 15px 50px rgba(255, 105, 180, 0.5), 0 0 30px rgba(255, 182, 193, 0.4);
}

/* 图片放大遮罩 */
.image-overlay {
  display        : none;
  position       : fixed;
  top            : 0;
  left           : 0;
  width          : 100%;
  height         : 100%;
  background     : rgba(0, 0, 0, 0.8);
  z-index        : 100;
  justify-content: center;
  align-items    : center;
  backdrop-filter: blur(5px);
}

.image-overlay.active {
  display  : flex;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.overlay-image {
  max-width    : 90vw;
  max-height   : 90vh;
  object-fit   : contain;
  border-radius: 15px;
  box-shadow   : 0 10px 50px rgba(255, 105, 180, 0.5);
  animation    : scaleIn 0.3s ease;
}

@keyframes scaleIn {
  from {
    transform: scale(0.8);
    opacity  : 0;
  }

  to {
    transform: scale(1);
    opacity  : 1;
  }
}

/* 樱花背景 */
.sakura-bg {
  position      : fixed;
  top           : 0;
  left          : 0;
  width         : 100%;
  height        : 100%;
  pointer-events: none;
  z-index       : 0;
  overflow      : hidden;
}

.petal {
  position : absolute;
  top      : -50px;
  opacity  : 0.6;
  animation: sakuraFall 15s linear infinite;
  filter   : drop-shadow(0 0 5px rgba(255, 105, 180, 0.5));
}

@keyframes sakuraFall {
  0% {
    transform: translateY(-50px) rotate(0deg) translateX(0);
    opacity  : 0;
  }

  10% {
    opacity: 0.6;
  }

  100% {
    transform: translateY(110vh) rotate(360deg) translateX(100px);
    opacity  : 0;
  }
}

/* 闪光效果 */
.sparkles {
  position      : fixed;
  top           : 0;
  left          : 0;
  width         : 100%;
  height        : 100%;
  pointer-events: none;
  z-index       : 0;
}

.sparkle {
  position : absolute;
  color    : var(--accent-pink);
  opacity  : 0;
  animation: sparkle 4s ease-in-out infinite;
  filter   : drop-shadow(0 0 8px var(--accent-pink));
}

@keyframes sparkle {

  0%,
  100% {
    opacity  : 0;
    transform: scale(0) rotate(0deg);
  }

  50% {
    opacity  : 1;
    transform: scale(1) rotate(180deg);
  }
}

/* 顶部装饰 */
.decoration-top {
  position : fixed;
  top      : 20px;
  left     : 50%;
  transform: translateX(-50%);
  display  : flex;
  gap      : 20px;
  z-index  : 10;
  font-size: 1.5rem;
  color    : var(--accent-pink);
  animation: float 3s ease-in-out infinite;
}

@keyframes float {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(-10px);
  }
}

.heart-decor {
  filter: drop-shadow(0 0 10px var(--accent-pink));
}

.star-decor {
  filter: drop-shadow(0 0 8px var(--accent-light-pink));
}

/* 主内容区域 */
.content {
  position  : relative;
  z-index   : 2;
  text-align: center;
  max-width : 600px;
  width     : 100%;
}

/* 标题 */
.title {
  margin-bottom: 1rem;
}

.title-row {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 0.8rem;
  margin-bottom  : 0.5rem;
  position       : relative;
  z-index        : 4;
}

.qiyun-name {
  font-size     : 1.8rem;
  font-weight   : 300;
  color         : var(--text-secondary);
  letter-spacing: 3px;
  text-shadow   : -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 10px var(--shadow-pink);
}

.heart-bond {
  font-size: 1.8rem;
  color    : var(--accent-deep-pink);
  animation: heartBeat 1.5s ease-in-out infinite;
  filter   : drop-shadow(0 0 10px var(--accent-deep-pink));
}

@keyframes heartBeat {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

.fan-name {
  font-size     : 1.8rem;
  font-weight   : 400;
  color         : var(--text-primary);
  letter-spacing: 3px;
  text-shadow   : -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 0 0 10px var(--shadow-pink);
}

/* 分隔线 */
.divider {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 15px;
  margin         : 1.5rem 0;
  width          : stretch;
}

.divider-line {
  width     : 50px;
  height    : 2px;
  background: linear-gradient(90deg, transparent, var(--accent-pink), transparent);
}

.divider-heart {
  font-size: 1.2rem;
  color    : var(--accent-deep-pink);
  animation: heartBeat 1.5s ease-in-out infinite;
}

/* 头像区域 */
.avatar-wrapper {
  margin: 2.5rem 0 2rem;
}

.avatar-frame {
  position     : relative;
  display      : inline-block;
  padding      : 15px;
  background   : linear-gradient(135deg, var(--accent-light-pink), var(--accent-soft-pink));
  border-radius: 50%;
  box-shadow   :
    0 8px 30px var(--shadow-pink),
    inset 0 0 30px rgba(255, 255, 255, 0.5);
}

.frame-decor {
  position     : absolute;
  top          : -5px;
  left         : -5px;
  right        : -5px;
  bottom       : -5px;
  border       : 3px dashed var(--accent-pink);
  border-radius: 50%;
  animation    : rotate 20s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.avatars {
  position       : relative;
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 15px;
}

.avatar-item {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 8px;
}

.avatar {
  width        : 80px;
  height       : 80px;
  border-radius: 50%;
  object-fit   : cover;
  border       : 3px solid white;
  box-shadow   :
    0 4px 15px var(--shadow-pink),
    0 0 20px rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.avatar:hover {
  transform: scale(1.1);
  box-shadow:
    0 6px 25px var(--shadow-pink),
    0 0 30px rgba(255, 255, 255, 0.9);
}

.avatar-label {
  font-size     : 0.85rem;
  color         : var(--text-secondary);
  font-weight   : 500;
  letter-spacing: 1px;
  background    : rgba(255, 255, 255, 0.9);
  padding       : 4px 12px;
  border-radius : 12px;
  box-shadow    : 0 2px 10px var(--shadow-pink);
}

.plus-sign {
  font-size  : 2rem;
  color      : var(--accent-deep-pink);
  font-weight: 300;
  animation  : heartBeat 1.5s ease-in-out infinite;
  filter     : drop-shadow(0 0 10px var(--accent-deep-pink));
}

/* 个性签名卡片 */
.signature-card {
  background    : var(--bg-card);
  border        : 2px solid var(--border-color);
  border-radius : 20px;
  overflow      : hidden;
  margin        : 1.5rem 0;
  box-shadow    : 0 8px 40px var(--shadow-pink);
  transition    : all 0.3s ease;
  max-width     : 520px;
  z-index       : 10;
  position      : relative;
  pointer-events: auto;
}

.signature-card:hover {
  transform   : translateY(-5px);
  box-shadow  : 0 12px 50px var(--shadow-pink);
  border-color: var(--accent-pink);
}

.card-header {
  background     : linear-gradient(135deg, var(--accent-light-pink), var(--accent-soft-pink));
  padding        : 1rem 1.5rem;
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 0.8rem;
  border-bottom  : 2px solid var(--border-color);
}

.header-icon {
  font-size: 1.2rem;
  animation: float 3s ease-in-out infinite;
}

.card-title {
  font-size     : 1.1rem;
  color         : var(--text-primary);
  font-weight   : 600;
  letter-spacing: 2px;
}

.card-content {
  padding: 1.5rem;
}

.signature-line {
  font-size    : 0.9rem;
  color        : var(--text-secondary);
  line-height  : 2;
  padding      : 0.3rem 0;
  border-bottom: 1px dashed var(--border-color);
}

.signature-line:last-child {
  border-bottom: none;
}

/* 我的评价卡片 */
.review-card {
  background   : linear-gradient(135deg, rgba(255, 182, 193, 0.2), rgba(255, 105, 180, 0.1));
  border       : 2px solid var(--accent-light-pink);
  border-radius: 16px;
  padding      : 1.2rem;
  margin       : 1.2rem auto;
  box-shadow   : 0 4px 20px var(--shadow-pink);
  transition   : all 0.3s ease;
}

.review-card:hover {
  transform : scale(1.02);
  box-shadow: 0 6px 30px var(--shadow-pink);
}

.review-header {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 0.6rem;
  margin-bottom  : 0.8rem;
}

.review-icon {
  font-size: 1.3rem;
  animation: heartBeat 1.5s ease-in-out infinite;
}

.review-title {
  font-size     : 1rem;
  color         : var(--text-primary);
  font-weight   : 600;
  letter-spacing: 2px;
}

.review-text {
  font-size  : 1rem;
  color      : var(--text-primary);
  line-height: 1.8;
  font-weight: 500;
}

/* 祈运说卡片 */
.support-card {
  background   : linear-gradient(135deg, rgba(255, 20, 147, 0.15), rgba(255, 105, 180, 0.1));
  border       : 2px solid var(--accent-deep-pink);
  border-radius: 16px;
  padding      : 1.2rem;
  margin       : 1.2rem auto;
  box-shadow   : 0 4px 20px var(--shadow-pink);
  transition   : all 0.3s ease;
}

.support-card:hover {
  transform : scale(1.02);
  box-shadow: 0 6px 30px var(--shadow-pink);
}

.support-header {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 0.6rem;
  margin-bottom  : 0.8rem;
}

.support-icon {
  font-size: 1.3rem;
  animation: float 3s ease-in-out infinite;
}

.support-title {
  font-size     : 1rem;
  color         : var(--text-primary);
  font-weight   : 600;
  letter-spacing: 2px;
}

.support-text {
  font-size  : 1rem;
  color      : var(--text-primary);
  line-height: 1.8;
  font-weight: 500;
}

/* 返回链接 */
.back-link {
  display        : inline-flex;
  align-items    : center;
  gap            : 0.5rem;
  color          : var(--text-secondary);
  text-decoration: none;
  font-size      : 0.9rem;
  margin-top     : 1rem;
  margin-bottom  : 1rem;
  padding        : 0.7rem 1.8rem;
  background     : var(--bg-card);
  border         : 2px solid var(--border-color);
  border-radius  : 25px;
  box-shadow     : 0 4px 15px var(--shadow-pink);
  transition     : all 0.3s ease;
}

.back-link:hover {
  background  : var(--accent-light-pink);
  border-color: var(--accent-pink);
  color       : var(--text-primary);
  box-shadow  : 0 6px 25px var(--shadow-pink);
  transform   : translateY(-3px);
}

.arrow {
  font-size: 1.2rem;
}

/* 刷新按钮 */
.refresh-wrapper {
  position      : fixed;
  bottom        : 30px;
  right         : 30px;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 0.5rem;
  z-index       : 100;
}

.refresh-btn {
  width          : 65px;
  height         : 65px;
  border-radius  : 50%;
  background     : linear-gradient(135deg, var(--accent-deep-pink), var(--accent-pink));
  border         : none;
  cursor         : pointer;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 2.2rem;
  color          : white;
  box-shadow     : 0 4px 25px var(--shadow-pink);
  transition     : all 0.3s ease;
}

.refresh-icon {
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
}

.refresh-btn:hover {
  transform : scale(1.15);
  box-shadow: 0 6px 35px var(--shadow-pink);
}

.refresh-btn:active {
  transform: scale(0.95);
}

.refresh-btn.refreshed {
  animation: refreshRotate 0.5s ease;
}

@keyframes refreshRotate {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.2);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .decoration-top {
    top      : 10px;
    gap      : 15px;
    font-size: 1.2rem;
  }

  .qiyun-name,
  .fan-name {
    font-size: 1.4rem;
  }

  .heart-bond {
    font-size: 1.4rem;
  }

  .avatar {
    width : 65px;
    height: 65px;
  }

  .avatar-label {
    font-size: 0.75rem;
    padding  : 3px 10px;
  }

  .signature-line {
    font-size  : 0.85rem;
    line-height: 1.8;
  }

  .like-wrapper {
    bottom: 20px;
    right : 20px;
  }

  .like-btn {
    width    : 55px;
    height   : 55px;
    font-size: 1.6rem;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 1.5rem 0.8rem;
  }

  .title-row {
    flex-direction: column;
    gap           : 0.5rem;
  }

  .qiyun-name,
  .fan-name {
    font-size: 1.3rem;
  }

  .heart-bond {
    font-size: 1.2rem;
  }

  .avatar-frame {
    padding: 10px;
  }

  .avatar {
    width : 55px;
    height: 55px;
  }

  .card-content {
    padding: 1rem;
  }

  .signature-line {
    font-size: 0.8rem;
  }

  .floating-loli {
    width: 200%;
    left : -80%;
    top  : 10vh;
  }

  .signature-card {
    opacity: 0.8;
  }
}