:root {
  --primary: #9a704c;
  --primary-dark: #3a332d;
  --accent: #c29b68;
  --cinnabar: #b77b68;
  --jade: #82988d;
  --bg: #f7f4ee;
  --card: #ffffff;
  --text: #3a332d;
  --muted: #776e66;
  --soft: #a59b91;
  --border: #e7ddd0;
  --success: #82988d;
  --danger: #b77b68;
  --shadow: 0 12px 32px rgba(79, 55, 33, 0.09);
  --tabbar-height: 64px;
  --tabbar-icon-slot: 36px;
  --tabbar-label-slot: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
  color: var(--text);
  background: #ded8ce;
  letter-spacing: 0;
}

* {
  box-sizing: border-box;
  letter-spacing: 0;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
}

button,
input,
select {
  font: inherit;
  line-height: 1.5;
}

button {
  cursor: pointer;
}

.device-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 16px;
}

.app-shell {
  position: relative;
  width: min(390px, 100vw);
  height: min(844px, 100vh);
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--bg);
  box-shadow: 0 24px 80px rgba(50, 40, 30, 0.18);
  scrollbar-width: none;
}

.app-shell::-webkit-scrollbar {
  display: none;
}

#app {
  min-height: 100%;
}

.screen {
  min-height: 100%;
  padding: 0 16px 92px;
}

.screen--plain {
  padding-top: 20px;
}

.screen--tabbed {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-bottom: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  margin: 0 -16px;
  padding: 0 18px;
  background: rgba(246, 240, 230, 0.95);
  border-bottom: 1px solid rgba(228, 216, 201, 0.82);
}

.topbar__back,
.topbar__action {
  min-width: 56px;
  padding: 8px 0;
  color: var(--primary-dark);
  border: 0;
  background: transparent;
}

.topbar__action {
  text-align: right;
}

.topbar__title {
  font-size: 16px;
  font-weight: 700;
}

.share-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  overflow: visible;
  color: #5f4d3f;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

.share-icon-button img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.share-icon-button.is-soft {
  background: rgba(154, 115, 64, 0.10);
  border: 1px solid rgba(154, 115, 64, 0.20);
}

.share-icon-button.is-primary {
  background: var(--primary);
}

.share-icon-button.is-primary img {
  filter: brightness(0) invert(1);
}

.home-carousel {
  position: relative;
  height: 272px;
  min-height: 272px;
  margin: 0 -16px;
  overflow: hidden;
  background: #f4efe4;
}

.home-carousel__track {
  display: flex;
  height: 272px;
  min-height: 272px;
  transition: transform 500ms ease;
  will-change: transform;
}

.home-hero {
  position: relative;
  flex: 0 0 100%;
  min-width: 100%;
  height: 272px;
  min-height: 272px;
  margin: 0;
  padding: 32px 24px 34px;
  overflow: hidden;
  color: var(--text);
  background: #f4efe4;
  cursor: pointer;
}

.home-hero__image,
.home-hero__veil {
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  left: -1px;
  width: calc(100% + 2px);
  height: 100%;
}

.home-hero__image {
  object-fit: cover;
}

.home-hero__veil {
  background: linear-gradient(90deg, rgba(249, 245, 237, 0.90) 0%, rgba(249, 245, 237, 0.72) 42%, rgba(249, 245, 237, 0.18) 70%, transparent 88%);
}

.home-hero__kicker {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  color: #9a7340;
  font-size: 11px;
  line-height: 1.5;
}

.home-hero__kicker::before {
  width: 12px;
  height: 1px;
  background: rgba(154, 115, 64, 0.72);
  content: "";
}

.home-carousel__dots {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transform: translateX(-50%);
}

.home-carousel__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(73, 59, 50, 0.28);
  transition: width 180ms ease, background 180ms ease;
}

.home-carousel__dot.is-active {
  width: 20px;
  background: var(--primary-dark);
}

img[src*="icon-"],
img[src*="nav-"],
.tabbar img {
  display: block;
  box-sizing: border-box;
  padding: 2px;
  object-fit: contain;
  object-position: center;
}

.eyebrow {
  color: var(--primary-dark);
  font-size: 12px;
}

.home-hero h1 {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 10px 0 0;
  font-family: Georgia, "STSong", serif;
  font-size: 32px;
  color: #4b3828;
  line-height: 1.1;
  white-space: nowrap;
}

.home-hero--report h1,
.home-hero--daily h1 {
  font-size: 26px;
}

@media (max-width: 320px) {
  .home-hero--report h1,
  .home-hero--daily h1 {
    font-size: 22px;
  }
}

.home-hero p {
  position: relative;
  z-index: 1;
  width: 292px;
  margin: 10px 0 0;
  color: #746452;
  font-size: 13px;
  line-height: 1.65;
}

.home-hero--match .home-hero__veil {
  background: linear-gradient(90deg, rgba(250, 247, 239, 0.94) 0%, rgba(250, 247, 239, 0.84) 30%, rgba(250, 247, 239, 0.42) 54%, rgba(250, 247, 239, 0.05) 78%, transparent 100%);
}

.home-hero--match h1 {
  width: 180px;
  margin-top: 6px;
  font-size: 36px;
  line-height: 1.08;
}

.home-hero--daily h1 {
  margin-top: 28px;
}

.home-hero--match p {
  width: 205px;
  margin-top: 9px;
  font-size: 12px;
  line-height: 1.65;
}

.home-hero__seal {
  position: absolute;
  z-index: 1;
  top: 44px;
  right: 24px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 72px;
  padding: 7px 0;
  color: #fff7ed;
  font-family: Georgia, "STSong", serif;
  font-size: 16px;
  font-weight: 700;
  border: 1px solid rgba(255, 244, 218, 0.42);
  border-radius: 7px;
  background: rgba(164, 79, 67, 0.9);
}

.hero-actions {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  color: #fff;
  font-weight: 700;
  line-height: 1;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 8px 20px rgba(79, 55, 33, 0.16);
}

.btn--light,
.btn--secondary {
  color: var(--primary-dark);
  background: #f8f3e4;
  box-shadow: none;
}

.btn--ghost {
  color: var(--primary-dark);
  border: 1px solid var(--border);
  background: transparent;
  box-shadow: none;
}

.btn--block {
  width: 100%;
}

.content-lift {
  position: relative;
  z-index: 2;
  margin: -17px -16px 0;
  padding: 16px 16px 0;
  background: var(--bg);
  border-radius: 22px 22px 0 0;
}

.card {
  padding: 18px;
  background: rgba(255, 251, 244, 0.97);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.card + .card {
  margin-top: 12px;
}

.master-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  margin-bottom: 14px;
  padding: 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.master-card__avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 68px;
  color: #f5e9c8;
  border: 1px solid rgba(178, 154, 103, 0.52);
  border-radius: 28px 28px 9px 9px;
  background: linear-gradient(180deg, rgba(178, 154, 103, 0.18), transparent 48%), var(--primary-dark);
}

.master-card__avatar strong {
  font-family: Georgia, "STSong", serif;
  font-size: 24px;
}

.master-card__avatar small {
  position: absolute;
  right: -5px;
  bottom: -5px;
  padding: 3px 5px;
  color: #fff7ed;
  font-size: 8px;
  border-radius: 3px;
  background: var(--cinnabar);
}

.master-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.master-card__top strong {
  font-size: 16px;
}

.master-card__top span {
  padding: 3px 7px;
  color: var(--primary-dark);
  font-size: 9px;
  border-radius: 999px;
  background: rgba(154, 115, 64, 0.09);
}

.master-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.master-card__method {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 7px;
  color: var(--primary-dark);
  font-size: 9px;
}

.fortune-card {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.fortune-card__content {
  position: relative;
  min-width: 0;
  padding: 14px 14px 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 11px rgba(79, 55, 33, 0.07);
}

.fortune-card__content::before {
  display: none;
}

.fortune-card__content::after {
  display: none;
}

.fortune-card__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 23px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(143, 103, 61, 0.16);
}

.fortune-card__header strong {
  display: flex;
  align-items: center;
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
}

.fortune-card__header strong::before {
  width: 4px;
  height: 14px;
  margin-right: 7px;
  border-radius: 2px;
  background: #b5803e;
  content: "";
}

.fortune-card__header button {
  padding: 4px 7px;
  color: #775434;
  font-size: 10.5px;
  line-height: 1.4;
  border: 1px solid rgba(143, 103, 61, 0.18);
  border-radius: 999px;
  background: transparent;
  white-space: nowrap;
}

.fortune-card__main {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 12px;
}

.fortune-card__tips {
  display: grid;
  gap: 2px;
  position: relative;
  z-index: 1;
  margin-top: 12px;
  padding: 9px 9px 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.65;
  border-top: 1px solid rgba(143, 103, 61, 0.16);
}

.fortune-card__tips p {
  margin: 0;
}

.fortune-card__tips b {
  color: var(--text);
}

.score {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  color: var(--primary-dark);
  border: 1.5px solid rgba(181, 128, 62, 0.42);
  border-radius: 50%;
  background: transparent;
}

.score::after {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 27px;
  height: 29px;
  background: #fff;
  content: "";
  transform: rotate(-16deg);
  transform-origin: right bottom;
}

.score strong {
  position: relative;
  z-index: 1;
  font-size: 36px;
  line-height: 1;
}

.score span {
  position: relative;
  z-index: 1;
  margin-top: 6px;
  color: var(--muted);
  font-size: 10px;
}

.fortune-lines {
  display: grid;
  gap: 4px;
  font-size: 12px;
}

.fortune-line {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  min-height: 19px;
  padding: 2px 5px;
  color: var(--muted);
  line-height: 1.35;
  border-bottom: 1px solid rgba(167, 122, 67, 0.09);
  border-radius: 0;
  background: transparent;
}

.fortune-line__marks {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  min-width: 0;
}

.fortune-line__summary {
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.35;
  white-space: nowrap;
}

.fortune-line__mark {
  width: 10px;
  height: 14px;
  flex: 0 0 10px;
  opacity: 0.16;
}

.fortune-line__mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fortune-line__mark.is-active {
  opacity: 0.92;
}

.home-primary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: 9px;
  align-items: stretch;
  margin-top: 12px;
}

.home-primary-action {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 95px;
  padding: 11px;
  overflow: hidden;
  color: var(--text);
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #e7d5b3;
  box-shadow: 0 5px 14px rgba(79, 55, 33, 0.06);
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
  isolation: isolate;
}

.home-primary-action::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
}

.home-primary-action:active {
  border-color: rgba(154, 115, 64, 0.42);
  transform: translateY(1px);
}

.home-primary-action__thumb {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #e6d3ad;
}

.home-primary-action__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-primary-action--draw .home-primary-action__thumb {
  opacity: .9;
}

.home-primary-action--draw .home-primary-action__thumb img {
  object-position: 80% center;
}

.home-primary-action--draw::after {
  background: linear-gradient(90deg, rgba(154, 103, 52, .9) 0%, rgba(170, 119, 61, .76) 52%, rgba(173, 124, 72, .16) 100%);
}

.home-primary-action--fortune::after {
  background: linear-gradient(90deg, rgba(247, 237, 215, .97) 0%, rgba(244, 231, 204, .81) 54%, rgba(239, 226, 203, .12) 100%);
}

.home-primary-action__copy {
  position: relative;
  z-index: 1;
  display: flex;
  width: 82%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.home-primary-action__copy strong {
  font-size: 14px;
  line-height: 1.25;
}

.home-primary-action__copy small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 9.5px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.home-primary-action__tag {
  display: inline-flex;
  align-items: center;
  min-height: 17px;
  margin-top: 4px;
  padding: 1px 6px;
  color: #6e512e;
  font-size: 9px;
  font-style: normal;
  line-height: 1.5;
  border-radius: 999px;
  background: rgba(255, 250, 239, .76);
}

.home-primary-action__tag i {
  margin-left: 2px;
  font-family: Georgia, serif;
  font-style: normal;
}

.home-primary-action--draw .home-primary-action__copy strong,
.home-primary-action--draw .home-primary-action__copy small {
  color: #fffaf0;
}

.home-primary-action--draw .home-primary-action__tag {
  color: #80552c;
  background: rgba(255, 245, 224, .92);
}

.draw-ritual-preview {
  position: fixed;
  z-index: 120;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(390px, 100vw);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  color: #eee9df;
  background:
    radial-gradient(circle at 18% 11%, rgba(220, 227, 255, 0.48) 0 1px, transparent 1.6px),
    radial-gradient(circle at 72% 8%, rgba(171, 187, 248, 0.38) 0 1px, transparent 1.5px),
    radial-gradient(circle at 86% 22%, rgba(218, 222, 250, 0.34) 0 1px, transparent 1.6px),
    radial-gradient(circle at 12% 34%, rgba(165, 183, 244, 0.3) 0 1px, transparent 1.5px),
    radial-gradient(circle at 68% 39%, rgba(225, 230, 255, 0.24) 0 1px, transparent 1.5px),
    linear-gradient(155deg, rgba(80, 69, 58, 0.13), transparent 42%),
    linear-gradient(180deg, #0d0c0b 0%, #080807 100%);
  transform: translateX(-50%);
}

.draw-ritual-preview__grain {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image: repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.08) 0, rgba(255, 255, 255, 0.08) 1px, transparent 1px, transparent 9px);
  pointer-events: none;
}

.draw-ritual-preview__close {
  position: absolute;
  z-index: 3;
  top: max(12px, env(safe-area-inset-top));
  left: 13px;
  width: 44px;
  height: 44px;
  padding: 0;
  color: rgba(238, 233, 223, 0.72);
  font-family: Georgia, serif;
  font-size: 32px;
  font-weight: 300;
  line-height: 40px;
  border: 0;
  background: transparent;
}

.draw-ritual-preview__stage {
  position: absolute;
  z-index: 1;
  top: env(safe-area-inset-top);
  right: 0;
  bottom: env(safe-area-inset-bottom);
  left: 0;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
  pointer-events: none;
}

.draw-ritual-preview__wheel {
  position: relative;
  width: 270px;
  height: 260px;
  overflow: visible;
  padding: 0;
  color: inherit;
  border: 0;
  background: transparent;
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: auto;
  touch-action: manipulation;
}

.draw-ritual-preview__wheel:disabled {
  opacity: 1;
  cursor: wait;
}

.draw-ritual-preview__wheel:not(:disabled):active {
  opacity: 0.76;
  transform: scale(0.97);
}

.draw-ritual-preview__wheel:focus-visible {
  outline: 1px solid rgba(238, 233, 223, 0.58);
  outline-offset: 8px;
  border-radius: 50%;
}

.draw-starmap-preview,
.draw-starmap-preview__aura,
.draw-starmap-preview__field,
.draw-starmap-preview__mansion-ring,
.draw-starmap-preview__constellation-ring,
.draw-starmap-preview__guardian-ring,
.draw-starmap-preview__trigram-ring,
.draw-starmap-preview__center {
  position: absolute;
  inset: 0;
  margin: auto;
  pointer-events: none;
}

.draw-starmap-preview {
  display: block;
  width: 246px;
  height: 246px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 18% 22%, rgba(226, 231, 255, 0.88) 0 1px, transparent 1.7px),
    radial-gradient(circle at 82% 28%, rgba(169, 183, 255, 0.82) 0 1px, transparent 1.8px),
    radial-gradient(circle at 76% 78%, rgba(229, 220, 255, 0.72) 0 1px, transparent 1.6px),
    radial-gradient(circle at 23% 73%, rgba(164, 190, 255, 0.68) 0 1px, transparent 1.7px),
    radial-gradient(circle, #13141c 0%, #090a0f 67%, #06070a 100%);
  box-shadow: inset 0 0 42px rgba(58, 65, 112, 0.2), 0 0 42px rgba(93, 104, 168, 0.1);
  filter: drop-shadow(0 0 16px rgba(119, 130, 200, 0.16));
}

.draw-starmap-preview__aura {
  width: 242px;
  height: 242px;
  border: 1px solid rgba(166, 178, 231, 0.32);
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(110, 122, 182, 0.025), 0 0 28px rgba(120, 136, 211, 0.12), inset 0 0 30px rgba(124, 138, 208, 0.06);
  animation: draw-starmap-preview-aura 4.8s ease-in-out infinite;
}

.draw-starmap-preview__field {
  display: block;
  width: 232px;
  height: 232px;
  border: 1px solid rgba(187, 197, 239, 0.18);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 22px, rgba(151, 165, 223, 0.09) 22px 23px),
    repeating-conic-gradient(from -6.43deg, rgba(160, 173, 226, 0.08) 0deg 0.5deg, transparent 0.5deg 12.857deg);
  animation: draw-starmap-preview-field 15s ease-in-out infinite;
}

.draw-starmap-preview__field::before,
.draw-starmap-preview__field::after {
  position: absolute;
  content: "";
}

.draw-starmap-preview__field::before {
  inset: 12px;
  border: 1px solid rgba(177, 189, 237, 0.12);
  border-radius: 50%;
  background: linear-gradient(90deg, transparent 49.7%, rgba(161, 175, 231, 0.12) 50%, transparent 50.3%), linear-gradient(transparent 49.7%, rgba(161, 175, 231, 0.12) 50%, transparent 50.3%);
}

.draw-starmap-preview__field::after {
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #e9edff;
  box-shadow: -86px -52px 0 rgba(213, 220, 255, 0.7), 72px -68px 0 rgba(175, 190, 255, 0.7), 92px 10px 0 rgba(222, 226, 255, 0.55), 54px 83px 0 rgba(182, 194, 255, 0.65), -44px 91px 0 rgba(228, 221, 255, 0.6), -93px 38px 0 rgba(177, 197, 255, 0.55), 23px -96px 0 rgba(224, 229, 255, 0.65), -18px 75px 0 rgba(173, 186, 244, 0.5);
  animation: draw-starmap-preview-twinkle 2.8s ease-in-out infinite;
}

.draw-starmap-preview__mansion-ring {
  display: block;
  width: 224px;
  height: 224px;
  border: 1px solid rgba(185, 197, 242, 0.4);
  border-radius: 50%;
  background: repeating-conic-gradient(from -6.43deg, rgba(177, 190, 236, 0.18) 0deg 0.7deg, transparent 0.7deg 12.857deg);
  box-shadow: inset 0 0 0 20px rgba(96, 108, 163, 0.025), 0 0 0 1px rgba(215, 222, 255, 0.025);
  animation: draw-starmap-preview-turn 52s linear infinite;
}

.draw-starmap-preview__mansion-ring::before {
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(174, 188, 237, 0.24);
  border-radius: 50%;
  content: "";
}

.draw-starmap-preview__mansion,
.draw-starmap-preview__guardian,
.draw-starmap-preview__trigram {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  color: rgba(220, 226, 252, 0.88);
  font-family: "STKaiti", "KaiTi", "STSong", serif;
  font-style: normal;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 0 7px rgba(149, 165, 232, 0.34);
}

.draw-starmap-preview__mansion b,
.draw-starmap-preview__guardian b,
.draw-starmap-preview__trigram b {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: center;
}

.draw-starmap-preview__mansion {
  width: 12px;
  height: 14px;
  font-size: 8px;
  line-height: 14px;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-103px) rotate(var(--inverse));
}

.draw-starmap-preview__mansion--east { color: #bdc9fb; }
.draw-starmap-preview__mansion--north { color: #aeb9e3; }
.draw-starmap-preview__mansion--west { color: #d4daf8; }
.draw-starmap-preview__mansion--south { color: #c9bce9; }

.draw-starmap-preview__mansion b {
  animation: draw-starmap-preview-turn-reverse 52s linear infinite;
}

.draw-starmap-preview__constellation-ring {
  display: block;
  width: 174px;
  height: 174px;
  border: 1px solid rgba(178, 190, 238, 0.32);
  border-radius: 50%;
  background: repeating-conic-gradient(from -6.43deg, rgba(158, 173, 226, 0.11) 0deg 0.55deg, transparent 0.55deg 12.857deg);
  box-shadow: inset 0 0 22px rgba(79, 91, 148, 0.08);
  animation: draw-starmap-preview-turn-reverse 38s linear infinite;
}

.draw-starmap-preview__constellation-ring::before {
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(177, 190, 237, 0.2);
  border-radius: 50%;
  content: "";
}

.draw-starmap-preview__cluster {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 16px;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-74px);
}

.draw-starmap-preview__cluster b,
.draw-starmap-preview__cluster em {
  position: absolute;
  display: block;
  font-style: normal;
}

.draw-starmap-preview__cluster b {
  top: 7px;
  left: 2px;
  width: 14px;
  height: 1px;
  background: rgba(207, 216, 255, 0.45);
  transform: rotate(18deg);
}

.draw-starmap-preview__cluster b::after {
  position: absolute;
  top: -4px;
  left: 6px;
  width: 9px;
  height: 1px;
  background: inherit;
  content: "";
  transform: rotate(72deg);
  transform-origin: left center;
}

.draw-starmap-preview__cluster em {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #f4f6ff;
  box-shadow: 0 0 5px rgba(191, 204, 255, 0.88);
  animation: draw-starmap-preview-cluster-twinkle 1.8s ease-in-out infinite;
  animation-delay: var(--delay);
}

.draw-starmap-preview__cluster em:nth-of-type(1) { top: 2px; left: 2px; }
.draw-starmap-preview__cluster em:nth-of-type(2) { top: 6px; left: 7px; }
.draw-starmap-preview__cluster em:nth-of-type(3) { top: 4px; right: 1px; }
.draw-starmap-preview__cluster em:nth-of-type(4) { right: 4px; bottom: 1px; }
.draw-starmap-preview__cluster--2 { transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-74px) scale(0.82) rotate(26deg); }
.draw-starmap-preview__cluster--3 { transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-74px) scale(0.92) rotate(-18deg); }
.draw-starmap-preview__cluster--4 { transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-74px) scale(0.74) rotate(46deg); }
.draw-starmap-preview__cluster--5 { transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-74px) scale(0.88) rotate(-34deg); }
.draw-starmap-preview__cluster--6 { transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-74px) scale(0.78) rotate(64deg); }
.draw-starmap-preview__cluster--7 { transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-74px) scale(0.96) rotate(-52deg); }

.draw-starmap-preview__guardian-ring {
  display: block;
  width: 124px;
  height: 124px;
  border: 1px solid rgba(164, 177, 229, 0.28);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(84, 96, 157, 0.1), transparent 66%);
  box-shadow: inset 0 0 18px rgba(78, 89, 147, 0.08);
  animation: draw-starmap-preview-turn 30s linear infinite;
}

.draw-starmap-preview__guardian {
  width: 32px;
  height: 14px;
  color: rgba(177, 191, 242, 0.78);
  font-size: 7px;
  line-height: 14px;
  letter-spacing: 1px;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-50px) rotate(var(--inverse));
}

.draw-starmap-preview__guardian b {
  animation: draw-starmap-preview-turn-reverse 30s linear infinite;
}

.draw-starmap-preview__trigram-ring {
  display: block;
  width: 82px;
  height: 82px;
  border: 1px solid rgba(183, 193, 237, 0.34);
  border-radius: 50%;
  background: repeating-conic-gradient(from -22.5deg, rgba(164, 177, 230, 0.12) 0deg 0.7deg, transparent 0.7deg 45deg);
  animation: draw-starmap-preview-turn-reverse 22s linear infinite;
}

.draw-starmap-preview__trigram {
  width: 18px;
  height: 18px;
  color: rgba(218, 224, 250, 0.9);
  font-size: 15px;
  line-height: 18px;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(-33px) rotate(var(--inverse));
}

.draw-starmap-preview__trigram b {
  animation: draw-starmap-preview-turn 22s linear infinite;
}

.draw-starmap-preview__center {
  display: grid;
  width: 48px;
  height: 48px;
  place-content: center;
  border: 1px solid rgba(198, 205, 242, 0.5);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, rgba(75, 82, 139, 0.5), rgba(10, 11, 17, 0.98) 70%);
  box-shadow: 0 0 0 5px rgba(122, 135, 199, 0.05), 0 0 18px rgba(135, 147, 216, 0.16), inset 0 0 10px rgba(166, 177, 229, 0.1);
  text-align: center;
  animation: draw-starmap-preview-center 4s ease-in-out infinite;
}

.draw-starmap-preview__center b {
  display: block;
  height: 28px;
  color: #f0f2ff;
  font-family: Georgia, serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 28px;
  text-shadow: 0 0 9px rgba(172, 185, 249, 0.45);
}

.draw-starmap-preview__center small {
  display: block;
  margin-top: -1px;
  color: rgba(193, 202, 239, 0.58);
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 6px;
  letter-spacing: 2px;
  line-height: 8px;
}

.draw-starmap-preview__north {
  position: absolute;
  top: -8px;
  left: 50%;
  z-index: 4;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: rgba(224, 229, 251, 0.72);
  font: 600 7px/1 Georgia, serif;
  border: 1px solid rgba(186, 197, 239, 0.3);
  border-radius: 50%;
  background: rgba(16, 17, 25, 0.94);
  box-shadow: 0 0 10px rgba(118, 132, 198, 0.2);
  transform: translate(-50%, -50%);
}

.draw-astral-plate-preview,
.draw-astral-plate-preview__aura {
  position: absolute;
  inset: 0;
  margin: auto;
  pointer-events: none;
}

.draw-astral-plate-preview {
  display: block;
  width: 252px;
  height: 252px;
  border-radius: 50%;
  filter: drop-shadow(0 0 18px rgba(126, 139, 212, 0.22));
}

.draw-astral-plate-preview__aura {
  width: 250px;
  height: 250px;
  border: 1px solid rgba(177, 189, 239, 0.24);
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(102, 117, 184, 0.025), 0 0 34px rgba(113, 130, 211, 0.18), inset 0 0 24px rgba(131, 146, 220, 0.08);
  animation: draw-astral-plate-preview-aura 4.8s ease-in-out infinite;
}

.draw-astral-plate-preview__ring {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 50%;
  transform: rotate(0);
  transform-origin: center;
}

.draw-astral-plate-preview__ring img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  user-select: none;
}

.draw-astral-plate-preview__ring--5 {
  z-index: 1;
  width: 252px;
  height: 252px;
  animation: draw-astral-plate-preview-right 72s linear infinite;
}

.draw-astral-plate-preview__ring--4 {
  z-index: 2;
  width: 200px;
  height: 200px;
  animation: draw-astral-plate-preview-left 56s linear infinite;
}

.draw-astral-plate-preview__ring--3 {
  z-index: 3;
  width: 142px;
  height: 142px;
  animation: draw-astral-plate-preview-right 42s linear infinite;
}

.draw-astral-plate-preview__ring--2 {
  z-index: 4;
  width: 61px;
  height: 61px;
  animation: draw-astral-plate-preview-left 34s linear infinite;
}

.draw-astral-plate-preview__ring--1 {
  z-index: 5;
  width: 21px;
  height: 21px;
}

.draw-astral-plate-preview__north {
  position: absolute;
  top: -9px;
  left: 50%;
  z-index: 6;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: rgba(224, 229, 251, 0.72);
  font: 600 7px/1 Georgia, serif;
  border: 1px solid rgba(186, 197, 239, 0.3);
  border-radius: 50%;
  background: rgba(16, 17, 25, 0.94);
  box-shadow: 0 0 10px rgba(118, 132, 198, 0.2);
  transform: translate(-50%, -50%);
}

.draw-ritual-preview__copy {
  margin-top: 17px;
  color: rgba(238, 233, 223, 0.88);
  font-family: Georgia, "STSong", serif;
  font-size: 15px;
  line-height: 1.75;
  text-align: center;
}

.draw-ritual-preview__copy strong,
.draw-ritual-preview__copy span {
  display: block;
  font-weight: 400;
}

.draw-ritual-preview__copy span {
  color: rgba(238, 233, 223, 0.62);
  font-size: 13px;
}

.draw-ritual-preview--settling .draw-starmap-preview {
  animation: draw-starmap-preview-settle 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.draw-ritual-preview--settling .draw-starmap-preview__mansion-ring,
.draw-ritual-preview--settling .draw-starmap-preview__guardian-ring {
  animation: draw-starmap-preview-lock 1.3s cubic-bezier(0.12, 0.72, 0.22, 1) both;
}

.draw-ritual-preview--settling .draw-starmap-preview__mansion b,
.draw-ritual-preview--settling .draw-starmap-preview__guardian b,
.draw-ritual-preview--settling .draw-starmap-preview__constellation-ring,
.draw-ritual-preview--settling .draw-starmap-preview__trigram-ring {
  animation: draw-starmap-preview-lock-reverse 1.3s cubic-bezier(0.12, 0.72, 0.22, 1) both;
}

.draw-ritual-preview--settling .draw-starmap-preview__trigram b {
  animation: draw-starmap-preview-lock 1.3s cubic-bezier(0.12, 0.72, 0.22, 1) both;
}

.draw-ritual-preview--settling .draw-starmap-preview__cluster em {
  animation: draw-starmap-preview-cluster-flare 0.7s ease-in-out 2;
  animation-delay: var(--delay);
}

.draw-ritual-preview--confirm .draw-starmap-preview__aura,
.draw-ritual-preview--confirm .draw-starmap-preview__field,
.draw-ritual-preview--confirm .draw-starmap-preview__mansion-ring,
.draw-ritual-preview--confirm .draw-starmap-preview__constellation-ring,
.draw-ritual-preview--confirm .draw-starmap-preview__guardian-ring,
.draw-ritual-preview--confirm .draw-starmap-preview__trigram-ring,
.draw-ritual-preview--confirm .draw-starmap-preview__mansion b,
.draw-ritual-preview--confirm .draw-starmap-preview__guardian b,
.draw-ritual-preview--confirm .draw-starmap-preview__trigram b,
.draw-ritual-preview--confirm .draw-starmap-preview__cluster em,
.draw-ritual-preview--confirm .draw-starmap-preview__center {
  animation-play-state: paused;
}

.draw-ritual-preview--confirm .draw-starmap-preview__north {
  color: #f3f5ff;
  border-color: rgba(213, 222, 255, 0.62);
  box-shadow: 0 0 18px rgba(156, 174, 255, 0.48);
}

.draw-ritual-preview--revealing .draw-starmap-preview {
  animation: draw-starmap-preview-reveal 0.98s cubic-bezier(0.45, 0, 0.55, 1) both;
}

.draw-ritual-preview--revealing .draw-starmap-preview__aura {
  animation: draw-starmap-preview-flash 0.98s ease-out both;
}

.draw-ritual-preview--settling .draw-astral-plate-preview {
  animation: draw-astral-plate-preview-settle 1.3s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.draw-ritual-preview--settling .draw-astral-plate-preview__ring--2 {
  animation: draw-astral-plate-preview-lock-left 1.3s cubic-bezier(0.12, 0.72, 0.22, 1) both;
}

.draw-ritual-preview--settling .draw-astral-plate-preview__ring--3 {
  animation: draw-astral-plate-preview-lock-right 1.3s cubic-bezier(0.12, 0.72, 0.22, 1) both;
}

.draw-ritual-preview--settling .draw-astral-plate-preview__ring--4 {
  animation: draw-astral-plate-preview-lock-left-outer 1.3s cubic-bezier(0.12, 0.72, 0.22, 1) both;
}

.draw-ritual-preview--settling .draw-astral-plate-preview__ring--5 {
  animation: draw-astral-plate-preview-lock-right-outer 1.3s cubic-bezier(0.12, 0.72, 0.22, 1) both;
}

.draw-ritual-preview--confirm .draw-astral-plate-preview__aura,
.draw-ritual-preview--confirm .draw-astral-plate-preview__ring--2,
.draw-ritual-preview--confirm .draw-astral-plate-preview__ring--3,
.draw-ritual-preview--confirm .draw-astral-plate-preview__ring--4,
.draw-ritual-preview--confirm .draw-astral-plate-preview__ring--5 {
  animation-play-state: paused;
}

.draw-ritual-preview--confirm .draw-astral-plate-preview__north {
  color: #f3f5ff;
  border-color: rgba(213, 222, 255, 0.62);
  box-shadow: 0 0 18px rgba(156, 174, 255, 0.48);
}

.draw-ritual-preview--revealing .draw-astral-plate-preview {
  animation: draw-astral-plate-preview-reveal 0.56s cubic-bezier(0.45, 0, 0.55, 1) both;
}

.draw-ritual-preview--revealing .draw-astral-plate-preview__aura {
  animation: draw-astral-plate-preview-flash 0.56s ease-out both;
}

.draw-ritual-preview--spinning .draw-astral-plate-preview__ring--5 {
  animation-duration: 4.8s;
}

.draw-ritual-preview--spinning .draw-astral-plate-preview__ring--4 {
  animation-duration: 3.8s;
}

.draw-ritual-preview--spinning .draw-astral-plate-preview__ring--3 {
  animation-duration: 3s;
}

.draw-ritual-preview--spinning .draw-astral-plate-preview__ring--2 {
  animation-duration: 2.4s;
}

.draw-ritual-preview--generating {
  color: rgba(235, 239, 255, 0.92);
  background: radial-gradient(circle at 50% 44%, #171925 0%, #0a0b10 43%, #07080b 100%);
}

.draw-generating-preview {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.draw-generating-preview::before {
  position: absolute;
  inset: 0;
  opacity: 0.62;
  background:
    radial-gradient(circle at 21% 24%, rgba(227, 233, 255, 0.72) 0 1px, transparent 1.5px),
    radial-gradient(circle at 77% 19%, rgba(179, 194, 255, 0.64) 0 1px, transparent 1.5px),
    radial-gradient(circle at 83% 69%, rgba(220, 224, 255, 0.62) 0 1px, transparent 1.5px),
    radial-gradient(circle at 16% 75%, rgba(170, 187, 251, 0.58) 0 1px, transparent 1.5px);
  content: "";
  animation: draw-generating-preview-sky 2.8s ease-in-out infinite;
}

.draw-generating-preview__content {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

.draw-generating-preview__chart {
  position: relative;
  isolation: isolate;
  width: 222px;
  height: 222px;
}

.draw-generating-preview__chart::before {
  position: absolute;
  z-index: -1;
  inset: -18px;
  opacity: 0.78;
  border: 1px solid rgba(149, 164, 226, 0.12);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(94, 108, 180, 0.17) 0%, rgba(33, 37, 63, 0.08) 52%, transparent 72%);
  box-shadow: 0 0 42px rgba(91, 107, 188, 0.2), inset 0 0 26px rgba(159, 174, 237, 0.06);
  content: "";
  animation: draw-generating-preview-aura 2.6s ease-in-out infinite;
}

.draw-generating-preview__disc {
  position: absolute;
  inset: 8px;
  overflow: hidden;
  border: 1px solid rgba(183, 195, 239, 0.32);
  border-radius: 50%;
  background: #030407;
  box-shadow: 0 0 22px rgba(116, 132, 214, 0.18), inset 0 0 22px rgba(3, 4, 7, 0.82);
}

.draw-generating-preview__disc img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.82;
  object-fit: cover;
  filter: contrast(1.12) brightness(1.08);
  animation: draw-generating-preview-disc 26s linear infinite;
}

.draw-generating-preview__ring {
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(132, 148, 220, 0.12), inset 0 0 8px rgba(178, 190, 239, 0.05);
  animation: draw-generating-preview-ring 12s linear infinite;
}

.draw-generating-preview__ring::before,
.draw-generating-preview__ring::after {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #eef1ff;
  box-shadow: 0 0 8px rgba(179, 194, 255, 0.92);
  content: "";
}

.draw-generating-preview__ring::before {
  top: -2px;
  left: 50%;
}

.draw-generating-preview__ring::after {
  right: -2px;
  top: 50%;
}

.draw-generating-preview__ring--outer {
  inset: 0;
  border: 1px dashed rgba(182, 194, 239, 0.42);
  animation-duration: 18s;
}

.draw-generating-preview__ring--middle {
  inset: 29px;
  border: 1px solid rgba(156, 172, 230, 0.36);
  animation-direction: reverse;
}

.draw-generating-preview__ring--inner {
  inset: 67px;
  border: 1px dashed rgba(207, 215, 247, 0.5);
  animation-duration: 8s;
}

.draw-generating-preview__sweep {
  position: absolute;
  z-index: 4;
  top: 8px;
  left: 50%;
  width: 1px;
  height: 103px;
  background: linear-gradient(180deg, rgba(222, 229, 255, 0.88), rgba(147, 164, 233, 0.1) 72%, transparent);
  box-shadow: 0 0 7px rgba(170, 187, 255, 0.48);
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  animation: draw-generating-preview-sweep 4.6s linear infinite;
}

.draw-generating-preview__sweep::before {
  position: absolute;
  top: -2px;
  left: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f4f6ff;
  box-shadow: 0 0 12px rgba(190, 203, 255, 0.94);
  content: "";
}

.draw-generating-preview__core {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  display: grid;
  width: 46px;
  height: 46px;
  place-content: center;
  color: rgba(244, 246, 255, 0.94);
  font-family: "STKaiti", "KaiTi", serif;
  font-style: normal;
  text-align: center;
  border: 1px solid rgba(211, 219, 250, 0.48);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(78, 89, 148, 0.94), rgba(11, 12, 19, 0.98) 72%);
  box-shadow: 0 0 0 5px rgba(133, 149, 220, 0.06), 0 0 22px rgba(143, 160, 234, 0.38), inset 0 0 12px rgba(188, 199, 242, 0.14);
  transform: translate(-50%, -50%);
  animation: draw-generating-preview-core 1.9s ease-in-out infinite;
}

.draw-generating-preview__core b,
.draw-generating-preview__core small {
  display: block;
  font-style: normal;
  font-weight: 400;
}

.draw-generating-preview__core b {
  font-size: 17px;
  line-height: 18px;
}

.draw-generating-preview__core small {
  margin-top: 2px;
  color: rgba(202, 211, 244, 0.54);
  font-size: 7px;
  letter-spacing: 2px;
  line-height: 8px;
}

.draw-generating-preview__spark {
  position: absolute;
  z-index: 6;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #f2f4ff;
  box-shadow: 0 0 8px rgba(184, 198, 255, 0.9);
  animation: draw-generating-preview-spark 1.7s ease-in-out infinite;
}

.draw-generating-preview__spark--1 { top: 28px; right: 32px; }
.draw-generating-preview__spark--2 { right: 19px; bottom: 53px; animation-delay: 0.4s; }
.draw-generating-preview__spark--3 { bottom: 24px; left: 43px; animation-delay: 0.8s; }

.draw-generating-preview__copy {
  width: min(280px, calc(100% - 40px));
  margin-top: 24px;
  color: rgba(234, 238, 253, 0.88);
  text-align: center;
}

.draw-generating-preview__copy > div {
  display: flex;
  justify-content: center;
  align-items: baseline;
  font-size: 15px;
  line-height: 1.5;
}

.draw-generating-preview__copy i {
  font-style: normal;
  opacity: 0.28;
  animation: draw-generating-preview-dot 1.2s ease-in-out infinite;
}

.draw-generating-preview__copy i:nth-of-type(2) {
  animation-delay: 0.12s;
}

.draw-generating-preview__copy i:nth-of-type(3) {
  animation-delay: 0.24s;
}

.draw-generating-preview__copy small {
  display: block;
  margin-top: 7px;
  color: rgba(201, 208, 237, 0.48);
  font-size: 10px;
  letter-spacing: 1px;
}

.draw-ritual-preview--generating .draw-ritual-preview__notice {
  color: rgba(207, 213, 237, 0.32);
}

.draw-confirm-preview {
  position: absolute;
  z-index: 4;
  right: 16px;
  bottom: calc(39px + env(safe-area-inset-bottom));
  left: 16px;
  padding: 17px 16px 15px;
  color: #eee9df;
  border: 1px solid rgba(224, 209, 184, 0.22);
  border-radius: 8px;
  background: rgba(29, 27, 24, 0.94);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.34);
  animation: draw-confirm-preview-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.draw-confirm-preview small {
  color: rgba(210, 179, 132, 0.72);
  font-size: 11px;
}

.draw-confirm-preview h2 {
  margin: 3px 0 0;
  font-family: Georgia, "STSong", serif;
  font-size: 18px;
  font-weight: 400;
}

.draw-confirm-preview p {
  margin: 5px 0 0;
  color: rgba(238, 233, 223, 0.58);
  font-size: 11px;
  line-height: 1.65;
}

.draw-confirm-preview > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 13px;
}

.draw-confirm-preview button {
  height: 38px;
  color: rgba(238, 233, 223, 0.76);
  font-size: 12px;
  border: 1px solid rgba(238, 233, 223, 0.24);
  border-radius: 4px;
  background: transparent;
}

.draw-confirm-preview button.is-primary {
  color: #171411;
  border-color: #d2b384;
  background: #d2b384;
}

.draw-ritual-preview__notice {
  position: absolute;
  z-index: 2;
  right: 20px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: 20px;
  color: rgba(238, 233, 223, 0.32);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.draw-error-preview {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  width: min(328px, calc(100% - 40px));
  padding: 28px 22px 22px;
  color: var(--text);
  text-align: center;
  border: 1px solid rgba(205, 181, 145, 0.38);
  border-radius: 8px;
  background: #fffaf2;
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.26);
  transform: translate(-50%, -50%);
}

.draw-error-preview > span {
  display: grid;
  width: 48px;
  height: 48px;
  margin: 0 auto 15px;
  place-items: center;
  color: #fff8ec;
  font-family: Georgia, "STSong", serif;
  font-size: 19px;
  border-radius: 50%;
  background: #8a6647;
}

.draw-error-preview h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
}

.draw-error-preview p {
  margin: 10px 0 20px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.draw-error-preview > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.draw-error-preview button {
  min-height: 44px;
  color: #fffaf2;
  border: 1px solid #8a6647;
  border-radius: 6px;
  background: #8a6647;
}

.draw-error-preview button + button {
  color: #6d5746;
  background: transparent;
}

@keyframes draw-starmap-preview-turn {
  to { transform: rotate(360deg); }
}

@keyframes draw-astral-plate-preview-left {
  from { transform: rotate(0); }
  to { transform: rotate(-360deg); }
}

@keyframes draw-astral-plate-preview-right {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}

@keyframes draw-astral-plate-preview-aura {
  0%, 100% { opacity: 0.46; transform: scale(0.985); }
  50% { opacity: 0.96; transform: scale(1.015); }
}

@keyframes draw-astral-plate-preview-settle {
  0% { transform: scale(1); }
  52% { transform: scale(0.94); }
  78% { transform: scale(1.02); }
  100% { transform: scale(0.98); }
}

@keyframes draw-astral-plate-preview-lock-left {
  from { transform: rotate(0); }
  to { transform: rotate(-1080deg); }
}

@keyframes draw-astral-plate-preview-lock-right {
  from { transform: rotate(0); }
  to { transform: rotate(1080deg); }
}

@keyframes draw-astral-plate-preview-lock-left-outer {
  from { transform: rotate(0); }
  to { transform: rotate(-1440deg); }
}

@keyframes draw-astral-plate-preview-lock-right-outer {
  from { transform: rotate(0); }
  to { transform: rotate(1440deg); }
}

@keyframes draw-astral-plate-preview-reveal {
  0% { opacity: 1; filter: blur(0); transform: scale(0.98); }
  46% { opacity: 1; filter: blur(0); transform: scale(1.08); }
  100% { opacity: 0; filter: blur(7px); transform: scale(0.54); }
}

@keyframes draw-astral-plate-preview-flash {
  0% { opacity: 0.5; transform: scale(1); }
  48% { opacity: 1; transform: scale(1.16); }
  100% { opacity: 0; transform: scale(1.4); }
}

@keyframes draw-starmap-preview-turn-reverse {
  to { transform: rotate(-360deg); }
}

@keyframes draw-starmap-preview-aura {
  0%, 100% { opacity: 0.46; transform: scale(0.985); }
  50% { opacity: 0.96; transform: scale(1.015); }
}

@keyframes draw-starmap-preview-field {
  0%, 100% { opacity: 0.68; transform: rotate(-2deg); }
  50% { opacity: 1; transform: rotate(2deg); }
}

@keyframes draw-starmap-preview-twinkle {
  0%, 100% { opacity: 0.38; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.35); }
}

@keyframes draw-starmap-preview-cluster-twinkle {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; box-shadow: 0 0 8px rgba(200, 211, 255, 0.96); }
}

@keyframes draw-starmap-preview-cluster-flare {
  0%, 100% { opacity: 0.45; transform: scale(0.72); }
  50% { opacity: 1; transform: scale(1.5); }
}

@keyframes draw-starmap-preview-center {
  0%, 100% { box-shadow: 0 0 0 5px rgba(122, 135, 199, 0.05), 0 0 16px rgba(135, 147, 216, 0.12), inset 0 0 10px rgba(166, 177, 229, 0.08); }
  50% { box-shadow: 0 0 0 8px rgba(122, 135, 199, 0.08), 0 0 26px rgba(150, 164, 233, 0.28), inset 0 0 14px rgba(180, 190, 235, 0.14); }
}

@keyframes draw-starmap-preview-settle {
  0% { transform: scale(1); }
  52% { transform: scale(0.93); }
  78% { transform: scale(1.025); }
  100% { transform: scale(0.98); }
}

@keyframes draw-starmap-preview-lock {
  from { transform: rotate(0); }
  to { transform: rotate(1080deg); }
}

@keyframes draw-starmap-preview-lock-reverse {
  from { transform: rotate(0); }
  to { transform: rotate(-1080deg); }
}

@keyframes draw-starmap-preview-reveal {
  0% { opacity: 1; filter: blur(0); transform: scale(0.98); }
  46% { opacity: 1; filter: blur(0); transform: scale(1.08); }
  100% { opacity: 0; filter: blur(7px); transform: scale(0.54); }
}

@keyframes draw-starmap-preview-flash {
  0% { opacity: 0.5; transform: scale(1); }
  48% { opacity: 1; transform: scale(1.16); }
  100% { opacity: 0; transform: scale(1.4); }
}

@keyframes draw-generating-preview-sky {
  0%, 100% { opacity: 0.42; }
  50% { opacity: 0.86; }
}

@keyframes draw-generating-preview-disc {
  to { transform: rotate(360deg); }
}

@keyframes draw-generating-preview-ring {
  to { transform: rotate(360deg); }
}

@keyframes draw-generating-preview-sweep {
  to { transform: translateX(-50%) rotate(360deg); }
}

@keyframes draw-generating-preview-aura {
  0%, 100% { opacity: 0.46; transform: scale(0.96); }
  50% { opacity: 0.9; transform: scale(1.04); }
}

@keyframes draw-generating-preview-core {
  0%, 100% { box-shadow: 0 0 0 5px rgba(133, 149, 220, 0.05), 0 0 18px rgba(143, 160, 234, 0.3), inset 0 0 12px rgba(188, 199, 242, 0.12); }
  50% { box-shadow: 0 0 0 7px rgba(133, 149, 220, 0.09), 0 0 30px rgba(159, 176, 248, 0.58), inset 0 0 15px rgba(207, 216, 251, 0.2); }
}

@keyframes draw-generating-preview-spark {
  0%, 100% { opacity: 0.26; transform: scale(0.72); }
  50% { opacity: 1; transform: scale(1.24); }
}

@keyframes draw-confirm-preview-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes draw-generating-preview-dot {
  0%, 60%, 100% { opacity: 0.28; }
  30% { opacity: 1; }
}

.draw-preview-modal__panel {
  max-height: calc(min(844px, 100vh) - 32px);
  overflow-y: auto;
  outline: 0;
}

.draw-result-sheet {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(184, 137, 67, 0.24);
  background: #fffaf0;
}

.draw-result-sheet::before {
  position: absolute;
  z-index: 0;
  inset: 8px;
  content: "";
  border: 1px solid rgba(184, 137, 67, 0.12);
}

.draw-result-sheet img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

.draw-result-sheet {
  margin-top: 12px;
  padding: 6px 4px;
}

.draw-result-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.draw-result-heading > span {
  display: grid;
  flex: 0 0 40px;
  place-items: center;
  width: 40px;
  height: 48px;
  color: #fff7ed;
  font-size: 17px;
  font-weight: 700;
  border-radius: 6px;
  background: var(--cinnabar);
}

.draw-result-heading small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.draw-result-heading h3 {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 20px;
  line-height: 1.35;
}

.draw-result-section {
  margin: 13px 0;
}

.draw-result-section strong {
  font-size: 14px;
  line-height: 1.4;
}

.draw-result-section p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.draw-result-actions {
  display: grid;
  gap: 8px;
  margin-top: 15px;
}

.draw-detail-preview__intro {
  margin: 13px 0 4px;
  padding: 11px 12px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
  border-left: 2px solid rgba(150, 104, 67, 0.64);
  border-radius: 2px;
  background: rgba(195, 161, 95, 0.1);
}

.draw-detail-preview__sections {
  margin-bottom: 14px;
}

.draw-detail-preview__sections section {
  padding: 12px 1px;
}

.draw-detail-preview__sections section + section {
  border-top: 1px solid var(--border);
}

.draw-detail-preview__sections strong {
  color: var(--primary-dark);
  font-size: 13px;
  line-height: 1.4;
}

.draw-detail-preview__sections p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}

.draw-result-close {
  width: 100%;
  margin-top: 9px;
  padding: 8px;
  color: var(--primary-dark);
  border: 0;
  background: transparent;
}

.draw-result-detail-button {
  width: 100%;
  min-height: 42px;
  margin-top: 14px;
  color: var(--primary-dark);
  font-size: 13px;
  border: 1px solid rgba(154, 115, 64, 0.24);
  border-radius: 999px;
  background: rgba(248, 243, 228, 0.72);
}

.draw-result-notice {
  margin-top: 8px;
  color: var(--soft);
  font-size: 9px;
  line-height: 1.55;
  text-align: center;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 6px;
  margin-top: 20px;
}

.feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  min-height: 80px;
  padding: 0;
  color: inherit;
  border: 0;
  background: transparent;
  text-align: center;
  transition: transform 140ms ease, opacity 140ms ease;
}

.feature:active {
  transform: scale(0.94);
  opacity: 0.78;
}

.feature:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 5px;
  border-radius: 8px;
}

.feature__icon,
.menu-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin: auto;
  color: var(--primary-dark);
  font-size: 14px;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: rgba(251, 250, 244, 0.80);
}

.feature__icon {
  width: 45px;
  height: 45px;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.feature__icon img {
  width: 100%;
  height: 100%;
  padding: 0;
  object-fit: contain;
}

/* The source icons have deliberately different silhouettes. These small
   optical adjustments align their perceived, rather than bitmap, size. */
.feature[data-feature="wealth"] .feature__icon img,
.feature[data-feature="career"] .feature__icon img,
.feature[data-feature="relationship"] .feature__icon img {
  transform: scale(1.05);
}

.feature[data-feature="study"] .feature__icon img,
.feature[data-feature="health"] .feature__icon img {
  transform: scale(1.01);
}

.feature[data-feature="yearly"] .feature__icon img,
.feature[data-feature="pillars"] .feature__icon img,
.feature[data-feature="compatibility"] .feature__icon img {
  transform: scale(0.91);
}

.feature__title {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.feature-tabs {
  display: flex;
  gap: 8px;
  margin: 14px -16px 0;
  padding: 0 16px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.feature-tabs::-webkit-scrollbar {
  display: none;
}

.feature-tab {
  flex: 0 0 auto;
  min-width: 58px;
  height: 34px;
  padding: 0 13px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(251, 250, 244, 0.74);
}

.feature-tab.is-active {
  color: #fffaf2;
  border-color: var(--primary-dark);
  background: var(--primary-dark);
}

.feature-detail-hero {
  position: relative;
  min-height: 216px;
  margin: 6px -16px 0;
  padding: 28px 94px 30px 24px;
  overflow: hidden;
  color: #fff9ef;
  background: radial-gradient(circle at 86% 18%, rgba(178, 154, 103, 0.56), transparent 76px), linear-gradient(145deg, #2f2b28, #9a7340 58%, #4a3b31);
}

.feature-detail-hero .eyebrow {
  color: rgba(255, 249, 239, 0.68);
}

.feature-detail-hero h1 {
  margin: 10px 0 0;
  font-family: Georgia, "STSong", serif;
  font-size: 34px;
  letter-spacing: 0;
}

.feature-detail-hero p {
  margin: 12px 0 0;
  color: rgba(255, 249, 239, 0.76);
  font-size: 13px;
  line-height: 1.7;
}

.feature-detail-hero__mark {
  position: absolute;
  top: 54px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: #f0d49a;
  font-family: Georgia, "STSong", serif;
  font-size: 26px;
  border: 1px solid rgba(255, 244, 218, 0.42);
  border-radius: 50%;
}

.feature-data-card {
  margin-top: 14px;
}

.insight-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.insight-card {
  position: relative;
  padding: 17px 18px 17px 54px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.insight-card::before {
  position: absolute;
  top: 19px;
  left: 18px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  content: "参考";
  color: var(--primary-dark);
  font-size: 8px;
  border: 1px solid var(--border);
  border-radius: 50%;
}

.insight-card--watch::before {
  color: var(--cinnabar);
}

.insight-card--advice::before {
  color: #a17a46;
}

.insight-card span {
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 700;
}

.insight-card p,
.feature-traits p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}

.trait-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.trait-list span {
  padding: 6px 10px;
  color: var(--primary-dark);
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(154, 115, 64, 0.07);
}

.feature-cta {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 10px;
  margin-top: 18px;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 2px 12px;
}

.section-title h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.35;
}

.section-title span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  text-align: right;
}

.point-list,
.report-list {
  display: grid;
  gap: 10px;
}

.activity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.activity-card {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: var(--text);
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.activity-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}

.activity-card span {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 76px;
  padding: 12px;
}

.activity-card b {
  font-size: 13px;
  line-height: 1.4;
}

.activity-card small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.activity-card:active {
  transform: scale(0.98);
}

.point {
  display: grid;
  grid-template-columns: 5px 1fr 20px;
  gap: 12px;
  align-items: center;
}

.point::before {
  content: "";
  border-radius: 99px;
  background: linear-gradient(var(--cinnabar), var(--primary));
}

.point--button {
  width: 100%;
  color: var(--text);
  text-align: left;
  transition: transform 140ms ease, opacity 140ms ease, border-color 140ms ease;
}

.point--button:active {
  opacity: 0.78;
  transform: scale(0.985);
}

.point--button:focus-visible {
  border-color: var(--primary);
  outline: 2px solid rgba(154, 115, 64, 0.22);
  outline-offset: 2px;
}

.point-arrow {
  color: var(--soft);
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  text-align: right;
}

.point strong {
  display: block;
  font-size: 15px;
}

.point p,
.muted {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.disclaimer {
  margin: 28px 12px 4px;
  color: var(--soft);
  font-size: 10px;
  line-height: 1.6;
  text-align: center;
}

.persona-disclosure {
  margin: 24px 12px 0;
  color: var(--soft);
  font-size: 9px;
  line-height: 1.65;
  text-align: center;
}

.form-hero,
.result-hero,
.payment-hero,
.profile-hero {
  margin-top: 16px;
  padding: 22px;
  color: #fff9ef;
  border-radius: 14px;
  background: radial-gradient(circle at 84% 16%, rgba(178, 154, 103, 0.60), transparent 74px), linear-gradient(145deg, #3f3127, #75563c);
  box-shadow: var(--shadow);
}

.form-hero h1,
.result-hero h1,
.payment-hero h1 {
  margin: 8px 0 0;
  font-size: 26px;
}

.form-hero p,
.result-hero p,
.payment-hero p {
  margin: 8px 0 0;
  color: rgba(255, 249, 239, 0.72);
  font-size: 12px;
  line-height: 1.6;
}

.form-card {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.field {
  display: grid;
  gap: 7px;
}

.field label {
  font-size: 13px;
  font-weight: 700;
}

.field input,
.field select {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  background: #fffdf8;
}

.field input:focus,
.field select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(154, 115, 64, 0.11);
}

.field-error {
  color: var(--danger);
  font-size: 11px;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.segmented button {
  height: 42px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fffdf8;
}

.segmented button.is-active {
  color: #fff;
  border-color: var(--primary);
  background: var(--primary);
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  border-radius: 10px;
  background: rgba(154, 115, 64, 0.08);
}

.switch {
  position: relative;
  width: 46px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: #d8d0c5;
}

.switch::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  content: "";
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}

.switch.is-on {
  background: var(--primary);
}

.switch.is-on::after {
  transform: translateX(20px);
}

.loading-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
  padding: 84px 28px 40px;
  background: radial-gradient(circle at 50% 12%, rgba(178, 154, 103, 0.24), transparent 180px), var(--bg);
}

.typing-loader {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 78px;
  height: 38px;
  box-sizing: border-box;
  line-height: 1;
  border: 1px solid rgba(78, 72, 68, 0.24);
  border-radius: 19px 19px 19px 6px;
  background: rgba(255, 255, 255, 0.90);
}

.typing-loader--compact {
  gap: 5px;
  width: 52px;
  height: 25px;
  border-radius: 13px 13px 13px 5px;
}

.typing-loader--button {
  border-color: rgba(255, 255, 255, 0.56);
  background: rgba(255, 252, 247, 0.94);
}

.typing-loader i {
  display: block;
  width: 7px;
  height: 7px;
  background: #c7c9ca;
  border-radius: 50%;
  opacity: 0.42;
  animation: typing-loader-dot 1.2s cubic-bezier(0.4, 0, 0.2, 1) 25 both;
}

.typing-loader--compact i {
  width: 5px;
  height: 5px;
  background: #aa9a89;
}

.typing-loader i:nth-child(1) {
  animation-delay: -0.24s;
}

.typing-loader i:nth-child(2) {
  animation-delay: -0.12s;
}

.loading-screen h1 {
  margin: 22px 0 6px;
  font-size: 22px;
}

@keyframes typing-loader-dot {
  0%, 60%, 100% {
    opacity: 0.38;
    transform: translateY(0) scale(0.96);
  }

  30% {
    opacity: 1;
    transform: translateY(-3px) scale(1.04);
  }
}

.progress {
  width: 100%;
  height: 7px;
  margin: 28px 0 20px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(154, 115, 64, 0.12);
}

.progress__bar {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 0.35s ease;
}

.steps {
  width: 100%;
}

.step {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  color: var(--soft);
  font-size: 13px;
}

.step__dot {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: #fff;
  font-size: 11px;
  border-radius: 50%;
  background: #d8d0c5;
}

.step.is-active {
  color: var(--primary-dark);
  font-weight: 700;
}

.step.is-active .step__dot {
  background: var(--primary);
}

.step.is-done .step__dot {
  background: var(--success);
}

.result-hero {
  margin-right: -16px;
  margin-left: -16px;
  border-radius: 0;
}

.master-quote {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  margin: 14px 0 2px;
  padding: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--cinnabar);
  border-radius: 11px;
  box-shadow: var(--shadow);
}

.master-quote > span {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: #fff7ed;
  font-family: Georgia, "STSong", serif;
  border-radius: 50%;
  background: var(--primary-dark);
}

.master-quote strong {
  color: var(--primary-dark);
  font-size: 12px;
}

.master-quote p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.result-hero__row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-top: 24px;
}

.result-score {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  color: #f1d8a3;
  font-size: 28px;
  font-weight: 700;
  border: 1px solid rgba(255, 244, 218, 0.4);
  border-radius: 50%;
}

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0;
  overflow: hidden;
}

.pillar {
  padding: 16px 4px;
  text-align: center;
}

.pillar + .pillar {
  border-left: 1px solid var(--border);
}

.pillar small {
  color: var(--muted);
}

.pillar strong {
  display: block;
  margin-top: 6px;
  font-family: Georgia, "STSong", serif;
  font-size: 29px;
  line-height: 1.18;
}

.pillar em {
  display: block;
  margin-top: 7px;
  color: var(--soft);
  font-size: 9px;
  font-style: normal;
}

.element-list {
  display: grid;
  gap: 12px;
}

.element-row {
  display: grid;
  grid-template-columns: 22px 1fr 36px;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}

.element-track {
  height: 8px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(154, 115, 64, 0.1);
}

.element-bar {
  height: 100%;
  border-radius: inherit;
}

.report-block {
  position: relative;
  padding: 18px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.report-block h3 {
  margin: 0;
  color: var(--primary-dark);
  font-size: 16px;
}

.report-block p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.78;
}

.report-block.is-locked p {
  max-height: 72px;
  overflow: hidden;
  filter: blur(4px);
  opacity: 0.45;
}

.lock-pill {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 5px 10px;
  color: #fff;
  font-size: 10px;
  border-radius: 99px;
  background: var(--primary-dark);
}

.unlock-band {
  padding: 22px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(251, 250, 244, 0.88);
}

.report-intro {
  margin-top: 14px;
  padding: 14px 16px;
  border-left: 4px solid var(--primary);
  border-radius: 9px;
  background: rgba(154, 115, 64, 0.08);
}

.report-intro strong {
  color: var(--primary-dark);
  font-size: 13px;
}

.report-intro p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}

.sticky-actions {
  position: sticky;
  z-index: 8;
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: 10px;
  margin: 24px -16px -92px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(251, 250, 244, 0.97);
  border-top: 1px solid var(--border);
}

.sticky-actions--share {
  grid-template-columns: 44px 1fr;
}

.sticky-actions--share-trailing {
  grid-template-columns: 1fr 44px;
}

.sticky-actions .share-icon-button {
  align-self: center;
  justify-self: center;
}

.price {
  margin-top: 22px;
  color: #f2d7a0;
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
}

.price small {
  font-size: 18px;
}

.benefits {
  display: grid;
  gap: 14px;
}

.benefit {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.benefit b {
  color: var(--success);
}

.payment-member-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 12px;
  padding: 13px 15px;
  color: var(--text);
  text-align: left;
  border: 1px solid rgba(195, 161, 95, 0.30);
  border-radius: 10px;
  background: rgba(195, 161, 95, 0.14);
}

.payment-member-entry span,
.payment-member-entry b,
.payment-member-entry small {
  display: block;
}

.payment-member-entry b {
  font-size: 13px;
  line-height: 1.4;
}

.payment-member-entry small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.payment-member-entry > strong {
  color: var(--primary-dark);
  font-size: 24px;
  line-height: 1;
}

.poster-wrap {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

#posterCanvas {
  width: 315px;
  height: 470px;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.history-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.history-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: -20px -16px 18px;
  padding: 24px 18px 16px;
  background: rgba(255, 251, 244, 0.74);
  border-bottom: 1px solid var(--border);
}

.history-page-header__eyebrow {
  color: var(--primary-dark);
  font-size: 11px;
  line-height: 1.4;
}

.history-page-header h1 {
  margin: 3px 0 0;
  color: var(--text);
  font-size: 21px;
  line-height: 1.3;
}

.history-page-header > span {
  padding-bottom: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.history-card {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.history-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.status-pill {
  padding: 4px 9px;
  color: var(--danger);
  font-size: 10px;
  border-radius: 99px;
  background: rgba(164, 79, 67, 0.08);
}

.status-pill.is-unlocked {
  color: var(--success);
  background: rgba(154, 115, 64, 0.1);
}

.history-actions {
  display: flex;
  gap: 8px;
  margin-top: 13px;
}

.mini-btn {
  padding: 7px 11px;
  color: var(--primary-dark);
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: transparent;
}

.mini-btn.is-danger {
  color: var(--danger);
}

.empty {
  padding: 100px 24px;
  text-align: center;
}

.empty__mark {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: auto;
  color: var(--primary-dark);
  border: 1px solid var(--border);
  border-radius: 50%;
}

.profile-hero {
  display: flex;
  align-items: center;
}

.profile-hero > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.profile-member-tag {
  flex: 0 0 auto;
  margin-left: 10px;
  padding: 4px 8px;
  color: #fff9ef;
  font-size: 9px;
  line-height: 1.4;
  border-radius: 99px;
  background: rgba(255, 249, 239, 0.14);
}

.guide-card {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  padding: 16px 68px 16px 16px;
  color: #fff9ef;
  border-radius: 14px;
  background: radial-gradient(circle at 90% 12%, rgba(178, 154, 103, 0.4), transparent 72px), linear-gradient(145deg, #3f3127, #9a7340);
  box-shadow: var(--shadow);
}

.guide-card__avatar {
  display: grid;
  place-items: center;
  width: 48px;
  height: 58px;
  color: #f5e9c8;
  font-family: Georgia, "STSong", serif;
  font-size: 22px;
  border: 1px solid rgba(245, 233, 200, 0.42);
  border-radius: 24px 24px 8px 8px;
}

.guide-card small,
.guide-card strong,
.guide-card p {
  display: block;
}

.guide-card small {
  color: rgba(255, 249, 239, 0.64);
  font-size: 9px;
}

.guide-card strong {
  margin-top: 2px;
  font-size: 16px;
}

.guide-card p {
  margin: 4px 0 0;
  color: rgba(255, 249, 239, 0.72);
  font-size: 10px;
}

.guide-card > span {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 4px 6px;
  color: #fff7ed;
  font-size: 9px;
  border-radius: 4px;
  background: var(--cinnabar);
}

.profile-avatar {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-right: 14px;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  border-radius: 50%;
  background: var(--cinnabar);
}

.profile-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 14px;
  padding: 16px 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
}

.profile-stat {
  text-align: center;
}

.profile-stat + .profile-stat {
  border-left: 1px solid var(--border);
}

.profile-stat strong {
  display: block;
  color: var(--primary-dark);
  font-size: 22px;
  line-height: 1.3;
}

.profile-stat strong.profile-stat__text {
  font-size: 13px;
}

.profile-stat span {
  color: var(--muted);
  font-size: 10px;
}

.menu-list {
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.menu-row {
  display: grid;
  grid-template-columns: 42px 1fr 18px;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 70px;
  padding: 12px 16px;
  text-align: left;
  border: 0;
  background: transparent;
}

.menu-row + .menu-row {
  border-top: 1px solid var(--border);
}

.menu-row .menu-icon {
  width: 38px;
  height: 38px;
}

.menu-row strong {
  display: block;
  font-size: 14px;
}

.menu-row small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.membership-screen {
  padding-bottom: 54px;
}

.membership-hero {
  margin-top: 16px;
  padding: 20px;
  color: #fff9ef;
  border-radius: 14px;
  background: radial-gradient(circle at 88% 14%, rgba(195, 161, 95, 0.52), transparent 76px), linear-gradient(145deg, #342c27 0%, #6f5138 72%, #8e6940 100%);
  box-shadow: var(--shadow);
}

.membership-hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.membership-hero__top span {
  color: rgba(255, 249, 239, 0.68);
  font-size: 11px;
  line-height: 1.4;
}

.membership-hero__top h1 {
  margin: 4px 0 0;
  font-size: 24px;
  line-height: 1.3;
}

.membership-hero__top > b {
  display: grid;
  place-items: center;
  width: 36px;
  height: 44px;
  color: #fff6e8;
  font-size: 16px;
  border: 1px solid rgba(255, 244, 218, 0.42);
  border-radius: 6px;
  background: var(--cinnabar);
}

.membership-hero > p {
  margin: 5px 0 0;
  color: rgba(255, 249, 239, 0.72);
  font-size: 11px;
  line-height: 1.55;
}

.membership-balance {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 249, 239, 0.18);
}

.membership-balance > span {
  color: rgba(255, 249, 239, 0.68);
  font-size: 11px;
}

.membership-balance strong {
  color: #f4dba7;
  font-size: 28px;
  line-height: 1;
}

.membership-balance small {
  margin-right: 2px;
  font-size: 13px;
}

.membership-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 14px;
  padding: 4px;
  border-radius: 99px;
  background: rgba(195, 161, 95, 0.14);
}

.membership-tabs button {
  height: 36px;
  color: var(--muted);
  border: 0;
  border-radius: 99px;
  background: transparent;
}

.membership-tabs button.is-active {
  color: #fffaf2;
  background: var(--primary-dark);
}

.membership-plan-list {
  display: grid;
  gap: 10px;
}

.membership-plan {
  display: grid;
  grid-template-columns: 22px 1fr 76px;
  gap: 9px;
  align-items: center;
  width: 100%;
  min-height: 92px;
  padding: 13px;
  color: var(--text);
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.membership-plan.is-selected {
  border-color: var(--primary);
  background: #fff8ed;
}

.membership-plan__check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: #fff;
  font-size: 10px;
  border: 1px solid var(--border);
  border-radius: 50%;
}

.membership-plan.is-selected .membership-plan__check {
  border-color: var(--primary);
  background: var(--primary);
}

.membership-plan__copy,
.membership-plan__copy small,
.membership-plan__price,
.membership-plan__price b,
.membership-plan__price del {
  display: block;
}

.membership-plan__title {
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1.35;
}

.membership-plan__title b {
  font-size: 14px;
}

.membership-plan__title em {
  padding: 2px 5px;
  color: var(--cinnabar);
  font-size: 8px;
  font-style: normal;
  border-radius: 99px;
  background: rgba(164, 79, 67, 0.09);
}

.membership-plan__copy small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.membership-plan__price {
  text-align: right;
}

.membership-plan__price b {
  color: var(--primary-dark);
  font-size: 16px;
  line-height: 1.3;
}

.membership-plan__price b small {
  display: inline;
  font-size: 10px;
}

.membership-plan__price del {
  color: var(--soft);
  font-size: 9px;
}

.membership-benefits {
  display: grid;
  gap: 11px;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}

.membership-benefits > div {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.membership-benefits b {
  display: grid;
  flex: 0 0 19px;
  place-items: center;
  width: 19px;
  height: 19px;
  color: #fff;
  font-size: 9px;
  border-radius: 50%;
  background: var(--primary);
}

.recharge-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.recharge-item {
  display: grid;
  place-content: center;
  min-height: 84px;
  color: var(--text);
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}

.recharge-item.is-selected {
  border-color: var(--primary);
  background: #fff8ed;
}

.recharge-item strong {
  color: var(--primary-dark);
  font-size: 19px;
  line-height: 1.3;
}

.recharge-item span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.4;
}

.balance-note {
  margin-top: 12px;
  padding: 14px 15px;
  border-radius: 10px;
  background: rgba(195, 161, 95, 0.12);
}

.balance-note strong {
  font-size: 13px;
}

.balance-note p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}

.membership-submit {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.membership-submit > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.membership-submit .btn {
  width: 100%;
}

.mock-notice {
  margin-top: 10px;
  color: var(--soft);
  font-size: 10px;
  line-height: 1.6;
  text-align: center;
}

.preview-modal {
  position: fixed;
  z-index: 90;
  inset: 0;
}

.preview-modal__mask {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(45, 34, 24, 0.46);
}

.preview-modal__panel {
  position: absolute;
  bottom: max(16px, calc((100vh - min(844px, 100vh)) / 2 + 16px));
  left: 50%;
  width: calc(min(390px, 100vw) - 32px);
  padding: 18px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 24px 80px rgba(58, 40, 24, 0.24);
  transform: translateX(-50%);
}

.preview-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.preview-modal__header h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
}

.preview-modal__header button {
  width: 32px;
  height: 32px;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  border: 0;
  background: transparent;
}

.preview-modal__row {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: baseline;
  gap: 10px;
  padding: 9px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  border-bottom: 1px solid var(--border);
}

.preview-modal__row b,
.preview-modal__row strong {
  color: var(--text);
  text-align: right;
}

.preview-modal__row strong {
  color: var(--primary-dark);
}

.preview-modal__panel > p {
  margin: 12px 0;
  color: var(--soft);
  font-size: 11px;
  line-height: 1.55;
}

.legal-section {
  padding: 18px 2px;
  border-bottom: 1px solid var(--border);
}

.legal-section h2 {
  margin: 0;
  font-size: 16px;
}

.legal-section p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.82;
}

.tabbar {
  position: fixed;
  z-index: 20;
  bottom: 0;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: min(390px, 100vw);
  height: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
  margin: 0;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--border);
  background: rgba(251, 250, 244, 0.98);
  transform: translateX(-50%);
}

.tabbar button {
  display: grid;
  grid-template-rows: var(--tabbar-icon-slot) var(--tabbar-label-slot);
  align-content: center;
  justify-items: center;
  min-width: 0;
  height: var(--tabbar-height);
  padding: 4px 0 3px;
  color: var(--soft);
  font-size: 11px;
  line-height: var(--tabbar-label-slot);
  border: 0;
  background: transparent;
  transition: color 100ms ease, background-color 100ms ease;
  touch-action: manipulation;
}

.tabbar button:active,
.tabbar button.is-pressing {
  color: var(--primary-dark);
  background: rgba(154, 115, 64, 0.07);
}

.tabbar img {
  grid-row: 1;
  align-self: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 1px;
  object-fit: contain;
  opacity: .82;
}

.tabbar button > span {
  grid-row: 2;
  display: block;
  width: 100%;
  height: var(--tabbar-label-slot);
  line-height: var(--tabbar-label-slot);
  text-align: center;
  white-space: nowrap;
}

.tabbar__placeholder {
  visibility: hidden;
}

.tabbar button.is-active {
  color: var(--primary-dark);
  font-weight: 700;
}

.tabbar button.is-active img { opacity: 1; }

.tabbar b {
  display: block;
  margin-bottom: 3px;
  font-size: 16px;
}

.toast {
  position: fixed;
  z-index: 100;
  bottom: 44px;
  left: 50%;
  max-width: 300px;
  padding: 10px 16px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  pointer-events: none;
  border-radius: 99px;
  background: rgba(55, 42, 32, 0.92);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: 0.2s ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.official-gold-button {
  display: block;
  width: 100%;
  min-height: 42px;
  margin-top: 18px;
  padding: 9px 14px;
  color: #fffaf2;
  font-size: 14px;
  line-height: 1.5;
  border: 0;
  border-radius: 22px;
  background: #c5a078;
  box-shadow: 0 5px 14px rgba(99, 68, 40, 0.1);
}

.official-gold-button.is-disabled {
  color: #fff;
  background: #e8e6e3;
  box-shadow: none;
}

.official-fortune-preview {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  color: #443930;
  background: #f7f0e5;
}

.official-fortune-preview__wash {
  position: absolute;
  inset: 0 0 auto;
  height: 446px;
  opacity: 0.11;
  background: url('assets/home-hero.jpg') center top / cover no-repeat;
  pointer-events: none;
}

.official-fortune-preview__topbar,
.official-fortune-preview__tabs,
.official-fortune-preview__hero,
.official-fortune-preview__features,
.official-fortune-preview > .disclaimer {
  position: relative;
  z-index: 1;
}

.official-fortune-preview__topbar {
  display: grid;
  grid-template-columns: 54px 1fr 54px;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
}

.official-fortune-preview__topbar button {
  min-height: 38px;
  color: #4f4238;
  font-size: 13px;
  border: 0;
  background: transparent;
}

.official-fortune-preview__topbar button:first-child {
  font-size: 30px;
  text-align: left;
}

.official-fortune-preview__topbar button:last-child {
  text-align: right;
}

.official-fortune-preview__topbar span {
  font-size: 14px;
  text-align: center;
}

.official-fortune-preview__tabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  padding: 0 10px 8px;
}

.official-fortune-preview__tabs button {
  position: relative;
  min-width: 0;
  min-height: 40px;
  padding: 6px 0 10px;
  color: #443930;
  font-size: 12px;
  border: 0;
  background: transparent;
}

.official-fortune-preview__tabs button.is-active::after {
  position: absolute;
  right: 11px;
  bottom: 3px;
  left: 11px;
  height: 1px;
  background: #594738;
  content: '';
}

.official-fortune-preview__hero {
  min-height: 336px;
  padding: 2px 20px 30px;
  box-sizing: border-box;
}

.official-fortune-preview__visual-stage {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 166px;
}

.official-fortune-preview__visual-stage > img {
  display: block;
  width: 156px;
  height: 156px;
  object-fit: contain;
}

.official-fortune-preview__hero h1 {
  margin: 4px 0 12px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}

.official-fortune-preview__hero > p {
  margin: 0;
  font-size: 13px;
  line-height: 1.75;
}

.official-fortune-preview__hero dl {
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
}

.official-fortune-preview__hero dl div {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 6px;
  font-size: 12px;
}

.official-fortune-preview__hero dt {
  font-weight: 700;
}

.official-fortune-preview__hero dd {
  margin: 0;
}

.official-fortune-preview__features {
  margin-top: -16px;
  padding: 28px 18px 24px;
  background: rgba(255, 253, 248, 0.98);
  border-radius: 20px 20px 0 0;
}

.official-fortune-preview__feature-group > h2 {
  display: table;
  min-width: 76px;
  max-width: 164px;
  margin: -13px auto 16px;
  padding: 3px 12px;
  color: #fffaf2;
  font-family: Georgia, 'STSong', serif;
  font-size: 15px;
  font-weight: 500;
  text-align: center;
  border-radius: 6px;
  background: #c3a077;
}

.official-fortune-preview__feature-group + .official-fortune-preview__feature-group {
  margin-top: 34px;
  padding-top: 27px;
  border-top: 1px solid rgba(195, 160, 119, 0.26);
}

.official-fortune-preview__feature-group + .official-fortune-preview__feature-group > h2 {
  margin-top: -36px;
}

.official-fortune-preview__features article {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 7px;
  margin-top: 16px;
}

.official-fortune-preview__features article > span,
.official-fortune-preview__features h3 {
  color: #9a7340;
}

.official-fortune-preview__features h3 {
  margin: 0;
  font-size: 14px;
}

.official-fortune-preview__features p {
  margin: 3px 0 0;
  color: #7c6754;
  font-size: 11px;
  line-height: 1.6;
}

.official-fortune-preview > .disclaimer {
  margin: 0;
  padding: 20px;
  background: rgba(255, 252, 247, 0.96);
}

.official-fortune-preview__loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 14px -20px 0;
}

.official-fortune-preview__loading > .typing-loader {
  margin-bottom: 18px;
}

.official-fortune-preview__loading > div {
  width: 100%;
  height: 3px;
  background: rgba(154, 115, 64, 0.15);
}

.official-fortune-preview__loading > div i {
  display: block;
  height: 100%;
  background: #a87845;
}

.official-fortune-preview__loading-value {
  align-self: flex-start;
  display: block;
  width: 38px;
  margin: -8px 0 0 42px;
  color: #fff;
  font-size: 9px;
  text-align: center;
  border-radius: 12px;
  background: #a87845;
}

.official-fortune-preview__loading p {
  margin-top: 22px;
  color: #9a7340;
  font-size: 14px;
  text-align: center;
}

.analysis-preview,
.match-preview,
.destiny-preview {
  position: relative;
  min-height: 100%;
  padding: 12px 18px 34px;
  overflow: hidden;
  color: #5e4d40;
  background: #fffcf7;
}

.analysis-preview__pattern,
.match-preview::before {
  position: absolute;
  inset: 0 0 auto;
  height: 330px;
  opacity: 0.07;
  background: url('assets/home-hero.jpg') center / cover no-repeat;
  content: '';
  pointer-events: none;
}

.analysis-preview__topbar,
.analysis-preview__subbar,
.match-preview__topbar,
.match-preview__subbar {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  min-height: 42px;
}

.analysis-preview__topbar button,
.analysis-preview__subbar button,
.match-preview__topbar button,
.match-preview__subbar button {
  min-height: 34px;
  color: #80674f;
  font-size: 27px;
  border: 0;
  background: transparent;
  text-align: left;
}

.analysis-preview__subbar .share-icon-button,
.match-preview__subbar .share-icon-button {
  justify-self: end;
  min-height: 40px;
}

.analysis-preview__topbar h1,
.analysis-preview__subbar h1,
.match-preview__topbar h1,
.match-preview__subbar h1 {
  margin: 0;
  color: #9a7340;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}

.analysis-preview__topbar h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.analysis-preview__topbar h1 img {
  width: 18px;
  height: 18px;
}

.analysis-preview__profile {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 12px 0 16px;
}

.analysis-preview__profile img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 50%;
}

.analysis-preview__profile b,
.analysis-preview__profile small {
  display: block;
}

.analysis-preview__profile b {
  color: #9a7340;
  font-size: 14px;
}

.analysis-preview__profile small {
  color: #9d9288;
  font-size: 11px;
}

.analysis-preview__upload {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 180px;
  margin-bottom: 18px;
  border: 1px solid #c9bdb2;
  border-radius: 18px;
  background: rgba(255, 252, 248, 0.84);
}

.analysis-preview__upload img {
  width: 76px;
  height: 76px;
  opacity: 0.12;
}

.analysis-preview__upload.is-uploaded img {
  opacity: 0.72;
}

.analysis-preview__upload span {
  margin-top: 8px;
  color: #b0a69d;
  font-size: 11px;
}

.analysis-preview__record-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
}

.analysis-preview__record-heading h2 {
  margin: 0;
  color: #9a7340;
  font-size: 16px;
}

.analysis-preview__record-heading button {
  color: #a69c93;
  font-size: 11px;
  border: 0;
  background: transparent;
}

.analysis-preview__record,
.analysis-preview__empty {
  display: grid;
  width: 100%;
  min-height: 94px;
  margin-top: 10px;
  padding: 12px;
  background: #fffdfa;
  border: 1px solid #ebe1d7;
  border-radius: 13px;
  box-shadow: 0 4px 12px rgba(72, 51, 34, 0.08);
}

.analysis-preview__record {
  grid-template-columns: 50px 1fr 18px;
  gap: 10px;
  align-items: center;
  color: #5e4d40;
  text-align: left;
}

.analysis-preview__record img {
  width: 46px;
  height: 46px;
}

.analysis-preview__record b,
.analysis-preview__record small {
  display: block;
}

.analysis-preview__record small {
  color: #9d9186;
  font-size: 10px;
}

.analysis-preview__empty {
  place-items: center;
  color: #a69a90;
  font-size: 12px;
}

.analysis-preview--sub,
.analysis-preview--report {
  padding-top: 12px;
}

.analysis-preview__search,
.match-preview__search {
  height: 36px;
  margin-top: 14px;
  padding: 0 14px;
  color: #afa59b;
  font-size: 11px;
  line-height: 36px;
  background: #fff;
  border-radius: 19px;
}

.analysis-preview__archive,
.match-preview__archive {
  display: grid;
  grid-template-columns: 22px 1fr 42px;
  gap: 8px;
  align-items: center;
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  color: #55483e;
  text-align: left;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid #e9dfd4;
  border-radius: 9px;
}

.analysis-preview__archive i,
.match-preview__archive i {
  width: 17px;
  height: 17px;
  border: 1px solid #b8aa9c;
  border-radius: 50%;
}

.analysis-preview__archive i.is-selected,
.match-preview__archive i.is-selected {
  border: 5px solid #c6a078;
}

.analysis-preview__archive b,
.analysis-preview__archive small,
.match-preview__archive b,
.match-preview__archive small {
  display: block;
}

.analysis-preview__archive small,
.match-preview__archive small {
  color: #94877c;
  font-size: 10px;
}

.analysis-preview__archive em,
.match-preview__archive em {
  color: #8f8277;
  font-size: 11px;
  font-style: normal;
  text-align: right;
}

.analysis-preview__confirm {
  width: 70%;
  margin: 24px auto 0;
}

.analysis-preview__report-image {
  display: block;
  width: 150px;
  height: 150px;
  margin: 20px auto 14px;
  padding: 28px;
  background: #f7efe6;
  border-radius: 18px;
}

.analysis-preview__score {
  color: #9a7340;
  font-size: 15px;
  text-align: center;
}

.analysis-preview__score strong {
  margin-left: 6px;
  font-size: 20px;
}

.analysis-preview__report-section {
  margin-top: 22px;
}

.analysis-preview__report-section h2 {
  margin: 0;
  color: #9a7340;
  font-size: 15px;
}

.analysis-preview__report-section p {
  color: #67594e;
  font-size: 12px;
  line-height: 1.8;
}

.destiny-preview {
  padding: 0 14px 72px;
  background: #fffaf2;
}

.destiny-preview__hero {
  position: relative;
  min-height: 176px;
  margin: 0 -14px;
  padding: 30px 105px 18px 48px;
  overflow: hidden;
}

.destiny-preview__hero::before {
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background: url('assets/home-hero.jpg') center / cover no-repeat;
  content: '';
}

.destiny-preview__back,
.destiny-preview__identity,
.destiny-preview__hero p,
.destiny-preview__hero small,
.destiny-preview__hero > img {
  position: relative;
  z-index: 1;
}

.destiny-preview__back {
  position: absolute;
  top: 22px;
  left: 14px;
  color: #a2825e;
  font-size: 30px;
  border: 0;
  background: transparent;
}

.destiny-preview__identity {
  display: flex;
  align-items: center;
  gap: 6px;
}

.destiny-preview__identity h1 {
  margin: 0;
  color: #9a7340;
  font-size: 18px;
}

.destiny-preview__identity span {
  color: #b49a78;
  font-size: 9px;
  line-height: 1.2;
}

.destiny-preview__identity b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 36px;
  color: #fff8ef;
  border-radius: 0 0 14px 14px;
  background: #b75c4d;
}

.destiny-preview__hero p,
.destiny-preview__hero small {
  display: block;
  margin: 8px 0 0;
  color: #a58969;
  font-size: 10px;
}

.destiny-preview__hero > img {
  position: absolute;
  top: 8px;
  right: 6px;
  width: 110px;
  height: 124px;
  object-fit: contain;
  opacity: 0.68;
  mix-blend-mode: multiply;
}

.destiny-preview__list {
  display: grid;
  gap: 12px;
  padding: 12px 0 22px;
}

.destiny-preview__module {
  display: grid;
  grid-template-columns: 24px 1fr 20px;
  gap: 8px;
  min-height: 98px;
  padding: 16px 13px;
  color: #9a7340;
  text-align: left;
  border: 1px solid #e7dccd;
  border-radius: 12px;
  background: #fffdf8;
  box-shadow: 0 3px 10px rgba(72, 52, 34, 0.08);
}

.destiny-preview__module > img {
  width: 22px;
  height: 22px;
}

.destiny-preview__module span b,
.destiny-preview__module span small {
  display: block;
}

.destiny-preview__module span b {
  font-size: 14px;
  line-height: 1.45;
}

.destiny-preview__module span small {
  color: #ad8e66;
  font-size: 11px;
}

.destiny-preview__module span i {
  display: flex;
  gap: 2px;
  margin-top: 12px;
}

.destiny-preview__module span em {
  width: 30px;
  height: 8px;
  border-radius: 5px;
  background: #eadac5;
}

.destiny-preview__module span em:nth-child(2) {
  background: #fff;
  border: 1px solid #eadac5;
}

.destiny-preview__modal-copy {
  margin: 0 0 16px !important;
  color: #6f6156 !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
}

.official-inner-nav {
  position: fixed;
  z-index: 30;
  bottom: 0;
  left: 50%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: min(390px, 100vw);
  height: calc(var(--tabbar-height) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(255, 252, 247, 0.98);
  border-top: 1px solid #eee4d9;
  transform: translateX(-50%);
}

.destiny-preview .official-inner-nav {
  margin: 0;
}

.official-inner-nav button {
  display: grid;
  grid-template-rows: var(--tabbar-icon-slot) var(--tabbar-label-slot);
  align-content: center;
  justify-items: center;
  min-width: 0;
  height: var(--tabbar-height);
  padding: 4px 0 3px;
  color: #9f968d;
  font-size: 10px;
  line-height: var(--tabbar-label-slot);
  border: 0;
  background: transparent;
  transition: color 100ms ease, background-color 100ms ease;
  touch-action: manipulation;
}

.official-inner-nav button:active,
.official-inner-nav button.is-pressing {
  color: var(--primary-dark);
  background: rgba(154, 115, 64, 0.07);
}

.official-inner-nav img {
  grid-row: 1;
  align-self: center;
  width: 32px;
  height: 32px;
  margin: 0;
  object-fit: contain;
  opacity: 0.82;
}

.official-inner-nav button > span {
  grid-row: 2;
  display: block;
  width: 100%;
  height: var(--tabbar-label-slot);
  line-height: var(--tabbar-label-slot);
  text-align: center;
  white-space: nowrap;
}

.official-inner-nav button.is-active {
  color: #8f673d;
  font-weight: 700;
}

.official-inner-nav button.is-active img { opacity: 1; }

.match-preview {
  padding-bottom: 72px;
}

.match-preview__banner {
  position: relative;
  z-index: 1;
  display: block;
  width: calc(100% + 36px);
  height: 98px;
  margin: -12px -18px 0;
  object-fit: cover;
}

.match-preview__topbar {
  margin-top: 4px;
}

.match-preview__people {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 64px 34px 64px;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-top: 38px;
}

.match-preview__people.is-compact {
  margin-top: 18px;
}

.match-preview__people span {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fffdf8;
}

.match-preview__people img {
  width: 46px;
  height: 46px;
  opacity: 0.72;
}

.match-preview__people > b {
  color: #9a7340;
  font-size: 18px;
  text-align: center;
}

.match-preview__label {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  color: #a47c4e;
  font-size: 14px;
  text-align: center;
}

.match-preview > .official-gold-button {
  position: relative;
  z-index: 1;
  margin-top: 34px;
}

.match-preview > .official-gold-button + .official-gold-button {
  margin-top: 20px;
}

.match-preview__score {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
  padding: 11px 14px;
  border: 1px solid #eadfce;
  border-radius: 10px;
  background: rgba(255, 253, 248, 0.9);
}

.match-preview__score b {
  color: #9a7340;
  font-size: 24px;
}

.match-preview__score span {
  font-size: 11px;
  line-height: 1.5;
}

.match-preview__record-title {
  margin-top: 52px;
  color: #b08659;
  font-size: 14px;
  text-align: center;
}

.match-preview__record-title span {
  margin-left: 18px;
  padding: 4px 8px;
  color: #fff;
  font-size: 10px;
  border-radius: 12px;
  background: #ccb18e;
}

.match-preview__record {
  display: grid;
  grid-template-columns: 44px 1fr 18px;
  gap: 10px;
  align-items: center;
  width: 100%;
  margin-top: 20px;
  padding: 12px 16px;
  color: #5e4d40;
  text-align: left;
  border: 1px solid #e9dfd4;
  border-radius: 30px;
  background: #fff;
}

.match-preview__record img {
  width: 40px;
  height: 40px;
}

.match-preview__record b,
.match-preview__record small {
  display: block;
}

.match-preview__record small {
  color: #9f9388;
  font-size: 10px;
}

.match-preview__end {
  color: #b7ada4;
  font-size: 11px;
  text-align: center;
}

.match-preview__start {
  margin-top: 20px !important;
}

.match-preview__add-avatar {
  display: block;
  width: 92px;
  height: 92px;
  margin: 18px auto;
  opacity: 0.72;
}

.match-preview__form {
  display: grid;
  gap: 9px;
}

.match-preview__form label {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #e9dfd4;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.84);
}

.match-preview__form label b {
  font-size: 13px;
}

.match-preview__form input,
.match-preview__form select {
  width: 100%;
  color: #8f8378;
  font-size: 12px;
  text-align: right;
  border: 0;
  outline: 0;
  background: transparent;
}

.match-preview__invite {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
}

.match-preview__invite > button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(38, 31, 25, 0.7);
}

.match-preview__invite article {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: #fffaf2;
}

.match-preview__invite-close {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #594738;
  font-size: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 250, 242, 0.88);
}

.match-preview__invite article > img:first-child {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
}

.match-preview__invite article > div {
  position: absolute;
  top: 42px;
  left: 22px;
  width: 170px;
  color: #4f3927;
}

.match-preview__invite h2 {
  margin: 0;
  font-family: Georgia, 'STSong', serif;
  font-size: 26px;
}

.match-preview__invite p {
  font-size: 12px;
}

.match-preview__invite article > img:nth-of-type(2) {
  display: block;
  width: 98px;
  height: 98px;
  margin: -48px auto 0;
  padding: 5px;
  background: #fff;
}

.match-preview__invite article > strong {
  display: block;
  padding: 10px 10px 18px;
  font-size: 12px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .typing-loader i {
    animation: none;
    opacity: 0.66;
    transform: none;
  }

  .draw-starmap-preview,
  .draw-starmap-preview__aura,
  .draw-starmap-preview__field,
  .draw-starmap-preview__mansion-ring,
  .draw-starmap-preview__constellation-ring,
  .draw-starmap-preview__guardian-ring,
  .draw-starmap-preview__trigram-ring,
  .draw-starmap-preview__mansion b,
  .draw-starmap-preview__guardian b,
  .draw-starmap-preview__trigram b,
  .draw-starmap-preview__cluster em,
  .draw-starmap-preview__center,
  .draw-astral-plate-preview,
  .draw-astral-plate-preview__aura,
  .draw-astral-plate-preview__ring--2,
  .draw-astral-plate-preview__ring--3,
  .draw-astral-plate-preview__ring--4,
  .draw-astral-plate-preview__ring--5,
  .draw-confirm-preview,
  .draw-generating-preview__chart::before,
  .draw-generating-preview__disc img,
  .draw-generating-preview i {
    animation: none;
  }
}

@media (max-width: 440px) {
  .device-shell { padding: 0; }
  .app-shell { width: 100vw; height: 100vh; box-shadow: none; }
  .draw-ritual-preview { top: 0; left: 0; width: 100vw; height: 100vh; transform: none; }
}

@media (max-width: 340px) {
  .fortune-card__content {
    padding: 14px 12px 12px;
  }

  .fortune-card__main {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 8px;
  }

  .score {
    width: 76px;
    height: 76px;
  }

  .score strong {
    font-size: 40px;
  }

  .fortune-lines {
    gap: 7px;
    font-size: 12px;
  }

  .fortune-line {
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 3px;
  }

  .fortune-line__marks {
    gap: 4px;
  }

  .fortune-line__mark {
    width: 8px;
    height: 12px;
    flex-basis: 8px;
  }

  .fortune-card__tips {
    font-size: 10px;
  }

}

.splash-preview {
  position: relative;
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  background: #f8f1e5;
  opacity: 1;
  transition: opacity .24s ease;
}

.splash-preview.is-leaving { opacity: 0; }

.splash-preview__visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #f8f1e5;
}

.splash-preview__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.96;
  filter: saturate(0.82) contrast(0.96) brightness(1.02);
  transform-origin: 50% 50%;
  animation: splash-preview-settle 2.8s ease-out both;
}

.splash-preview__warmth {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(249, 244, 234, 0.12) 0%, rgba(249, 244, 234, 0.01) 42%, rgba(246, 238, 224, 0.06) 64%, rgba(246, 238, 224, 0.82) 100%),
    linear-gradient(90deg, rgba(251, 247, 238, 0.1), rgba(251, 247, 238, 0) 72%);
}

.splash-preview__brand {
  position: absolute;
  z-index: 2;
  top: max(34px, calc(24px + env(safe-area-inset-top)));
  right: 30px;
  left: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #6d5130;
}

.splash-preview__brand span {
  font-family: "Songti SC", "STSong", serif;
  font-size: 25px;
  line-height: 1;
}

.splash-preview__brand em {
  padding: 5px 9px;
  color: rgba(109, 81, 48, 0.72);
  font-size: 11px;
  font-style: normal;
  border: 1px solid rgba(177, 132, 62, 0.22);
  border-radius: 999px;
  background: rgba(255, 252, 244, 0.58);
}

.splash-preview__copy {
  position: relative;
  z-index: 1;
  display: flex;
  box-sizing: border-box;
  flex: 1 0 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  min-height: 100%;
  padding: clamp(138px, 20vh, 174px) 28px calc(26px + env(safe-area-inset-bottom));
  color: #5c4a35;
  text-align: left;
  animation: splash-preview-entry 520ms 120ms ease both;
}

.splash-preview__copy small {
  position: relative;
  padding-left: 28px;
  color: rgba(124, 91, 47, 0.9);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.splash-preview__copy small::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 20px;
  height: 1px;
  content: "";
  background: rgba(154, 115, 64, 0.72);
}

.splash-preview__copy h1 {
  margin: 10px 0 0;
  font-family: "Songti SC", "STSong", serif;
  font-size: 42px;
  font-weight: 500;
  line-height: 1.12;
}

.splash-preview__copy p {
  max-width: 280px;
  margin: 12px 0 0;
  color: rgba(92, 74, 53, 0.72);
  font-size: 14px;
  line-height: 1.8;
}

.splash-preview__primary {
  display: grid;
  place-items: center;
  width: 100%;
  height: 50px;
  margin-top: auto;
  color: #fffaf0;
  font-size: 15px;
  font-weight: 700;
  border: 0;
  border-radius: 8px;
  background: #85613e;
  box-shadow: 0 10px 24px rgba(112, 78, 39, 0.17);
}

.splash-preview__primary:active {
  transform: translateY(1px);
}

.splash-preview__link {
  align-self: center;
  margin-top: 8px;
  padding: 9px 12px;
  color: rgba(92, 74, 53, 0.72);
  font-size: 13px;
  border: 0;
  background: transparent;
}

.splash-preview__link:active {
  color: var(--primary-dark);
}

@keyframes splash-preview-settle {
  from { transform: scale(1.025); }
  to { transform: scale(1); }
}

@keyframes splash-preview-entry {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-height: 620px) {
  .splash-preview__copy {
    padding-top: 112px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  .splash-preview__copy h1 {
    font-size: 36px;
  }

  .splash-preview__copy p {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.55;
  }

  .splash-preview__primary {
    height: 46px;
  }
}

.section-title button {
  padding: 4px 0;
  color: #8f693f;
  font-size: 11px;
  border: 0;
  background: transparent;
}

.analysis-preview__overview {
  margin: 18px 0 4px;
  padding: 13px 14px;
  color: #67594e;
  font-size: 12px;
  line-height: 1.75;
  border: 1px solid #eadfd5;
  border-radius: 9px;
  background: #fffaf3;
}

.analysis-preview__report-section h2 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.analysis-preview__report-section h2 i {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  color: #fffaf3;
  font-size: 10px;
  font-style: normal;
  border-radius: 5px;
  background: #b48a57;
}

.analysis-preview__report-actions,
.match-result-preview__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}

.analysis-preview__report-actions button,
.match-result-preview__actions button {
  height: 42px;
  color: #8f673d;
  font-size: 12px;
  border: 1px solid #d7b993;
  border-radius: 22px;
  background: transparent;
}

.analysis-preview__report-actions button:last-child,
.match-result-preview__actions button:last-child {
  color: #fffaf2;
  background: #b48a57;
}

.analysis-preview--loading {
  min-height: 100%;
}

.analysis-preview__loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100px;
}

.analysis-preview__loader strong { margin-top: 20px; color: #9a7340; font-size: 20px; }
.analysis-preview__loader > div { width: 78%; height: 5px; margin-top: 10px; overflow: hidden; border-radius: 5px; background: #eee6dd; }
.analysis-preview__loader > div i { display: block; height: 100%; border-radius: inherit; background: #b48a57; transition: width .4s ease; }
.analysis-preview__loader h2 { margin: 16px 0 0; color: #665448; font-size: 15px; }
.analysis-preview__loader p { margin: 6px 0 0; color: #a69a90; font-size: 11px; }

.destiny-preview--detail {
  min-height: 100%;
  padding: 12px 15px 88px;
}

.destiny-detail-preview__topbar,
.official-subpage__topbar {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  height: 48px;
  color: #9a7340;
  text-align: center;
}

.destiny-detail-preview__topbar h1,
.official-subpage__topbar h1 { margin: 0; font-size: 16px; }
.destiny-detail-preview__topbar button,
.official-subpage__topbar button { color: #8c765d; font-size: 13px; text-align: left; border: 0; background: transparent; }
.destiny-detail-preview__topbar button:first-child,
.official-subpage__topbar button:first-child { font-size: 28px; }
.destiny-detail-preview__topbar button:last-child,
.official-subpage__topbar button:last-child { text-align: right; }

.analysis-preview__report-actions,
.match-result-preview__actions,
.share-poster-actions {
  align-items: center;
}

.analysis-preview__report-actions,
.match-result-preview__actions {
  grid-template-columns: 1fr 44px;
}

.analysis-preview__report-actions .share-icon-button,
.match-result-preview__actions .share-icon-button,
.share-poster-actions .share-icon-button {
  justify-self: end;
}

.share-poster-actions {
  grid-template-columns: 1fr 44px;
}

.share-capture {
  position: fixed;
  z-index: 200;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.share-capture.is-visible {
  display: flex;
}

.share-capture__mask {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(31, 26, 22, 0.58);
  backdrop-filter: blur(5px);
}

.share-capture__panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(420px, 100%);
  max-height: calc(100vh - 40px);
  overflow: hidden;
  background: #fffbf4;
  border: 1px solid rgba(154, 115, 64, 0.22);
  border-radius: 8px;
  box-shadow: 0 24px 72px rgba(39, 28, 20, 0.30);
}

/* Keep the title bar balanced in exported long images without including page controls. */
.share-render-root [data-share-exclude] {
  visibility: hidden !important;
  pointer-events: none !important;
}

.share-capture__panel.is-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  padding: 32px;
  color: #493b32;
  text-align: center;
}

.share-capture__panel.is-loading p {
  margin: 8px 0 0;
  color: #8d8075;
  font-size: 13px;
}

.share-capture__spinner {
  width: 38px;
  height: 38px;
  margin-bottom: 18px;
  border: 2px solid rgba(154, 115, 64, 0.18);
  border-top-color: #9a7340;
  border-radius: 50%;
  animation: share-capture-spin 0.9s linear infinite;
}

.share-capture__panel > header,
.share-capture__panel > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #fffbf4;
}

.share-capture__panel > header {
  border-bottom: 1px solid #eadfce;
}

.share-capture__panel > header div {
  display: grid;
}

.share-capture__panel > header strong {
  color: #493b32;
  font-size: 15px;
}

.share-capture__panel > header small {
  margin-top: 2px;
  color: #93877b;
  font-size: 11px;
}

.share-capture__panel > header button {
  width: 34px;
  height: 34px;
  color: #67584c;
  font-size: 25px;
  border: 0;
  background: transparent;
}

.share-capture__image-wrap {
  min-height: 160px;
  overflow: auto;
  background: #e8e1d7;
}

.share-capture__image-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

.share-capture__panel > footer {
  gap: 12px;
  border-top: 1px solid #eadfce;
}

.share-capture__save {
  flex: 1;
  height: 42px;
  color: #fffaf2;
  font-size: 14px;
  font-weight: 600;
  border: 0;
  border-radius: 21px;
  background: #9a7340;
}

.share-render-host {
  position: fixed;
  top: 0;
  left: -10000px;
  z-index: -1;
  overflow: visible;
  pointer-events: none;
  background: var(--bg);
}

.share-render-root {
  width: 390px;
  max-width: 390px;
  min-height: 1px;
  overflow: visible !important;
  background: var(--bg);
  box-shadow: none !important;
}

.share-render-root *,
.share-render-root *::before,
.share-render-root *::after {
  max-width: 100%;
  animation: none !important;
  transition: none !important;
  caret-color: transparent !important;
}

.share-render-root .screen,
.share-render-root .screen--tabbed,
.share-render-root .official-fortune-preview,
.share-render-root .analysis-preview,
.share-render-root .match-preview,
.share-render-root .destiny-preview,
.share-render-root.preview-modal__panel {
  min-height: auto;
  max-height: none;
  overflow: visible !important;
}

.share-render-root .screen,
.share-render-root .screen--plain,
.share-render-root .screen--tabbed,
.share-render-root.preview-modal__panel {
  padding-bottom: 28px;
}

.share-render-root .official-fortune-preview__features,
.share-render-root .report-list,
.share-render-root .match-result-preview__sections,
.share-render-root .analysis-preview__report-section,
.share-render-root .destiny-detail-preview__sections {
  break-inside: avoid;
}

.share-render-root img,
.share-render-root canvas,
.share-render-root svg {
  max-width: 100%;
}

.share-capture-promo {
  display: grid;
  grid-template-columns: 1fr 88px;
  gap: 16px;
  align-items: center;
  margin: 22px 18px 4px;
  padding: 16px;
  border: 1px solid rgba(154, 115, 64, .2);
  border-radius: 16px;
  background:
    radial-gradient(circle at 16% 12%, rgba(191, 154, 94, .16), transparent 30%),
    linear-gradient(135deg, #fffaf2 0%, #f6ead9 100%);
  box-shadow: 0 12px 30px rgba(93, 70, 48, .08);
}

.share-capture-promo__copy {
  min-width: 0;
}

.share-capture-promo__copy span {
  display: block;
  color: #a77b43;
  font-size: 11px;
  line-height: 1.35;
}

.share-capture-promo__copy strong {
  display: block;
  margin-top: 5px;
  color: #3f342d;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0;
}

.share-capture-promo__copy p {
  margin: 8px 0 0;
  color: #6f6258;
  font-size: 11px;
  line-height: 1.65;
}

.share-capture-promo__copy small {
  display: block;
  margin-top: 7px;
  color: #a19489;
  font-size: 9px;
  line-height: 1.5;
}

.share-capture-promo__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.share-capture-promo__qr img {
  display: block;
  width: 78px;
  height: 78px;
  padding: 6px;
  border: 1px solid rgba(154, 115, 64, .22);
  border-radius: 12px;
  background: #fffdf8;
  object-fit: contain;
}

.share-capture-promo__qr em {
  color: #8b6a43;
  font-size: 10px;
  font-style: normal;
  line-height: 1;
}

@keyframes share-capture-spin {
  to { transform: rotate(360deg); }
}

.destiny-detail-preview__hero {
  position: relative;
  min-height: 172px;
  padding: 24px 20px;
  overflow: hidden;
  border-radius: 14px;
  background: #f2e4d2;
}

.destiny-detail-preview__hero img { position: absolute; right: 4px; bottom: 0; width: 120px; height: 120px; object-fit: contain; opacity: .25; }
.destiny-detail-preview__hero small,
.destiny-detail-preview__hero h2,
.destiny-detail-preview__hero p { position: relative; z-index: 1; max-width: 250px; }
.destiny-detail-preview__hero small { color: #a57e4e; font-size: 11px; }
.destiny-detail-preview__hero h2 { margin: 8px 0 0; color: #6b4d32; font-size: 20px; }
.destiny-detail-preview__hero p { color: #7d6755; font-size: 12px; line-height: 1.7; }
.destiny-detail-preview__metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 12px; padding: 14px 7px; border: 1px solid #eadfd3; border-radius: 11px; background: #fffdf8; }
.destiny-detail-preview__metrics div { text-align: center; border-right: 1px solid #eee2d6; }
.destiny-detail-preview__metrics div:last-child { border-right: 0; }
.destiny-detail-preview__metrics small,
.destiny-detail-preview__metrics strong { display: block; }
.destiny-detail-preview__metrics small { color: #a39384; font-size: 10px; }
.destiny-detail-preview__metrics strong { margin-top: 4px; color: #8f673d; font-size: 14px; }
.destiny-detail-preview__sections article { margin-top: 10px; padding: 15px 14px; border: 1px solid #eadfd3; border-radius: 10px; background: #fffdf9; }
.destiny-detail-preview__sections h3 { display: flex; align-items: center; gap: 7px; margin: 0; color: #8f673d; font-size: 14px; }
.destiny-detail-preview__sections h3 i { display: grid; place-items: center; width: 18px; height: 18px; color: #fff; font-size: 9px; font-style: normal; border-radius: 50%; background: #b48a57; }
.destiny-detail-preview__sections p { margin: 8px 0 0; color: #6f6156; font-size: 12px; line-height: 1.75; }
.destiny-detail-preview__report { margin-top: 18px; }

.match-result-preview__people { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 80px 1fr; gap: 10px; align-items: center; margin-top: 18px; }
.match-result-preview__people > span { display: flex; flex-direction: column; align-items: center; gap: 5px; color: #766354; font-size: 11px; }
.match-result-preview__people img { width: 54px; height: 54px; padding: 9px; border-radius: 50%; background: #fffdf8; }
.match-result-preview__people > b { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80px; height: 80px; color: #fffaf2; border: 5px solid #ead8c0; border-radius: 50%; background: #b48a57; }
.match-result-preview__people > b strong { font-size: 28px; }
.match-result-preview__people > b small { font-size: 10px; font-weight: 400; }
.match-result-preview__level { position: relative; z-index: 1; margin: 14px 0 0; color: #8f673d; font-family: Georgia, 'STSong', serif; font-size: 20px; text-align: center; }
.match-result-preview__summary { position: relative; z-index: 1; margin: 12px 0 0; padding: 13px 14px; color: #6f6156; font-size: 12px; line-height: 1.75; border: 1px solid #e9dfd4; border-radius: 10px; background: rgba(255,253,248,.92); }
.match-result-preview__dimensions { position: relative; z-index: 1; margin-top: 12px; padding: 14px; border: 1px solid #e9dfd4; border-radius: 10px; background: rgba(255,253,248,.92); }
.match-result-preview__dimensions > div + div { margin-top: 11px; }
.match-result-preview__dimensions span { display: flex; justify-content: space-between; color: #705d4d; font-size: 11px; }
.match-result-preview__dimensions em { font-style: normal; }
.match-result-preview__dimensions > div > i { display: block; height: 5px; margin-top: 5px; overflow: hidden; border-radius: 5px; background: #eee5dc; }
.match-result-preview__dimensions u { display: block; height: 100%; text-decoration: none; border-radius: inherit; background: #b48a57; }
.match-result-preview__sections { position: relative; z-index: 1; }
.match-result-preview__sections article { margin-top: 10px; padding: 14px; border: 1px solid #e9dfd4; border-radius: 10px; background: rgba(255,253,248,.92); }
.match-result-preview__sections h3 { display: flex; align-items: center; gap: 6px; margin: 0; color: #8f673d; font-size: 14px; }
.match-result-preview__sections h3 i { display: grid; place-items: center; width: 18px; height: 18px; color: #fff; font-size: 9px; font-style: normal; border-radius: 50%; background: #b48a57; }
.match-result-preview__sections p { margin: 8px 0 0; color: #6f6156; font-size: 12px; line-height: 1.75; }

.official-subpage {
  position: relative;
  min-height: 100%;
  padding: 12px 16px 84px;
  color: #55483e;
  background: #fffaf2;
}

.activity-preview__list { display: grid; grid-template-columns: minmax(0,1fr); gap: 9px; margin-top: 12px; }
.activity-preview__list > button { display: grid; grid-template-columns: 40% minmax(0,1fr); grid-template-rows: 1fr; min-width: 0; min-height: 110px; padding: 0; overflow: hidden; color: #46392f; text-align: left; border: 1px solid rgba(155,126,85,.18); border-radius: 9px; background: #fffaf1; box-shadow: 0 4px 12px rgba(84,59,34,.07); }
.activity-preview__list > button::after { display: none; }
.activity-preview__list img { display: block; width: 100%; height: 100%; min-height: 74px; object-fit: cover; }
.activity-preview__list span { display: flex; box-sizing: border-box; min-width: 0; min-height: 0; padding: 9px; flex-direction: column; justify-content: flex-start; background: #fffaf1; }
.activity-preview__list b,
.activity-preview__list small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; }
.activity-preview__list b { color: #45372d; font-family: Georgia,'STSong',serif; font-size: 14px; line-height: 1.35; -webkit-line-clamp: 2; text-wrap: balance; }
.activity-preview__list small { margin-top: 5px; color: #746456; font-size: 10px; line-height: 1.5; -webkit-line-clamp: 2; text-wrap: balance; }
.activity-preview__list em { width: fit-content; min-height: 19px; margin-top: 8px; padding: 1px 7px; color: #6e512e; font-size: 9px; font-style: normal; line-height: 1.8; border-radius: 4px; background: rgba(255,251,243,.78); }
.activity-preview__list > button:active { opacity: .86; transform: translateY(1px); }

.archive-preview::before { position: absolute; inset: 0 0 auto; height: 260px; opacity: .07; background: url('assets/home-hero.jpg') center/cover; content: ''; pointer-events: none; }
.archive-preview > * { position: relative; z-index: 1; }
.archive-preview__search { height: 38px; margin-top: 12px; padding: 0 14px; color: #aaa198; font-size: 11px; line-height: 38px; border-radius: 20px; background: rgba(255,255,255,.78); }
.archive-preview__list { margin-top: 10px; }
.archive-preview__list button { display: grid; grid-template-columns: 22px 1fr 42px; gap: 8px; align-items: center; width: 100%; padding: 13px; text-align: left; border: 1px solid #eadfd5; border-radius: 9px; background: rgba(255,255,255,.86); }
.archive-preview__list i { width: 18px; height: 18px; border: 1px solid #c4b3a1; border-radius: 50%; }
.archive-preview__list i.is-selected { border: 5px solid #c7a177; }
.archive-preview__list b,
.archive-preview__list small { display: block; }
.archive-preview__list b { font-size: 13px; }
.archive-preview__list small,
.archive-preview__list em { color: #8f8378; font-size: 10px; font-style: normal; }
.archive-preview__complete { width: 72%; margin: 22px auto 0; }
.archive-preview__avatar { display: block; width: 90px; height: 90px; margin: 18px auto; opacity: .72; }
.archive-preview__form { display: grid; gap: 9px; }
.archive-preview__form label { display: grid; grid-template-columns: 86px 1fr; align-items: center; min-height: 48px; padding: 0 14px; border: 1px solid #e9dfd4; border-radius: 9px; background: rgba(255,255,255,.86); }
.archive-preview__form b { font-size: 13px; }
.archive-preview__form input,
.archive-preview__form select { width: 100%; color: #8f8378; font-size: 12px; text-align: right; border: 0; background: transparent; }
.archive-preview__form .official-gold-button { width: 72%; margin: 18px auto 0; }

.wallet-preview__user { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.wallet-preview__user img { width: 44px; height: 44px; }
.wallet-preview__user span { flex: 1; }
.wallet-preview__user b,
.wallet-preview__user small { display: block; }
.wallet-preview__user b { font-size: 14px; }
.wallet-preview__user small { color: #9e9287; font-size: 10px; }
.wallet-preview__user em { padding: 4px 7px; color: #6b431d; font-size: 10px; font-style: normal; border-radius: 5px; background: #e4bc82; }
.wallet-preview__balance { margin-top: 16px; padding: 18px 14px; border-radius: 15px; background: #f2e4dc; }
.wallet-preview__balance > strong { display: block; color: #a77c4d; font-size: 28px; text-align: center; }
.wallet-preview__balance > strong small { margin-right: 4px; font-size: 13px; }
.wallet-preview__balance > div { display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; text-align: center; }
.wallet-preview__balance span { color: #8c7d70; font-size: 11px; }
.wallet-preview__balance span:first-child { border-right: 1px solid #d9c7ba; }
.wallet-preview__balance span b { display: block; margin-top: 3px; }
.wallet-preview > h2 { color: #9a7340; font-size: 15px; }
.wallet-preview__records > div { display: flex; align-items: center; justify-content: space-between; min-height: 46px; border-bottom: 1px solid #dcc9a9; }
.wallet-preview__records b,
.wallet-preview__records small { display: block; }
.wallet-preview__records b { font-size: 12px; }
.wallet-preview__records small { color: #a2978d; font-size: 9px; }
.wallet-preview__records > div > strong { color: #b48a57; font-size: 14px; }
.wallet-preview > .official-gold-button { margin-top: 22px; }
.wallet-preview__notice { color: #9f958c; font-size: 10px; text-align: center; }

.account-preview section { margin-top: 14px; }
.account-preview section h2 { margin: 0; color: #aaa39c; font-size: 11px; font-weight: 400; }
.account-preview section button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; text-align: left; border: 0; border-bottom: 1px solid #eee; background: transparent; }
.account-preview section button b { font-size: 13px; }
.account-preview section button span { color: #8d8782; font-size: 11px; }
.account-preview section button em { margin-left: 8px; color: #25211e; font-size: 20px; font-style: normal; }
.account-preview > p { margin-top: 34px; color: #aaa39c; font-size: 10px; text-align: center; }

.about-preview { background: #f7f7f7; }
.about-preview__logo { display: block; width: 96px; height: 96px; margin: 36px auto 0; padding: 18px; border-radius: 12px; background: #ead9bf; }
.about-preview > h2 { margin: 12px 0 0; font-size: 20px; text-align: center; }
.about-preview > p { margin: 6px 0 0; color: #77716c; font-size: 13px; text-align: center; }
.about-preview__menu { margin-top: 34px; overflow: hidden; border-radius: 10px; background: #fff; }
.about-preview__menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 50px; padding: 0 14px; font-size: 13px; border: 0; border-bottom: 1px solid #eee; background: transparent; }
.about-preview__menu button:last-child { border-bottom: 0; }
.about-preview__menu em { font-size: 20px; font-style: normal; }
.about-preview footer { margin-top: 120px; color: #a7a19b; font-size: 10px; line-height: 1.6; text-align: center; }

.shop-preview__hero { margin-top: 12px; padding: 22px 18px; color: #fff9ef; border-radius: 14px; background: #9a7340; }
.shop-preview__hero h2 { margin: 0; font-family: Georgia, 'STSong', serif; font-size: 20px; }
.shop-preview__hero p { margin: 6px 0 0; color: rgba(255,249,239,.74); font-size: 10px; }
.shop-preview__list { display: grid; gap: 10px; margin-top: 14px; }
.shop-preview__list button { display: grid; grid-template-columns: 66px 1fr 16px; gap: 12px; align-items: center; width: 100%; padding: 9px; text-align: left; border: 1px solid #e9ddce; border-radius: 10px; background: #fffdf8; }
.shop-preview__list img { width: 66px; height: 66px; object-fit: cover; border-radius: 7px; }
.shop-preview__list b,
.shop-preview__list small { display: block; }
.shop-preview__list b { color: #493d34; font-size: 14px; }
.shop-preview__list small { margin-top: 4px; color: #95877b; font-size: 10px; }
.shop-preview__list em { color: #b19677; font-size: 20px; font-style: normal; }

.official-profile-preview {
  padding-top: 18px;
  background: #fffaf2;
}

.official-profile-preview__identity { display: flex; align-items: center; gap: 10px; }
.official-profile-preview__identity img { width: 52px; height: 52px; }
.official-profile-preview__identity span { flex: 1; }
.official-profile-preview__identity strong,
.official-profile-preview__identity small { display: block; }
.official-profile-preview__identity strong { color: #8f673d; font-size: 16px; }
.official-profile-preview__identity small { margin-top: 3px; color: #9b9188; font-size: 10px; }
.official-profile-preview__identity em { padding: 5px 8px; color: #6b431d; font-size: 10px; font-style: normal; border-radius: 5px; background: #e4bc82; }
.official-profile-preview__vip { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 18px; padding: 14px 16px; color: #6b431d; text-align: left; border: 0; border-radius: 12px; background: #efd9a6; }
.official-profile-preview__vip b,
.official-profile-preview__vip small { display: block; }
.official-profile-preview__vip b { font-size: 14px; }
.official-profile-preview__vip small { margin-top: 3px; font-size: 10px; }
.official-profile-preview__vip > strong { padding: 7px 10px; color: #fff6e7; font-size: 10px; border-radius: 18px; background: #8d5b1e; }
.official-profile-preview__menu { margin-top: 18px; padding: 4px 14px; border: 1px solid #eee3d8; border-radius: 12px; background: #fffdf9; }
.official-profile-preview__menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; font-size: 14px; text-align: left; border: 0; border-bottom: 1px solid #eee5dd; background: transparent; }
.official-profile-preview__menu button:last-child { border-bottom: 0; }
.official-profile-preview__menu em { color: #aaa097; font-size: 20px; font-style: normal; }
.official-profile-preview__legal { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.official-profile-preview__legal button { color: #8f8378; font-size: 10px; border: 0; background: transparent; }

.membership-screen--official {
  background: #fffaf1;
}

.member-official-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px 20px;
}

.member-official-profile img {
  width: 50px;
  height: 50px;
}

.member-official-profile span {
  flex: 1;
  min-width: 0;
}

.member-official-profile b,
.member-official-profile small {
  display: block;
}

.member-official-profile b {
  display: inline-block;
  color: #8f673d;
  font-size: 15px;
}

.member-official-profile strong {
  display: inline-block;
  margin-left: 7px;
  padding: 4px 7px;
  color: #68421f;
  font-size: 9px;
  border-radius: 4px;
  background: #e6bf86;
}

.member-official-profile small {
  margin-top: 5px;
  color: #9b9188;
  font-size: 10px;
}

.member-official-panel {
  padding: 18px 14px 15px;
  border: 1px solid #eee2d4;
  border-radius: 12px;
  background: #fffdf9;
  box-shadow: 0 8px 24px rgba(98, 75, 48, .07);
}

.member-official-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.member-official-plan {
  position: relative;
  min-width: 0;
  min-height: 110px;
  padding: 22px 4px 10px;
  color: #8f8378;
  border: 1px solid transparent;
  border-radius: 9px;
  background: #fffdf8;
}

.member-official-plan.is-selected {
  color: #7d5b32;
  border-color: #a77b42;
}

.member-official-plan em,
.member-official-plan b,
.member-official-plan strong,
.member-official-plan del {
  display: block;
}

.member-official-plan em {
  position: absolute;
  inset: 0 0 auto;
  overflow: hidden;
  padding: 3px 1px;
  color: #fff9ef;
  font-size: 8px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 8px 8px 0 0;
  background: #b66c62;
}

.member-official-plan b {
  font-size: 12px;
}

.member-official-plan strong {
  margin-top: 9px;
  font-size: 19px;
}

.member-official-plan strong small {
  font-size: 10px;
}

.member-official-plan del {
  margin-top: 2px;
  color: #aaa097;
  font-size: 9px;
}

.member-official-open {
  display: block;
  width: 84%;
  min-height: 46px;
  margin: 20px auto 0;
  color: #fff9ef;
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  background: #b48a57;
}

.member-official-agreement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 12px;
  color: #9b9188;
  font-size: 9px;
  border: 0;
  background: transparent;
}

.member-official-agreement i {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  color: #fff;
  font-size: 9px;
  font-style: normal;
  border: 1px solid #d4c8ba;
  border-radius: 50%;
}

.member-official-agreement i.is-checked {
  border-color: #a77b42;
  background: #a77b42;
}

.member-official-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 28px 0 14px;
  color: #8d6630;
  font-size: 16px;
  font-weight: 700;
}

.member-official-divider::before,
.member-official-divider::after {
  flex: 1;
  height: 1px;
  content: '';
  background: #c5a46d;
}

.member-official-comparison {
  overflow: hidden;
  font-size: 10px;
  border: 1px solid #bd9157;
  border-radius: 10px;
}

.member-official-comparison > div {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  background: #fffdf9;
}

.member-official-comparison > div + div {
  border-top: 1px solid #ede1d3;
}

.member-official-comparison > div span {
  display: grid;
  min-height: 39px;
  place-items: center;
  padding: 6px 4px;
  color: #746c64;
  text-align: center;
}

.member-official-comparison > div span + span {
  border-left: 1px solid #ede1d3;
}

.member-official-comparison > div span:first-child {
  justify-items: start;
  padding-left: 10px;
  color: #4f443b;
  font-weight: 600;
}

.member-official-comparison .member-official-comparison__head {
  color: #fff9ef;
  font-weight: 700;
  background: #b48a57;
}

.member-official-comparison .member-official-comparison__head span {
  color: #fff9ef;
}

.assistant-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-bottom: 0;
  background: #fffaf1;
}

.assistant-preview__header {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  flex: 0 0 50px;
  align-items: center;
  border-bottom: 1px solid rgba(154, 115, 64, .12);
}

.assistant-preview__tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
}

.assistant-preview__tabs button {
  position: relative;
  padding: 13px 7px;
  color: #b1a79f;
  font-size: 15px;
  border: 0;
  background: transparent;
}

.assistant-preview__tabs button.is-active {
  color: #3e342c;
  font-weight: 700;
}

.assistant-preview__tabs button.is-active::after {
  position: absolute;
  right: 7px;
  bottom: 5px;
  left: 7px;
  height: 3px;
  content: '';
  border-radius: 3px;
  background: #b48a57;
}

.assistant-preview__exit {
  justify-self: center;
  min-width: 44px;
  padding: 7px 8px;
  color: #8f673d;
  font-size: 12px;
  border: 0;
  background: transparent;
}

.assistant-preview__identity {
  display: flex;
  flex: 0 0 74px;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(154, 115, 64, .1);
  background: rgba(255, 253, 249, .92);
}

.assistant-preview__mark {
  display: block;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.assistant-preview__identity strong,
.assistant-preview__identity p {
  display: block;
}

.assistant-preview__identity strong {
  color: #6e512f;
  font-size: 15px;
}

.assistant-preview__identity p {
  margin: 3px 0 0;
  color: #9a9189;
  font-size: 10px;
  line-height: 1.45;
}

.assistant-preview__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 110px;
}

.assistant-preview__intro {
  padding: 18px 16px 7px;
}

.assistant-preview__intro > strong {
  display: block;
  color: #8b6634;
  font-size: 13px;
}

.assistant-preview__intro button {
  display: block;
  width: auto;
  max-width: 100%;
  margin-top: 10px;
  padding: 7px 10px;
  overflow: hidden;
  color: #9a7340;
  font-size: 11px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid rgba(154, 115, 64, .17);
  border-radius: 7px;
  background: #fffdf9;
}

.assistant-preview__messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 16px 16px;
}

.assistant-preview__message {
  max-width: 82%;
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.65;
  border-radius: 10px;
}

.assistant-preview__message.is-user {
  align-self: flex-end;
  color: #fff9ef;
  background: #9a7340;
}

.assistant-preview__message.is-assistant {
  align-self: flex-start;
  color: #5f4d3f;
  border: 1px solid rgba(154, 115, 64, .17);
  background: #fffdf9;
}

.assistant-preview__message.is-loading {
  min-width: 52px;
  min-height: 32px;
}

.assistant-preview__message.is-error {
  color: #8f665a;
  border-color: rgba(143, 102, 90, .22);
  background: #fff8f3;
}

.assistant-preview__message.is-status {
  color: #7d6f62;
  border-style: dashed;
  background: #fbf5eb;
}

.assistant-preview__message:not(.is-image) {
  white-space: pre-line;
}

.assistant-preview__message.is-profile {
  border-color: rgba(154, 115, 64, .28);
  background: #f6ecdd;
}

.assistant-preview__message.is-image {
  width: 148px;
  padding: 6px;
  background: #fffdf9;
}

.assistant-preview__message.is-image img,
.assistant-preview__message.is-image small {
  display: block;
}

.assistant-preview__message.is-image img {
  width: 100%;
  max-height: 176px;
  object-fit: cover;
  border-radius: 6px;
}

.assistant-preview__message.is-image small {
  margin-top: 5px;
  overflow: hidden;
  color: #8f8378;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-preview__study-list {
  padding: 16px;
}

.assistant-preview__study-heading {
  margin-bottom: 12px;
}

.assistant-preview__study-heading span,
.assistant-preview__study-heading strong {
  display: block;
}

.assistant-preview__study-heading span {
  color: #9a7340;
  font-family: Georgia, "STSong", serif;
  font-size: 20px;
}

.assistant-preview__study-heading strong {
  margin-top: 4px;
  color: #9a9189;
  font-size: 10px;
  font-weight: 400;
}

.assistant-preview__study-list > button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 12px;
  gap: 10px;
  align-items: start;
  width: 100%;
  min-height: 92px;
  padding: 14px 4px;
  color: #5f4d3f;
  text-align: left;
  border: 0;
  border-bottom: 1px solid rgba(154, 115, 64, .15);
  background: transparent;
}

.assistant-preview__study-list > button em {
  color: #c5a77d;
  font-family: Georgia, serif;
  font-size: 12px;
  font-style: normal;
}

.assistant-preview__study-list > button b,
.assistant-preview__study-list > button small,
.assistant-preview__study-list > button p {
  display: block;
}

.assistant-preview__study-list > button b {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.assistant-preview__study-list > button small {
  margin-top: 3px;
  color: #b19677;
  font-size: 9px;
}

.assistant-preview__study-list > button p {
  display: -webkit-box;
  margin: 7px 0 0;
  overflow: hidden;
  color: #8f8378;
  font-size: 10px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.assistant-preview__study-list > button i {
  align-self: center;
  color: #b9aa9b;
  font-size: 20px;
  font-style: normal;
}

.assistant-preview__study-detail {
  padding: 14px 18px 24px;
}

.assistant-preview__study-back {
  margin: 0 0 18px -7px;
  padding: 6px 7px;
  color: #9a7340;
  font-size: 11px;
  border: 0;
  background: transparent;
}

.assistant-preview__study-detail > small {
  color: #b19677;
  font-size: 9px;
}

.assistant-preview__study-detail h2 {
  margin: 6px 0 16px;
  color: #5f4d3f;
  font-family: Georgia, "STSong", serif;
  font-size: 22px;
}

.assistant-preview__study-detail > p {
  margin: 0 0 14px;
  color: #65584e;
  font-size: 12px;
  line-height: 1.9;
  text-align: justify;
}

.assistant-preview__notice {
  position: absolute;
  right: 16px;
  bottom: 116px;
  left: 16px;
  color: #aaa097;
  font-size: 9px;
  text-align: center;
}

.assistant-preview__composer {
  position: absolute;
  right: 12px;
  bottom: 68px;
  left: 12px;
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  gap: 7px;
  align-items: center;
}

.assistant-preview__composer input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  color: #5f4d3f;
  font-size: 12px;
  border: 1px solid rgba(154, 115, 64, .17);
  border-radius: 9px;
  background: #fffdf9;
  box-shadow: 0 5px 18px rgba(98, 75, 48, .06);
}

.assistant-preview__composer button {
  padding: 0;
  color: #a87c3f;
  font-size: 20px;
  border: 0;
  background: transparent;
}

.assistant-preview__composer button:disabled,
.assistant-preview__composer input:disabled,
.assistant-preview__intro button:disabled {
  cursor: default;
  opacity: .48;
}

.assistant-preview__tools {
  position: absolute;
  inset: 0;
  z-index: 45;
}

.assistant-preview__tools-mask {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: rgba(62, 52, 44, .28);
}

.assistant-preview__tools section {
  position: absolute;
  right: 0;
  bottom: var(--tabbar-height);
  left: 0;
  padding: 12px 16px 18px;
  border-radius: 8px 8px 0 0;
  background: #fffaf1;
  box-shadow: 0 -8px 24px rgba(75, 55, 37, .12);
}

.assistant-preview__tools header,
.assistant-preview__tools section > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.assistant-preview__tools header {
  min-height: 38px;
  color: #5f4d3f;
  font-size: 14px;
}

.assistant-preview__tools header button {
  width: 32px;
  height: 32px;
  padding: 0;
  color: #9a9189;
  font-size: 18px;
  border: 0;
  background: transparent;
}

.assistant-preview__tools section > button {
  width: 100%;
  min-height: 58px;
  padding: 7px 2px;
  color: #5f4d3f;
  text-align: left;
  border: 0;
  border-top: 1px solid rgba(154, 115, 64, .12);
  background: transparent;
}

.assistant-preview__tools section > button b,
.assistant-preview__tools section > button small {
  display: block;
}

.assistant-preview__tools section > button b {
  font-size: 12px;
}

.assistant-preview__tools section > button small {
  margin-top: 3px;
  color: #9a9189;
  font-size: 9px;
}

.assistant-preview__tools section > button em {
  color: #b9aa9b;
  font-size: 20px;
  font-style: normal;
}

.preview-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 16px;
}

.preview-modal__actions .btn {
  min-width: 0;
  padding-right: 8px;
  padding-left: 8px;
}