/* ===================================










   汤小陈个人网站 - 主样式










   极简美学 · 白色蓝色双色 · 儿童艺术风










   =================================== */





















/* ===== 自定义字体：字制区喜脉喜欢体 ===== */










@font-face {










  font-family: 'ZiZhiQuXiMai';










  src: url('/assets/fonts/ZiZhiQuXiMai.ttf') format('truetype');










  font-weight: normal;










  font-style: normal;










  font-display: swap;










}





















.custom-font {










  font-family: 'ZiZhiQuXiMai', cursive !important;










}





















:root {










  --blue: #0066ff;










  --blue-light: #e8f0ff;










  --blue-deep: #0044cc;










  --blue-pale: #eef2ff;










  --white: #ffffff;










  --black: #0a0a0a;










  --gray-1: #1a1a2e;










  --gray-2: #4a4a6a;










  --gray-3: #8888aa;










  --gray-4: #ccccdd;










  --gray-5: #FAFAFA;










  --radius: 16px;










  --radius-sm: 8px;










  --radius-lg: 24px;










  --radius-xl: 32px;










  --shadow: 0 4px 24px rgba(0, 102, 255, 0.08);










  --shadow-hover: 0 8px 40px rgba(0, 102, 255, 0.18);










  --font-main: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', -apple-system, sans-serif;










  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);










}





















* {










  margin: 0;










  padding: 0;










  box-sizing: border-box;










}





















html {










  scroll-behavior: smooth;










}





















body {










  font-family: var(--font-main);










  background: #FAFAFA;










  color: var(--gray-1);










  line-height: 1.6;










  overflow-x: hidden;










}





















a {










  color: inherit;










  text-decoration: none;










  transition: var(--transition);










}





















img {










  max-width: 100%;










  display: block;










}





















/* ===== 粒子背景画布 ===== */










#particle-canvas {










  position: fixed;










  top: 0;










  left: 0;










  width: 100%;










  height: 100%;










  z-index: 0;










  pointer-events: none;










}





















/* ===== 导航 ===== */










.nav {










  position: fixed;










  top: 0;










  left: 0;










  right: 0;










  z-index: 1000;










  padding: 0 40px;










  height: 72px;










  display: flex;










  align-items: center;










  justify-content: space-between;










  transition: var(--transition);










}





















.nav.scrolled {










  background: rgba(250, 250, 250, 0.95);










  backdrop-filter: blur(20px);










  -webkit-backdrop-filter: blur(20px);










  box-shadow: 0 1px 0 rgba(0, 102, 255, 0.08);










}





















.nav-logo {










  display: flex;










  align-items: center;










  gap: 12px;










  text-decoration: none;










}





















.nav-logo img {










  height: 40px;










  width: auto;










}





















.nav-logo-text {










  font-size: 18px;










  font-weight: 700;










  color: var(--black);










  letter-spacing: -0.02em;










}





















.nav-links {










  display: flex;










  align-items: center;










  gap: 8px;










  list-style: none;










}





















.nav-links a {










  padding: 8px 16px;










  border-radius: 100px;










  font-size: 15px;










  color: var(--gray-2);










  font-weight: 500;










  transition: var(--transition);










}





















.nav-links a:hover,










.nav-links a.active {










  color: var(--blue);










  background: var(--blue-light);










}





















.nav-hamburger {










  display: none;










  flex-direction: column;










  gap: 5px;










  cursor: pointer;










  padding: 8px;










  border: none;










  background: none;










}





















.nav-hamburger span {










  width: 24px;










  height: 2px;










  background: var(--black);










  border-radius: 2px;










  transition: var(--transition);










}





















/* 移动端菜单 */










.nav-mobile {










  display: none;










  position: fixed;










  top: 72px;










  left: 0;










  right: 0;










  background: rgba(250, 250, 250, 0.98);










  backdrop-filter: blur(20px);










  -webkit-backdrop-filter: blur(20px);










  z-index: 999;










  padding: 16px;










  border-bottom: 1px solid var(--gray-4);










  transform: translateY(-10px);










  opacity: 0;










  transition: var(--transition);










}





















.nav-mobile.open {










  display: block;










  transform: translateY(0);










  opacity: 1;










}





















.nav-mobile a {










  display: block;










  padding: 14px 20px;










  border-radius: var(--radius-sm);










  font-size: 16px;










  color: var(--gray-1);










  font-weight: 500;










}





















.nav-mobile a:hover {










  background: var(--blue-light);










  color: var(--blue);










}





















/* ===== 页面容器 ===== */










.page-wrap {










  position: relative;










  z-index: 1;










  min-height: 100vh;










}





















.container {










  max-width: 1100px;










  margin: 0 auto;










  padding: 0 24px;










}





















/* ===== Hero Banner ===== */










.hero {










  min-height: 100vh;










  display: flex;










  align-items: center;










  justify-content: center;










  text-align: center;










  padding: 120px 24px 80px;










  position: relative;










  z-index: 1;










}





















.hero-inner {










  max-width: 700px;










}





















.hero-avatar {










  width: 120px;










  height: 120px;










  border-radius: 50%;










  border: 4px solid var(--blue);










  margin: 0 auto 32px;










  overflow: hidden;










  box-shadow: 0 0 0 8px var(--blue-light);










}





















.hero-avatar img {










  width: 100%;










  height: 100%;










  object-fit: cover;










}





















.hero-title {










  font-size: clamp(48px, 8vw, 88px);










  font-weight: 800;










  color: var(--black);










  letter-spacing: -0.04em;










  line-height: 1.05;










  margin-bottom: 20px;










}





















.hero-title span {










  color: var(--blue);










}





















.hero-subtitle {










  font-size: clamp(16px, 2.5vw, 20px);










  color: var(--gray-3);










  font-weight: 400;










  letter-spacing: 0.08em;










  margin-bottom: 48px;










}





















.hero-tags {










  display: flex;










  gap: 12px;










  justify-content: center;










  flex-wrap: wrap;










  margin-bottom: 48px;










}





















.hero-tag {










  padding: 8px 20px;










  border-radius: 100px;










  background: var(--blue-light);










  color: var(--blue);










  font-size: 14px;










  font-weight: 600;










  letter-spacing: 0.02em;










}





















.hero-scroll {










  display: flex;










  flex-direction: column;










  align-items: center;










  gap: 8px;










  color: var(--gray-4);










  font-size: 13px;










  animation: scrollBounce 2s infinite;










}





















.hero-scroll svg {










  width: 24px;










  height: 24px;










}





















@keyframes scrollBounce {










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










  50% { transform: translateY(8px); }










}





















/* ===== 页面Banner（子页面顶部大图） ===== */










.page-banner {










  position: relative;










  width: 100%;










  height: 320px;










  overflow: hidden;










  display: flex;










  align-items: center;










  justify-content: center;










}





















.page-banner-img {










  position: absolute;










  top: 0; left: 0; width: 100%; height: 100%;










  object-fit: cover;










  object-position: center;










}





















.page-banner-overlay {










  position: absolute;










  top: 0; left: 0; width: 100%; height: 100%;










  background: linear-gradient(180deg, rgba(0,102,255,0.15) 0%, rgba(0,102,255,0.35) 100%);










}





















.page-banner-inner {










  position: relative;










  z-index: 2;










  text-align: center;










  color: #fff;










  padding: 0 24px;










}





















.page-banner-title {










  font-size: clamp(36px, 6vw, 64px);










  font-weight: 800;










  letter-spacing: -0.03em;










  margin-bottom: 12px;










  text-shadow: 0 2px 20px rgba(0,0,0,0.15);










}





















.page-banner-desc {










  font-size: clamp(14px, 2vw, 18px);










  opacity: 0.9;










  letter-spacing: 0.08em;










  text-shadow: 0 1px 10px rgba(0,0,0,0.1);










}





















/* ===== 版块标题 ===== */










.section {










  padding: 100px 0;










  position: relative;










  z-index: 1;










}





















.section-header {










  text-align: center;










  margin-bottom: 64px;










}





















.section-label {










  display: inline-block;










  padding: 6px 16px;










  border-radius: 100px;










  background: var(--blue-light);










  color: var(--blue);










  font-size: 13px;










  font-weight: 700;










  letter-spacing: 0.1em;










  text-transform: uppercase;










  margin-bottom: 16px;










}





















.section-title {










  font-size: clamp(32px, 5vw, 52px);










  font-weight: 800;










  color: var(--black);










  letter-spacing: -0.03em;










  line-height: 1.1;










}





















.section-desc {










  margin-top: 16px;










  font-size: 17px;










  color: var(--gray-3);










  max-width: 480px;










  margin-left: auto;










  margin-right: auto;










}





















/* ===== 个人动态 ===== */










.moments-grid {










  display: grid;










  gap: 20px;










  max-width: 680px;










  margin: 0 auto;










}





















.moment-card {










  background: var(--white);










  border-radius: var(--radius-lg);










  padding: 28px;










  border: 1.5px solid rgba(0, 102, 255, 0.08);










  box-shadow: var(--shadow);










  transition: var(--transition);










  position: relative;










  overflow: hidden;










}





















.moment-card::before {










  content: '';










  position: absolute;










  top: 0;










  left: 0;










  width: 4px;










  height: 100%;










  background: var(--blue);










  border-radius: 4px 0 0 4px;










  opacity: 0;










  transition: var(--transition);










}





















.moment-card:hover {










  border-color: rgba(0, 102, 255, 0.2);










  box-shadow: var(--shadow-hover);










  transform: translateY(-4px);










}





















.moment-card:hover::before {










  opacity: 1;










}





















.moment-header {










  display: flex;










  align-items: center;










  gap: 12px;










  margin-bottom: 16px;










}





















.moment-avatar {










  width: 44px;










  height: 44px;










  border-radius: 50%;










  background: var(--blue);










  display: flex;










  align-items: center;










  justify-content: center;










  font-size: 20px;










  color: var(--white);










  font-weight: 700;










  overflow: hidden;










  flex-shrink: 0;










}





















.moment-avatar img {










  width: 100%;










  height: 100%;










  object-fit: cover;










}





















.moment-meta {










  flex: 1;










}





















.moment-name {










  font-size: 15px;










  font-weight: 700;










  color: var(--black);










}





















.moment-info {










  display: flex;










  gap: 12px;










  font-size: 13px;










  color: var(--gray-3);










  margin-top: 2px;










}





















.moment-mood {










  color: var(--blue);










  font-weight: 600;










}





















.moment-content {










  font-size: 16px;










  color: var(--gray-1);










  line-height: 1.7;










  margin-bottom: 16px;










}





















.moment-images {










  display: grid;










  gap: 8px;










  margin-top: 16px;










  border-radius: var(--radius-sm);










  overflow: hidden;










}





















.moment-images.count-1 { grid-template-columns: 1fr; }










.moment-images.count-2 { grid-template-columns: 1fr 1fr; }










.moment-images.count-3 { grid-template-columns: 1fr 1fr 1fr; }










.moment-images.count-4 { grid-template-columns: 1fr 1fr; }










.moment-images.count-5,










.moment-images.count-6,










.moment-images.count-7,










.moment-images.count-8,










.moment-images.count-9 { grid-template-columns: 1fr 1fr 1fr; }





















.moment-img-item {










  aspect-ratio: 1;










  overflow: hidden;










  border-radius: var(--radius-sm);










  cursor: zoom-in;










}





















.moment-img-item img {










  width: 100%;










  height: 100%;










  object-fit: cover;










  transition: var(--transition);










}





















.moment-img-item:hover img {










  transform: scale(1.05);










}





















/* ===== 作品集 ===== */










.works-grid {










  display: grid;










  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));










  gap: 24px;










}





















.work-card {










  border-radius: var(--radius-lg);










  overflow: hidden;










  background: var(--white);










  border: 1.5px solid rgba(0, 102, 255, 0.08);










  box-shadow: var(--shadow);










  transition: var(--transition);










  cursor: pointer;










  display: block;










}





















.work-card:hover {










  box-shadow: var(--shadow-hover);










  transform: translateY(-6px);










  border-color: rgba(0, 102, 255, 0.2);










}





















.work-cover {










  aspect-ratio: 4/3;










  overflow: hidden;










  background: var(--blue-pale);










  position: relative;










}





















.work-cover img {










  width: 100%;










  height: 100%;










  object-fit: cover;










  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);










}





















.work-card:hover .work-cover img {










  transform: scale(1.08);










}





















.work-cover-placeholder {










  width: 100%;










  height: 100%;










  display: flex;










  align-items: center;










  justify-content: center;










  font-size: 64px;










  background: linear-gradient(135deg, var(--blue-pale) 0%, var(--blue-light) 100%);










}





















.work-cover-overlay {










  position: absolute;










  inset: 0;










  background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, transparent 60%);










  opacity: 0;










  transition: var(--transition);










  display: flex;










  align-items: flex-end;










  padding: 20px;










}





















.work-card:hover .work-cover-overlay {










  opacity: 1;










}





















.work-play-btn {










  width: 48px;










  height: 48px;










  border-radius: 50%;










  background: var(--white);










  display: flex;










  align-items: center;










  justify-content: center;










  color: var(--blue);










  margin: auto;










  position: absolute;










  inset: 0;










  opacity: 0;










  transition: var(--transition);










}





















.work-card:hover .work-play-btn {










  opacity: 1;










}





















.work-info {










  padding: 20px;










}





















.work-category {










  font-size: 12px;










  font-weight: 700;










  color: var(--blue);










  letter-spacing: 0.1em;










  text-transform: uppercase;










  margin-bottom: 8px;










}





















.work-title {










  font-size: 18px;










  font-weight: 700;










  color: var(--black);










  margin-bottom: 8px;










  line-height: 1.3;










}





















.work-desc {










  font-size: 14px;










  color: var(--gray-3);










  line-height: 1.6;










  display: -webkit-box;










  -webkit-line-clamp: 2;










  -webkit-box-orient: vertical;










  overflow: hidden;










}





















/* ===== 互动客厅 ===== */










.guestbook-section {










  background: var(--gray-5);










}





















.guestbook-form-wrap {










  background: var(--white);










  border-radius: var(--radius-xl);










  padding: 40px;










  border: 1.5px solid rgba(0, 102, 255, 0.1);










  box-shadow: var(--shadow);










  margin-bottom: 48px;










  max-width: 680px;










  margin-left: auto;










  margin-right: auto;










}





















.guestbook-form-title {










  font-size: 20px;










  font-weight: 700;










  color: var(--black);










  margin-bottom: 24px;










  display: flex;










  align-items: center;










  gap: 10px;










}





















.form-group {










  margin-bottom: 20px;










}





















.form-label {










  display: block;










  font-size: 14px;










  font-weight: 600;










  color: var(--gray-2);










  margin-bottom: 8px;










}





















.form-input,










.form-textarea {










  width: 100%;










  padding: 14px 18px;










  border: 1.5px solid var(--gray-4);










  border-radius: var(--radius-sm);










  font-size: 15px;










  font-family: var(--font-main);










  color: var(--black);










  background: var(--white);










  transition: var(--transition);










  outline: none;










}





















.form-input:focus,










.form-textarea:focus {










  border-color: var(--blue);










  box-shadow: 0 0 0 4px rgba(0, 102, 255, 0.08);










}





















.form-textarea {










  min-height: 120px;










  resize: vertical;










}





















.emoji-picker-row {










  display: flex;










  flex-wrap: wrap;










  gap: 8px;










  margin-bottom: 16px;










}





















.emoji-btn {










  font-size: 22px;










  padding: 6px;










  border: none;










  background: none;










  cursor: pointer;










  border-radius: var(--radius-sm);










  transition: var(--transition);










  line-height: 1;










}





















.emoji-btn:hover {










  background: var(--blue-light);










  transform: scale(1.2);










}





















.form-upload-area {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  min-height: 120px;
  border: 2px dashed var(--gray-4);
  border-radius: var(--radius-sm);
  padding: 24px 16px;
  cursor: pointer;
  transition: all 0.25s ease;
  background: #ffffff;
}
.form-upload-area:hover {
  border-color: #0066ff;
  background: #eef2ff;
}
.form-upload-area:hover {
  border-color: #0066ff;
  background: #eef2ff;
}





















.form-upload-area:hover {










  border-color: var(--blue);










  background: var(--blue-pale);










}





















.form-upload-area input[type="file"] {










  display: none;










}





















.btn-primary {










  display: inline-flex;










  align-items: center;










  gap: 8px;










  padding: 14px 32px;










  background: var(--blue);










  color: var(--white);










  border: none;










  border-radius: 100px;










  font-size: 16px;










  font-weight: 700;










  cursor: pointer;










  transition: var(--transition);










  font-family: var(--font-main);










}





















.btn-primary:hover {










  background: var(--blue-deep);










  transform: translateY(-2px);










  box-shadow: 0 8px 24px rgba(0, 102, 255, 0.3);










}





















.btn-outline {










  display: inline-flex;










  align-items: center;










  gap: 8px;










  padding: 12px 28px;










  background: transparent;










  color: var(--blue);










  border: 2px solid var(--blue);










  border-radius: 100px;










  font-size: 15px;










  font-weight: 600;










  cursor: pointer;










  transition: var(--transition);










  font-family: var(--font-main);










  text-decoration: none;










}





















.btn-outline:hover {










  background: var(--blue);










  color: var(--white);










}





















/* 留言列表 */










.messages-list {










  max-width: 680px;










  margin: 0 auto;










  display: grid;










  gap: 16px;










}





















.message-card {










  background: var(--white);










  border-radius: var(--radius);










  padding: 24px;










  border: 1.5px solid rgba(0, 102, 255, 0.06);










  box-shadow: var(--shadow);










  transition: var(--transition);










}





















.message-card:hover {










  border-color: rgba(0, 102, 255, 0.15);










  box-shadow: var(--shadow-hover);










}





















.message-header {










  display: flex;










  align-items: center;










  gap: 12px;










  margin-bottom: 12px;










}





















.message-avatar-circle {










  width: 40px;










  height: 40px;










  border-radius: 50%;










  background: var(--blue);










  display: flex;










  align-items: center;










  justify-content: center;










  color: var(--white);










  font-size: 16px;










  font-weight: 700;










  flex-shrink: 0;










}





















.message-name {










  font-size: 15px;










  font-weight: 700;










  color: var(--black);










}





















.message-meta {










  font-size: 12px;










  color: var(--gray-3);










  margin-top: 2px;










}





















.message-city {










  display: inline-flex;










  align-items: center;










  gap: 4px;










}





















.message-text {










  font-size: 15px;










  color: var(--gray-2);










  line-height: 1.7;










}





















.message-emoji {










  font-size: 20px;










  margin-right: 4px;










}





















.message-img {










  width: 100%;










  max-width: 300px;










  border-radius: var(--radius-sm);










  margin-top: 12px;










}





















/* ===== 联系页面 ===== */










.contact-grid {










  display: grid;










  grid-template-columns: 1fr 1fr;










  gap: 32px;










  max-width: 800px;










  margin: 0 auto;










}





















.contact-card {










  background: var(--white);










  border-radius: var(--radius-xl);










  padding: 48px 40px;










  text-align: center;










  border: 1.5px solid rgba(0, 102, 255, 0.1);










  box-shadow: var(--shadow);










  transition: var(--transition);










}





















.contact-card:hover {










  box-shadow: var(--shadow-hover);










  transform: translateY(-4px);










}





















.contact-icon {










  width: 80px;










  height: 80px;










  border-radius: 50%;










  background: var(--blue-light);










  display: flex;










  align-items: center;










  justify-content: center;










  margin: 0 auto 24px;










  font-size: 36px;










}





















.contact-title {










  font-size: 22px;










  font-weight: 700;










  color: var(--black);










  margin-bottom: 16px;










}





















.contact-text {










  font-size: 15px;










  color: var(--gray-3);










  line-height: 1.7;










  white-space: pre-line;










}





















.wechat-qr {










  width: 180px;










  height: 180px;










  margin: 20px auto 0;










  border-radius: var(--radius);










  overflow: hidden;










  border: 3px solid var(--blue-light);










}





















.wechat-qr img {










  width: 100%;










  height: 100%;










  object-fit: cover;










}





















.wechat-qr-placeholder {










  width: 100%;










  height: 100%;










  background: var(--blue-pale);










  display: flex;










  align-items: center;










  justify-content: center;










  font-size: 48px;










}





















/* ===== 自定义页面 ===== */










.custom-page-content {










  max-width: 800px;










  margin: 0 auto;










  padding: 100px 24px;










  font-size: 17px;










  line-height: 1.8;










  color: var(--gray-1);










}





















.custom-page-content h1, h2, h3 {










  color: var(--black);










  margin: 32px 0 16px;










}





















.custom-page-content p {










  margin-bottom: 16px;










}





















.custom-page-content img {










  border-radius: var(--radius);










  margin: 20px auto;










}





















/* ===== 作品详情页 ===== */










.work-detail {










  padding: 120px 24px 80px;










  max-width: 900px;










  margin: 0 auto;










  position: relative;










  z-index: 1;










}





















.work-detail-cover {










  border-radius: var(--radius-xl);










  overflow: hidden;










  margin-bottom: 40px;










  box-shadow: var(--shadow-hover);










}





















.work-detail-cover img {










  width: 100%;










  max-height: 600px;










  object-fit: cover;










}





















.work-detail-header {










  margin-bottom: 32px;










}





















.work-detail-category {










  font-size: 14px;










  font-weight: 700;










  color: var(--blue);










  text-transform: uppercase;










  letter-spacing: 0.1em;










  margin-bottom: 12px;










}





















.work-detail-title {










  font-size: 40px;










  font-weight: 800;










  color: var(--black);










  letter-spacing: -0.02em;










  margin-bottom: 16px;










}





















.work-detail-desc {










  font-size: 17px;










  color: var(--gray-2);










  line-height: 1.8;










}





















.work-detail-gallery {










  display: grid;










  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));










  gap: 16px;










  margin-top: 32px;










}





















.work-detail-gallery-item {










  border-radius: var(--radius);










  overflow: hidden;










  cursor: zoom-in;










}





















.work-detail-gallery-item img {










  width: 100%;










  aspect-ratio: 1;










  object-fit: cover;










  transition: var(--transition);










}





















.work-detail-gallery-item:hover img {










  transform: scale(1.05);










}





















.work-video-wrap {










  border-radius: var(--radius-lg);










  overflow: hidden;










  margin-top: 24px;










  box-shadow: var(--shadow);










}





















.work-video-wrap video {










  width: 100%;










  display: block;










}





















/* ===== 分页 ===== */










.pagination {










  display: flex;










  gap: 8px;










  justify-content: center;










  margin-top: 48px;










}





















.page-btn {










  width: 44px;










  height: 44px;










  border-radius: 50%;










  display: flex;










  align-items: center;










  justify-content: center;










  font-size: 15px;










  font-weight: 600;










  border: 2px solid var(--gray-4);










  color: var(--gray-2);










  cursor: pointer;










  transition: var(--transition);










  background: var(--white);










}





















.page-btn:hover,










.page-btn.current {










  background: var(--blue);










  color: var(--white);










  border-color: var(--blue);










}





















/* ===== 图片灯箱 ===== */










.lightbox {










  display: none;










  position: fixed;










  inset: 0;










  background: rgba(0, 0, 0, 0.92);










  z-index: 9999;










  align-items: center;










  justify-content: center;










}





















.lightbox.open {










  display: flex;










}





















.lightbox-img {










  max-width: 90vw;










  max-height: 90vh;










  border-radius: var(--radius);










  object-fit: contain;










}





















.lightbox-close {










  position: absolute;










  top: 24px;










  right: 24px;










  width: 44px;










  height: 44px;










  border-radius: 50%;










  background: rgba(255,255,255,0.15);










  border: none;










  color: var(--white);










  font-size: 24px;










  cursor: pointer;










  display: flex;










  align-items: center;










  justify-content: center;










  transition: var(--transition);










}





















.lightbox-close:hover {










  background: rgba(255,255,255,0.3);










}





















/* ===== 加载更多 ===== */










.load-more-wrap {










  text-align: center;










  margin-top: 48px;










}





















/* ===== Toast提示 ===== */










.toast {










  position: fixed;










  bottom: 32px;










  left: 50%;










  transform: translateX(-50%) translateY(100px);










  background: var(--black);










  color: var(--white);










  padding: 14px 28px;










  border-radius: 100px;










  font-size: 15px;










  font-weight: 500;










  z-index: 9999;










  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);










  white-space: nowrap;










}





















.toast.show {










  transform: translateX(-50%) translateY(0);










}





















/* ===== Footer ===== */










.footer {










  position: relative;










  z-index: 1;










  padding: 48px 24px;










  text-align: center;










  border-top: 1px solid rgba(0, 102, 255, 0.06);










  background: #FAFAFA;










}





















.footer-logo {










  height: 36px;










  margin: 0 auto 20px;










}





















.footer-text {










  font-size: 14px;










  color: var(--gray-3);










  line-height: 2;










}





















.footer-links {










  display: flex;










  gap: 24px;










  justify-content: center;










  margin-top: 16px;










  flex-wrap: wrap;










}





















.footer-links a {










  font-size: 14px;










  color: var(--gray-3);










}





















.footer-links a:hover {










  color: var(--blue);










}





















/* ===== 页面过渡动画 ===== */










@keyframes fadeInUp {










  from { opacity: 0; transform: translateY(40px); }










  to { opacity: 1; transform: translateY(0); }










}





















.animate-in {










  animation: fadeInUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;










}





















.delay-1 { animation-delay: 0.1s; }










.delay-2 { animation-delay: 0.2s; }










.delay-3 { animation-delay: 0.3s; }





















/* ===== 响应式 ===== */










@media (max-width: 768px) {










  .nav {










    padding: 0 20px;










  }










  










  .nav-links {










    display: none;










  }










  










  .nav-hamburger {










    display: flex;










  }










  










  .hero {










    padding: 100px 20px 60px;










  }





















  .page-banner {










    height: 220px;










  }










  










  .section {










    padding: 64px 0;










  }










  










  .section-header {










    margin-bottom: 40px;










  }










  










  .works-grid {










    grid-template-columns: repeat(2, 1fr);










    gap: 16px;










  }










  










  .contact-grid {










    grid-template-columns: 1fr;










  }










  










  .guestbook-form-wrap {










    padding: 24px 20px;










  }










  










  .work-detail {










    padding: 90px 20px 60px;










  }










  










  .work-detail-title {










    font-size: 28px;










  }










}





















@media (max-width: 480px) {










  .works-grid {










    grid-template-columns: 1fr;










  }










  










  .hero-title {










    font-size: 40px;










  }










}





















/* ===== 空状态 ===== */










.empty-state {










  text-align: center;










  padding: 80px 20px;










  color: var(--gray-3);










}





















.empty-state svg {










  width: 80px;










  height: 80px;










  margin: 0 auto 20px;










  opacity: 0.3;










}





















.empty-state p {










  font-size: 16px;










}





















/* ===== 图片预览上传 ===== */










.upload-preview {










  display: flex;










  flex-wrap: wrap;










  gap: 8px;










  margin-top: 12px;










}





















.upload-preview-item {










  width: 80px;










  height: 80px;










  border-radius: var(--radius-sm);










  overflow: hidden;










  position: relative;










}





















.upload-preview-item img {










  width: 100%;










  height: 100%;










  object-fit: cover;










}





















.upload-preview-remove {










  position: absolute;










  top: 2px;










  right: 2px;










  width: 20px;










  height: 20px;










  border-radius: 50%;










  background: rgba(0,0,0,0.6);










  border: none;










  color: white;










  font-size: 12px;










  cursor: pointer;










  display: flex;










  align-items: center;










  justify-content: center;










}






































/* ===== 大标题使用"字制区喜脉喜欢体" ===== */






h1, h2, h3,






.hero-title,






.section-title,






.work-title,






.contact-title,






.work-detail-title {






  font-family: 'ZiZhiQuXiMai', cursive !important;






  font-weight: normal !important;






}








/* 后台上传区域 */
.img-upload-area {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  min-height: 100px;
  border: 2px dashed var(--gray-4);
  border-radius: var(--radius-md);
  background: #ffffff;
  cursor: pointer;
  transition: all 0.25s ease;
}
.img-upload-area:hover {
  border-color: #0066ff;
  background: #eef2ff;
}

/* 上传预览 */
.upload-preview {
  margin-top: 12px;
}
.upload-preview-item {
  position: relative;
  display: inline-block;
}
.upload-preview-item img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--gray-5);
}