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

:root {
  --pink: #f9a8c9; 
  --pink-light: #fde8f1; 
  --pink-dark: #e07aa0;
  --text: #3a2a35; 
  --sub: #8a6a7a; 
  --bg: #fffbfd; 
  --card: #ffffff;
  --radius: 16px;
}

html { 
  scroll-behavior: smooth; 
}

body { 
  font-family: "PingFang SC","Microsoft YaHei",sans-serif; 
  background: var(--bg); 
  color: var(--text); 
  line-height: 1.7; 
}

/* 导航栏 */
nav { 
  position: sticky; 
  top: 0; 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 0 2rem; 
  height: 60px; 
  background: rgba(255,251,253,.92); 
  backdrop-filter: blur(8px); 
  border-bottom: 1px solid var(--pink-light); 
  z-index: 100; 
}

.logo { 
  font-size: 1.3rem; 
  font-weight: 700; 
  color: var(--pink-dark); 
}

nav ul { 
  list-style: none; 
  display: flex; 
  gap: 1.5rem; 
}

nav a { 
  text-decoration: none; 
  color: var(--sub); 
  font-size: .95rem; 
  transition: color .2s; 
}

nav a:hover { 
  color: var(--pink-dark); 
}

/* 通用 */
section { 
  padding: 80px 2rem; 
  max-width: 900px; 
  margin: 0 auto; 
}

h2 { 
  font-size: 1.8rem; 
  margin-bottom: .3rem; 
}

.section-sub { 
  color: var(--sub); 
  font-size: .9rem; 
  margin-bottom: 2.5rem; 
}

/* 首页 */
#home { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  min-height: 90vh; 
  text-align: center; 
}

.hero h1 { 
  font-size: 2.8rem; 
  margin-bottom: 1rem; 
}

.hero p { 
  font-size: 1.1rem; 
  color: var(--sub); 
  margin-bottom: 2rem; 
}

/* 按钮 */
.btn { 
  display: inline-block; 
  padding: .6rem 1.6rem; 
  background: var(--pink); 
  color: white; 
  border-radius: 30px; 
  text-decoration: none; 
  font-size: .9rem; 
  transition: background .2s; 
}

.btn:hover { 
  background: var(--pink-dark); 
}

.btn-sm { 
  display: inline-block; 
  padding: .3rem 1rem; 
  border: 1px solid var(--pink); 
  color: var(--pink-dark); 
  border-radius: 20px; 
  text-decoration: none; 
  font-size: .82rem; 
  transition: all .2s; 
}

.btn-sm:hover { 
  background: var(--pink); 
  color: white; 
}

/* 作品集 */
.portfolio-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); 
  gap: 1.2rem; 
}

.work-card { 
  background: var(--card); 
  border-radius: var(--radius); 
  border: 1px solid var(--pink-light); 
  overflow: hidden; 
  transition: transform .2s, box-shadow .2s; 
}

.work-card:hover { 
  transform: translateY(-4px); 
  box-shadow: 0 8px 24px rgba(240,150,190,.15); 
}

.work-cover { 
  font-size: 3rem; 
  text-align: center; 
  padding: 2rem; 
  background: var(--pink-light); 
}

.work-info { 
  padding: 1rem 1.2rem; 
}

.work-info h3 { 
  margin-bottom: .3rem; 
}

.work-info p { 
  font-size: .85rem; 
  color: var(--sub); 
  margin-bottom: .8rem; 
}

/* 服务卡片 */
.services-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); 
  gap: 1.2rem; 
}

a.service-card { 
  display: flex; 
  flex-direction: column; 
  gap: .8rem; 
  background: var(--card); 
  border-radius: var(--radius); 
  border: 1px solid var(--pink-light); 
  padding: 1.8rem 1.5rem; 
  text-decoration: none; 
  color: var(--text); 
  transition: transform .2s, box-shadow .2s; 
}

a.service-card:hover { 
  transform: translateY(-4px); 
  box-shadow: 0 8px 24px rgba(240,150,190,.15); 
}

a.service-card.highlight { 
  border-color: var(--pink); 
  box-shadow: 0 0 0 2px var(--pink-light); 
}

.service-icon { 
  font-size: 2.2rem; 
}

.service-card h3 { 
  font-size: 1.2rem; 
}

.price { 
  font-size: 1.5rem; 
  font-weight: 700; 
  color: var(--pink-dark); 
}

.service-hint { 
  font-size: .85rem; 
  color: var(--sub); 
}

/* 日历 */
.dot { 
  display: inline-block; 
  width: 10px; 
  height: 10px; 
  border-radius: 50%; 
}

.dot.green { 
  background: #86efac; 
}

.dot.yellow { 
  background: #fde047; 
}

.dot.red { 
  background: #fca5a5; 
}

.calendar-wrap { 
  background: var(--card); 
  border-radius: var(--radius); 
  border: 1px solid var(--pink-light); 
  padding: 1.5rem; 
  max-width: 480px; 
}

.cal-header { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  margin-bottom: 1rem; 
}

.cal-header button { 
  background: none; 
  border: 1px solid var(--pink-light); 
  border-radius: 8px; 
  padding: .3rem .8rem; 
  cursor: pointer; 
  font-size: 1.2rem; 
  color: var(--sub); 
  transition: all .2s; 
}

.cal-header button:hover { 
  background: var(--pink-light); 
}

#cal-title { 
  font-weight: 600; 
  font-size: 1rem; 
}

.cal-grid { 
  display: grid; 
  grid-template-columns: repeat(7,1fr); 
  gap: 4px; 
  text-align: center; 
}

.cal-day-name { 
  font-size: .75rem; 
  color: var(--sub); 
  padding: .3rem 0; 
}

.cal-day { 
  padding: .5rem 0; 
  border-radius: 8px; 
  font-size: .85rem; 
  background: #86efac;  /* 默认绿色 */
  color: #166534;
}

.cal-day.busy { 
  background: #fde047; 
  color: #713f12; 
  font-weight: 600; 
}

.cal-day.full { 
  background: #fca5a5; 
  color: #7f1d1d; 
  font-weight: 600; 
}

.cal-day.today { 
  outline: 2px solid var(--pink-dark); 
}

.cal-day.empty { 
  opacity: 0; 
  pointer-events: none; 
}


/* 联系 */
.contact-box { 
  background: var(--card); 
  border-radius: var(--radius); 
  border: 1px solid var(--pink-light); 
  padding: 2rem; 
  display: inline-block; 
}

.contact-box a { 
  color: var(--pink-dark); 
  text-decoration: none; 
  font-weight: 600; 
}

.contact-box a:hover { 
  text-decoration: underline; 
}

.tip { 
  font-size: .85rem; 
  color: var(--sub); 
  margin-top: .5rem; 
}

/* 委托表单页 */
.form-page { 
  max-width: 640px; 
  margin: 0 auto; 
  padding: 80px 2rem; 
}

.form-page h1 { 
  font-size: 1.8rem; 
  margin-bottom: .3rem; 
}

.form-page .sub { 
  color: var(--sub); 
  font-size: .9rem; 
  margin-bottom: 2rem; 
}

.notice-box { 
  background: var(--pink-light); 
  border-radius: var(--radius); 
  padding: 1.2rem 1.5rem; 
  margin-bottom: 2rem; 
  font-size: .9rem; 
}

.notice-box h3 { 
  margin-bottom: .6rem; 
  color: var(--pink-dark); 
}

.notice-box ul { 
  padding-left: 1.2rem; 
  display: flex; 
  flex-direction: column; 
  gap: .3rem; 
}

.notice-box .extra { 
  margin-top: .8rem; 
  color: #b45309; 
  font-size: .85rem; 
}

.form-group { 
  display: flex; 
  flex-direction: column; 
  gap: .4rem; 
  margin-bottom: 1.2rem; 
}

.form-group label { 
  font-size: .9rem; 
  font-weight: 600; 
}

.form-group input, .form-group select, .form-group textarea {
  padding: .6rem 1rem; 
  border: 1px solid var(--pink-light); 
  border-radius: 10px;
  font-size: .95rem; 
  font-family: inherit; 
  background: white; 
  color: var(--text);
  transition: border .2s;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus { 
  outline: none; 
  border-color: var(--pink); 
}

.form-group textarea { 
  resize: vertical; 
  min-height: 100px; 
}

.optional { 
  color: var(--sub); 
  font-weight: 400; 
  font-size: .82rem; 
}

.submit-btn { 
  width: 100%; 
  padding: .8rem; 
  background: var(--pink); 
  color: white; 
  border: none; 
  border-radius: 30px; 
  font-size: 1rem; 
  cursor: pointer; 
  transition: background .2s; 
}

.submit-btn:hover { 
  background: var(--pink-dark); 
}

.back-link { 
  display: inline-block; 
  margin-bottom: 1.5rem; 
  color: var(--sub); 
  text-decoration: none; 
  font-size: .9rem; 
}

.back-link:hover { 
  color: var(--pink-dark); 
}

.success-msg { 
  display: none; 
  text-align: center; 
  padding: 3rem 1rem; 
}

.success-msg h2 { 
  font-size: 1.5rem; 
  margin-bottom: .5rem; 
}

.success-msg p { 
  color: var(--sub); 
}

footer { 
  text-align: center; 
  padding: 2rem; 
  font-size: .85rem; 
  color: var(--sub); 
  border-top: 1px solid var(--pink-light); 
}

@media (max-width: 600px) {
  nav ul { 
    gap: .8rem; 
  }
  
  .hero h1 { 
    font-size: 2rem; 
  }
  
  section, .form-page { 
    padding: 60px 1.2rem; 
  }
}