/* Shared theme and viewport layout. Each selector has one definition. */
page {
  --primary: #B74768;
  --primary-color: #B74768;
  --secondary-color: #D5A6AE;
  --pink: #B74768;
  --purple: #8C719D;
  --text: #352E2A;
  --text-primary: #352E2A;
  --text-secondary: #85776D;
  --bg: #FAF5EE;
  --radius: 28rpx;
  background: #FAF5EE!important;
  color: #352E2A;
}

.app-shell {
  --primary-color: #B74768;
  --secondary-color: #D5A6AE;
  min-height: 100vh;
  background: #FAF5EE;
}

.page-bg {
  padding-top: var(--nav-height,64px)!important;
  box-sizing: border-box!important;
  background: transparent!important;
  height: 100vh;
}

.page-bg>.container,.page-bg>.content {
  padding: 28rpx 28rpx calc(var(--content-bottom-space,140rpx) + env(safe-area-inset-bottom))!important;
  box-sizing: border-box;
}

.floating-deco {
  display: none!important;
}

.card,.hero-card,.stats-grid,.profile-card,.setting-card,.feature-card,.period-status-card,.quick-actions,.album-card,.diary-card {
  background: #FFFDF8!important;
  border: 1rpx solid #E9DDD0!important;
  border-radius: 28rpx!important;
  box-shadow: 0 8rpx 28rpx rgba(62,35,47,.035)!important;
}

.btn-primary,.btn-camera,.access-panel-action {
  background: #B74768!important;
  color: #FFFDF8!important;
  box-shadow: none!important;
  border-radius: 20rpx!important;
}

.btn-outline {
  border-color: #D9BBB0!important;
  color: #B74768!important;
  background: #FFFDF8!important;
}

button:after {
  border: 0;
}

.input {
  background: #FAF5EE!important;
  border: 1rpx solid #E9DDD0!important;
  border-radius: 18rpx!important;
  color: #352E2A;
}

.nav-title,.nickname,.setting-name,.feature-title {
  color: #352E2A!important;
}

.setting-desc,.feature-desc {
  color: #85776D!important;
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12rpx 0 20rpx;
  font-size: 30rpx;
  font-weight: 600;
  color: #352E2A;
}

.section-caption {
  display: block;
  font-size: 25rpx;
  line-height: 1.6;
  color: #85776D;
  margin: 0 0 24rpx;
}

.section-link {
  font-size: 24rpx;
  font-weight: 400;
  color: #B74768;
}

.profile-card {
  padding: 32rpx!important;
}

.profile-card .avatar {
  border: 0!important;
  background: #F4E2E3!important;
  color: #B74768!important;
  box-shadow: none!important;
}

.setting-card {
  padding: 28rpx!important;
}

.setting-icon {
  border-radius: 20rpx!important;
  background: #F3EBE1!important;
}

.access-panel {
  margin: 0 28rpx!important;
  position: relative;
  top: calc(var(--nav-height,64px) + 14px);
  padding: 32rpx!important;
  border: 1rpx solid #E9DDD0;
  box-shadow: none!important;
  border-radius: 28rpx!important;
}

.access-panel-title {
  font-size: 32rpx!important;
  color: #352E2A!important;
}

.access-panel-desc {
  color: #85776D!important;
}

.edit-root {
  padding-top: var(--nav-height,64px)!important;
  box-sizing: border-box;
  background: #FAF5EE!important;
}

.edit-body {
  padding-top: 24rpx!important;
}

.modal,.modal-box,.modal-content {
  border-radius: 28rpx!important;
  background: #FFFDF8!important;
  box-shadow: none!important;
}

.modal-overlay,.modal-mask {
  background: rgba(40,29,35,.38)!important;
}

.album-name,.diary-title {
  color: #352E2A!important;
}

.album-desc,.diary-meta {
  color: #85776D!important;
}

.btn-camera {
  top: calc(var(--nav-height,64px) + 14px)!important;
  right: 28rpx!important;
  width: 76rpx!important;
  height: 76rpx!important;
  z-index: 50!important;
}

.bg-overlay {
  background: rgba(252,249,247,.55)!important;
}
.period-loading {
  padding-top: var(--nav-height,64px);
}

.visibility-card {
  background: #FFFDF8;
  border: 1rpx solid #E9DDD0;
  border-radius: 28rpx;
  padding: 24rpx 28rpx;
  margin-bottom: 24rpx;
}

.visibility-card .permission-row {
  padding: 0!important;
}

.period-status-card,.calendar-card {
  margin-bottom: 24rpx!important;
}

.status-num {
  color: #B74768!important;
  font-size: 42rpx!important;
}

.status-label {
  color: #85776D!important;
}

.settings-modal {
  position: absolute!important;
  top: calc(var(--nav-height,64px) + 12px)!important;
  bottom: calc(16px + env(safe-area-inset-bottom))!important;
  left: 16px!important;
  right: 16px!important;
  width: auto!important;
  max-width: none!important;
  max-height: none!important;
  height: auto!important;
  padding: 32rpx!important;
  box-sizing: border-box!important;
}

.settings-modal .modal-title {
  margin-top: 0!important;
  text-align: left!important;
  font-size: 34rpx!important;
}

.settings-modal .modal-subtitle {
  text-align: left!important;
  font-size: 24rpx!important;
  margin-bottom: 24rpx!important;
}

.settings-modal .modal-actions {
  padding-top: 24rpx!important;
  padding-bottom: 16rpx!important;
}

.prediction-box {
  background: #FAF5EE!important;
  border-color: #E9DDD0!important;
}

.form-picker {
  background: #F4E2E3!important;
  color: #B74768!important;
}

.stepper-btn {
  background: #F4E2E3!important;
  color: #B74768!important;
}

.edit-nav {
  top: var(--status-height,20px)!important;
  height: 44px!important;
  background: #FAF5EE!important;
  position: absolute;
  left: 0;
  right: 0;
  padding: 0 24rpx!important;
  box-sizing: border-box;
}

.edit-footer {
  background: #FFFDF8!important;
  padding-bottom: calc(24rpx + env(safe-area-inset-bottom))!important;
}

.bg-gradient {
  background: linear-gradient(180deg,#FCEBF1 0%,#FAF5EE 58%)!important;
}














.invite-strip {
  padding: 24rpx 28rpx;
  border-radius: 24rpx;
  background: linear-gradient(110deg,#FBE5ED,#FFF1F5)!important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1rpx solid #F3CFDB;
}

.upcoming-row {
  display: flex;
  align-items: center;
  gap: 24rpx;
  background: #FFF0E1!important;
  border-radius: 28rpx;
  padding: 28rpx;
}


.feature-card:nth-child(1) {
  background: #FFF3F7!important;
}

.feature-card:nth-child(2) {
  background: #FFF8EC!important;
}

.feature-card:nth-child(3) {
  background: #F1F9F5!important;
}

.feature-card:nth-child(4) {
  background: #F3F6FF!important;
}

.feature-card:nth-child(5) {
  background: #F7F3FD!important;
}

.feature-card:nth-child(6) {
  background: #FFF0F5!important;
}

.feature-card:nth-child(7) {
  background: #FFF6EE!important;
}

.profile-card:first-child {
  background: linear-gradient(120deg,#FFF6F9,#FCEBF1)!important;
  border-color: #F3DCE4!important;
}

.feed-text-card {
  background: linear-gradient(145deg,#FFFDF8,#FFF6F9)!important;
  align-items: flex-start!important;
  justify-content: flex-start!important;
  padding: 28rpx 24rpx!important;
  min-height: 240rpx!important;
}

.feed-text-title {
  color: #9B4660!important;
  font-size: 30rpx!important;
  text-align: left!important;
}



.modal-overlay { box-sizing:border-box; padding:calc(var(--nav-height,64px) + 20rpx) 28rpx calc(28rpx + env(safe-area-inset-bottom)); }.modal { box-sizing:border-box; max-height:calc(100vh - var(--nav-height,64px) - 60rpx - env(safe-area-inset-bottom)); }.edit-nav { top:var(--status-height,20px); height:calc(var(--nav-height,64px) - var(--status-height,20px)); align-items:center; }.input-group label { color:#85776D; }.input { box-sizing:border-box; }

/* 二级页面没有底部 tab，仅保留内容间距与设备安全区。 */
.app-shell--secondary { --content-bottom-space:40rpx; --journal-bottom-space:40rpx; }