:root {
  --v2-red: #b20f2c;
  --v2-red-deep: #7f0d21;
  --v2-red-soft: #fff1ed;
  --v2-gold: #d6a53a;
  --v2-ink: #40272b;
  --v2-line: #efd5ce;
}

body {
  background: #f6eee9 !important;
}

.app-shell {
  max-width: 540px !important;
  background: linear-gradient(180deg, #fffaf7 0%, #f8eee9 100%) !important;
  box-shadow: 0 0 46px rgba(91, 20, 29, .16) !important;
}

.topbar {
  height: 68px !important;
  padding: 0 22px !important;
  background: linear-gradient(115deg, #741020 0%, #b70f2d 72%, #c61b37 100%) !important;
  border-bottom: 2px solid var(--v2-gold) !important;
  box-shadow: 0 8px 22px rgba(107, 13, 30, .18) !important;
}

.page-wrap {
  padding: 22px 16px 118px !important;
}

.section-head {
  margin: 28px 2px 14px !important;
  padding-left: 12px !important;
  border-left: 5px solid var(--v2-red) !important;
}

.section-head h2,
.menu-title,
.page-title {
  color: var(--v2-red-deep) !important;
}

.video-card,
.news-card,
.profile-card,
.panel,
.share-banner,
.assistance-card,
.signin-calendar-card,
.signin-summary {
  border-radius: 22px !important;
  border-color: var(--v2-line) !important;
  box-shadow: 0 12px 26px rgba(105, 34, 43, .08) !important;
}

/* 首页快捷入口：由单行四项改成两列横向卡片 */
.quick-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.quick {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: start !important;
  min-height: 72px !important;
  padding: 12px 14px !important;
  gap: 12px !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 17px !important;
  background: rgba(255, 255, 255, .94) !important;
  color: var(--v2-ink) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-align: left !important;
  box-shadow: 0 8px 18px rgba(100, 32, 41, .06) !important;
}

.quick .quick-svg {
  box-sizing: content-box !important;
  width: 24px !important;
  height: 24px !important;
  padding: 10px !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #8f1020, #c8102e) !important;
  color: #fff !important;
  stroke: #fff !important;
}

.quick:nth-child(3) .quick-svg {
  background: linear-gradient(145deg, #9b6813, #d7a73d) !important;
}

.news-list {
  padding: 8px !important;
  border: 0 !important;
  background: rgba(255,255,255,.56) !important;
}

.news-item {
  min-height: 56px !important;
  margin: 0 0 8px !important;
  padding: 13px 12px !important;
  border: 1px solid #f0ddd7 !important;
  border-radius: 14px !important;
  background: #fff !important;
}

.news-item:last-child { margin-bottom: 0 !important; }

.news-item b {
  border-radius: 50% !important;
  background: var(--v2-red-soft) !important;
  color: var(--v2-red) !important;
}

/* 分享页：奖励条目改为相互独立的卡片 */
.share-banner {
  background: linear-gradient(135deg, #781023 0%, #b8102f 66%, #d4a33a 140%) !important;
}

.milestones {
  display: grid !important;
  gap: 10px !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.milestone,
.milestone:first-child,
.milestone:last-child {
  min-height: 74px !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 7px 17px rgba(100, 32, 41, .06) !important;
}

.milestone .count {
  border-radius: 50% !important;
  background: var(--v2-red-soft) !important;
  color: var(--v2-red) !important;
}

/* 我的：功能入口改成两列列表，图标改成圆形徽章 */
.profile-card {
  border-left: 5px solid var(--v2-red) !important;
  background: linear-gradient(135deg, #fff 0%, #fff3ee 100%) !important;
}

.avatar {
  border-radius: 50% !important;
  background: linear-gradient(145deg, #811020, #d21939) !important;
  box-shadow: 0 7px 17px rgba(151, 16, 39, .22) !important;
}

.mine-balance {
  border-radius: 22px !important;
  background: linear-gradient(120deg, #741020 0%, #ad102d 62%, #c99126 135%) !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(107, 13, 30, .17) !important;
}

.mine-balance small,
.mine-balance strong,
.mine-balance strong span { color: #fff !important; }

.menu-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.menu-item {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 72px !important;
  padding: 12px !important;
  gap: 11px !important;
  border: 1px solid var(--v2-line) !important;
  border-radius: 17px !important;
  background: #fff !important;
  color: var(--v2-ink) !important;
  font-size: 13px !important;
  text-align: left !important;
  box-shadow: 0 8px 18px rgba(100, 32, 41, .06) !important;
}

.menu-item > span:not(.logout-label) {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 44px !important;
  width: 44px !important;
  height: 44px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #8f1020, #c8102e) !important;
  color: #fff !important;
  box-shadow: 0 6px 14px rgba(135, 15, 34, .18) !important;
}

.menu-item:nth-child(3n) > span:not(.logout-label) {
  background: linear-gradient(145deg, #9b6813, #d7a73d) !important;
}

.menu-item > span svg,
.menu-item > span svg * {
  width: 23px !important;
  height: 23px !important;
  fill: none !important;
  stroke: #fff !important;
}

.menu-grid > .logout-item {
  grid-column: 1 / -1 !important;
  justify-content: center !important;
  min-height: 54px !important;
  border: 0 !important;
  border-radius: 17px !important;
  background: linear-gradient(100deg, #981126, #d9203e) !important;
  color: #fff !important;
}

/* 悬浮胶囊底部导航 */
.bottom-nav {
  left: 50% !important;
  bottom: 10px !important;
  width: min(500px, calc(100% - 20px)) !important;
  height: 72px !important;
  padding: 6px !important;
  border: 1px solid rgba(205, 151, 139, .45) !important;
  border-radius: 22px !important;
  background: rgba(255, 253, 251, .96) !important;
  box-shadow: 0 12px 32px rgba(88, 17, 29, .20) !important;
  backdrop-filter: blur(14px) !important;
}

.bottom-nav button {
  border-radius: 16px !important;
}

.bottom-nav button::before { display: none !important; }

.bottom-nav button.active {
  background: linear-gradient(180deg, #fff0eb, #ffe2dc) !important;
  box-shadow: inset 0 0 0 1px rgba(200,16,46,.08) !important;
}

.bottom-nav button,
.bottom-nav button em,
.bottom-nav button .nav-icon {
  color: #947277 !important;
}

.bottom-nav button.active,
.bottom-nav button.active em,
.bottom-nav button.active .nav-icon {
  color: var(--v2-red) !important;
}

/* 表单和签到页同步新的圆角与层次 */
.assistance-flow-card,
.signin-calendar-card,
.signin-summary,
.identity-form {
  border: 1px solid var(--v2-line) !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 26px rgba(105, 34, 43, .08) !important;
}

@media (max-width: 380px) {
  .page-wrap { padding-left: 12px !important; padding-right: 12px !important; }
  .quick-grid,
  .menu-grid { gap: 8px !important; }
  .quick,
  .menu-item { padding-left: 10px !important; padding-right: 10px !important; }
}

/* 左上角品牌徽标：圆形印章 + 横向品牌字 */
.brand-logo {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  width: auto !important;
  height: 44px !important;
  padding: 4px 11px 4px 5px !important;
  gap: 7px !important;
  border: 1px solid rgba(244, 215, 141, .72) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(95, 7, 22, .50), rgba(255,255,255,.10)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 6px 16px rgba(76, 4, 18, .18) !important;
  filter: none !important;
}

.brand-logo .logo-symbol {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  border: 2px solid #f2cf74 !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #fffaf0, #f7dfaa) !important;
  color: #9d1027 !important;
  font-family: "STKaiti", "KaiTi", "Microsoft YaHei", sans-serif !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: inset 0 0 0 2px rgba(157,16,39,.10), 0 4px 10px rgba(70,6,18,.20) !important;
}

.brand-logo .logo-word {
  color: #fffaf0 !important;
  font-family: "STKaiti", "KaiTi", "Microsoft YaHei", sans-serif !important;
  font-size: 21px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 2px !important;
  text-shadow: 0 2px 5px rgba(62, 5, 15, .30) !important;
}

.brand-logo .logo-accent {
  position: static !important;
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  margin-left: -4px !important;
  border-radius: 50% !important;
  background: #f2cf74 !important;
  box-shadow: 0 0 0 3px rgba(242,207,116,.14) !important;
  transform: none !important;
}

/* 分享卡片高对比文字 */
.share-banner h2 {
  color: #fff !important;
  text-shadow: 0 2px 7px rgba(66, 4, 17, .34) !important;
}

.share-banner > p {
  color: #ffece5 !important;
  text-shadow: 0 1px 4px rgba(66, 4, 17, .28) !important;
}

.share-banner .invite-code {
  border-color: rgba(255, 240, 230, .42) !important;
  background: rgba(77, 4, 19, .30) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.share-banner .invite-code span {
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(53, 3, 14, .30) !important;
}

.share-banner .invite-code button {
  border: 1px solid rgba(255,255,255,.65) !important;
  background: #fff8ec !important;
  color: #981126 !important;
  box-shadow: 0 6px 14px rgba(68, 4, 17, .18) !important;
}

/* 品牌徽标第二版：浅金方印 */
.brand-logo {
  width: 64px !important;
  height: 44px !important;
  padding: 0 8px !important;
  gap: 2px !important;
  justify-content: center !important;
  overflow: hidden !important;
  border: 2px solid #e8bd55 !important;
  border-radius: 14px 14px 14px 5px !important;
  background: linear-gradient(145deg, #fffaf0 0%, #f5dfa7 100%) !important;
  box-shadow: inset 0 0 0 2px rgba(160,20,42,.08), 0 7px 17px rgba(72,5,18,.22) !important;
}

.brand-logo .logo-symbol,
.brand-logo .logo-word {
  display: block !important;
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #991229 !important;
  font-family: "STKaiti", "KaiTi", "Microsoft YaHei", sans-serif !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

.brand-logo .logo-accent {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 5px !important;
  width: auto !important;
  height: 2px !important;
  margin: 0 !important;
  border-radius: 2px !important;
  background: linear-gradient(90deg, transparent, #b0142f 22%, #b0142f 78%, transparent) !important;
  box-shadow: none !important;
}

/* 底部导航第二版图标：统一 32px 线性符号 */
.bottom-nav .nav-icon,
.bottom-nav button.active .nav-icon {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 auto 1px !important;
  background-image: none !important;
  background-color: currentColor !important;
  background-size: auto !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: 28px 28px !important;
  mask-size: 28px 28px !important;
}

.bottom-nav .icon-home {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15.5 16 5l12 10.5'/%3E%3Cpath d='M7.5 14v13h17V14M12 27v-8h8v8'/%3E%3C/g%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15.5 16 5l12 10.5'/%3E%3Cpath d='M7.5 14v13h17V14M12 27v-8h8v8'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.bottom-nav .icon-share {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='16' r='4'/%3E%3Ccircle cx='23' cy='8' r='4'/%3E%3Ccircle cx='23' cy='24' r='4'/%3E%3Cpath d='m12.5 14 7-4M12.5 18l7 4'/%3E%3C/g%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='16' r='4'/%3E%3Ccircle cx='23' cy='8' r='4'/%3E%3Ccircle cx='23' cy='24' r='4'/%3E%3Cpath d='m12.5 14 7-4M12.5 18l7 4'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.bottom-nav .icon-reward {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 4 3.4 7 7.6 1.1-5.5 5.3 1.3 7.6-6.8-3.6L9.2 25l1.3-7.6L5 12.1l7.6-1.1z'/%3E%3Ccircle cx='16' cy='16' r='3'/%3E%3C/g%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 4 3.4 7 7.6 1.1-5.5 5.3 1.3 7.6-6.8-3.6L9.2 25l1.3-7.6L5 12.1l7.6-1.1z'/%3E%3Ccircle cx='16' cy='16' r='3'/%3E%3C/g%3E%3C/svg%3E") !important;
}

.bottom-nav .icon-mine {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='10' r='5'/%3E%3Cpath d='M6 28c.8-7 4.2-10.5 10-10.5S25.2 21 26 28'/%3E%3C/g%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='10' r='5'/%3E%3Cpath d='M6 28c.8-7 4.2-10.5 10-10.5S25.2 21 26 28'/%3E%3C/g%3E%3C/svg%3E") !important;
}
