:root { color: #17201d; background: #f8f5ef; font-family: "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
.hero { min-height: 92vh; position: relative; display: flex; align-items: center; overflow: hidden; color: #fff; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.heroOverlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,18,18,.9), rgba(10,18,18,.45), rgba(10,18,18,.1)); }
nav { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; justify-content: space-between; padding: 24px clamp(20px,5vw,72px); }
.brand { font-weight: 900; }
nav a, .primary, .secondary, .cardButton { border-radius: 8px; padding: 12px 18px; font-weight: 800; }
nav a, .secondary { border: 1px solid rgba(255,255,255,.55); color: #fff; }
.primary, .cardButton, .adminPanel button, .adminForm button { background: #f1b84d; color: #17201d; border: 0; display: inline-flex; justify-content: center; cursor: pointer; }
.heroText { position: relative; z-index: 1; width: min(800px, 90vw); padding-left: clamp(24px,7vw,96px); padding-top: 72px; }
.eyebrow, .sectionLabel, .tag { display: inline-flex; width: fit-content; border-radius: 999px; padding: 8px 12px; font-size: 14px; font-weight: 900; background: #e9f6f2; color: #125247; }
.hero .eyebrow { background: rgba(255,255,255,.16); color: #fff; }
h1 { font-size: clamp(44px,7vw,86px); line-height: 1.04; margin: 20px 0 22px; }
h2 { font-size: clamp(30px,4vw,48px); line-height: 1.12; margin: 0 0 16px; }
h3 { font-size: 22px; margin: 0 0 10px; }
p { font-size: 17px; line-height: 1.8; color: #52605b; }
.hero p { color: rgba(255,255,255,.88); font-size: 20px; max-width: 700px; }
.heroActions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.proofBand { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; background: #12211f; color: #fff; padding: 20px clamp(20px,5vw,72px); }
.proofBand div { display: grid; grid-template-columns: 24px 1fr; gap: 4px 12px; }
.proofBand span:last-child { grid-column: 2; color: rgba(255,255,255,.72); font-size: 14px; }
.section, .dailyPhotos, .order { padding: 86px clamp(20px,6vw,88px); }
.intro, .order { display: grid; grid-template-columns: .9fr 1.1fr; gap: 54px; align-items: center; }
.sectionHead { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 28px; }
.sectionHead p { max-width: 520px; }
.dailyPhotos, .notice { background: #fff; }
.photoGrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.photoSlot { min-height: 220px; border-radius: 8px; border: 1px dashed #c7bda9; background: #fffaf0; display: grid; place-items: center; overflow: hidden; color: #65716c; font-weight: 900; }
.photoSlot img, .qrPlaceholder img { width: 100%; height: 100%; object-fit: cover; }
.packageGrid, .contactGrid, .adminGrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.packageCard, .contactCard, .adminPanel, .adminForm, .orderItem { background: #fff; border: 1px solid #e5ded1; border-radius: 8px; padding: 24px; }
.price { font-size: 38px; font-weight: 900; color: #bc661d; margin: 18px 0 8px; }
.order { background: #f1b84d; }
.order p { color: #3c3324; }
.detailHero { min-height: 58vh; }
.contactGrid { grid-template-columns: repeat(4,1fr); }
.qrPlaceholder { aspect-ratio: 1; border-radius: 8px; border: 1px dashed #b7aa93; display: grid; place-items: center; overflow: hidden; background: #f8f5ef; font-weight: 900; }
.adminPage h1 { color: #17201d; font-size: clamp(38px,6vw,72px); }
.adminPanel, .adminForm { display: grid; gap: 14px; margin: 22px 0; }
.adminPanel label, .adminForm label { display: grid; gap: 7px; font-weight: 800; }
.adminPanel input, .adminPanel textarea, .adminForm input { border: 1px solid #cfc5b4; border-radius: 8px; padding: 12px; font: inherit; background: #fff; }
.adminPanel textarea { min-height: 120px; resize: vertical; }
.success { background: #e9f6f2; color: #125247; padding: 14px 18px; border-radius: 8px; font-weight: 900; }
.error { color: #a32626; }
.ordersList { display: grid; gap: 12px; }
.orderItem { display: grid; gap: 8px; background: #f8f5ef; }
@media (max-width: 900px) {
  .proofBand, .intro, .order, .sectionHead, .photoGrid, .packageGrid, .contactGrid, .adminGrid { grid-template-columns: 1fr; }
  .sectionHead { display: grid; }
  .heroText { padding: 96px 20px 48px; width: 100%; }
  h1 { font-size: 42px; }
  .section, .dailyPhotos, .order { padding: 58px 20px; }
}