/* 2026-05 ritual board refresh: future strategy console */
:root {
  --cloud-white: #f0eee9;
  --milk-white: #f0eee9;
  --milk-warm: #f7f5ef;
  --ink: #202326;
  --space-graphite: #2b2d30;
  --space-graphite-deep: #101214;
  --space-graphite-mid: #55595f;
  --accent-orange: #c96a2b;
  --signal-blue: #9eb6c4;
  --signal-blue-soft: rgba(158, 182, 196, 0.3);
  --console-line: rgba(43, 45, 48, 0.12);
  --console-card: rgba(240, 238, 233, 0.86);
  --console-card-strong: rgba(247, 245, 239, 0.96);
  --font-cn-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, serif;
  --font-cn-body: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-en-display: Syne, "Avenir Next", "SF Pro Display", Inter, sans-serif;
}

body {
  background:
    radial-gradient(circle at 72% 16%, rgba(240, 238, 233, 0.14), transparent 25%),
    linear-gradient(rgba(240, 238, 233, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 238, 233, 0.035) 1px, transparent 1px),
    linear-gradient(135deg, #202225 0%, #2b2d30 58%, #191b1e 100%);
  background-size: auto, 72px 72px, 72px 72px, auto;
}

.app-shell {
  color: var(--ink);
  background:
    linear-gradient(rgba(43, 45, 48, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 45, 48, 0.045) 1px, transparent 1px),
    radial-gradient(ellipse at 82% 4%, rgba(201, 106, 43, 0.1), transparent 34%),
    radial-gradient(ellipse at 14% 36%, rgba(158, 182, 196, 0.26), transparent 36%),
    linear-gradient(180deg, #f7f5ef 0%, #ebe7dd 100%);
  background-size: calc(72 * var(--rpx)) calc(72 * var(--rpx)), calc(72 * var(--rpx)) calc(72 * var(--rpx)), auto, auto, auto;
}

.page {
  background: transparent;
}

.page::after {
  background: linear-gradient(180deg, rgba(240, 238, 233, 0.16), rgba(240, 238, 233, 0));
  backdrop-filter: none;
}

.h1,
.h2,
.scene-title,
.daily-title,
.asset-card-title,
.retention-title,
.timeline-title,
.plan-title,
.benefit-title,
.member-title {
  color: var(--ink);
  font-family: var(--font-cn-display);
  letter-spacing: 0.03em;
}

.h1 {
  font-size: calc(56 * var(--rpx));
  line-height: 1.08;
}

.p,
.hero-copy,
.scene-subtitle,
.daily-copy,
.retention-text,
.timeline-text,
.plan-text,
.benefit-copy {
  color: rgba(32, 35, 38, 0.68);
}

.eyebrow,
.daily-kicker,
.section-kicker,
.ritual-mark,
.retention-day {
  color: var(--accent-orange);
  letter-spacing: calc(3 * var(--rpx));
}

.hero-card,
.panel-card,
.scene-card,
.feed-card,
.benefit-card,
.metric-card,
.timeline-card,
.plan-card,
.profile-card,
.topic-card,
.daily-card,
.filter-card,
.process-card,
.radar-card,
.strategy-radar-card,
.diagnosis-insight-card,
.asset-module-card,
.value-anchor-grid,
.mvp-card,
.retention-card,
.asset-share-card,
.share-preview,
.next-step-card,
.journey-card,
.invite-card,
.login-card,
.email-auth-card,
.login-only-card,
.my-home-card,
.price-card,
.wecom-card,
.membership-active-card {
  border-color: var(--console-line);
  background:
    radial-gradient(ellipse at 84% 0%, rgba(158, 182, 196, 0.18), transparent 44%),
    linear-gradient(135deg, rgba(247, 245, 239, 0.96), rgba(235, 231, 221, 0.86));
  color: var(--ink);
  box-shadow: 0 calc(20 * var(--rpx)) calc(54 * var(--rpx)) rgba(43, 45, 48, 0.13);
}

.page-scenes {
  padding-top: calc(18 * var(--rpx));
}

.ritual-stage {
  display: grid;
  gap: calc(22 * var(--rpx));
}

.ritual-hero {
  position: relative;
  overflow: hidden;
  padding: calc(40 * var(--rpx)) calc(34 * var(--rpx)) calc(34 * var(--rpx));
  border: calc(1 * var(--rpx)) solid rgba(43, 45, 48, 0.14);
  border-radius: calc(38 * var(--rpx));
  background:
    linear-gradient(rgba(43, 45, 48, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 45, 48, 0.035) 1px, transparent 1px),
    radial-gradient(ellipse at 78% 8%, rgba(201, 106, 43, 0.12), transparent 32%),
    linear-gradient(135deg, rgba(247, 245, 239, 0.98), rgba(231, 238, 237, 0.9));
  background-size: calc(62 * var(--rpx)) calc(62 * var(--rpx)), calc(62 * var(--rpx)) calc(62 * var(--rpx)), auto, auto;
  box-shadow: 0 calc(24 * var(--rpx)) calc(70 * var(--rpx)) rgba(43, 45, 48, 0.16);
}

.ritual-hero::before {
  content: "";
  position: absolute;
  top: calc(28 * var(--rpx));
  right: calc(28 * var(--rpx));
  width: calc(84 * var(--rpx));
  height: calc(84 * var(--rpx));
  border-radius: 50%;
  border: calc(1 * var(--rpx)) solid rgba(43, 45, 48, 0.14);
  background:
    radial-gradient(circle, rgba(43, 45, 48, 0.28) 0 8%, transparent 9%),
    repeating-radial-gradient(circle, rgba(43, 45, 48, 0.1) 0 calc(1 * var(--rpx)), transparent calc(2 * var(--rpx)) calc(18 * var(--rpx)));
}

.ritual-hero::after {
  content: "";
  position: absolute;
  top: calc(68 * var(--rpx));
  right: calc(16 * var(--rpx));
  width: calc(120 * var(--rpx));
  height: calc(1 * var(--rpx));
  background: linear-gradient(90deg, transparent, rgba(43, 45, 48, 0.28), transparent);
  transform: rotate(-18deg);
}

.ritual-topline {
  display: flex;
  justify-content: space-between;
  gap: calc(16 * var(--rpx));
  margin-bottom: calc(18 * var(--rpx));
  color: var(--accent-orange);
  font-family: var(--font-mono);
  font-size: calc(18 * var(--rpx));
  font-weight: 900;
  letter-spacing: calc(4 * var(--rpx));
}

.ritual-hero .hero-copy {
  max-width: calc(560 * var(--rpx));
  margin-top: calc(20 * var(--rpx));
  font-size: calc(28 * var(--rpx));
  line-height: 1.72;
}

.video-intro-button {
  position: relative;
  z-index: 1;
  min-height: calc(84 * var(--rpx));
  margin-top: calc(24 * var(--rpx));
  padding: 0 calc(28 * var(--rpx));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--rpx));
  border: calc(1 * var(--rpx)) solid rgba(43, 45, 48, 0.14);
  border-radius: calc(999 * var(--rpx));
  background:
    radial-gradient(circle at 22% 20%, rgba(255, 255, 255, 0.76), transparent 42%),
    rgba(43, 45, 48, 0.92);
  color: var(--milk-white);
  box-shadow: 0 calc(18 * var(--rpx)) calc(44 * var(--rpx)) rgba(43, 45, 48, 0.22);
}

.video-intro-button span {
  width: calc(34 * var(--rpx));
  height: calc(34 * var(--rpx));
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(240, 238, 233, 0.16);
  color: var(--accent-orange);
  font-size: calc(16 * var(--rpx));
}

.video-intro-button b {
  font-size: calc(24 * var(--rpx));
  font-weight: 950;
}

.wow-path-card {
  position: relative;
  z-index: 1;
  margin-top: calc(24 * var(--rpx));
  padding: calc(22 * var(--rpx));
  border-radius: calc(24 * var(--rpx));
}

.wow-path-list {
  display: grid;
  gap: calc(10 * var(--rpx));
  margin-top: calc(12 * var(--rpx));
}

.wow-path-step {
  display: grid;
  grid-template-columns: calc(76 * var(--rpx)) minmax(0, 1fr);
  gap: calc(12 * var(--rpx));
  align-items: start;
  padding: calc(12 * var(--rpx)) 0;
  border-bottom: calc(1 * var(--rpx)) solid rgba(43, 45, 48, 0.08);
}

.wow-path-step span {
  color: var(--accent-orange);
  font-family: var(--font-mono);
  font-size: calc(18 * var(--rpx));
  font-weight: 950;
}

.wow-path-step b {
  color: var(--ink);
  font-size: calc(22 * var(--rpx));
  font-weight: 950;
}

.wow-path-step em,
.wow-path-proof {
  color: rgba(29, 31, 34, 0.7);
  font-size: calc(20 * var(--rpx));
  line-height: 1.55;
  font-style: normal;
}

.wow-path-step em {
  grid-column: 2;
}

.wow-path-proof {
  margin-top: calc(14 * var(--rpx));
  padding: calc(14 * var(--rpx));
  border-radius: calc(18 * var(--rpx));
  background: rgba(201, 106, 43, 0.1);
  color: rgba(29, 31, 34, 0.78);
  font-weight: 800;
}

.mode-switch-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(12 * var(--rpx));
  margin-top: calc(18 * var(--rpx));
}

.mode-switch-button {
  min-height: calc(118 * var(--rpx));
  padding: calc(18 * var(--rpx));
  display: grid;
  gap: calc(8 * var(--rpx));
  border: calc(1 * var(--rpx)) solid rgba(43, 45, 48, 0.12);
  border-radius: calc(22 * var(--rpx));
  background: rgba(255, 255, 255, 0.48);
  color: var(--ink);
  text-align: left;
}

.mode-switch-button b {
  font-size: calc(24 * var(--rpx));
  font-weight: 950;
}

.mode-switch-button span {
  color: rgba(29, 31, 34, 0.66);
  font-size: calc(19 * var(--rpx));
  line-height: 1.45;
}

.ritual-entry-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: calc(30 * var(--rpx));
  border: calc(1 * var(--rpx)) solid rgba(43, 45, 48, 0.12);
  border-radius: calc(28 * var(--rpx));
  overflow: hidden;
  background: rgba(255, 255, 255, 0.34);
}

.ritual-entry-grid::before,
.ritual-entry-grid::after {
  content: "";
  position: absolute;
  background: rgba(43, 45, 48, 0.1);
  pointer-events: none;
}

.ritual-entry-grid::before {
  top: 0;
  bottom: 0;
  left: 50%;
  width: calc(1 * var(--rpx));
}

.ritual-entry-grid::after {
  left: 0;
  right: 0;
  top: 50%;
  height: calc(1 * var(--rpx));
}

.ritual-entry-card {
  min-height: calc(184 * var(--rpx));
  padding: calc(22 * var(--rpx));
  display: grid;
  align-content: start;
  gap: calc(8 * var(--rpx));
  text-align: left;
  color: var(--ink);
  background: rgba(240, 238, 233, 0.16);
}

.ritual-entry-card b {
  font-size: calc(32 * var(--rpx));
  font-weight: 950;
}

.ritual-entry-card small,
.ritual-entry-card em {
  display: block;
  font-style: normal;
}

.ritual-entry-card small {
  color: rgba(32, 35, 38, 0.76);
  font-size: calc(22 * var(--rpx));
  font-weight: 850;
}

.ritual-entry-card em {
  color: rgba(32, 35, 38, 0.62);
  font-size: calc(20 * var(--rpx));
  line-height: 1.45;
}

.ritual-mark {
  font-family: var(--font-mono);
  font-size: calc(16 * var(--rpx));
  font-weight: 900;
}

.ritual-primary {
  width: 100%;
  min-height: calc(96 * var(--rpx));
  margin-top: calc(28 * var(--rpx));
  border-radius: calc(24 * var(--rpx));
}

.ritual-member-anchor {
  width: 100%;
  padding: calc(26 * var(--rpx));
  display: grid;
  gap: calc(8 * var(--rpx));
  border: calc(1 * var(--rpx)) solid rgba(201, 106, 43, 0.18);
  border-radius: calc(30 * var(--rpx));
  background:
    radial-gradient(ellipse at 92% 0%, rgba(201, 106, 43, 0.14), transparent 40%),
    rgba(240, 238, 233, 0.8);
  text-align: left;
  color: var(--ink);
}

.ritual-member-anchor span {
  color: var(--accent-orange);
  font-family: var(--font-mono);
  font-size: calc(20 * var(--rpx));
  font-weight: 900;
  letter-spacing: calc(2 * var(--rpx));
}

.ritual-member-anchor b {
  font-size: calc(30 * var(--rpx));
  font-weight: 950;
}

.ritual-member-anchor small {
  color: rgba(32, 35, 38, 0.64);
  font-size: calc(22 * var(--rpx));
  line-height: 1.5;
}

.strategy-radar-card,
.retention-card,
.daily-card,
.scene-list,
.mini-stat-grid,
.section-head,
.topic-card {
  margin-top: calc(22 * var(--rpx));
}

.strategy-radar-card {
  border-style: solid;
}

.radar-orbit {
  border-color: rgba(43, 45, 48, 0.12);
  background:
    radial-gradient(circle at 50% 50%, rgba(158, 182, 196, 0.38), transparent 10%),
    radial-gradient(circle at 22% 30%, rgba(240, 238, 233, 0.96), transparent 13%),
    radial-gradient(circle at 78% 68%, rgba(240, 238, 233, 0.92), transparent 13%),
    rgba(255, 255, 255, 0.22);
}

.radar-orbit::before,
.radar-orbit::after {
  border-color: rgba(43, 45, 48, 0.14);
}

.system-signal-list div,
.mini-stat,
.process-steps span {
  border-color: rgba(43, 45, 48, 0.11);
  background: rgba(255, 255, 255, 0.3);
  color: rgba(32, 35, 38, 0.74);
}

.scene-card,
.topic-card {
  border-radius: calc(26 * var(--rpx));
}

.solid-icon,
.avatar,
.solid-icon.orange,
.solid-icon.green,
.avatar.orange,
.avatar.green {
  background: var(--space-graphite);
  color: var(--milk-white);
}

.page-scenes .section-head .h2,
.page-scenes .section-head .text-button {
  color: var(--ink);
  text-shadow: none;
}

.primary-button {
  background: var(--accent-orange);
  color: var(--milk-white);
  box-shadow: 0 calc(18 * var(--rpx)) calc(38 * var(--rpx)) rgba(201, 106, 43, 0.26);
}

.secondary-button,
.text-button,
.back-button,
.choice,
.input,
.textarea,
.status-scan-option {
  border-color: rgba(43, 45, 48, 0.14);
  background: rgba(255, 255, 255, 0.38);
  color: var(--ink);
}

.tabbar {
  border-top-color: rgba(240, 238, 233, 0.1);
  background: rgba(43, 45, 48, 0.94);
}

.tab-item {
  color: rgba(240, 238, 233, 0.56);
}

.tab-item.active {
  color: var(--accent-orange);
}

.desktop-intro {
  color: var(--milk-white);
}

.landing-video-button {
  height: 48px;
  margin-top: 26px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid rgba(240, 238, 233, 0.16);
  border-radius: 999px;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, 0.3), transparent 42%),
    rgba(240, 238, 233, 0.09);
  color: var(--milk-white);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.landing-video-button span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(240, 238, 233, 0.12);
  color: var(--accent-orange);
  font-size: 12px;
}

.landing-video-button b {
  font-size: 15px;
  font-weight: 900;
}

.landing-module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 28px;
  border: 1px solid rgba(240, 238, 233, 0.13);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(240, 238, 233, 0.055);
}

.landing-module-grid button {
  min-height: 112px;
  padding: 18px;
  display: grid;
  align-content: center;
  gap: 6px;
  border-right: 1px solid rgba(240, 238, 233, 0.1);
  border-bottom: 1px solid rgba(240, 238, 233, 0.1);
  text-align: left;
  color: var(--milk-white);
}

.landing-module-grid button:nth-child(2n) {
  border-right: 0;
}

.landing-module-grid button:nth-child(n + 3) {
  border-bottom: 0;
}

.landing-module-grid span {
  color: var(--accent-orange);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2px;
}

.landing-module-grid b {
  font-size: 22px;
  line-height: 1.1;
}

.landing-module-grid small {
  color: rgba(240, 238, 233, 0.68);
  font-size: 13px;
  font-weight: 800;
}

@media (hover: hover) and (pointer: fine) {
  .ritual-entry-card:hover,
  .ritual-member-anchor:hover,
  .landing-module-grid button:hover {
    background: rgba(255, 255, 255, 0.46);
  }
}

@media (max-width: 380px) {
  .ritual-entry-card {
    min-height: calc(170 * var(--rpx));
    padding: calc(18 * var(--rpx));
  }

  .ritual-entry-card b {
    font-size: calc(29 * var(--rpx));
  }

  .ritual-entry-card em {
    font-size: calc(18 * var(--rpx));
  }
}

@media (min-width: 900px) {
  .site {
    grid-template-columns: minmax(320px, 520px) 430px;
    gap: 72px;
  }

  .desktop-intro h1 {
    max-width: 520px;
    color: var(--milk-white);
    font-family: var(--font-cn-display);
    font-size: 60px;
    line-height: 1.08;
    letter-spacing: 0;
  }
}