.page-shell {
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh - 64.0px - env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14.0px 12.0px 0;
}

.brand-bar {
  display: flex;
  align-items: center;
  margin-bottom: 17.0px;
}

.brand-logo {
  width: 52.0px;
  height: 52.0px;
  border-radius: 6.0px;
  flex: none;
}

.brand-copy { margin-left: 11.0px; flex: 1; }
.brand-title { font-size: 20.0px; font-weight: 600; letter-spacing: 1.0px; }
.brand-subtitle { margin-top: 4.0px; color: #859187; font-size: 14.0px; }
.privacy-badge {
  box-sizing: border-box;
  flex: none;
  min-width: 88.0px;
  min-height: 48.0px;
  padding: 5.0px 6.0px;
  border-radius: 12.0px;
  background: #dfe9d9;
  color: #526d53;
  font-size: 11.5px;
  line-height: 1.55;
  text-align: center;
  white-space: pre-line;
  display: flex;
  align-items: center;
  justify-content: center;
}
.back-row {
  display: inline-flex;
  align-items: center;
  color: #526c54;
  padding: 5.0px 4.0px 13.0px;
}
.back-arrow { font-size: 25.0px; line-height: 15.0px; margin-right: 4.0px; }

.hero-card,
.card,
.version-card,
.classic-card,
.test-entry,
.result-hero,
.identity-card {
  box-sizing: border-box;
  background: #fffdf8;
  border: 1.0px solid #ded4c2;
  border-radius: 16.0px;
  padding: 16.0px;
  margin-bottom: 12.0px;
}

.hero-card { display: flex; align-items: center; padding: 15.0px; }
.hero-logo { width: 75.0px; height: 75.0px; flex: none; }
.hero-copy { flex: 1; margin-left: 15.0px; }
.hero-title { font-size: 18.0px; line-height: 1.35; }
.hero-subtitle { color: #7f8d83; font-size: 11.0px; margin: 6.0px 0 9.0px; white-space: nowrap; }

.home-swiper {
  width: 100%;
  height: 197.5px;
  border-radius: 14.0px;
  overflow: hidden;
  border: 1.0px solid #c8a464;
  box-sizing: border-box;
}
.carousel-item { width: 100%; height: 100%; }
.carousel-img { width: 100%; height: 100%; }
.dots { display: flex; justify-content: center; gap: 8.0px; padding: 9.0px 0 6.0px; }
.dot { width: 6.5px; height: 6.5px; background: #c9c9c4; border-radius: 50%; }
.dot.active { background: #28362f; }

.section-title { font-size: 19.0px; margin: 17.0px 0 10.0px; }
.screen-title { font-size: 24.0px; line-height: 1.3; margin: 4.0px 4.0px 9.0px; }
.screen-subtitle { color: #7c8b81; font-size: 14.0px; line-height: 1.7; margin: 0 4.0px 15.0px; white-space: pre-line; }
.tests-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 10.0px; margin-bottom: 1.0px; }
.tests-heading-title { flex: 1; min-width: 0; margin-bottom: 9.0px; }
.orders-entry-button {
  flex: none;
  min-width: 86.0px;
  min-height: 34.0px;
  margin: 0 4.0px 5.0px 0;
  padding: 0 11.0px;
  border: 1.0px solid #c8d4c5;
  border-radius: 17.0px;
  background: #edf3ea;
  color: #526d53;
  font-size: 13.0px;
  line-height: 33.0px;
}
.card-title { font-size: 17.0px; font-weight: 600; line-height: 1.45; }
.card-title.small { font-size: 14.5px; }
.muted { color: #849087; line-height: 1.7; white-space: pre-line; }
.english { color: #567057; font-weight: 600; letter-spacing: 0.5px; margin: 4.0px 0 6.0px; }
.space-bottom { margin-bottom: 11.0px; }
.top-gap { margin-top: 12.0px; }
.center { text-align: center; }
.paragraph { line-height: 1.8; margin-top: 9.0px; }

.feature-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14.0px 15.0px;
  margin-bottom: 10.0px;
  background: #fffdf8;
  border-radius: 13.0px;
  border: 1.0px solid #ded4c2;
}
.chevron { font-size: 26.0px; color: #9aa59c; }

.primary-button,
.ghost-button,
.detail-button,
.option-button,
.mood-button,
.history-button,
.guide-choice,
.breath-choice,
.duration-button,
.danger-button,
.delete-record {
  box-sizing: border-box;
  border-radius: 12.0px;
  line-height: 1.4;
  min-height: 46.0px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.primary-button {
  width: 100%;
  color: #fff;
  background: #526d53;
  margin-top: 12.0px;
}
.primary-button.disabled { background: #dedbd3; color: #9da39e; }
.primary-button.compact { min-height: 37.0px; margin-top: 0; font-size: 13.5px; }
.ghost-button { background: #efebe2; color: #66756b; padding: 0 13.0px; }
.ghost-button.full { width: 100%; margin: 10.0px 0; }
.detail-button { width: 100%; background: #fffdf8; color: #59705c; border: 1.0px solid #ded4c2; margin-bottom: 14.0px; }
.resilience-detail-button {
  width: 100% !important;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  padding-left: 6.0px;
  padding-right: 6.0px;
  white-space: nowrap;
}
.button-row { display: flex; align-items: stretch; gap: 8.0px; margin-top: 4.0px; }
.button-row .primary-button { margin-top: 0; }
.flex { flex: 1; min-width: 0; }

.mood-grid { display: flex; flex-wrap: wrap; gap: 7.0px 6.0px; width: 100%; }
.mood-button {
  width: calc((100% - 12.0px) / 3);
  flex: 0 0 calc((100% - 12.0px) / 3);
  min-width: 0;
  min-height: 42.0px;
  margin: 0;
  background: #f0ede5;
  color: #45564d;
  padding: 0 2.0px;
  font-size: 14.0px;
}
.mood-button.selected,
.option-button.selected { background: #526d53; color: #fff; }
.text-area,
.text-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 75.0px;
  margin-top: 10.0px;
  border: 1.0px solid #d8c9ac;
  border-radius: 12.0px;
  padding: 11.0px;
  background: #fffdf8;
}
.text-area.tall { min-height: 95.0px; }
.text-input { min-height: 45.0px; }
.counter { color: #9ca69f; text-align: right; font-size: 12.0px; margin-top: 3.0px; }
.emotion-status {
  white-space: pre-line;
  line-height: 1.7;
  margin-top: 9.0px;
  padding: 11.0px 12.0px;
  border-radius: 11.0px;
  background: #dfe9d9;
}
.history-button,
.guide-choice {
  width: 100%;
  min-height: 41.0px;
  margin: 8.0px 0 0;
  background: #efede6;
  color: #526d53;
}

.sage-card,
.tip-card { background: #dfe9d9; }
.sand-card { background: #eee2ca; }
.blush-card { background: #edd9d2; }
.neutral-tip { background: #f1ede4; }
.tip-card {
  border: 1.0px solid #d8d2c0;
  border-radius: 15.0px;
  padding: 14.0px;
  margin-bottom: 12.0px;
  line-height: 1.75;
  color: #687b6d;
}

.breath-orb {
  width: 105.0px;
  height: 105.0px;
  margin: 14.0px auto;
  border-radius: 50%;
  background: #f8f5ed;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #526d53;
  box-shadow: 0 0 0 6.0px rgba(82,109,83,.12);
}
.breath-countdown { margin-top: 4.0px; font-size: 12.0px; color: #829086; }
.breath-orb.breathing { animation: breathe 4s ease-in-out infinite alternate; }
@keyframes breathe { from { transform: scale(.82); opacity: .75; } to { transform: scale(1.08); opacity: 1; } }

.breath-mode-row { display: flex; gap: 7.0px; margin-top: 11.0px; }
.breath-choice {
  flex: 1;
  min-width: 0;
  min-height: 46.0px;
  margin: 0;
  padding: 6.0px 4.0px;
  flex-direction: column;
  background: #f5f2e9;
  color: #526d53;
  font-size: 13.5px;
}
.breath-choice-sub { display: block; font-size: 10.5px; color: #8c988f; }
.breath-choice.selected,
.duration-button.selected { background: #526d53; color: #fff; }
.breath-choice.selected .breath-choice-sub { color: #e8eee6; }
.breath-progress { height: 6.0px; margin: 12.0px 0; overflow: hidden; border-radius: 4.0px; background: rgba(82,109,83,.13); }
.breath-progress-fill { height: 100%; border-radius: 4.0px; background: #526d53; }
.duration-row { display: flex; align-items: center; gap: 5.0px; color: #708075; font-size: 12.0px; }
.duration-label { margin-right: auto; }
.duration-button {
  min-height: 29.0px;
  margin: 0;
  padding: 0 8.0px;
  border-radius: 9.0px;
  background: #f5f2e9;
  color: #526d53;
  font-size: 11.0px;
}

.record-row { padding: 10.0px 0; border-bottom: 1.0px solid #eeeae1; }
.record-row:last-child { border: 0; }
.record-mood { color: #526d53; font-weight: 600; margin-right: 10.0px; }
.record-time { color: #a0a79f; font-size: 11.0px; }
.history-week { display: flex; gap: 4.0px; margin-top: 12.0px; }
.history-day { flex: 1; min-width: 0; text-align: center; color: #8c998f; font-size: 9.5px; }
.history-day-count { display: flex; align-items: center; justify-content: center; width: 23.0px; height: 23.0px; margin: 0 auto 3.5px; border-radius: 50%; background: rgba(255,255,255,.55); }
.history-day.active .history-day-count { background: #526d53; color: #fff; }
.history-record .dimension-row { align-items: flex-start; margin-top: 0; }
.delete-record { flex: none; min-height: 27.0px; margin: 0; padding: 0 9.0px; background: #f3eee5; color: #8b6d65; font-size: 11.0px; }
.danger-button { width: 100%; min-height: 41.0px; margin: 4.0px 0 12.0px; background: #eaded8; color: #855f57; }
.empty-card { padding: 30.0px 12.0px; margin-bottom: 12.0px; border: 1.0px dashed #d8d2c0; border-radius: 14.0px; color: #89948c; text-align: center; }

.result-pair {
  background: #dfe9d9;
  border-radius: 14.0px;
  padding: 14.0px;
  margin-bottom: 10.0px;
  line-height: 1.7;
}
.result-pair.sand-card { background: #eee2ca; }
.result-label { color: #526d53; font-weight: 600; margin-bottom: 5.0px; }
.thought-result-card .result-pair { margin-top: 10.0px; margin-bottom: 0; background: rgba(255,255,255,.58); }
.guide-area { min-height: 190.0px; }

.test-entry,
.classic-card { display: flex; align-items: center; gap: 11.0px; }
.classic-card { flex-wrap: wrap; }
.test-copy { flex: 1; }
.entry-badge,
.price-badge,
.version-badge {
  flex: none;
  min-width: 60.0px;
  min-height: 43.0px;
  padding: 6.0px;
  border-radius: 12.0px;
  background: #fffdf8;
  color: #526d53;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: pre-line;
}
.classic-copy { flex: 1; }
.classic-actions { width: 100%; }
.classic-actions .primary-button { margin-top: 6.0px; }
.membership-card {
  box-sizing: border-box;
  margin: 14.0px 0;
  padding: 16.0px;
  border-radius: 16.0px;
  background: #4b6249;
  color: #eaf0e6;
  line-height: 1.7;
}
.membership-card .card-title { color: #fff; margin-bottom: 5.0px; }
.membership-button { margin: 11.0px 0 0; min-height: 39.0px; background: #f4f0e7; color: #829083; border-radius: 11.0px; }
.gold-button { background: #b28c4e; }
.disclaimer-text { margin: 11.0px 4.0px 17.0px; font-size: 11.0px; }
.price-badge { min-width: 66.0px; font-size: 12.5px; }
.version-head { display: flex; align-items: center; justify-content: space-between; gap: 10.0px; margin-bottom: 8.0px; }
.version-badge { min-height: 30.0px; min-width: 60.0px; }
.gold-text { color: #b28c4e; margin-top: 7.0px; line-height: 1.6; }
.official-price-row { display: flex; align-items: baseline; gap: 9.0px; margin-top: 8.0px; }
.official-original-price { color: #9a9f99; font-size: 14.0px; text-decoration: line-through; }
.official-promo-price { color: #b28c4e; font-size: 17.0px; font-weight: 700; }
.official-payment-hint { margin-top: 4.0px; color: #829083; font-size: 11.5px; line-height: 1.55; }

.quiz-card {
  background: #fffdf8;
  border: 1.0px solid #ded4c2;
  border-radius: 16.0px;
  padding: 16.0px;
  margin-bottom: 15.0px;
}
.quiz-question { font-size: 18.0px; line-height: 1.75; margin: 13.0px 0; }
.option-list { display: flex; flex-direction: column; gap: 8.0px; }
.option-button { width: 100%; justify-content: flex-start; text-align: left; min-height: 48.0px; padding: 11.0px 12.0px; background: #efede6; color: #41534a; }
.field-block { margin-top: 14.0px; }
.field-label { font-weight: 600; margin-bottom: 5.0px; }

.result-hero { background: #dfe9d9; font-size: 15.0px; line-height: 1.75; }
.result-score { color: #b28c4e; font-weight: 600; margin-bottom: 5.0px; }
.result-title { color: #526d53; font-size: 20.0px; font-weight: 600; line-height: 1.4; margin-bottom: 6.0px; }
.dimension-row { display: flex; justify-content: space-between; gap: 10.0px; margin: 9.0px 0 4.0px; }
.band-row { padding: 11.0px; margin-top: 8.0px; border-radius: 11.0px; background: #f1ede4; }
.band-row.current { background: #dfe9d9; }
.band-title { color: #526d53; font-weight: 600; margin-bottom: 4.0px; }
.identity-card { display: flex; align-items: center; gap: 13.0px; background: #eee2ca; }
.identity-icon { width: 64.0px; height: 64.0px; border-radius: 14.0px; background: #fffdf8; display: flex; align-items: center; justify-content: center; font-size: 32.0px; }
.metric { margin-top: 12.0px; }
.bar { height: 8.0px; border-radius: 4.0px; background: #f5f2ea; overflow: hidden; margin-bottom: 4.0px; }
.bar-fill { height: 100%; border-radius: 4.0px; background: #526d53; }
.accuracy-note {
  margin: 1.0px 5.0px 12.0px;
  color: #738177;
  font-size: 13.0px;
  line-height: 1.65;
  text-align: center;
}
.stars { color: #b28c4e; letter-spacing: 1.5px; white-space: nowrap; }
.reveal-item { padding: 7.0px 0; border-bottom: 1.0px solid rgba(82,109,83,.12); }

.bottom-spacer { height: 80.0px; }
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  background: rgba(255,253,248,.98);
  border-top: 1.0px solid #e6dfd2;
  padding: 6.0px 5.0px calc(7.0px + env(safe-area-inset-bottom));
  transition: bottom .18s ease;
  transform: translateZ(0);
}
.nav-item { flex: 1; min-width: 0; min-height: 39.0px; margin: 0; padding: 0; text-align: center; line-height: 39.0px; font-size: 14.0px; font-weight: 400; color: #87938a; background: transparent; border-radius: 11.0px; }
.nav-item::after { border: 0; }
.nav-item.active { background: #dfe9d9; color: #526d53; }

.keyboard-nav {
  box-sizing: border-box;
  width: 100%;
  height: 52.0px;
  display: flex;
  align-items: center;
  padding: 5.0px;
  background: #fffdf8;
  border-top: 1.0px solid #e6dfd2;
  box-shadow: 0 -4.0px 12.0px rgba(52,72,61,.10);
}
.keyboard-nav-item {
  flex: 1;
  height: 41.0px;
  line-height: 41.0px;
  text-align: center;
  font-size: 13.5px;
  color: #87938a;
  border-radius: 10.0px;
}
.keyboard-nav-item.active { background: #dfe9d9; color: #526d53; }

.modal-mask {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(35,45,39,.5);
  display: flex;
  align-items: flex-end;
}
.modal-sheet {
  width: 100%;
  height: 80vh;
  box-sizing: border-box;
  background: #f7f3e8;
  border-radius: 18.0px 18.0px 0 0;
  padding: 15.0px 13.0px calc(10.0px + env(safe-area-inset-bottom));
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10.0px; }
.modal-scroll { height: calc(80vh - 55.0px); }
.modal-section { background: #fffdf8; border-radius: 12.0px; padding: 12.0px; margin: 9.0px 0; }
.star-guide { margin-top: 8.0px; color: #7f8d83; line-height: 1.8; white-space: pre-line; }

:root{color-scheme:light;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:#343d34;background:#f7f3e8;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer;border:0}button:disabled{cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #b99959;outline-offset:3px}a{color:#526d53}img{object-fit:contain}textarea{display:block;resize:vertical;line-height:1.7;white-space:pre-wrap}input{display:block}span{white-space:pre-line}div{white-space:normal}.muted,.paragraph,.tip-card,.result-pair,.result-hero,.emotion-status,.screen-subtitle,.star-guide,.privacy-badge{white-space:pre-line}[v-cloak]{display:none}#loading{text-align:center;padding:80px 20px;color:#526d53}#app{max-width:620px;margin:auto}.page-shell{height:auto!important;min-height:100dvh;padding:24px 20px 100px;overflow:visible}.bottom-nav{left:50%!important;transform:translateX(-50%);max-width:620px;width:100%;background:#f7f3e8eF;backdrop-filter:blur(12px)}.home-swiper{height:auto;aspect-ratio:16/9;overflow:hidden;border-radius:18px}.carousel-image{width:100%;height:100%;object-fit:cover}.modal-sheet{width:min(92vw,580px);max-height:85dvh;overflow:auto}.modal-scroll{max-height:60dvh;overflow:auto}.modal-head button{background:none;color:#526d53;font-size:20px}.site-footer{display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 0 8px;font-size:12px;color:#88857b}.site-footer button{background:none;color:#526d53}.web-toast{position:fixed;bottom:95px;left:50%;transform:translateX(-50%);padding:12px 20px;border-radius:20px;background:#343d34;color:white;z-index:100}.preview-banner{position:fixed;top:0;left:0;width:100%;background:#e6d8b3;text-align:center;padding:5px;font-size:12px;z-index:101}.preview-banner a{margin-left:12px}.web-dialog{padding:24px}.option-button{text-align:left;white-space:normal;line-height:1.7;min-height:48px}.nav-item{cursor:pointer}.hero-card{align-items:center}.text-area{width:100%}.breath-orb.breathing{animation:webbreath 8s ease-in-out infinite}.modal-mask{z-index:110}body:has(.preview-banner) .page-shell{padding-top:45px}@keyframes webbreath{50%{transform:scale(1.06)}}@media(max-width:380px){.page-shell{padding:18px 12px 100px}.privacy-badge{min-width:80px;font-size:10px}.brand-title{font-size:19px}.hero-title{font-size:19px}.hero-logo{width:65px;height:65px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}