:root {
  --bg: #120d25;
  --bg-2: #2f2848;
  --card: rgba(36, 30, 52, 0.78);
  --card-2: rgba(72, 61, 100, 0.68);
  --line: rgba(207, 194, 255, 0.22);
  --line-bright: rgba(157, 125, 255, 0.55);
  --text: #fffaf8;
  --muted: #a69bb9;
  --soft: #d4c8ff;
  --glass-panel: rgba(32, 24, 51, 0.7);
  --glass-panel-strong: rgba(38, 30, 58, 0.78);
  --glass-line: rgba(246, 241, 255, 0.2);
  --glass-light: rgba(255, 255, 255, 0.095);
  --glass-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
  --purple: #7644ff;
  --purple-2: #b09dff;
  --gold: #f3d06b;
  --wood: #9ae556;
  --fire: #ff5454;
  --earth: #df8f3c;
  --metal: #ffd949;
  --water: #5ed0ff;
  font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overscroll-behavior: none;
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 12%, rgba(120, 82, 255, 0.35), transparent 28%),
    radial-gradient(circle at 82% 3%, rgba(50, 172, 255, 0.18), transparent 22%),
    linear-gradient(180deg, #080615 0%, #1c1438 48%, #100a24 100%);
  display: grid;
  place-items: center;
  overscroll-behavior: none;
  touch-action: pan-y;
}

body.overlay-scroll-locked {
  overflow: hidden !important;
}

.wechat-share-cover {
  position: fixed !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip-path: inset(50%) !important;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.phone-shell {
  position: relative;
  width: min(100vw, 430px);
  max-width: 100dvw;
  min-height: 100vh;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(9, 6, 22, 0.12), transparent 28%, rgba(8, 6, 18, 0.44) 100%),
    radial-gradient(ellipse at 50% 18%, rgba(243, 208, 107, 0.18), transparent 28%),
    radial-gradient(ellipse at 50% 72%, rgba(92, 174, 255, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(23, 15, 45, 0.92), rgba(47, 40, 72, 0.96));
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.42);
}

.phone-shell::before {
  content: none;
}

.phone-shell::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: clamp(52px, 9vh, 90px);
  left: 50%;
  width: min(330px, 78vw);
  height: min(520px, 72vh);
  pointer-events: none;
  transform: translateX(-50%);
  opacity: 0.28;
  background:
    radial-gradient(ellipse at 50% 32%, rgba(243, 208, 107, 0.13), transparent 46%),
    radial-gradient(ellipse at 50% 72%, rgba(94, 208, 255, 0.12), transparent 48%),
    linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.035) 46%, transparent 54%);
  filter: drop-shadow(0 0 22px rgba(243, 208, 107, 0.08));
  animation: tai-vision 12s ease-in-out infinite alternate;
}

.screen {
  position: relative;
  z-index: 1;
  display: none;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  padding: 48px 18px 34px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.phone-shell.overlay-scroll-locked > .screen.active,
.phone-shell.overlay-scroll-locked .module-stage {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.screen.active {
  display: block;
  animation: rise-in 360ms ease both;
}

.wechat-share-cover {
  display: none !important;
}

.login-screen {
  padding: clamp(34px, 6.5vh, 70px) 22px 30px;
}

.login-screen.active {
  display: grid;
  align-content: center;
  min-height: 100vh;
}

.web-home-nav,
.web-home-kicker,
.web-home-actions,
.web-home-feature-grid,
.web-home-auth-heading {
  display: none;
}

.star-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(1px);
  opacity: 0.72;
  animation: orb-breathe 8s ease-in-out infinite alternate;
}

.orb-one {
  top: 40px;
  right: -72px;
  width: 190px;
  height: 190px;
  background: radial-gradient(circle, rgba(151, 113, 255, 0.62), transparent 67%);
}

.orb-two {
  bottom: 80px;
  left: -88px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(86, 202, 255, 0.24), transparent 65%);
  animation-duration: 10s;
  animation-delay: -2s;
}

.tai-earth,
.tai-sky,
.tai-hexagram,
.tai-brand {
  position: relative;
}

.tai-earth,
.tai-sky {
  position: absolute;
  left: 14px;
  right: 14px;
  pointer-events: none;
}

.tai-earth {
  top: 16px;
  height: 42px;
  z-index: 2;
  border-radius: 42px 42px 16px 16px;
  background:
    radial-gradient(ellipse at 50% 96%, rgba(243, 208, 107, 0.32), transparent 46%),
    linear-gradient(160deg, transparent 0 27%, rgba(243, 208, 107, 0.64) 27.5% 29%, transparent 29.5% 100%),
    linear-gradient(24deg, transparent 0 34%, rgba(255, 241, 180, 0.46) 34.4% 36%, transparent 36.6% 100%),
    linear-gradient(180deg, rgba(119, 77, 30, 0.2), rgba(243, 208, 107, 0.12));
  clip-path: polygon(0 76%, 14% 58%, 26% 69%, 40% 35%, 55% 62%, 67% 44%, 82% 67%, 100% 50%, 100% 100%, 0 100%);
  filter: drop-shadow(0 6px 12px rgba(243, 208, 107, 0.14));
}

.tai-sky {
  bottom: 13px;
  height: 48px;
  z-index: 1;
  border-radius: 18px 18px 42px 42px;
  background:
    radial-gradient(ellipse at 42% 20%, rgba(255, 255, 255, 0.52), transparent 18%),
    radial-gradient(ellipse at 58% 36%, rgba(214, 236, 255, 0.32), transparent 28%),
    linear-gradient(180deg, rgba(123, 205, 255, 0.02), rgba(94, 208, 255, 0.18));
  clip-path: polygon(0 22%, 18% 32%, 34% 21%, 50% 34%, 66% 20%, 84% 32%, 100% 24%, 100% 100%, 0 100%);
}

.tai-hexagram {
  position: absolute;
  z-index: 3;
  inset: 22px 27px 29px;
  display: grid;
  align-content: center;
  gap: 5px;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(243, 208, 107, 0.2));
}

.tai-hexagram i {
  display: block;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 246, 207, 0.86), rgba(243, 208, 107, 0.92));
}

.tai-hexagram i:nth-child(-n + 3) {
  background:
    linear-gradient(90deg, rgba(255, 246, 207, 0.86), rgba(243, 208, 107, 0.92)) left / 42% 100% no-repeat,
    linear-gradient(90deg, rgba(243, 208, 107, 0.88), rgba(255, 246, 207, 0.82)) right / 42% 100% no-repeat;
}

.tai-hexagram i:nth-child(n + 4) {
  background: linear-gradient(90deg, rgba(225, 244, 255, 0.9), rgba(94, 208, 255, 0.66), rgba(225, 244, 255, 0.86));
}

.tai-brand {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  color: rgba(255, 250, 248, 0.94);
  font-size: 17px;
  font-weight: 950;
  letter-spacing: 0.14em;
  line-height: 1;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.42), 0 0 14px rgba(243, 208, 107, 0.16);
  white-space: nowrap;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--soft);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 16px;
  font-size: 44px;
  text-align: center;
  letter-spacing: 0.08em;
}

.login-screen .eyebrow {
  width: fit-content;
  margin: 0 auto 14px;
  padding: 5px 12px;
  border: 1px solid rgba(246, 241, 255, 0.14);
  border-radius: 999px;
  color: rgba(239, 232, 255, 0.78);
  background: rgba(18, 13, 37, 0.24);
  letter-spacing: 0.18em;
  backdrop-filter: blur(14px);
}

.login-screen h1 {
  margin-bottom: 14px;
  font-size: clamp(40px, 11vw, 56px);
  line-height: 1.06;
  text-shadow: 0 10px 36px rgba(0, 0, 0, 0.28);
}

h2 {
  margin-bottom: 0;
  font-size: 28px;
  letter-spacing: 0.05em;
}

h3 {
  margin-bottom: 12px;
  font-size: 24px;
}

h4 {
  margin-bottom: 8px;
  font-size: 20px;
}

.lead {
  max-width: 320px;
  margin: 0 auto 26px;
  color: rgba(230, 222, 255, 0.72);
  line-height: 1.8;
  text-align: center;
  font-size: 17px;
}

.auth-card,
.panel {
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.025) 46%, rgba(255, 255, 255, 0.055)),
    var(--card);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px) saturate(1.14);
}

.auth-card {
  display: grid;
  position: relative;
  max-width: 344px;
  margin: 0 auto;
  gap: 15px;
  padding: 20px;
  overflow: hidden;
}

.auth-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 38%),
    radial-gradient(circle at 50% 0, rgba(243, 208, 107, 0.12), transparent 42%);
  pointer-events: none;
}

.auth-card > * {
  position: relative;
  z-index: 1;
}

.auth-method-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 5px;
  border: 1px solid rgba(246, 241, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
}

.auth-card.single-auth-method .auth-method-tabs {
  grid-template-columns: 1fr;
}

.auth-method-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  color: rgba(246, 241, 255, 0.72);
  background: transparent;
  font-size: 13px;
  font-weight: 900;
}

.auth-method-tabs button.active {
  color: #241a38;
  background: linear-gradient(135deg, rgba(255, 217, 73, 0.94), rgba(246, 230, 165, 0.9));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.32), 0 8px 20px rgba(255, 217, 73, 0.14);
}

.auth-tip-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(246, 241, 255, 0.14);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 0, rgba(255, 217, 73, 0.13), transparent 42%),
    rgba(255, 255, 255, 0.058);
}

.auth-tip-card strong {
  color: rgba(255, 250, 232, 0.96);
  font-size: 15px;
}

.auth-tip-card small {
  color: rgba(230, 222, 255, 0.62);
  line-height: 1.65;
}

.sms-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 8px;
}

.sms-code-row .soft-btn {
  min-height: 46px;
  padding: 0 12px;
}

.human-check-row {
  display: grid;
  grid-template-columns: minmax(92px, auto) minmax(0, 1fr) 72px;
  gap: 8px;
  align-items: center;
}

.human-check-row strong {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 12px;
  border-radius: 16px;
  color: rgba(255, 236, 176, 0.94);
  background: rgba(255, 255, 255, 0.055);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.human-check-row input {
  min-width: 0;
}

.human-check-row .soft-btn {
  min-height: 46px;
  padding: 0 10px;
}

.password-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 62px;
  gap: 8px;
  align-items: center;
}

.password-input-row input {
  min-width: 0;
}

.password-visibility-btn {
  min-height: 46px;
  padding: 0 10px;
  border: 1px solid rgba(243, 208, 107, 0.24);
  border-radius: 16px;
  color: rgba(255, 236, 176, 0.94);
  background:
    radial-gradient(circle at 50% 0, rgba(243, 208, 107, 0.18), transparent 58%),
    rgba(255, 255, 255, 0.055);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

.password-visibility-btn[aria-pressed="true"] {
  color: #1f1733;
  background: linear-gradient(135deg, rgba(243, 208, 107, 0.96), rgba(255, 238, 188, 0.9));
}

.auth-secondary-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.auth-secondary-actions button {
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid rgba(246, 241, 255, 0.14);
  border-radius: 999px;
  color: rgba(246, 241, 255, 0.72);
  background: rgba(255, 255, 255, 0.045);
  font-size: 12px;
  font-weight: 900;
}

.wechat-login-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(154, 229, 86, 0.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0, rgba(154, 229, 86, 0.16), transparent 46%),
    radial-gradient(circle at 20% 100%, rgba(86, 202, 255, 0.12), transparent 38%),
    rgba(255, 255, 255, 0.055);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.08),
    0 18px 46px rgba(0, 0, 0, 0.16);
}

.wechat-login-panel::before {
  content: "";
  position: absolute;
  inset: -40% 18% auto;
  height: 120px;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(154, 229, 86, 0.22), transparent 64%);
  filter: blur(10px);
  opacity: 0.86;
}

.wechat-gate-heading {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 5px;
  text-align: center;
}

.wechat-gate-heading span {
  color: rgba(183, 255, 146, 0.9);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.18em;
}

.wechat-gate-heading strong {
  color: rgba(248, 255, 244, 0.92);
  font-size: 15px;
  line-height: 1.45;
}

.wechat-login-btn {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  align-items: center;
  justify-items: center;
  min-height: 76px;
  padding: 14px 18px;
  border: 1px solid rgba(191, 255, 157, 0.36);
  border-radius: 22px;
  color: rgba(246, 255, 240, 0.94);
  background:
    linear-gradient(135deg, rgba(33, 126, 69, 0.92), rgba(8, 85, 54, 0.96)),
    radial-gradient(circle at 50% 0, rgba(215, 255, 182, 0.32), transparent 58%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.2),
    0 16px 36px rgba(18, 132, 75, 0.26);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.wechat-login-btn::before {
  content: "入";
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(248, 255, 244, 0.34);
  border-radius: 999px;
  color: rgba(248, 255, 244, 0.96);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.16);
  font-size: 16px;
  font-weight: 950;
}

.wechat-login-btn:hover {
  transform: translateY(-1px);
  filter: saturate(1.05);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.24),
    0 22px 46px rgba(18, 132, 75, 0.32);
}

.wechat-login-btn span {
  font-size: 18px;
  font-weight: 950;
  line-height: 1.1;
}

.wechat-login-btn small {
  color: rgba(234, 255, 224, 0.76);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.wechat-qr-panel {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(154, 229, 86, 0.2);
  border-radius: 20px;
  background: rgba(6, 40, 31, 0.28);
}

.wechat-qr-code {
  display: grid;
  place-items: center;
  width: 146px;
  min-height: 146px;
  padding: 8px;
  border-radius: 12px;
  color: rgba(246, 255, 240, 0.86);
  background: rgba(255, 255, 255, 0.08);
  text-align: center;
  font-size: 13px;
  font-weight: 900;
}

.wechat-qr-code img {
  width: 130px;
  height: 130px;
  border-radius: 8px;
  background: #fff;
}

.wechat-qr-code a {
  color: inherit;
  text-decoration: none;
}

.wechat-qr-panel small {
  color: rgba(230, 255, 219, 0.68);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  line-height: 1.4;
}

label {
  display: grid;
  gap: 8px;
  color: rgba(230, 222, 255, 0.7);
  font-size: 14px;
  font-weight: 800;
}

input,
select {
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  color: var(--text);
  border: 1px solid rgba(246, 241, 255, 0.18);
  border-radius: 16px;
  outline: none;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06);
}

input::placeholder {
  color: rgba(214, 202, 255, 0.46);
}

select option {
  color: #1f1733;
}

.primary-btn,
.ghost-btn,
.soft-btn {
  min-height: 52px;
  border: 0;
  border-radius: 999px;
  color: var(--text);
  font-weight: 800;
  letter-spacing: 0.04em;
}

.primary-btn {
  background:
    radial-gradient(circle at 32% 0, rgba(255, 255, 255, 0.28), transparent 36%),
    linear-gradient(135deg, #743cff, #8352ff 52%, #ac79ff);
  box-shadow: 0 14px 34px rgba(118, 68, 255, 0.36), inset 0 1px rgba(255, 255, 255, 0.28);
}

.ghost-btn {
  border: 1px solid var(--line);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.045);
}

.login-screen .primary-btn,
.login-screen .ghost-btn {
  min-height: 50px;
}

.soft-btn {
  padding: 0 22px;
  border: 1px solid var(--line);
  background: rgba(215, 205, 255, 0.13);
}

.soft-btn.small {
  min-height: 40px;
  padding: 0 16px;
  font-size: 14px;
}

.fine-print,
.hint {
  color: var(--muted);
  line-height: 1.7;
}

.input-hint {
  color: rgba(230, 222, 255, 0.56);
  font-size: 12px;
  line-height: 1.55;
}

.fine-print {
  margin: 24px auto 0;
  max-width: 340px;
  text-align: center;
  color: rgba(230, 222, 255, 0.56);
  font-size: 12px;
}

.page-header,
.top-nav,
.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.panel-heading > div {
  min-width: 0;
}

.panel-heading h3 {
  overflow-wrap: anywhere;
}

.page-header {
  margin-bottom: 20px;
}

.icon-btn,
.round-btn {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text);
  background: rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
}

.icon-btn {
  font-size: 40px;
  line-height: 1;
}

.round-btn span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 3px auto;
  border-radius: 999px;
  background: var(--text);
}

.round-btn .nav-icon {
  width: 28px;
  height: 28px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.profile-menu-btn {
  position: relative;
  overflow: hidden;
}

.profile-menu-btn::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 68%);
  pointer-events: none;
}

.profile-menu-btn .menu-glyph {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.94);
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.26));
}

.profile-menu-btn .menu-glyph-frame,
.profile-menu-btn .menu-glyph-spark {
  stroke-width: 1.15;
  opacity: 0.58;
}

.trend-btn {
  font-size: 26px;
}

.panel {
  margin-bottom: 18px;
  padding: 20px;
}

.form-panel {
  display: grid;
  gap: 16px;
}

.root-wizard {
  position: relative;
  overflow: hidden;
  min-height: 560px;
}

.root-wizard::after {
  content: "";
  position: absolute;
  inset: auto -18% -20% -18%;
  height: 220px;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(94, 208, 255, 0.12), transparent 58%),
    radial-gradient(ellipse at 30% 38%, rgba(243, 208, 107, 0.1), transparent 46%);
  opacity: 0.9;
}

.wizard-intro-card {
  position: relative;
  z-index: 2;
}

.root-wizard .wizard-intro-card,
.root-wizard #calendarNote {
  display: none;
}

.wizard-progress {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
}

.wizard-progress span {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
  transition: background 240ms ease, box-shadow 240ms ease, transform 240ms ease;
}

.wizard-progress span.active,
.wizard-progress span.done {
  background: linear-gradient(90deg, rgba(243, 208, 107, 0.95), rgba(216, 200, 255, 0.86));
  box-shadow: 0 0 18px rgba(243, 208, 107, 0.18);
}

.wizard-progress span.active {
  transform: scaleY(1.35);
}

.profile-privacy-note {
  position: relative;
  z-index: 2;
  margin: -4px 0 2px;
  padding: 10px 12px;
  border: 1px solid rgba(126, 225, 197, 0.18);
  border-radius: 16px;
  color: rgba(230, 222, 255, 0.74);
  background:
    radial-gradient(circle at 0 0, rgba(126, 225, 197, 0.12), transparent 42%),
    rgba(255, 255, 255, 0.045);
  font-size: 12px;
  line-height: 1.6;
}

.profile-privacy-note.compact {
  margin: 6px 0 8px;
  padding: 9px 10px;
  border-style: dashed;
  color: rgba(230, 222, 255, 0.68);
  font-size: 11px;
}

.wizard-step {
  position: relative;
  z-index: 2;
  display: none;
  min-height: 330px;
  align-content: start;
  gap: 15px;
  animation: wizard-step-in 320ms ease both;
}

.wizard-step.active {
  display: grid;
}

.wizard-step h3 {
  margin: 0;
  font-size: 29px;
  line-height: 1.18;
  letter-spacing: 0.04em;
}

.wizard-copy {
  margin: 0;
  color: rgba(230, 222, 255, 0.7);
  font-size: 14px;
  line-height: 1.8;
}

.wizard-field {
  margin-top: 18px;
}

.gender-oracle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.gender-oracle-card {
  min-width: 0;
  min-height: 238px;
  padding: 16px 14px;
  border: 1px solid rgba(246, 241, 255, 0.16);
  border-radius: 26px;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.16), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(243, 208, 107, 0.08), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 16px 36px rgba(0, 0, 0, 0.18);
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 10px;
  text-align: center;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.gender-oracle-card.active {
  border-color: rgba(243, 208, 107, 0.68);
  background:
    radial-gradient(circle at 50% 0, rgba(243, 208, 107, 0.2), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.055);
  box-shadow: 0 18px 42px rgba(243, 208, 107, 0.13), inset 0 1px rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
}

.gender-oracle-card strong {
  font-size: 38px;
  line-height: 1;
  font-family: ui-serif, "Songti SC", "STSong", serif;
  text-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

.gender-oracle-card em {
  color: rgba(230, 222, 255, 0.66);
  font-size: 12px;
  font-style: normal;
  line-height: 1.6;
}

.gender-figure {
  position: relative;
  width: 118px;
  height: 128px;
  display: block;
  border-radius: 34px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.82) 0 10px, transparent 11px),
    linear-gradient(180deg, transparent 0 28px, rgba(255, 255, 255, 0.18) 28px 100%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.22),
    inset 0 -1px rgba(255, 255, 255, 0.08),
    0 18px 38px rgba(0, 0, 0, 0.22);
}

.gender-figure::before,
.gender-figure::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.gender-figure::before {
  top: 42px;
  width: 68px;
  height: 58px;
  border-radius: 16px;
  background:
    linear-gradient(currentColor 0 0) 50% 14px / 58px 4px no-repeat,
    linear-gradient(currentColor 0 0) 50% 28px / 58px 4px no-repeat,
    linear-gradient(currentColor 0 0) 50% 42px / 58px 4px no-repeat;
  opacity: 0.88;
}

.gender-figure::after {
  inset: 8px 6px auto;
  height: 112px;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(255, 255, 255, 0.16) 43% 45%, transparent 46%),
    radial-gradient(ellipse at 50% 52%, rgba(255, 255, 255, 0.16), transparent 62%);
}

.gender-figure.male {
  color: rgba(157, 221, 255, 0.92);
  background:
    radial-gradient(circle at 50% 16%, rgba(231, 241, 255, 0.96) 0 11px, transparent 12px),
    linear-gradient(180deg, rgba(127, 208, 255, 0.18), transparent 44%),
    radial-gradient(circle at 50% 84%, rgba(94, 208, 255, 0.28), transparent 46%),
    linear-gradient(180deg, rgba(10, 34, 62, 0.72), rgba(13, 16, 42, 0.42));
}

.gender-figure.female {
  color: rgba(243, 208, 107, 0.94);
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 245, 224, 0.96) 0 11px, transparent 12px),
    linear-gradient(180deg, rgba(243, 208, 107, 0.16), transparent 44%),
    radial-gradient(circle at 50% 84%, rgba(209, 169, 92, 0.28), transparent 46%),
    linear-gradient(180deg, rgba(65, 42, 24, 0.62), rgba(31, 24, 38, 0.44));
}

.gender-figure.female::before {
  background:
    linear-gradient(currentColor 0 0) 12px 14px / 18px 4px no-repeat,
    linear-gradient(currentColor 0 0) 38px 14px / 18px 4px no-repeat,
    linear-gradient(currentColor 0 0) 12px 28px / 18px 4px no-repeat,
    linear-gradient(currentColor 0 0) 38px 28px / 18px 4px no-repeat,
    linear-gradient(currentColor 0 0) 12px 42px / 18px 4px no-repeat,
    linear-gradient(currentColor 0 0) 38px 42px / 18px 4px no-repeat;
}

.calendar-choice {
  margin-top: 4px;
}

.birthday-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.time-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.wizard-actions {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 10px;
  margin-top: auto;
}

.wizard-actions .primary-btn.hidden,
.wizard-actions .ghost-btn.hidden {
  display: none;
}

.wizard-actions #wizardSubmit {
  grid-column: 2;
}

.root-wizard:has(.wizard-step[data-wizard-step="0"].active) .wizard-actions {
  grid-template-columns: minmax(0, 260px);
  justify-content: center;
}

.root-wizard:has(.wizard-step[data-wizard-step="0"].active) #wizardNext {
  width: 100%;
}

.location-select-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.chart-mode-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(243, 208, 107, 0.28);
  border-radius: 22px;
  background:
    radial-gradient(circle at 8% 18%, rgba(243, 208, 107, 0.16), transparent 38%),
    rgba(255, 255, 255, 0.05);
}

.chart-mode-card span {
  display: inline-flex;
  margin-bottom: 6px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.chart-mode-card strong {
  display: block;
  margin-bottom: 4px;
}

.chart-mode-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 5px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.08);
}

.seg {
  min-height: 42px;
  border: 0;
  border-radius: 14px;
  color: var(--muted);
  background: transparent;
  font-weight: 800;
}

.seg.active {
  color: var(--text);
  background: rgba(118, 68, 255, 0.88);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.check-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.check-row input {
  width: 18px;
  min-height: 18px;
}

.hidden {
  display: none !important;
}

.bazi-panel {
  display: grid;
  gap: 18px;
}

.section-title {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.section-title span {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-bright), transparent);
}

.section-title h3 {
  margin: 0;
  padding: 12px 24px;
  border: 1px solid var(--line-bright);
  clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%);
  background: rgba(85, 70, 122, 0.7);
  font-size: 20px;
}

.section-title.compact h3 {
  font-size: 18px;
}

.root-result-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.06);
}

.root-light-glyph,
.root-result-card img,
.profile-orb img {
  width: 92px;
  height: 92px;
}

.root-result-card img,
.profile-orb img {
  border-radius: 50%;
  object-fit: cover;
}

.root-light-glyph {
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--root-light-color, var(--gold)) 46%, transparent);
  border-radius: 50%;
  color: var(--root-light-color, var(--gold));
  background: radial-gradient(circle, color-mix(in srgb, var(--root-light-color, var(--gold)) 15%, transparent), transparent 64%);
  box-shadow:
    0 0 18px color-mix(in srgb, var(--root-light-color, var(--gold)) 28%, transparent),
    inset 0 0 22px color-mix(in srgb, var(--root-light-color, var(--gold)) 10%, transparent);
  font-family: "Songti SC", "STSong", serif;
  font-size: 46px;
  font-weight: 950;
  line-height: 1;
  text-shadow:
    0 0 12px color-mix(in srgb, var(--root-light-color, var(--gold)) 72%, transparent),
    0 0 28px color-mix(in srgb, var(--root-light-color, var(--gold)) 42%, transparent);
  animation: rootLightGlyphBreath 2.6s ease-in-out infinite;
}

.root-light-glyph[data-element="木"] {
  --root-light-color: #8fe66d;
}

.root-light-glyph[data-element="火"] {
  --root-light-color: #ff765b;
}

.root-light-glyph[data-element="土"] {
  --root-light-color: #e3a75c;
}

.root-light-glyph[data-element="金"] {
  --root-light-color: #f8e39a;
}

.root-light-glyph[data-element="水"] {
  --root-light-color: #6bd6ff;
}

.root-headline {
  margin-bottom: 4px;
  color: var(--wood);
  font-weight: 900;
}

.root-reveal-modal {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(circle at 50% 30%, rgba(243, 208, 107, 0.12), transparent 36%),
    rgba(5, 3, 14, 0.58);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(12px) saturate(1.15);
  transition: opacity 260ms ease;
}

.root-reveal-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.root-reveal-card {
  width: min(360px, 100%);
  padding: 24px;
  border: 1px solid rgba(246, 241, 255, 0.2);
  border-radius: 34px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0, rgba(243, 208, 107, 0.16), transparent 38%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.025)),
    rgba(37, 29, 58, 0.78);
  box-shadow: var(--glass-shadow), inset 0 1px rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(28px) saturate(1.18);
  transform: translateY(14px) scale(0.96);
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.22, 1);
}

.root-reveal-modal.open .root-reveal-card {
  transform: translateY(0) scale(1);
}

.root-reveal-card h3 {
  margin: 0 0 10px;
  font-size: 32px;
}

.root-reveal-card p {
  color: rgba(230, 222, 255, 0.72);
  line-height: 1.75;
}

.root-reveal-chart {
  position: relative;
  width: 210px;
  height: 210px;
  margin: 12px auto 14px;
  padding: 0;
  border: 1px solid rgba(243, 208, 107, 0.42);
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 44px rgba(243, 208, 107, 0.18), inset 0 0 36px rgba(255, 255, 255, 0.08);
}

.root-reveal-chart img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
}

.root-reveal-chart span {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: rgba(16, 11, 28, 0.58);
  backdrop-filter: blur(10px);
  font-weight: 950;
  white-space: nowrap;
}

.root-reveal-hint {
  margin: 0;
  color: rgba(243, 208, 107, 0.78) !important;
  font-size: 13px;
}

@media (max-width: 390px) {
  .gender-oracle-grid,
  .location-select-grid {
    grid-template-columns: 1fr;
  }

  .gender-oracle-card {
    min-height: 176px;
  }

  .birthday-grid {
    grid-template-columns: 1fr;
  }
}

@keyframes wizard-step-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pillars-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
}

.table-head,
.pillar-row {
  display: grid;
  grid-template-columns: 0.9fr repeat(4, 1fr);
  gap: 2px;
  align-items: center;
}

.table-head {
  padding: 14px 10px;
  color: var(--muted);
  font-weight: 900;
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.table-head span {
  display: grid;
  gap: 4px;
  place-items: center;
  min-width: 0;
}

.table-head small {
  display: block;
  max-width: 100%;
  color: rgba(220, 205, 255, 0.62);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.table-head b {
  display: block;
  color: rgba(246, 241, 255, 0.9);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
}

.pillar-row {
  min-height: 58px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.pillar-row:last-child {
  border-bottom: 0;
}

.pillar-row .label {
  color: var(--muted);
  text-align: left;
  font-weight: 900;
}

.stem-pill {
  display: inline-grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  position: relative;
  isolation: isolate;
  width: 56px;
  height: 50px;
  padding: 6px 0 5px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mark-color) 54%, rgba(255, 255, 255, 0.2));
  border-radius: 14px;
  color: #fff8dd;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--mark-color) 24%, transparent), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.035)),
    rgba(12, 9, 24, 0.72);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 color-mix(in srgb, var(--mark-color) 32%, transparent),
    0 10px 22px rgba(0, 0, 0, 0.2);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.stem-pill::before,
.stem-pill::after {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  border-radius: 10px;
  pointer-events: none;
}

.stem-pill::before {
  border: 1px solid color-mix(in srgb, var(--mark-color) 36%, transparent);
}

.stem-pill::after {
  inset: auto 9px 6px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--mark-color), transparent);
  opacity: 0.84;
}

.stem-pill span {
  transform: translateY(1px);
}

.stem-pill small {
  color: color-mix(in srgb, var(--mark-color) 72%, #fff);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
}

.mark-木 {
  --mark-color: var(--wood);
}

.mark-火 {
  --mark-color: var(--fire);
}

.mark-土 {
  --mark-color: var(--earth);
}

.mark-金 {
  --mark-color: var(--metal);
}

.mark-水 {
  --mark-color: var(--water);
}

.element-木 { color: var(--wood); }
.element-火 { color: var(--fire); }
.element-土 { color: var(--earth); }
.element-金 { color: var(--metal); }
.element-水 { color: var(--water); }
.bg-木 { background: var(--wood); }
.bg-火 { background: var(--fire); }
.bg-土 { background: var(--earth); }
.bg-金 { background: var(--metal); }
.bg-水 { background: var(--water); }

.knowledge-grid {
  display: grid;
  gap: 12px;
}

.core-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.core-card {
  min-height: 112px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(255, 255, 255, 0.04);
}

.core-card span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
}

.core-card strong {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
  line-height: 1.35;
}

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

.element-bar-chart {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.element-bar-row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 20px;
  gap: 7px;
  align-items: center;
  font-style: normal;
}

.element-bar-row b,
.element-bar-row strong {
  color: rgba(246, 241, 255, 0.78);
  font-size: 11px;
  line-height: 1;
}

.element-bar-row strong {
  text-align: right;
}

.element-bar-row em {
  position: relative;
  overflow: hidden;
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.element-bar-row u {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--element-bar-color, var(--gold));
  box-shadow: 0 0 12px color-mix(in srgb, var(--element-bar-color, var(--gold)) 42%, transparent);
}

.element-bar-row.element-木 {
  --element-bar-color: #8fe66d;
}

.element-bar-row.element-火 {
  --element-bar-color: #ff6f56;
}

.element-bar-row.element-土 {
  --element-bar-color: #e0a152;
}

.element-bar-row.element-金 {
  --element-bar-color: #f7df8b;
}

.element-bar-row.element-水 {
  --element-bar-color: #66d3ff;
}

.luck-timeline {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.05);
}

.current-chart-page {
  overflow: hidden auto;
}

.current-chart-page .panel-heading {
  align-items: flex-start;
}

.current-chart-page .panel-heading h3 {
  max-width: 210px;
  margin-top: 4px;
  font-size: clamp(22px, 6vw, 28px);
  line-height: 1.16;
}

.current-chart-page .coin-pill {
  flex: 0 0 auto;
  min-width: 58px;
  padding-inline: 12px;
}

.current-chart-content {
  display: grid;
  gap: 18px;
}

.chart-mini-profile {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(220, 205, 255, 0.14);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 12%, rgba(243, 208, 107, 0.16), transparent 34%),
    rgba(255, 255, 255, 0.05);
}

.chart-avatar {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: #191326;
  font-size: 28px;
  font-weight: 950;
}

.chart-mini-profile strong {
  display: block;
  color: var(--text);
  font-size: 17px;
}

.chart-mini-profile p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.compact-chart {
  overflow: hidden;
}

.luck-board {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(220, 205, 255, 0.16);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)),
    rgba(14, 10, 24, 0.42);
}

.luck-board-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: end;
  padding: 2px 3px 5px;
}

.luck-board-head span,
.luck-board-head em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.luck-board-head strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 18px;
}

.fortune-track {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 7px;
  align-items: stretch;
}

.fortune-track-label {
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(220, 205, 255, 0.12);
  color: var(--soft);
  font-size: 14px;
  font-weight: 900;
  writing-mode: vertical-rl;
  letter-spacing: 2px;
  opacity: 0.86;
}

.fortune-track-scroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(58px, 66px);
  gap: 6px;
  overflow-x: auto;
  padding: 1px 1px 4px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.fortune-track-scroll::-webkit-scrollbar {
  display: none;
}

.fortune-track-scroll button {
  min-height: 82px;
  padding: 8px 6px;
  border: 1px solid rgba(220, 205, 255, 0.12);
  border-radius: 14px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
  text-align: center;
  scroll-snap-align: start;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

.fortune-track-placeholder {
  min-height: 82px;
  border-radius: 14px;
}

.fortune-track-scroll button.active {
  border-color: rgba(243, 208, 107, 0.54);
  background:
    linear-gradient(180deg, rgba(243, 208, 107, 0.24), rgba(255, 255, 255, 0.06)),
    rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(243, 208, 107, 0.16);
  transform: translateY(-1px);
}

.fortune-track-scroll span,
.fortune-track-scroll small,
.fortune-track-scroll em {
  display: block;
  color: var(--muted);
  font-size: 9.5px;
  font-style: normal;
  line-height: 1.2;
}

.fortune-track-scroll strong {
  display: block;
  margin: 4px 0 3px;
  color: var(--text);
  font-size: 19px;
  line-height: 1.1;
}

.fortune-track-scroll em {
  margin-top: 4px;
  color: rgba(243, 208, 107, 0.88);
  font-weight: 900;
}

.fortune-track-scroll [data-fortune-level="day"] {
  min-height: 72px;
}

.fortune-track-scroll [data-fortune-level="day"] strong {
  font-size: 17px;
}

.fortune-track-note {
  padding: 8px 10px;
  border: 1px dashed rgba(220, 205, 255, 0.18);
  border-radius: 14px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.035);
  font-size: 11px;
  text-align: center;
}

.relation-report {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.055);
}

.relation-report p {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.55;
}

.relation-report strong {
  color: var(--gold);
}

.luck-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 10px;
  align-items: center;
}

.luck-row-real {
  grid-template-columns: 58px 1fr;
  padding: 10px 12px;
  border: 1px solid rgba(220, 205, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.luck-row-real div {
  display: grid;
  gap: 3px;
}

.luck-row-real strong {
  color: var(--gold);
  font-size: 18px;
}

.luck-row-real small {
  color: var(--muted);
  font-size: 12px;
}

.luck-row span {
  color: var(--muted);
  font-size: 12px;
}

.luck-bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.luck-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--water), var(--gold), var(--purple-2));
}

.knowledge-grid article {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 20%, rgba(154, 229, 86, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.05);
}

.knowledge-grid p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.top-nav {
  position: absolute;
  z-index: 12;
  top: max(14px, env(safe-area-inset-top));
  left: 16px;
  right: 16px;
  align-items: flex-start;
  flex: 0 0 auto;
  margin-bottom: 0;
  pointer-events: none;
}

.mini-top-action {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 12px;
  min-height: 34px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
}

.top-nav-center {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.top-nav-center h2 {
  margin: 0;
  padding: 8px 16px;
  border: 1px solid rgba(246, 241, 255, 0.26);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.96);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.02)),
    rgba(17, 12, 31, 0.28);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px) saturate(1.12);
  font-size: clamp(20px, 5vw, 26px);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}

.today-lunar-line {
  margin: -2px 0 0;
  padding: 5px 12px;
  border: 1px solid rgba(243, 208, 107, 0.18);
  border-radius: 999px;
  color: rgba(246, 241, 255, 0.72);
  background: rgba(17, 12, 31, 0.24);
  backdrop-filter: blur(14px) saturate(1.12);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.top-relation-tag {
  display: none;
  min-height: 30px;
  padding: 0 16px;
  color: #efe8ff;
  background: rgba(37, 29, 58, 0.44);
  border-color: rgba(220, 205, 255, 0.28);
  backdrop-filter: blur(16px) saturate(1.12);
  font-size: 12px;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.daily-screen.wake-active .top-relation-tag {
  display: inline-flex;
}

.calendar-icon-btn {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  color: rgba(255, 255, 255, 0.95);
  background:
    radial-gradient(circle at 28% 10%, rgba(255, 255, 255, 0.24), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(118, 68, 255, 0.26)),
    rgba(15, 10, 28, 0.42);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.3);
}

.calendar-icon-btn::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 54%);
  pointer-events: none;
}

.calendar-icon-btn::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 15px;
  right: 15px;
  height: 1px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  pointer-events: none;
}

.calendar-icon-btn .calendar-glyph {
  position: absolute;
  inset: 8px;
  z-index: 1;
  width: 36px;
  height: 36px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.25));
}

.calendar-icon-btn .calendar-date-number {
  position: absolute;
  left: 50%;
  top: 57%;
  z-index: 2;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  margin: 0;
  border: 1px solid rgba(243, 208, 107, 0.64);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.62), transparent 34%),
    radial-gradient(circle, rgba(243, 208, 107, 0.26), rgba(15, 10, 28, 0.38) 64%);
  color: rgba(255, 255, 255, 0.98);
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(243, 208, 107, 0.12), 0 6px 16px rgba(0, 0, 0, 0.22);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.top-nav .round-btn,
.top-nav-center,
.top-nav .calendar-icon-btn {
  pointer-events: auto;
}

.daily-screen .round-btn {
  border: 1px solid rgba(246, 241, 255, 0.24);
  color: rgba(255, 255, 255, 0.92);
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.18), transparent 38%),
    rgba(15, 10, 28, 0.3);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px) saturate(1.14);
}

.daily-screen .round-btn span {
  background: rgba(255, 255, 255, 0.88);
}

.daily-screen .calendar-icon-btn {
  color: rgba(255, 255, 255, 0.95);
}

.daily-screen .calendar-icon-btn::before {
  border-color: rgba(255, 255, 255, 0.18);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), transparent 54%);
}

.daily-screen .calendar-icon-btn::after {
  background: rgba(255, 255, 255, 0.42);
}

.daily-screen .calendar-icon-btn .calendar-date-number {
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.62), transparent 34%),
    radial-gradient(circle, rgba(243, 208, 107, 0.22), rgba(15, 10, 28, 0.52) 64%);
  color: rgba(255, 255, 255, 0.96);
}

.daily-screen.active {
  --daily-spirit-bg: url("assets/spirits/qisha.jpg");
  position: relative;
  height: 100vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  background:
    linear-gradient(180deg, rgba(8, 5, 18, 0.16), rgba(8, 5, 18, 0.46)),
    var(--daily-spirit-bg) center top / cover no-repeat;
}

.phone-shell.skin-active {
  --line-bright: color-mix(in srgb, var(--skin-accent) 72%, white 18%);
  --gold: var(--skin-accent);
}

.daily-screen.active.skin-active {
  color: var(--skin-soft);
  background:
    linear-gradient(180deg, rgba(5, 5, 8, 0.04), rgba(5, 5, 8, 0.46)),
    var(--skin-bg) center top / cover no-repeat;
}

.daily-screen.skin-active .module-page.panel,
.daily-screen.skin-active .home-float-menu,
.daily-screen.skin-active .wake-side-panel {
  border-color: color-mix(in srgb, var(--skin-accent) 42%, transparent);
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--skin-accent) 20%, transparent), transparent 34%),
    var(--skin-panel);
}

.daily-screen.skin-active .home-float-menu button.active,
.daily-screen.skin-active .home-float-menu button:focus-visible,
.daily-screen.skin-active .coin-pill,
.daily-screen.skin-active .relation-badge {
  color: var(--skin-ink);
  background: linear-gradient(135deg, var(--skin-accent), var(--skin-soft));
}

.setup-screen.archive-view #rootForm {
  display: none;
}

.setup-screen:not(.archive-view) #baziPanel {
  display: none !important;
}

.setup-screen.archive-view #backToLogin {
  display: none;
}

.module-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  height: 100%;
}

.module-page {
  display: none;
  height: 100%;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 96px 0 112px;
  scrollbar-width: none;
}

.module-page::-webkit-scrollbar {
  display: none;
}

.module-page.active {
  display: block;
  animation: rise-in 260ms ease both;
}

.module-page.panel {
  width: calc(100% - 26px);
  height: calc(100% - 190px);
  margin: 82px auto 0;
  padding: 18px 14px;
  border: 1px solid rgba(246, 241, 255, 0.18);
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.12), transparent 32%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018) 50%, rgba(243, 208, 107, 0.045)),
    rgba(23, 16, 38, 0.66);
  box-shadow: var(--glass-shadow), inset 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(24px) saturate(1.16);
}

.daily-screen.wake-active #dailyWake {
  height: 100%;
  overflow: hidden;
  padding: 0;
}

.daily-hero {
  --daily-spirit-bg: url("assets/spirits/qisha.jpg");
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  min-height: 100%;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 14%, rgba(255, 255, 255, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(8, 5, 18, 0.02) 0%, rgba(8, 5, 18, 0.08) 46%, rgba(8, 5, 18, 0.28) 100%),
    var(--daily-spirit-bg) center top / cover no-repeat;
  box-shadow: inset 0 -70px 100px rgba(11, 7, 23, 0.24);
}

body.web-build .daily-screen.active,
body.web-build .daily-hero {
  --daily-spirit-bg: url("assets/web/spirits/qisha.jpg");
}

.daily-hero.skin-active {
  background:
    radial-gradient(circle at 50% 14%, color-mix(in srgb, var(--skin-accent) 12%, transparent), transparent 32%),
    linear-gradient(180deg, rgba(5, 5, 8, 0.02) 0%, rgba(5, 5, 8, 0.08) 44%, rgba(5, 5, 8, 0.36) 100%),
    var(--skin-bg) center top / cover no-repeat;
}

.daily-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(12, 8, 26, 0.5), transparent 28%, transparent 72%, rgba(12, 8, 26, 0.48)),
    radial-gradient(circle at 50% 72%, rgba(118, 68, 255, 0.12), transparent 36%);
}

.daily-hero::after {
  content: none;
}

.cosmos-ring {
  display: none;
}

.wake-home-ui {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.wake-side-panel {
  position: absolute;
  z-index: 2;
  width: 136px;
  min-height: 132px;
  padding: 14px 12px;
  border: 1px solid rgba(235, 224, 255, 0.2);
  border-radius: 22px;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.1), transparent 42%),
    rgba(20, 14, 35, 0.5);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
  pointer-events: auto;
  text-align: left;
  transition: transform 240ms ease, width 240ms ease, background 240ms ease, border-color 240ms ease;
}

.wake-side-panel span {
  display: block;
  color: var(--gold);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.12em;
}

.wake-side-panel strong {
  display: block;
  margin-top: 8px;
  color: #fff;
  font-size: 18px;
  line-height: 1.2;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.44);
}

.wake-side-panel p {
  margin: 8px 0 0;
  color: rgba(246, 241, 255, 0.78);
  font-size: 12px;
  line-height: 1.55;
}

.wake-side-panel em {
  display: inline-flex;
  margin-top: 10px;
  color: rgba(246, 241, 255, 0.72);
  font-size: 12px;
  font-style: normal;
}

.wake-relation-panel {
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.wake-relation-panel:not(.expanded) p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.wake-relation-panel.expanded {
  width: min(270px, calc(100% - 76px));
  border-color: rgba(243, 208, 107, 0.46);
  background:
    radial-gradient(circle at 10% 0%, rgba(243, 208, 107, 0.18), transparent 38%),
    rgba(18, 12, 32, 0.68);
  transform: translateY(-50%) translateX(0);
}

.wake-persona-panel {
  right: 10px;
  top: 50%;
  display: grid;
  align-content: center;
  transform: translateY(-50%);
}

.wake-persona-panel em {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #241a38;
  background: linear-gradient(135deg, var(--gold), #f6e6a5);
  font-size: 18px;
  font-weight: 950;
}

.wake-side-panel:active {
  transform: translateY(-50%) scale(0.98);
}

.ring-line {
  position: absolute;
  inset: 13px;
  z-index: 2;
  border: 1px solid rgba(220, 205, 255, 0.28);
  border-radius: 32px;
  box-shadow: 0 0 0 1px rgba(118, 68, 255, 0.18), inset 0 0 38px rgba(118, 68, 255, 0.24);
  animation: slow-spin 18s linear infinite;
  opacity: 0.82;
}

.ring-line::before,
.ring-line::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 26px;
  border: 1px dashed rgba(255, 217, 73, 0.3);
}

.ring-line::after {
  inset: 44px;
  border-color: rgba(154, 229, 86, 0.4);
}

.cosmos-ring img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  object-fit: cover;
  object-position: center top;
  filter: saturate(1.08) contrast(1.02);
  box-shadow: none;
}

.daily-hero h1,
.daily-hero .daily-relation,
.daily-hero .persona-stats,
.daily-hero .element-strip,
.daily-hero .soft-btn {
  position: relative;
  z-index: 1;
}

.tag,
.coin-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.06);
}

.top-nav .top-relation-tag {
  display: none;
}

.daily-screen.wake-active .top-nav .top-relation-tag {
  display: inline-flex;
}

.daily-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(34px, 9vw, 44px);
  line-height: 1.08;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.52);
}

.daily-relation {
  margin: 0 auto 14px;
  max-width: 342px;
  color: rgba(246, 241, 255, 0.86);
  line-height: 1.72;
  font-size: 15px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.42);
}

.daily-hero .persona-stats {
  width: 100%;
  max-width: 336px;
  margin: 0 auto 12px;
  padding: 12px;
  border: 1px solid rgba(220, 205, 255, 0.13);
  border-radius: 22px;
  background: rgba(14, 10, 27, 0.34);
  backdrop-filter: blur(8px);
}

.daily-hero .stat-row {
  grid-template-columns: 68px 1fr 30px;
  color: rgba(246, 241, 255, 0.74);
}

.element-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}

.daily-hero .element-strip {
  max-width: 348px;
  margin: 0 auto 18px;
}

.element-strip span {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 13px;
}

.daily-hero .element-strip span {
  background: rgba(255, 255, 255, 0.09);
  color: rgba(246, 241, 255, 0.82);
  backdrop-filter: blur(6px);
}

.daily-hero .soft-btn {
  align-self: center;
  width: min(100%, 320px);
  border-color: rgba(220, 205, 255, 0.2);
  background: linear-gradient(135deg, rgba(215, 205, 255, 0.2), rgba(118, 68, 255, 0.24));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12);
}

@media (max-height: 760px) {
  .daily-hero {
    min-height: 520px;
    padding: 18px 14px 16px;
  }

  .daily-hero h1 {
    margin-bottom: 8px;
    font-size: clamp(30px, 8vw, 38px);
  }

  .daily-relation {
    margin-bottom: 10px;
    font-size: 14px;
  }

  .element-strip {
    gap: 6px;
    margin-bottom: 14px;
  }

  .element-strip span {
    padding: 5px 8px;
    font-size: 12px;
  }
}

.rhythm-panel {
  overflow: hidden;
}

.rhythm-cards {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.rhythm-card {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 14px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
}

.rhythm-orb {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #140f21;
  font-size: 24px;
  font-weight: 900;
  box-shadow: 0 0 22px rgba(255, 255, 255, 0.08);
}

.rhythm-card strong {
  display: block;
  margin-bottom: 6px;
}

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

.rhythm-meter {
  height: 7px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.rhythm-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.persona-stats {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  text-align: left;
}

.stat-row {
  display: grid;
  grid-template-columns: 74px 1fr 34px;
  gap: 10px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}

.stat-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
}

.stat-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--purple-2), var(--gold));
}

.issue-panel p:last-child {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.85;
}

.action-deck {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 16px;
}

.action-card {
  padding: 12px 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
}

.action-card span {
  display: block;
  margin-bottom: 6px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.action-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.soft-btn.full {
  width: 100%;
  margin-top: 14px;
}

.lucky-wear-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(243, 208, 107, 0.24);
  border-radius: 22px;
  background:
    radial-gradient(circle at 94% 12%, rgba(243, 208, 107, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035));
}

.lucky-wear-card span {
  display: block;
  margin-bottom: 5px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.lucky-wear-card strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  line-height: 1.45;
}

.lucky-wear-card p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.lucky-color-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.lucky-color-row i {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid rgba(220, 205, 255, 0.13);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  font-style: normal;
}

.lucky-color-row b {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lucky-color);
  box-shadow: 0 0 18px color-mix(in srgb, var(--lucky-color), transparent 46%);
}

.lucky-color-row em {
  color: rgba(246, 241, 255, 0.82);
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.report-page {
  padding: 16px;
}

.report-disclaimer {
  margin: 12px 0 0;
  padding: 9px 11px;
  border: 1px solid rgba(243, 208, 107, 0.18);
  border-radius: 16px;
  color: rgba(230, 222, 255, 0.68);
  background: linear-gradient(135deg, rgba(243, 208, 107, 0.08), rgba(255, 255, 255, 0.035));
  font-size: 11px;
  line-height: 1.65;
}

.report-preview-locked .report-hero p:not(.eyebrow) {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.report-lock-panel {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 14px;
  border: 1px solid rgba(243, 208, 107, 0.34);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(243, 208, 107, 0.14), rgba(255, 255, 255, 0.05)),
    rgba(16, 10, 34, 0.82);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

.report-lock-panel strong {
  color: var(--text);
  font-size: 16px;
}

.report-lock-price {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 6px 10px;
  border: 1px solid rgba(243, 208, 107, 0.44);
  border-radius: 999px;
  color: #241604;
  background: linear-gradient(135deg, #ffe7aa, var(--gold));
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

.report-lock-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.report-lock-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.report-lock-blur {
  max-height: 180px;
  overflow: hidden;
  filter: blur(14px);
  opacity: 0.22;
  pointer-events: none;
  user-select: none;
}

.report-preview-locked .kline-board.report-lock-blur {
  position: relative;
  min-height: 150px;
  background:
    radial-gradient(circle at 28% 24%, rgba(243, 208, 107, 0.2), transparent 36%),
    radial-gradient(circle at 82% 82%, rgba(94, 208, 255, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(18, 13, 34, 0.86);
  border-color: rgba(243, 208, 107, 0.24);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 16px 34px rgba(0, 0, 0, 0.22);
  filter: none;
  opacity: 1;
}

.report-preview-locked .kline-board.report-lock-blur #lifeKlineSvg {
  opacity: 0;
  visibility: hidden;
}

.report-preview-locked .kline-board.report-lock-blur::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 16px;
  background:
    linear-gradient(120deg, transparent 0 18%, rgba(243, 208, 107, 0.18) 18% 19%, transparent 19% 38%, rgba(94, 208, 255, 0.12) 38% 39%, transparent 39%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 26px);
  opacity: 0.7;
  filter: blur(6px);
}

.report-preview-locked .kline-board.report-lock-blur::after {
  content: "会员或灵石解锁后查看完整人生 K 线";
  position: absolute;
  inset: auto 18px 18px;
  display: grid;
  place-items: center;
  min-height: 38px;
  border: 1px solid rgba(243, 208, 107, 0.28);
  border-radius: 999px;
  color: rgba(246, 241, 255, 0.82);
  background: rgba(3, 2, 10, 0.28);
  font-size: 13px;
  font-weight: 900;
}

.report-lock-hidden {
  display: none !important;
}

.report-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.ghost-back {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.06);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 900;
}

.report-hero {
  position: relative;
  overflow: hidden;
  padding: 18px;
  min-height: 168px;
  border: 1px solid rgba(243, 208, 107, 0.25);
  border-radius: 26px;
  background:
    radial-gradient(circle at 86% 10%, rgba(243, 208, 107, 0.22), transparent 30%),
    radial-gradient(circle at 12% 84%, rgba(94, 208, 255, 0.18), transparent 34%),
    rgba(255, 255, 255, 0.05);
}

.report-hero::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -38px;
  width: 122px;
  height: 122px;
  border: 1px dashed rgba(212, 200, 255, 0.32);
  border-radius: 50%;
}

.moon-hero {
  background:
    radial-gradient(circle at 82% 12%, rgba(176, 157, 255, 0.3), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
}

.kline-hero {
  background:
    radial-gradient(circle at 80% 12%, rgba(255, 84, 84, 0.18), transparent 34%),
    radial-gradient(circle at 10% 90%, rgba(94, 208, 255, 0.18), transparent 38%),
    rgba(255, 255, 255, 0.05);
}

.year-hero {
  background:
    radial-gradient(circle at 12% 20%, rgba(243, 208, 107, 0.2), transparent 34%),
    radial-gradient(circle at 82% 82%, rgba(154, 229, 86, 0.13), transparent 36%),
    rgba(255, 255, 255, 0.05);
}

#monthlyFortunePage .report-hero,
#yearlyFortunePage .report-hero {
  min-height: clamp(160px, 12vw, 188px);
  padding: 20px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.report-hero h3 {
  position: relative;
  z-index: 1;
  margin: 6px 0 8px;
  font-size: 25px;
  line-height: 1.18;
}

.report-hero h3 em {
  display: inline-block;
  margin-left: 6px;
  color: rgba(246, 241, 255, 0.66);
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
  vertical-align: baseline;
}

.daily-title-stem {
  display: inline-block;
  margin: 0 3px;
  font-size: 1.16em;
  font-weight: 950;
  letter-spacing: 0;
  text-shadow: 0 0 18px rgba(255, 255, 255, 0.12);
}

.daily-title-stem.fire {
  color: #ff5b4f;
  text-shadow: 0 0 16px rgba(255, 84, 84, 0.54), 0 0 30px rgba(255, 172, 82, 0.24);
}

.daily-title-stem.wood { color: #9ae556; }
.daily-title-stem.earth { color: #dfb05a; }
.daily-title-stem.metal { color: #ffe38a; }
.daily-title-stem.water { color: #67d6ff; }

.report-hero p:last-child {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.score-orbit {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 12px;
  align-items: stretch;
  margin: 14px 0;
}

.score-ring {
  --score-angle: 238deg;
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 132px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(34, 26, 52, 0.96) 0 54%, transparent 55%),
    conic-gradient(var(--gold) var(--score-angle), rgba(255, 255, 255, 0.08) 0);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.28);
}

.score-ring strong {
  font-size: 32px;
}

.score-ring span,
.score-orbit article span,
.report-note span,
.day-timeline span,
.phase-strip span,
.kline-legend span,
.phase-list span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.score-orbit article {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
}

.score-orbit article strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.35;
}

.score-orbit p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.score-orbit article small {
  display: block;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 12px;
  line-height: 1.55;
}

.fortune-detail-grid {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.report-page .fortune-detail-grid {
  grid-template-columns: 1fr;
}

.fortune-detail-card {
  min-height: 138px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.04);
}

.fortune-detail-card div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.fortune-detail-card span {
  color: var(--text);
  font-weight: 900;
}

.fortune-detail-card strong {
  color: var(--soft);
  letter-spacing: 2px;
}

.fortune-detail-card p {
  margin: 0 0 8px;
  color: var(--muted);
  line-height: 1.6;
}

.fortune-detail-card small {
  color: var(--gold);
  line-height: 1.5;
}

.annual-human-card {
  min-height: 0;
  border-color: rgba(243, 208, 107, 0.16);
}

.annual-human-close p {
  color: rgba(246, 241, 255, 0.78);
  line-height: 1.72;
}

.annual-human-card div {
  align-items: flex-start;
}

.annual-human-card span {
  font-size: 17px;
  letter-spacing: 0;
}

.annual-human-card strong {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 9px;
  border: 1px solid rgba(243, 208, 107, 0.22);
  border-radius: 999px;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0;
  white-space: nowrap;
  background: rgba(243, 208, 107, 0.08);
}

.annual-human-card p {
  color: rgba(246, 241, 255, 0.78);
  font-size: 15px;
  line-height: 1.78;
}

.daily-insight-feed {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.daily-pulse-card,
.daily-prompt-grid article {
  border: 1px solid rgba(243, 208, 107, 0.18);
  border-radius: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.028)),
    rgba(255, 255, 255, 0.04);
}

.daily-pulse-card {
  padding: 15px;
}

.daily-pulse-card.fire {
  border-color: rgba(255, 91, 79, 0.36);
  background:
    radial-gradient(circle at 88% 10%, rgba(255, 84, 84, 0.18), transparent 40%),
    linear-gradient(145deg, rgba(255, 91, 79, 0.12), rgba(255, 255, 255, 0.032)),
    rgba(255, 255, 255, 0.04);
}

.daily-pulse-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.daily-pulse-card span,
.daily-prompt-grid span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.daily-pulse-card strong {
  display: block;
  margin: 0;
  color: var(--text);
  font-size: 24px;
  line-height: 1.25;
}

.daily-pulse-card strong b {
  color: var(--gold);
  font-weight: 950;
}

.daily-pulse-card.fire strong b {
  color: #ff5b4f;
  text-shadow: 0 0 16px rgba(255, 84, 84, 0.5), 0 0 28px rgba(255, 179, 94, 0.2);
}

.daily-pulse-card strong em {
  display: inline;
  margin: 0 0 0 8px;
  color: rgba(246, 241, 255, 0.64);
  font-size: 15px;
  font-style: normal;
}

.daily-pulse-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.daily-pulse-card em {
  display: block;
  margin: 10px 0 6px;
  color: rgba(243, 208, 107, 0.9);
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.55;
}

.daily-prompt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.daily-prompt-grid article {
  min-height: 176px;
  padding: 14px;
}

.daily-prompt-head,
.daily-focus-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.daily-prompt-head span,
.daily-focus-head span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border-radius: 999px;
  color: #241a38;
  background: linear-gradient(135deg, rgba(243, 208, 107, 0.96), rgba(246, 230, 165, 0.86));
  font-size: 12px;
  font-weight: 950;
}

.daily-prompt-head small {
  min-width: 0;
  color: rgba(243, 208, 107, 0.82);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
  text-align: right;
}

.daily-prompt-grid strong {
  display: block;
  margin: 8px 0 8px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.42;
}

.daily-prompt-grid p {
  margin: 0 0 9px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.62;
}

.daily-focus-card {
  min-height: 174px;
  border-color: rgba(243, 208, 107, 0.18);
  background:
    linear-gradient(145deg, rgba(243, 208, 107, 0.095), rgba(94, 208, 255, 0.045)),
    rgba(255, 255, 255, 0.045);
}

.daily-focus-card .daily-focus-head strong {
  color: rgba(216, 200, 255, 0.88);
  font-size: 18px;
  letter-spacing: 1px;
}

.day-timeline {
  display: grid;
  gap: 10px;
}

.day-timeline article,
.report-note,
.kline-legend article,
.phase-list article {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
}

.day-timeline p,
.report-note p,
.phase-list p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.daily-rhythm-card strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 16px;
  line-height: 1.35;
}

.engine-step-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.engine-step-list article {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(243, 208, 107, 0.16);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(243, 208, 107, 0.1), rgba(124, 72, 255, 0.04)),
    rgba(255, 255, 255, 0.035);
}

.engine-step-list div {
  min-width: 0;
}

.engine-step-list strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  line-height: 1.4;
}

.engine-step-list p {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.72;
}

.report-key-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.report-key-card {
  min-height: 118px;
  padding: 12px;
  border: 1px solid rgba(243, 208, 107, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 0%, rgba(243, 208, 107, 0.12), transparent 55%),
    rgba(255, 255, 255, 0.045);
}

.report-key-card strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  color: #241908;
  background: linear-gradient(135deg, #f3d06b, #b98134);
  font-size: 12px;
  font-weight: 900;
}

.report-key-card p {
  margin: 9px 0 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px;
  line-height: 1.58;
}

@media (max-width: 520px) {
  .score-orbit {
    grid-template-columns: 1fr;
  }

  .score-ring {
    width: min(132px, 48vw);
    min-height: min(132px, 48vw);
    justify-self: center;
  }

  .daily-prompt-grid {
    grid-template-columns: 1fr;
  }

  .daily-prompt-grid article {
    min-height: auto;
  }

  .report-key-grid {
    grid-template-columns: 1fr;
  }

  .kline-overview-grid {
    grid-template-columns: 1fr;
  }

  .report-key-card {
    min-height: auto;
  }
}

.phase-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 14px 0;
}

.phase-strip article {
  min-height: 126px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
}

.phase-strip article.active {
  border-color: rgba(243, 208, 107, 0.58);
  background: rgba(243, 208, 107, 0.1);
}

.phase-strip strong {
  display: block;
  margin: 4px 0 6px;
  font-size: 18px;
}

.phase-strip p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.year-focus-grid {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.year-focus-grid article {
  min-height: 126px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.055);
}

.year-focus-grid span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.year-focus-grid strong {
  display: block;
  margin: 5px 0 7px;
  color: var(--text);
  font-size: 18px;
}

.year-focus-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.kline-board {
  margin: 14px 0;
  padding: 12px 10px 8px;
  border: 1px solid rgba(190, 119, 0, 0.2);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
}

#lifeKlineSvg {
  width: 100%;
  min-height: 230px;
}

#lifeKlineSvg text {
  font-size: 10px;
  font-weight: 700;
}

.kline-legend {
  display: grid;
  gap: 8px;
  margin: 4px 0 14px;
}

.kline-legend p {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  line-height: 1.85;
}

.kline-natal-insight {
  display: grid;
  gap: 12px;
  margin: 8px 0 14px;
  padding: 4px 0 14px;
  border-bottom: 1px solid rgba(243, 208, 107, 0.18);
}

.kline-natal-insight > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.kline-natal-insight > header span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
}

.kline-natal-insight > header strong {
  color: #fff6d2;
  font-size: 18px;
  line-height: 1.35;
  text-align: right;
}

.kline-natal-insight .kline-natal-verdict {
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.75;
}

.kline-natal-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.kline-natal-evidence span {
  padding: 6px 9px;
  border: 1px solid rgba(243, 208, 107, 0.2);
  border-radius: 999px;
  color: rgba(255, 246, 210, 0.82);
  background: rgba(243, 208, 107, 0.07);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.kline-natal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.kline-natal-grid article {
  min-height: 0;
  padding: 12px;
  border: 1px solid rgba(243, 208, 107, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.045);
}

.kline-natal-grid article span {
  display: block;
  margin-bottom: 6px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
}

.kline-natal-grid article p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.72;
}

.kline-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 520px) {
  .kline-natal-insight > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .kline-natal-insight > header strong {
    text-align: left;
  }

  .kline-natal-grid {
    grid-template-columns: 1fr;
  }
}

.kline-overview-grid article {
  min-height: 116px;
  padding: 13px;
  border-color: rgba(243, 208, 107, 0.22);
  background:
    linear-gradient(145deg, rgba(243, 208, 107, 0.11), rgba(94, 208, 255, 0.05)),
    rgba(255, 255, 255, 0.05);
}

.kline-overview-grid strong {
  display: block;
  margin: 7px 0 6px;
  color: #fff6d2;
  font-size: 16px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.kline-overview-grid p {
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  line-height: 1.6;
}

.phase-list {
  display: grid;
  gap: 16px;
  margin-bottom: 14px;
}

.phase-list strong {
  display: block;
  margin-top: 5px;
  font-size: 17px;
}

.kline-decade-card {
  overflow: hidden;
  padding: 16px;
  color: #1b1308;
  border: 1.5px solid rgba(177, 111, 8, 0.38);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 250, 240, 0.98), rgba(255, 255, 255, 0.98)),
    #fffaf0;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.kline-decade-head {
  display: grid;
  gap: 10px;
  margin: -16px -16px 14px;
  padding: 16px;
  border-bottom: 1px solid rgba(177, 111, 8, 0.2);
  background: linear-gradient(135deg, #5b3500, #b67205);
}

.kline-decade-head strong {
  color: #fff;
  font-size: 19px;
  line-height: 1.35;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}

.kline-decade-head b {
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  color: #fff7d6;
  background: rgba(0, 0, 0, 0.18);
  font-size: 12px;
  line-height: 1;
  white-space: normal;
}

.kline-decade-copy {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.kline-decade-copy p {
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(177, 111, 8, 0.13);
  border-radius: 18px;
  color: #21170b;
  background: rgba(255, 255, 255, 0.76);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.75;
}

.kline-decade-topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.kline-decade-topic-grid article {
  min-height: 132px;
  padding: 12px;
  border: 1px solid rgba(177, 111, 8, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
}

.kline-decade-topic-grid span,
.kline-decade-topic-grid strong {
  display: block;
}

.kline-decade-topic-grid span {
  color: rgba(55, 36, 10, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.kline-decade-topic-grid strong {
  margin: 4px 0 7px;
  color: #8b5604;
  font-size: 14px;
}

.kline-decade-topic-grid p,
.kline-year-topic-lines p {
  margin: 0;
  color: #25180a;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.65;
}

.kline-year-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 -2px 14px;
  padding: 4px 2px 8px;
  scrollbar-width: none;
}

.kline-year-strip::-webkit-scrollbar {
  display: none;
}

.kline-year-strip span {
  min-width: 78px;
  padding: 9px 10px;
  border: 1px solid rgba(130, 82, 5, 0.2);
  border-radius: 16px;
  color: #1d1407;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.46);
}

.kline-year-strip span.rise {
  border-color: rgba(191, 119, 0, 0.45);
  background: rgba(191, 119, 0, 0.15);
}

.kline-year-strip span.risk {
  border-color: rgba(185, 64, 45, 0.28);
  background: rgba(185, 64, 45, 0.08);
}

.kline-year-strip b,
.kline-year-strip em,
.kline-year-strip small {
  display: block;
}

.kline-year-strip b {
  color: #1a1208;
  font-size: 14px;
}

.kline-year-strip em {
  margin: 2px 0;
  color: #865100;
  font-style: normal;
  font-weight: 900;
}

.kline-year-strip small {
  color: rgba(29, 20, 7, 0.72);
  font-size: 11px;
  line-height: 1.35;
}

.kline-year-detail {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.kline-year-detail article {
  padding: 12px;
  border: 1px solid rgba(177, 111, 8, 0.16);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(73, 45, 0, 0.08);
}

.kline-year-detail header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.kline-year-detail header span {
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 32px;
  border-radius: 999px;
  color: #fff;
  background: #8b5604;
  font-size: 13px;
  font-weight: 900;
}

.kline-year-detail header strong {
  color: #181008;
  font-size: 15px;
  text-align: right;
}

.kline-year-detail p {
  margin: 4px 0;
  color: #25180a;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.7;
}

.kline-year-detail b {
  color: #8b5604;
  white-space: nowrap;
}

.kline-year-topic-lines {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(139, 86, 4, 0.22);
}

.kline-highlight-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  color: #1b1308;
  border: 1.5px solid rgba(177, 111, 8, 0.32);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 250, 240, 0.98), rgba(255, 255, 255, 0.98)),
    #fffaf0;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.kline-highlight-section {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(177, 111, 8, 0.16);
}

.kline-highlight-section:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.kline-highlight-section span {
  display: inline-grid;
  place-items: center;
  min-width: 88px;
  min-height: 34px;
  margin-bottom: 12px;
  padding: 0 16px;
  border-radius: 999px;
  color: #fff;
  background: #bd7906;
  font-size: 13px;
  font-weight: 900;
}

.kline-highlight-section.cautious span {
  background: #8f5b05;
}

.kline-highlight-section strong {
  display: block;
  margin-bottom: 10px;
  color: #181008;
  font-size: 20px;
  line-height: 1.45;
}

.kline-highlight-section p {
  margin: 0;
  color: #25180a;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.8;
}

.spirit-grid {
  display: grid;
  gap: 12px;
}

.spirit-card {
  width: 100%;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 22px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.05);
  text-align: left;
}

.spirit-card img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
}

.spirit-card h4 {
  margin: 0 0 6px;
  font-size: 17px;
}

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

.relation-badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #150e28;
  background: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.paid-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.fuyao-pavilion-entry,
.fuyao-pavilion-card,
.skin-shop-entry,
.source-license-entry,
.premium-module-entry,
.oracle-tool-entry {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 15px;
  align-items: center;
  min-height: 116px;
  margin: 0 0 22px;
  padding: 18px 16px;
  border: 1px solid rgba(255, 203, 92, 0.32);
  border-radius: 24px;
  color: var(--text);
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 216, 133, 0.28), transparent 40%),
    linear-gradient(135deg, rgba(31, 23, 22, 0.84), rgba(69, 45, 25, 0.46));
  text-align: left;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.14);
}

.paid-card,
.kline-card,
.fuyao-pavilion-entry,
.fuyao-pavilion-card,
.skin-shop-entry,
.source-license-entry,
.oracle-tool-entry,
.liuyao-entry {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  transition:
    transform 210ms cubic-bezier(0.2, 0.86, 0.24, 1),
    border-color 210ms ease,
    background 210ms ease,
    box-shadow 210ms ease,
    filter 210ms ease;
  -webkit-tap-highlight-color: transparent;
}

.paid-card::after,
.kline-card::after,
.fuyao-pavilion-entry::after,
.fuyao-pavilion-card::after,
.skin-shop-entry::after,
.source-license-entry::after,
.oracle-tool-entry::after,
.liuyao-entry::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 240, 180, 0.2), transparent 36%),
    linear-gradient(118deg, transparent 0 28%, rgba(255, 255, 255, 0.16) 42%, transparent 56% 100%);
  transform: translateX(-18%);
  transition: opacity 210ms ease, transform 420ms cubic-bezier(0.2, 0.86, 0.24, 1);
}

.paid-card > *,
.kline-card > *,
.fuyao-pavilion-entry > *,
.fuyao-pavilion-card > *,
.skin-shop-entry > *,
.source-license-entry > *,
.oracle-tool-entry > *,
.liuyao-entry > * {
  position: relative;
  z-index: 1;
}

.paid-card:hover,
.kline-card:hover,
.fuyao-pavilion-entry:hover,
.fuyao-pavilion-card:hover,
.skin-shop-entry:hover,
.source-license-entry:hover,
.oracle-tool-entry:hover,
.liuyao-entry:hover,
.paid-card.is-pressing,
.kline-card.is-pressing,
.fuyao-pavilion-entry.is-pressing,
.fuyao-pavilion-card.is-pressing,
.skin-shop-entry.is-pressing,
.source-license-entry.is-pressing,
.oracle-tool-entry.is-pressing,
.liuyao-entry.is-pressing {
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(243, 208, 107, 0.46);
  filter: saturate(1.08) brightness(1.04);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(243, 208, 107, 0.08),
    inset 0 1px rgba(255, 255, 255, 0.22);
}

.paid-card:hover::after,
.kline-card:hover::after,
.fuyao-pavilion-entry:hover::after,
.fuyao-pavilion-card:hover::after,
.skin-shop-entry:hover::after,
.source-license-entry:hover::after,
.oracle-tool-entry:hover::after,
.liuyao-entry:hover::after,
.paid-card.is-pressing::after,
.kline-card.is-pressing::after,
.fuyao-pavilion-entry.is-pressing::after,
.fuyao-pavilion-card.is-pressing::after,
.skin-shop-entry.is-pressing::after,
.source-license-entry.is-pressing::after,
.oracle-tool-entry.is-pressing::after,
.liuyao-entry.is-pressing::after {
  opacity: 1;
  transform: translateX(0);
}

.paid-card:active,
.kline-card:active,
.fuyao-pavilion-entry:active,
.fuyao-pavilion-card:active,
.skin-shop-entry:active,
.source-license-entry:active,
.oracle-tool-entry:active,
.liuyao-entry:active {
  transform: translateY(1px) scale(0.985);
  transition-duration: 90ms;
}

.paid-card:focus-visible,
.kline-card:focus-visible,
.fuyao-pavilion-entry:focus-visible,
.fuyao-pavilion-card:focus-visible,
.skin-shop-entry:focus-visible,
.source-license-entry:focus-visible,
.oracle-tool-entry:focus-visible,
.liuyao-entry:focus-visible {
  outline: 2px solid rgba(243, 208, 107, 0.62);
  outline-offset: 3px;
}

.module-card-ripple {
  position: absolute;
  left: var(--tap-x, 50%);
  top: var(--tap-y, 50%);
  z-index: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(255, 248, 210, 0.78), rgba(243, 208, 107, 0.28) 42%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  animation: module-card-ripple 620ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
  mix-blend-mode: screen;
}

.premium-module-entry-mark,
.fuyao-pavilion-entry-mark,
.fuyao-pavilion-card-mark,
.skin-shop-entry-mark,
.source-license-entry-mark,
.oracle-tool-entry-mark {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #251606;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.72), transparent 20%),
    linear-gradient(135deg, #f2d184, #b9822d);
  font-size: 24px;
  font-weight: 900;
}

.premium-module-entry strong,
.premium-module-entry small,
.premium-module-entry b,
.fuyao-pavilion-entry strong,
.fuyao-pavilion-entry small,
.fuyao-pavilion-entry b,
.fuyao-pavilion-card strong,
.fuyao-pavilion-card small,
.fuyao-pavilion-card b,
.skin-shop-entry strong,
.skin-shop-entry small,
.skin-shop-entry b,
.source-license-entry strong,
.source-license-entry small,
.source-license-entry b,
.oracle-tool-entry strong,
.oracle-tool-entry small,
.oracle-tool-entry b {
  display: block;
}

.premium-module-entry strong,
.fuyao-pavilion-entry strong,
.fuyao-pavilion-card strong,
.skin-shop-entry strong,
.source-license-entry strong,
.oracle-tool-entry strong {
  margin-bottom: 6px;
  font-size: 17px;
}

.premium-module-entry small,
.fuyao-pavilion-entry small,
.fuyao-pavilion-card small,
.skin-shop-entry small,
.source-license-entry small,
.oracle-tool-entry small {
  color: var(--muted);
  line-height: 1.65;
}

.premium-module-entry b,
.fuyao-pavilion-entry b,
.fuyao-pavilion-card b,
.skin-shop-entry b,
.source-license-entry b,
.oracle-tool-entry b {
  color: var(--gold);
  font-size: 13px;
}

.annual-panorama-gift {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  min-height: 126px;
  margin: 0 0 22px;
  padding: 18px;
  border: 1px solid rgba(229, 187, 91, 0.54);
  border-radius: 24px;
  color: var(--text);
  text-align: left;
  background:
    radial-gradient(circle at 88% 4%, rgba(207, 61, 54, 0.2), transparent 34%),
    linear-gradient(135deg, rgba(75, 25, 29, 0.88), rgba(25, 16, 19, 0.96) 58%, rgba(148, 98, 25, 0.32));
  box-shadow:
    0 18px 46px rgba(0, 0, 0, 0.28),
    inset 0 1px rgba(255, 255, 255, 0.12);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.annual-panorama-gift::after {
  content: "高清长图";
  position: absolute;
  right: 18px;
  top: 12px;
  z-index: 0;
  color: rgba(255, 229, 174, 0.12);
  font-size: 42px;
  font-weight: 900;
  letter-spacing: 0;
  pointer-events: none;
}

.annual-panorama-gift > * {
  position: relative;
  z-index: 1;
}

.annual-panorama-gift:hover,
.annual-panorama-gift:focus-visible,
.annual-panorama-gift.is-unlocked {
  border-color: rgba(242, 207, 138, 0.84);
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.34),
    0 0 30px rgba(196, 130, 36, 0.12),
    inset 0 1px rgba(255, 255, 255, 0.16);
}

.annual-panorama-gift:hover,
.annual-panorama-gift:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.annual-panorama-gift:active {
  transform: translateY(1px) scale(0.99);
}

.annual-panorama-gift:disabled {
  cursor: progress;
  filter: saturate(0.78);
}

.annual-panorama-gift-mark {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 229, 174, 0.7);
  border-radius: 18px;
  color: #2a1615;
  background: linear-gradient(145deg, #f0d393, #b47820);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.7), 0 10px 24px rgba(0, 0, 0, 0.24);
  font-family: "Songti SC", "STSong", serif;
  font-size: 28px;
  font-weight: 900;
}

.annual-panorama-gift .eyebrow {
  display: block;
  margin-bottom: 5px;
  color: #e8b96d;
  font-size: 11px;
  letter-spacing: 0.12em;
}

.annual-panorama-gift strong,
.annual-panorama-gift small,
.annual-panorama-gift b {
  display: block;
}

.annual-panorama-gift strong {
  margin-bottom: 7px;
  color: #fff3dd;
  font-size: 18px;
  line-height: 1.28;
  white-space: nowrap;
  word-break: keep-all;
}

.annual-panorama-gift small {
  max-width: 620px;
  color: rgba(255, 234, 222, 0.7);
  font-size: 13px;
  line-height: 1.65;
}

.annual-panorama-gift b {
  min-width: 108px;
  padding: 9px 12px;
  border: 1px solid rgba(242, 207, 138, 0.46);
  border-radius: 10px;
  color: #ffe3a5;
  background: rgba(51, 25, 20, 0.66);
  font-size: 12px;
  text-align: center;
}

.annual-panorama-gift.is-unlocked b {
  color: #2a1615;
  background: linear-gradient(145deg, #f0d393, #bd8127);
}

@media (max-width: 460px) {
  .annual-panorama-gift {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    min-height: 142px;
    padding: 15px 12px;
  }

  .annual-panorama-gift-mark {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 22px;
  }

  .annual-panorama-gift strong {
    font-size: 16px;
  }

  .annual-panorama-gift b {
    grid-column: 2;
    justify-self: start;
    min-width: 0;
    margin-top: -4px;
  }
}

.paid-panel .skin-shop-entry {
  overflow: visible;
  grid-template-columns: 60px 1fr auto;
  gap: 14px;
  width: 100%;
  min-height: 126px;
  margin: 6px 0 24px;
  padding: 18px 16px;
  border-color: rgba(255, 218, 123, 0.68);
  border-radius: 30px;
  background:
    radial-gradient(circle at 10% -16%, rgba(255, 246, 184, 0.78), transparent 34%),
    radial-gradient(circle at 92% 20%, rgba(255, 180, 72, 0.38), transparent 38%),
    linear-gradient(135deg, rgba(68, 35, 13, 0.95), rgba(128, 76, 28, 0.68) 52%, rgba(36, 22, 22, 0.9));
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 241, 184, 0.2),
    0 0 44px rgba(243, 184, 72, 0.28),
    inset 0 1px rgba(255, 255, 255, 0.28);
}

.paid-panel .skin-shop-entry::before {
  content: "限定皮肤";
  position: absolute;
  z-index: 2;
  top: -15px;
  right: 18px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 244, 194, 0.72);
  border-radius: 999px;
  color: #2b1806;
  background: linear-gradient(135deg, #fff4bd, #f2bf55);
  box-shadow: 0 12px 24px rgba(58, 31, 5, 0.34), 0 0 24px rgba(255, 214, 104, 0.34);
  font-size: 12px;
  font-weight: 900;
}

.paid-panel .skin-shop-entry .eyebrow {
  color: #ffeab0;
}

.paid-panel .skin-shop-entry strong {
  font-size: 18px;
}

.paid-panel .skin-shop-entry small {
  display: -webkit-box;
  overflow: hidden;
  max-width: 220px;
  color: rgba(255, 242, 206, 0.82);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.paid-panel .skin-shop-entry b {
  padding: 9px 12px;
  border: 1px solid rgba(255, 234, 176, 0.48);
  border-radius: 999px;
  color: #fff0bd;
  background: rgba(255, 218, 123, 0.12);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.16);
}

.paid-panel .skin-shop-entry-mark {
  position: relative;
  width: 60px;
  height: 60px;
  border: 1px solid rgba(255, 246, 206, 0.46);
  border-radius: 22px;
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.28),
    0 0 28px rgba(255, 215, 111, 0.36),
    inset 0 1px rgba(255, 255, 255, 0.4);
  transform: rotate(-6deg);
}

.paid-panel .skin-shop-entry-mark::after {
  content: "";
  position: absolute;
  inset: -8px;
  z-index: -1;
  border-radius: 26px;
  background: radial-gradient(circle, rgba(255, 228, 147, 0.32), transparent 70%);
}

.paid-panel .source-license-entry {
  overflow: visible;
  grid-template-columns: 60px 1fr auto;
  gap: 14px;
  width: 100%;
  min-height: 138px;
  margin: 8px 0 0;
  padding: 19px 16px;
  border-color: rgba(255, 237, 183, 0.72);
  border-radius: 30px;
  background:
    radial-gradient(circle at 8% -18%, rgba(255, 242, 184, 0.72), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(110, 211, 255, 0.32), transparent 38%),
    linear-gradient(135deg, rgba(25, 18, 48, 0.96), rgba(83, 59, 27, 0.82) 54%, rgba(19, 16, 28, 0.96));
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(255, 241, 184, 0.24),
    0 0 48px rgba(243, 208, 107, 0.24),
    inset 0 1px rgba(255, 255, 255, 0.28);
}

.paid-panel .source-license-entry::before {
  content: "源代码授权";
  position: absolute;
  z-index: 2;
  top: -15px;
  right: 18px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 244, 194, 0.74);
  border-radius: 999px;
  color: #211405;
  background: linear-gradient(135deg, #fff5c4, #f0c45a);
  box-shadow: 0 12px 24px rgba(45, 26, 5, 0.36), 0 0 26px rgba(255, 221, 114, 0.28);
  font-size: 12px;
  font-weight: 900;
}

.paid-panel .source-license-entry-mark {
  position: relative;
  width: 60px;
  height: 60px;
  border: 1px solid rgba(255, 246, 206, 0.5);
  border-radius: 22px;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.78), transparent 18%),
    linear-gradient(140deg, #fff0a7, #d6a13d 58%, #76d3ff);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.3),
    0 0 30px rgba(255, 215, 111, 0.34),
    inset 0 1px rgba(255, 255, 255, 0.42);
}

.paid-panel .source-license-entry .eyebrow {
  color: #ffeab0;
}

.paid-panel .source-license-entry strong {
  max-width: 410px;
  font-size: 18px;
  line-height: 1.28;
}

.paid-panel .source-license-entry small {
  display: -webkit-box;
  overflow: hidden;
  max-width: 430px;
  color: rgba(255, 242, 206, 0.84);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.paid-panel .source-license-entry b {
  min-width: 86px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 234, 176, 0.54);
  border-radius: 999px;
  color: #221404;
  background: linear-gradient(135deg, #fff0bd, #e2ad45);
  box-shadow: 0 12px 26px rgba(68, 42, 7, 0.28), inset 0 1px rgba(255, 255, 255, 0.45);
  font-size: 16px;
  text-align: center;
}

.paid-panel .fuyao-pavilion-entry {
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  width: 100%;
  min-height: 86px;
  margin: 0 0 18px;
  padding: 14px;
  border-color: rgba(255, 203, 92, 0.34);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(31, 23, 22, 0.88), rgba(68, 43, 28, 0.58));
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.22),
    inset 0 1px rgba(255, 255, 255, 0.14);
}

.paid-panel .fuyao-pavilion-entry-mark {
  position: relative;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 246, 206, 0.5);
  border-radius: 18px;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.78), transparent 18%),
    linear-gradient(140deg, #f2d184, #b9822d);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.22),
    inset 0 1px rgba(255, 255, 255, 0.42);
}

.paid-panel .fuyao-pavilion-entry .eyebrow {
  color: #ffeab0;
}

.paid-panel .fuyao-pavilion-entry strong {
  max-width: 410px;
  margin-bottom: 0;
  font-size: 20px;
  line-height: 1.18;
  white-space: nowrap;
}

.paid-panel .fuyao-pavilion-entry b {
  min-width: 62px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 234, 176, 0.54);
  border-radius: 999px;
  color: #221404;
  background: linear-gradient(135deg, #fff0bd, #e2ad45);
  box-shadow: 0 12px 26px rgba(68, 42, 7, 0.28), inset 0 1px rgba(255, 255, 255, 0.45);
  font-size: 14px;
  text-align: center;
}

.fuyao-pavilion-page {
  padding-bottom: calc(var(--bottom-menu-space, 112px) + env(safe-area-inset-bottom, 0px));
}

.fuyao-pavilion-hero {
  position: relative;
  overflow: hidden;
  margin: 12px 0 18px;
  padding: 22px 18px;
  border: 1px solid rgba(255, 223, 142, 0.28);
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 14%, rgba(118, 211, 255, 0.2), transparent 34%),
    radial-gradient(circle at 8% -14%, rgba(255, 240, 162, 0.32), transparent 36%),
    linear-gradient(145deg, rgba(33, 23, 51, 0.92), rgba(65, 40, 31, 0.82));
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.16);
}

.fuyao-pavilion-hero h3 {
  margin: 6px 0 8px;
  font-size: 28px;
}

.fuyao-pavilion-hero p:last-child {
  max-width: 260px;
  margin: 0;
  color: rgba(255, 242, 206, 0.78);
  line-height: 1.6;
}

.fuyao-pavilion-grid {
  display: grid;
  gap: 14px;
}

.fuyao-pavilion-card {
  margin: 0;
  min-height: 124px;
  border-radius: 26px;
}

.fuyao-pavilion-card-skin {
  background:
    radial-gradient(circle at 14% -12%, rgba(255, 246, 184, 0.58), transparent 36%),
    linear-gradient(135deg, rgba(68, 35, 13, 0.94), rgba(123, 72, 28, 0.68) 52%, rgba(36, 22, 22, 0.92));
}

.fuyao-pavilion-card-luck {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 132, 102, 0.32), transparent 38%),
    radial-gradient(circle at 10% -10%, rgba(255, 225, 151, 0.24), transparent 34%),
    linear-gradient(135deg, rgba(62, 18, 26, 0.96), rgba(122, 38, 31, 0.76) 54%, rgba(31, 16, 25, 0.94));
}

.fuyao-pavilion-card-support {
  border-color: rgba(255, 219, 151, 0.42);
  background:
    radial-gradient(circle at 86% 6%, rgba(255, 238, 171, 0.3), transparent 36%),
    radial-gradient(circle at 12% 108%, rgba(197, 67, 72, 0.34), transparent 42%),
    linear-gradient(135deg, rgba(51, 20, 39, 0.96), rgba(95, 44, 35, 0.76) 54%, rgba(24, 16, 31, 0.94));
}

.fuyao-pavilion-card-mark {
  border: 1px solid rgba(255, 246, 206, 0.46);
  box-shadow:
    0 14px 30px rgba(0, 0, 0, 0.28),
    0 0 26px rgba(255, 215, 111, 0.26),
    inset 0 1px rgba(255, 255, 255, 0.36);
}

.fuyao-pavilion-card-luck .fuyao-pavilion-card-mark {
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.68), transparent 20%),
    linear-gradient(135deg, #ffd6a4, #d55345 58%, #7b1f35);
}

.fuyao-pavilion-card-support .fuyao-pavilion-card-mark {
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.72), transparent 20%),
    linear-gradient(135deg, #fff1b8, #d7993f 54%, #a52d3f);
}

.fuyao-pavilion-card strong {
  font-size: 18px;
}

.luck-shop-page {
  padding-bottom: calc(var(--bottom-menu-space, 112px) + env(safe-area-inset-bottom, 0px));
}

.luck-shop-hero {
  position: relative;
  overflow: hidden;
  margin: 12px 0 18px;
  padding: 22px 18px;
  border: 1px solid rgba(255, 190, 128, 0.34);
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 118, 102, 0.26), transparent 34%),
    radial-gradient(circle at 8% -14%, rgba(255, 226, 154, 0.3), transparent 36%),
    linear-gradient(145deg, rgba(61, 20, 30, 0.94), rgba(88, 42, 35, 0.82));
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.16);
}

.luck-shop-hero h3 {
  margin: 6px 0 8px;
  font-size: 28px;
}

.luck-shop-hero p:last-child {
  max-width: 300px;
  margin: 0;
  color: rgba(255, 242, 206, 0.8);
  line-height: 1.6;
}

.luck-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.luck-shop-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 208, 145, 0.28);
  border-radius: 22px;
  color: #fff8e8;
  background:
    radial-gradient(circle at 86% 0%, rgba(255, 132, 102, 0.2), transparent 36%),
    linear-gradient(145deg, rgba(72, 24, 31, 0.88), rgba(27, 18, 30, 0.94));
  text-align: left;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.12);
}

.luck-shop-card-image {
  overflow: hidden;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.06);
}

.luck-shop-card-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.luck-shop-card-copy {
  display: grid;
  gap: 4px;
}

.luck-shop-card-copy em {
  color: rgba(255, 211, 151, 0.9);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.luck-shop-card-copy strong {
  min-height: 38px;
  font-size: 15px;
  line-height: 1.25;
}

.luck-shop-card-copy small {
  display: -webkit-box;
  overflow: hidden;
  min-height: 38px;
  color: rgba(255, 242, 206, 0.68);
  font-size: 12px;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.luck-shop-card b {
  justify-self: start;
  padding: 5px 9px;
  border-radius: 999px;
  color: #2a160d;
  background: linear-gradient(135deg, #ffe3a2, #e49a45);
  font-size: 13px;
}

.luck-bracelet-detail {
  display: grid;
  gap: 13px;
}

.luck-bracelet-detail figure {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 222, 170, 0.18);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.055);
}

.luck-bracelet-detail img {
  display: block;
  width: 100%;
  max-height: min(50vh, 440px);
  object-fit: contain;
  background: rgba(8, 5, 18, 0.48);
}

.luck-bracelet-detail figcaption {
  padding: 10px 12px;
  color: rgba(255, 242, 206, 0.76);
  font-size: 12px;
  line-height: 1.55;
}

.oracle-tool-grid {
  display: grid;
  gap: 14px;
  margin: 0 0 22px;
}

.web-only-hecan {
  display: none;
}

body.web-build .web-only-hecan {
  display: grid;
}

.mobile-only-hecan,
.mobile-only-world {
  display: none;
}

body.mobile-web-build .mobile-only-world,
body.mobile-preview .mobile-only-world {
  display: grid;
}

.oracle-tool-entry {
  grid-template-columns: 60px 1fr auto;
  gap: 14px;
  min-height: 118px;
  margin: 0;
  border-radius: 28px;
  border-color: rgba(205, 194, 255, 0.28);
  box-shadow:
    0 20px 46px rgba(0, 0, 0, 0.28),
    inset 0 1px rgba(255, 255, 255, 0.18);
  text-decoration: none;
}

.oracle-tool-entry .eyebrow {
  color: rgba(230, 222, 255, 0.76);
}

.oracle-tool-entry small {
  max-width: 230px;
  color: rgba(246, 241, 255, 0.78);
}

.oracle-tool-entry b {
  padding: 9px 12px;
  border: 1px solid rgba(243, 208, 107, 0.32);
  border-radius: 999px;
  color: var(--gold);
  background: rgba(243, 208, 107, 0.08);
  font-size: 13px;
}

.tarot-tool-entry {
  background:
    radial-gradient(circle at 16% 0%, rgba(189, 158, 255, 0.34), transparent 42%),
    linear-gradient(135deg, rgba(28, 18, 54, 0.88), rgba(75, 45, 96, 0.46));
}

.sandbox-tool-entry {
  border-color: rgba(190, 169, 255, 0.36);
  background:
    radial-gradient(circle at 14% -10%, rgba(202, 179, 255, 0.34), transparent 38%),
    radial-gradient(circle at 88% 12%, rgba(255, 230, 156, 0.18), transparent 36%),
    linear-gradient(135deg, rgba(28, 19, 57, 0.92), rgba(72, 46, 109, 0.62));
}

.sandbox-tool-entry .oracle-tool-entry-mark {
  color: #251535;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.86), transparent 18%),
    linear-gradient(140deg, #f3d06b, #c2a8ff 58%, #7b4cff);
  box-shadow: 0 12px 30px rgba(126, 78, 255, 0.26);
}

.liuyao-tool-entry {
  background:
    radial-gradient(circle at 16% 0%, rgba(243, 208, 107, 0.3), transparent 42%),
    linear-gradient(135deg, rgba(31, 25, 15, 0.88), rgba(73, 55, 24, 0.48));
}

.hecan-tool-entry {
  border-color: rgba(146, 222, 255, 0.4);
  background:
    radial-gradient(circle at 13% 0%, rgba(243, 208, 107, 0.32), transparent 34%),
    radial-gradient(circle at 82% 8%, rgba(94, 208, 255, 0.24), transparent 38%),
    linear-gradient(135deg, rgba(29, 20, 53, 0.94), rgba(22, 51, 70, 0.72));
}

.hecan-tool-entry .oracle-tool-entry-mark {
  color: #201308;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.84), transparent 18%),
    linear-gradient(140deg, #ffe99a, #b69cff 58%, #5ed0ff);
  box-shadow: 0 12px 30px rgba(116, 130, 225, 0.28);
}

.hecan-tool-entry .eyebrow {
  color: rgba(190, 225, 255, 0.82);
}

.mobile-only-hecan.hecan-tool-entry {
  min-height: 132px;
  border-color: rgba(163, 217, 255, 0.48);
  background:
    radial-gradient(circle at 10% -8%, rgba(255, 231, 148, 0.38), transparent 34%),
    radial-gradient(circle at 84% 0%, rgba(107, 218, 255, 0.28), transparent 38%),
    linear-gradient(135deg, rgba(24, 17, 55, 0.96), rgba(19, 53, 74, 0.76));
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.32),
    0 0 34px rgba(92, 196, 255, 0.16),
    inset 0 1px rgba(255, 255, 255, 0.2);
}

.paid-grid .premium-module-entry {
  grid-template-columns: 1fr;
  align-content: start;
  gap: 0;
  min-height: 164px;
  margin: 0;
  padding: 16px;
}

.paid-grid .premium-module-entry-mark {
  width: 54px;
  height: 54px;
  margin-bottom: 12px;
}

.paid-grid .premium-module-entry strong {
  font-size: 18px;
}

.paid-grid .premium-module-entry small {
  display: -webkit-box;
  overflow: hidden;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.paid-grid .premium-module-entry b {
  grid-column: auto;
  margin-top: 12px;
}

.kline-card.premium-module-entry {
  grid-template-columns: 60px 1fr;
}

.skin-shop-page {
  color: var(--text);
}

.skin-shop-hero {
  margin-bottom: 20px;
  padding: 22px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 203, 92, 0.2), transparent 36%),
    rgba(255, 255, 255, 0.06);
}

.skin-shop-hero h3 {
  margin-bottom: 8px;
  font-size: 25px;
}

.skin-shop-hero p:last-child {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.skin-shop-grid {
  display: grid;
  gap: 18px;
}

.skin-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 14px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--skin-card-accent) 42%, transparent);
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.08)),
    var(--skin-card-bg) center / cover no-repeat;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.16);
}

.skin-card.active {
  box-shadow: 0 0 0 1px var(--skin-card-accent), 0 16px 32px rgba(0, 0, 0, 0.24);
}

.skin-card-preview {
  position: relative;
  width: 82px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.skin-card-preview img {
  width: 82px;
  height: 82px;
  border: 2px solid color-mix(in srgb, var(--skin-card-accent) 70%, white 16%);
  border-radius: 50%;
  object-fit: cover;
}

.skin-preview-trigger {
  cursor: pointer;
}

.skin-preview-trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--skin-card-accent) 76%, white 10%);
  outline-offset: 3px;
}

.locked-skin-preview {
  cursor: default;
}

.skin-card-preview b {
  position: absolute;
  right: -4px;
  bottom: -2px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #171019;
  background: var(--skin-card-accent);
  font-weight: 900;
}

.skin-card-copy {
  min-width: 0;
}

.skin-card-copy span {
  display: inline-flex;
  margin-bottom: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #171019;
  background: var(--skin-card-accent);
  font-size: 12px;
  font-weight: 900;
}

.skin-card-copy h4 {
  margin: 0 0 6px;
  font-size: 18px;
}

.skin-card-copy p,
.skin-card-copy small {
  display: block;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
}

.skin-card-copy small {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 12px;
}

.skin-card-action {
  grid-column: 1 / -1;
  min-height: 42px;
}

.skin-card-action:disabled {
  cursor: default;
  color: #171019;
  background: linear-gradient(135deg, var(--skin-card-accent), rgba(255, 255, 255, 0.86));
  opacity: 1;
}

.skin-card-suite {
  grid-template-columns: 96px 1fr;
  padding: 18px 16px;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.56), rgba(0, 0, 0, 0.16)),
    var(--skin-card-bg) center / cover no-repeat;
}

.skin-card-suite .skin-card-preview {
  width: 96px;
}

.skin-card-suite .skin-card-preview img {
  width: 96px;
  height: 128px;
  border-radius: 18px;
}

.skin-card-suite .skin-card-preview b {
  right: -6px;
  bottom: 8px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

.skin-card-variant-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.skin-card-variant-grid span,
.skin-card-variant-grid button {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 13;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--skin-card-accent) 34%, rgba(255, 255, 255, 0.12));
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}

.skin-card-variant-grid img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.skin-card-variant-grid i {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #201305;
  background: color-mix(in srgb, var(--skin-card-accent) 86%, white 18%);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.24);
}

.skin-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.skin-preview-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.skin-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 3, 14, 0.72);
  backdrop-filter: blur(12px);
}

.skin-preview-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  width: min(100%, 430px);
  max-height: 100%;
  padding: 12px;
  border: 1px solid rgba(246, 241, 255, 0.18);
  border-radius: 22px;
  background: rgba(22, 16, 36, 0.96);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.46);
}

.skin-preview-dialog img {
  display: block;
  width: 100%;
  max-height: min(70vh, 680px);
  border-radius: 16px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.04);
}

.skin-preview-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(246, 241, 255, 0.22);
  border-radius: 50%;
  color: var(--text);
  background: rgba(8, 5, 20, 0.68);
  font-size: 22px;
}

.skin-preview-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.skin-preview-actions .primary-btn {
  min-height: 42px;
  padding: 0 18px;
  display: inline-grid;
  place-items: center;
  text-decoration: none;
}

.paid-panel .panel-heading {
  display: block;
  margin-bottom: 24px;
  text-align: center;
}

.paid-panel .panel-heading h3 {
  margin: 2px 0 8px;
  font-size: clamp(30px, 8vw, 38px);
  letter-spacing: 0.08em;
}

.paid-panel .panel-heading p {
  max-width: 290px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.wallet-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0 0 14px;
  padding: 16px;
  border: 1px solid rgba(243, 208, 107, 0.32);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 12%, rgba(243, 208, 107, 0.22), transparent 42%),
    linear-gradient(135deg, rgba(116, 68, 255, 0.24), rgba(255, 255, 255, 0.04));
}

.wallet-card span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  color: #24172f;
  background: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.wallet-card span.active {
  box-shadow: 0 0 18px rgba(243, 208, 107, 0.42);
}

.wallet-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 24px;
}

.wallet-card small {
  color: var(--muted);
  line-height: 1.55;
}

.wallet-actions,
.drawer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.drawer-action-card button {
  width: 100%;
}

.paid-card:not(.premium-module-entry),
.kline-card:not(.premium-module-entry) {
  border: 1px solid var(--line);
  color: var(--text);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03)),
    rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.14);
}

.paid-card:not(.premium-module-entry) {
  min-height: 144px;
  padding: 16px;
  border-radius: 24px;
  text-align: left;
}

.paid-card:not(.premium-module-entry) > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: 14px;
  color: #201636;
  background: var(--gold);
  font-weight: 900;
}

.paid-card:not(.premium-module-entry) strong,
.kline-card:not(.premium-module-entry) strong {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
}

.paid-card:not(.premium-module-entry) small,
.kline-card:not(.premium-module-entry) small {
  color: var(--muted);
  line-height: 1.5;
}

.kline-card:not(.premium-module-entry) {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 22px;
  padding: 18px;
  border-radius: 24px;
  text-align: left;
}

#klineSvg {
  width: 100%;
  height: 120px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.18);
}

.tarot-panel,
.liuyao-panel {
  gap: 16px;
}

.module-page.tarot-panel.active,
.module-page.liuyao-panel.active {
  display: grid;
}

.tarot-panel .panel-heading p,
.liuyao-panel .panel-heading p {
  max-width: 240px;
  color: var(--muted);
  line-height: 1.55;
}

.tarot-deck {
  position: relative;
  width: min(232px, 76%);
  min-height: 420px;
  margin: 6px auto 2px;
  display: grid;
  grid-template-rows: 350px auto auto;
  justify-items: center;
  align-items: start;
  border: 0;
  color: #fff7df;
  background: transparent;
  isolation: isolate;
}

.tarot-deck span {
  position: absolute;
  inset: 0 0 auto;
  height: 308px;
  z-index: var(--deck-z, 1);
  pointer-events: none;
  border: 1px solid rgba(243, 208, 107, 0.58);
  border-radius: 24px;
  background:
    linear-gradient(rgba(16, 9, 34, 0.24), rgba(16, 9, 34, 0.46)),
    var(--tarot-face),
    radial-gradient(circle at 22% 18%, rgba(255, 235, 170, 0.36), transparent 22%),
    radial-gradient(circle at 82% 78%, rgba(116, 72, 255, 0.42), transparent 30%),
    linear-gradient(145deg, rgba(30, 20, 58, 0.94), rgba(13, 8, 31, 0.98));
  background-size: cover, cover, auto, auto, auto;
  background-position: center;
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.36), inset 0 1px rgba(255, 255, 255, 0.22);
  opacity: var(--deck-opacity, 0.92);
  transform: var(--deck-rest);
  transform-origin: center 72%;
  will-change: transform, opacity;
}

.tarot-deck span::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(243, 208, 107, 0.42);
  border-radius: 18px;
  background:
    linear-gradient(45deg, transparent 44%, rgba(243, 208, 107, 0.18) 45%, rgba(243, 208, 107, 0.18) 55%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, rgba(215, 205, 255, 0.16) 45%, rgba(215, 205, 255, 0.16) 55%, transparent 56%);
}

.tarot-deck span:nth-child(1) {
  --tarot-face: url("assets/tarot/00-fool.jpg");
  --deck-z: 1;
  --deck-rest: rotate(-12deg) translate(-24px, 10px);
  --shuffle-a: rotate(-28deg) translate(-118px, 28px);
  --shuffle-b: rotate(12deg) translate(70px, -18px);
  --shuffle-c: rotate(-8deg) translate(-18px, 4px);
}

.tarot-deck span:nth-child(2) {
  --tarot-face: url("assets/tarot/01-magician.jpg");
  --deck-z: 2;
  --deck-rest: rotate(9deg) translate(18px, 8px);
  --shuffle-a: rotate(24deg) translate(116px, 20px);
  --shuffle-b: rotate(-10deg) translate(-72px, -20px);
  --shuffle-c: rotate(6deg) translate(16px, 2px);
}

.tarot-deck span:nth-child(3) {
  --tarot-face: url("assets/tarot/02-high-priestess.jpg");
  --deck-z: 3;
  --deck-rest: rotate(-7deg) translate(-14px, 6px);
  --shuffle-a: rotate(-22deg) translate(-106px, -2px);
  --shuffle-b: rotate(16deg) translate(78px, 16px);
  --shuffle-c: rotate(-4deg) translate(-12px, 1px);
}

.tarot-deck span:nth-child(4) {
  --tarot-face: url("assets/tarot/03-empress.jpg");
  --deck-z: 4;
  --deck-rest: rotate(6deg) translate(12px, 5px);
  --shuffle-a: rotate(20deg) translate(108px, -8px);
  --shuffle-b: rotate(-14deg) translate(-78px, 18px);
  --shuffle-c: rotate(4deg) translate(11px, 1px);
}

.tarot-deck span:nth-child(5) {
  --tarot-face: url("assets/tarot/06-lovers.jpg");
  --deck-z: 5;
  --deck-rest: rotate(-5deg) translate(-9px, 4px);
  --shuffle-a: rotate(-18deg) translate(-96px, 18px);
  --shuffle-b: rotate(18deg) translate(84px, -14px);
  --shuffle-c: rotate(-3deg) translate(-8px, 0);
}

.tarot-deck span:nth-child(6) {
  --tarot-face: url("assets/tarot/07-chariot.jpg");
  --deck-z: 6;
  --deck-rest: rotate(4deg) translate(8px, 3px);
  --shuffle-a: rotate(16deg) translate(94px, 24px);
  --shuffle-b: rotate(-17deg) translate(-84px, -16px);
  --shuffle-c: rotate(3deg) translate(7px, 0);
}

.tarot-deck span:nth-child(7) {
  --tarot-face: url("assets/tarot/10-wheel-of-fortune.jpg");
  --deck-z: 7;
  --deck-rest: rotate(-3deg) translate(-5px, 2px);
  --shuffle-a: rotate(-15deg) translate(-84px, -18px);
  --shuffle-b: rotate(20deg) translate(90px, 22px);
  --shuffle-c: rotate(-2deg) translate(-5px, 0);
}

.tarot-deck span:nth-child(8) {
  --tarot-face: url("assets/tarot/11-justice.jpg");
  --deck-z: 8;
  --deck-rest: rotate(3deg) translate(5px, 1px);
  --shuffle-a: rotate(14deg) translate(82px, -18px);
  --shuffle-b: rotate(-20deg) translate(-92px, 20px);
  --shuffle-c: rotate(2deg) translate(5px, 0);
}

.tarot-deck span:nth-child(9) {
  --tarot-face: url("assets/tarot/13-death.jpg");
  --deck-z: 9;
  --deck-rest: rotate(-2deg) translate(-3px, 0);
  --shuffle-a: rotate(-12deg) translate(-72px, 26px);
  --shuffle-b: rotate(21deg) translate(94px, -10px);
  --shuffle-c: rotate(-1deg) translate(-3px, 0);
}

.tarot-deck span:nth-child(10) {
  --tarot-face: url("assets/tarot/17-star.jpg");
  --deck-z: 10;
  --deck-rest: rotate(2deg) translate(3px, 0);
  --shuffle-a: rotate(12deg) translate(72px, 26px);
  --shuffle-b: rotate(-21deg) translate(-94px, -10px);
  --shuffle-c: rotate(1deg) translate(3px, 0);
}

.tarot-deck span:nth-child(11) {
  --tarot-face: url("assets/tarot/21-world.jpg");
  --deck-z: 11;
  --deck-rest: rotate(-1deg) translate(-1px, 0);
  --shuffle-a: rotate(-9deg) translate(-58px, -24px);
  --shuffle-b: rotate(18deg) translate(86px, 12px);
  --shuffle-c: rotate(-1deg) translate(-1px, 0);
}

.tarot-deck span:nth-child(12) {
  --tarot-face: url("assets/tarot/19-sun.jpg");
  --deck-z: 12;
  --deck-rest: rotate(0deg) translate(0, 0);
  --shuffle-a: rotate(9deg) translate(58px, -24px);
  --shuffle-b: rotate(-18deg) translate(-86px, 12px);
  --shuffle-c: rotate(0deg) translate(0, 0);
}

.tarot-deck strong,
.tarot-deck small {
  position: relative;
  z-index: 20;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.48);
}

.tarot-deck strong {
  grid-row: 2;
  margin-top: 18px;
  line-height: 1;
  font-size: 24px;
  font-family: ui-serif, "Songti SC", "STSong", serif;
  letter-spacing: 0.08em;
}

.tarot-deck small {
  grid-row: 3;
  margin-top: 8px;
  color: rgba(255, 247, 223, 0.72);
  font-size: 12px;
  line-height: 1.35;
}

.tarot-deck.shuffling span {
  animation: tarot-riffle var(--shuffle-time, 1680ms) cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: var(--shuffle-delay, 0ms);
}

.tarot-deck.shuffling span:nth-child(1),
.tarot-deck.shuffling span:nth-child(2) {
  --shuffle-delay: 0ms;
}

.tarot-deck.shuffling span:nth-child(3),
.tarot-deck.shuffling span:nth-child(4) {
  --shuffle-delay: 45ms;
}

.tarot-deck.shuffling span:nth-child(5),
.tarot-deck.shuffling span:nth-child(6) {
  --shuffle-delay: 90ms;
}

.tarot-deck.shuffling span:nth-child(7),
.tarot-deck.shuffling span:nth-child(8) {
  --shuffle-delay: 135ms;
}

.tarot-deck.shuffling span:nth-child(9),
.tarot-deck.shuffling span:nth-child(10) {
  --shuffle-delay: 180ms;
}

.tarot-deck.shuffling span:nth-child(11),
.tarot-deck.shuffling span:nth-child(12) {
  --shuffle-delay: 225ms;
}

.tarot-deck.cutting span:nth-child(n + 7) {
  animation: tarot-cut 620ms ease-in-out both;
}

.tarot-deck.drawn {
  filter: drop-shadow(0 0 22px rgba(243, 208, 107, 0.2));
}

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

.tarot-result {
  min-height: 118px;
  color: var(--muted);
}

.tarot-spread {
  display: grid;
  gap: 12px;
}

.tarot-card-result {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(243, 208, 107, 0.2);
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 0%, rgba(243, 208, 107, 0.14), transparent 34%),
    rgba(255, 255, 255, 0.05);
  animation: tarot-flip-in 280ms ease both;
}

.tarot-card-image {
  width: 92px;
  aspect-ratio: 300 / 519;
  object-fit: cover;
  border: 1px solid rgba(243, 208, 107, 0.28);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.tarot-card-result.reversed .tarot-card-image {
  transform: rotate(180deg);
}

.tarot-card-result span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 4px 10px;
  border: 1px solid rgba(215, 205, 255, 0.22);
  border-radius: 999px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.06);
  font-size: 12px;
  font-weight: 900;
}

.tarot-card-result strong {
  display: block;
  color: var(--text);
  font-size: 18px;
}

.tarot-card-result em {
  display: block;
  margin: 6px 0 8px;
  color: var(--gold);
  font-style: normal;
  font-weight: 900;
}

.tarot-card-result p {
  margin: 0 0 8px;
  color: rgba(246, 241, 255, 0.86);
  line-height: 1.65;
}

.tarot-card-result small {
  color: var(--muted);
  line-height: 1.55;
}

.tarot-card-result.reversed {
  border-color: rgba(215, 205, 255, 0.24);
  background:
    radial-gradient(circle at 88% 0%, rgba(132, 91, 255, 0.18), transparent 36%),
    rgba(255, 255, 255, 0.045);
}

.liuyao-entry {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.24),
    0 18px 48px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(16px);
}

.liuyao-entry:hover {
  background:
    radial-gradient(circle at 18% 0%, rgba(243, 208, 107, 0.18), transparent 36%),
    rgba(255, 255, 255, 0.075);
}

.liuyao-entry-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(243, 208, 107, 0.36);
  border-radius: 18px;
  color: var(--gold);
  background:
    radial-gradient(circle at 40% 24%, rgba(255, 237, 165, 0.34), transparent 34%),
    rgba(255, 255, 255, 0.08);
  font-size: 24px;
  font-weight: 900;
}

.liuyao-entry strong,
.liuyao-entry small,
.liuyao-entry b {
  display: block;
}

.liuyao-entry strong {
  margin: 5px 0 4px;
  font-size: 18px;
}

.liuyao-entry small {
  color: var(--muted);
  line-height: 1.5;
}

.liuyao-entry b {
  padding: 9px 13px;
  border: 1px solid rgba(243, 208, 107, 0.28);
  border-radius: 999px;
  color: var(--gold);
  background: rgba(243, 208, 107, 0.08);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.liuyao-question {
  display: grid;
  gap: 10px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid rgba(246, 241, 255, 0.12);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
    rgba(16, 13, 29, 0.42);
}

.liuyao-question label {
  color: var(--gold);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.liuyao-question textarea {
  width: 100%;
  max-width: 100%;
  min-height: 86px;
  resize: vertical;
  padding: 12px 14px;
  border: 1px solid rgba(246, 241, 255, 0.16);
  border-radius: 16px;
  color: var(--text);
  outline: none;
  background: rgba(255, 255, 255, 0.07);
  line-height: 1.55;
}

.liuyao-question textarea:focus {
  border-color: rgba(243, 208, 107, 0.48);
  box-shadow: 0 0 0 3px rgba(243, 208, 107, 0.08);
}

.liuyao-focus-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
}

.liuyao-focus-chips button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(246, 241, 255, 0.14);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.06);
  font-weight: 800;
  cursor: pointer;
}

.liuyao-focus-chips button.active {
  border-color: rgba(243, 208, 107, 0.52);
  color: var(--gold);
  background: rgba(243, 208, 107, 0.12);
}

.liuyao-cast-board {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid rgba(126, 225, 197, 0.16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 82% 0%, rgba(126, 225, 197, 0.14), transparent 32%),
    rgba(255, 255, 255, 0.04);
}

.liuyao-progress {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.liuyao-line-step {
  min-height: 58px;
  padding: 9px 8px;
  border: 1px solid rgba(246, 241, 255, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  text-align: center;
}

.liuyao-line-step span,
.liuyao-line-step b {
  display: block;
}

.liuyao-line-step span {
  color: var(--muted);
  font-size: 12px;
}

.liuyao-line-step b {
  margin-top: 5px;
  color: rgba(246, 241, 255, 0.72);
  font-size: 13px;
}

.liuyao-line-step.active {
  border-color: rgba(243, 208, 107, 0.48);
  background: rgba(243, 208, 107, 0.1);
}

.liuyao-line-step.done {
  border-color: rgba(126, 225, 197, 0.32);
  background: rgba(126, 225, 197, 0.09);
}

.liuyao-line-step.done b {
  color: #7ee1c5;
}

.coins {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 122px;
  gap: 14px;
  margin: 12px 0 16px;
  perspective: 720px;
  background:
    radial-gradient(ellipse at 50% 76%, rgba(0, 0, 0, 0.36), transparent 36%),
    radial-gradient(circle at 50% 26%, rgba(243, 208, 107, 0.08), transparent 34%);
  border-radius: 28px;
}

.coin-face {
  --coin-rest-x: 0px;
  --coin-rest-y: 0px;
  --coin-rest-r: 0deg;
  --coin-flight-x: 0px;
  --coin-air-x: 0px;
  --coin-final-spin: 900deg;
  --coin-mobile-mid-x: 0px;
  --coin-mobile-top-x: 0px;
  --coin-mobile-land-x: 0px;
  --coin-mobile-spin-a: 120deg;
  --coin-mobile-spin-b: 360deg;
  --coin-mobile-spin-c: 610deg;
  --coin-mobile-spin-d: 720deg;
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border: 2px solid rgba(86, 51, 14, 0.88);
  border-radius: 50%;
  color: #382206;
  background:
    radial-gradient(circle at 29% 19%, rgba(255, 238, 163, 0.7), transparent 12%),
    radial-gradient(circle at 66% 75%, rgba(42, 23, 5, 0.62), transparent 25%),
    radial-gradient(circle at 50% 50%, rgba(190, 113, 28, 0.36), transparent 48%),
    conic-gradient(from 18deg, #422607, #8f5719, #d79b35, #f4c96a, #915514, #c78128, #4a2a08, #b06a20, #422607);
  box-shadow:
    inset 0 3px 6px rgba(255, 238, 164, 0.28),
    inset 0 -6px 12px rgba(37, 20, 5, 0.52),
    inset 0 0 0 4px rgba(52, 29, 7, 0.22),
    inset 0 0 0 9px rgba(255, 224, 135, 0.08),
    0 12px 20px rgba(0, 0, 0, 0.32);
  font-weight: 900;
  isolation: isolate;
  overflow: hidden;
  transform: translate3d(var(--coin-rest-x), var(--coin-rest-y), 0) rotateZ(var(--coin-rest-r));
  backface-visibility: visible;
  will-change: transform, filter;
}

.coins > .coin-face:nth-child(1) {
  --coin-rest-x: -5px;
  --coin-rest-y: 9px;
  --coin-rest-r: -13deg;
  --coin-flight-x: -28px;
  --coin-air-x: -42px;
  --coin-final-spin: 1020deg;
  --coin-mobile-mid-x: -18px;
  --coin-mobile-top-x: -34px;
  --coin-mobile-land-x: -8px;
  --coin-mobile-spin-a: 118deg;
  --coin-mobile-spin-b: 346deg;
  --coin-mobile-spin-c: 608deg;
  --coin-mobile-spin-d: 736deg;
}

.coins > .coin-face:nth-child(2) {
  --coin-rest-x: 0px;
  --coin-rest-y: -3px;
  --coin-rest-r: 7deg;
  --coin-flight-x: 5px;
  --coin-air-x: 9px;
  --coin-final-spin: 1180deg;
  --coin-mobile-mid-x: 4px;
  --coin-mobile-top-x: 8px;
  --coin-mobile-land-x: 1px;
  --coin-mobile-spin-a: 142deg;
  --coin-mobile-spin-b: 392deg;
  --coin-mobile-spin-c: 672deg;
  --coin-mobile-spin-d: 806deg;
}

.coins > .coin-face:nth-child(3) {
  --coin-rest-x: 6px;
  --coin-rest-y: 11px;
  --coin-rest-r: 16deg;
  --coin-flight-x: 30px;
  --coin-air-x: 45px;
  --coin-final-spin: 960deg;
  --coin-mobile-mid-x: 20px;
  --coin-mobile-top-x: 36px;
  --coin-mobile-land-x: 9px;
  --coin-mobile-spin-a: 104deg;
  --coin-mobile-spin-b: 328deg;
  --coin-mobile-spin-c: 582deg;
  --coin-mobile-spin-d: 704deg;
}

.coin-face::before {
  content: "";
  position: absolute;
  z-index: 2;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(45, 24, 5, 0.88);
  border-radius: 3px;
  background:
    linear-gradient(135deg, rgba(255, 223, 132, 0.18), rgba(16, 8, 2, 0.98)),
    rgba(11, 6, 2, 0.96);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.74),
    0 0 0 3px rgba(98, 58, 14, 0.16);
}

.coin-face::after {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 1;
  border: 2px solid rgba(58, 31, 6, 0.62);
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 28%, rgba(255, 235, 157, 0.12), transparent 18%),
    repeating-conic-gradient(from 12deg, rgba(255, 231, 148, 0.1) 0 3deg, rgba(49, 26, 5, 0.18) 3deg 7deg),
    radial-gradient(circle, transparent 0 33%, rgba(255, 224, 133, 0.14) 34% 41%, transparent 42% 55%, rgba(40, 21, 4, 0.18) 56% 63%, transparent 64%);
  mix-blend-mode: multiply;
  opacity: 0.58;
}

.coin-front {
  background:
    radial-gradient(circle at 27% 18%, rgba(255, 244, 184, 0.72), transparent 12%),
    radial-gradient(circle at 67% 74%, rgba(42, 21, 4, 0.54), transparent 25%),
    radial-gradient(circle at 51% 47%, rgba(195, 119, 27, 0.42), transparent 42%),
    radial-gradient(circle, transparent 0 36%, rgba(255, 225, 134, 0.13) 37% 45%, transparent 46%),
    conic-gradient(from 20deg, #482a08, #ad6d20, #e6aa43, #ffd97d, #925614, #d09132, #5a350c, #a96720, #482a08);
}

.coin-face i {
  position: absolute;
  z-index: 4;
  color: rgba(62, 34, 8, 0.94);
  font-family: "Kaiti SC", "STKaiti", "Songti SC", "STSong", "Noto Serif SC", serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  text-shadow:
    0 1px 0 rgba(255, 235, 155, 0.5),
    0 2px 1px rgba(255, 210, 94, 0.18),
    0 -1px 0 rgba(18, 9, 1, 0.54);
}

.coin-front i:nth-of-type(1) {
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
}

.coin-front i:nth-of-type(2) {
  bottom: 11px;
  left: 50%;
  transform: translateX(-50%);
}

.coin-front i:nth-of-type(3) {
  top: 50%;
  right: 11px;
  transform: translateY(-50%);
}

.coin-front i:nth-of-type(4) {
  top: 50%;
  left: 11px;
  transform: translateY(-50%);
}

.coin-back {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 231, 152, 0.48), transparent 13%),
    radial-gradient(circle at 65% 72%, rgba(37, 19, 4, 0.58), transparent 26%),
    radial-gradient(circle, transparent 0 36%, rgba(255, 225, 134, 0.1) 37% 45%, transparent 46%),
    conic-gradient(from 80deg, #3f2507, #794913, #b87523, #df9f3b, #8a5419, #3b2307, #965b1a, #3f2507);
}

.coin-back::after {
  opacity: 0.34;
}

.coin-rub {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle at 21% 32%, rgba(28, 74, 53, 0.12) 0 1px, transparent 3px),
    radial-gradient(circle at 76% 29%, rgba(33, 91, 64, 0.09) 0 1px, transparent 3px),
    radial-gradient(circle at 63% 82%, rgba(17, 59, 43, 0.1) 0 1px, transparent 3px),
    repeating-linear-gradient(132deg, rgba(255, 232, 154, 0.035) 0 1px, transparent 1px 8px);
  mix-blend-mode: multiply;
  opacity: 0.42;
}

.coins.flipping > .coin-face {
  animation: coin-cast-real 980ms cubic-bezier(0.16, 0.78, 0.2, 1) both;
}

.coins.flipping > .coin-face:nth-child(2) {
  animation-delay: 44ms;
}

.coins.flipping > .coin-face:nth-child(3) {
  animation-delay: 88ms;
}

.liuyao-toss-btn {
  width: min(260px, 100%);
  margin: 0 auto;
}

.liuyao-toss-btn:disabled {
  opacity: 0.7;
  cursor: wait;
  filter: saturate(0.8);
}

.liuyao-cast-hint {
  margin: 0;
  color: var(--muted);
  text-align: center;
  line-height: 1.55;
}

.hexagram-result {
  color: var(--muted);
  line-height: 1.75;
}

.hexagram-lines {
  display: grid;
  gap: 7px;
  width: 88px;
  margin: 12px auto 16px;
}

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

.yao.broken {
  grid-template-columns: 1fr 1fr;
}

.yao span {
  border-radius: 999px;
  background: var(--soft);
}

.yao.moving span {
  background: linear-gradient(90deg, var(--gold), #7ee1c5);
  box-shadow: 0 0 16px rgba(243, 208, 107, 0.28);
}

.hexagram-result h4 {
  text-align: center;
}

.liuyao-result-hero {
  display: grid;
  grid-template-columns: minmax(72px, 120px) minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 16px;
  border: 1px solid rgba(243, 208, 107, 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 10% 10%, rgba(243, 208, 107, 0.14), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035));
}

.liuyao-result-hero .hexagram-lines {
  margin: 0 auto;
}

.liuyao-result-hero h4 {
  margin: 2px 0 6px;
  color: var(--text);
  text-align: left;
  font-size: 22px;
}

.liuyao-result-hero p,
.liuyao-result-hero small {
  display: block;
  margin: 0;
}

.liuyao-result-hero small {
  margin-top: 6px;
  color: rgba(126, 225, 197, 0.88);
  line-height: 1.55;
}

.liuyao-dual-reading {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.liuyao-reading-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(246, 241, 255, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.045);
}

.liuyao-reading-card.changed-reading {
  border-color: rgba(126, 225, 197, 0.24);
  background:
    radial-gradient(circle at 100% 0%, rgba(126, 225, 197, 0.12), transparent 38%),
    rgba(255, 255, 255, 0.045);
}

.liuyao-reading-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.liuyao-reading-head span {
  padding: 5px 9px;
  border-radius: 999px;
  color: #7ee1c5;
  background: rgba(126, 225, 197, 0.12);
  font-size: 12px;
  font-weight: 900;
}

.liuyao-reading-head h5 {
  margin: 0;
  color: var(--text);
  font-size: 19px;
}

.liuyao-reading-head small {
  color: var(--muted);
}

.liuyao-reading-card > p {
  margin: 0 0 12px;
}

.liuyao-reading-card strong {
  color: var(--gold);
}

.changed-summary {
  display: grid;
  gap: 9px;
  margin-bottom: 12px;
}

.changed-summary p {
  margin: 0;
}

.changed-summary div {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 9px 10px;
  border: 1px solid rgba(126, 225, 197, 0.12);
  border-radius: 14px;
  background: rgba(126, 225, 197, 0.06);
}

.changed-summary span {
  color: #7ee1c5;
  font-weight: 900;
}

.changed-summary b {
  color: rgba(246, 241, 255, 0.86);
  font-weight: 700;
  line-height: 1.55;
}

.liuyao-topic-grid {
  display: grid;
  gap: 9px;
}

.liuyao-topic-grid article {
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(246, 241, 255, 0.1);
  border-radius: 16px;
  background: rgba(16, 13, 29, 0.32);
}

.liuyao-topic-grid article.highlight {
  border-color: rgba(243, 208, 107, 0.38);
  background:
    linear-gradient(135deg, rgba(243, 208, 107, 0.12), rgba(255, 255, 255, 0.035));
}

.changed-topic-grid article {
  border-color: rgba(126, 225, 197, 0.12);
}

.liuyao-topic-grid article div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.liuyao-topic-grid article strong {
  color: var(--text);
}

.liuyao-topic-grid article span {
  color: #7ee1c5;
  font-weight: 900;
}

.liuyao-topic-grid article p {
  margin: 7px 0;
  color: rgba(246, 241, 255, 0.82);
  line-height: 1.58;
}

.liuyao-topic-grid article small {
  color: var(--muted);
}

.liuyao-moving-panel {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 139, 139, 0.2);
  border-radius: 20px;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 139, 139, 0.12), transparent 34%),
    rgba(255, 255, 255, 0.04);
}

.liuyao-moving-panel strong {
  color: #ffb1b1;
}

.liuyao-moving-panel p {
  margin: 8px 0 0;
}

.hex-grid {
  display: grid;
  gap: 10px;
}

.hex-grid article {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.hex-grid strong {
  color: var(--text);
}

@media (max-width: 520px) {
  .liuyao-entry {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .liuyao-entry b {
    grid-column: 2;
    width: max-content;
  }

  .liuyao-question,
  .liuyao-cast-board,
  .liuyao-result-hero,
  .liuyao-reading-card,
  .liuyao-moving-panel {
    padding: 10px;
    border-radius: 16px;
  }

  .liuyao-progress {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .liuyao-line-step {
    min-height: 50px;
    padding: 7px 6px;
  }

  .coins {
    min-height: 106px;
    gap: 7px;
    margin: 12px 0;
    overflow: hidden;
    perspective: none;
  }

  .coins > span {
    width: 62px;
    height: 62px;
  }

  .coin-face i {
    font-size: 11px;
  }

  .coins.flipping > .coin-face {
    animation: coin-cast-mobile-safe 1060ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
  }

  .liuyao-result-hero,
  .liuyao-dual-reading {
    grid-template-columns: 1fr;
  }

  .liuyao-result-hero {
    padding: 12px;
  }

  .liuyao-result-hero h4 {
    font-size: 19px;
  }

  .liuyao-reading-head {
    display: grid;
  }
}

@keyframes coin-cast-mobile-safe {
  0% {
    transform: translate3d(var(--coin-rest-x), var(--coin-rest-y), 0) rotateZ(var(--coin-rest-r)) scale(1);
  }
  14% {
    transform: translate3d(var(--coin-mobile-mid-x), -24px, 0) rotateZ(var(--coin-mobile-spin-a)) scale(1.04);
  }
  38% {
    transform: translate3d(var(--coin-mobile-top-x), -62px, 0) rotateZ(var(--coin-mobile-spin-b)) scale(0.98);
  }
  62% {
    transform: translate3d(var(--coin-mobile-land-x), 8px, 0) rotateZ(var(--coin-mobile-spin-c)) scale(1.04);
  }
  78% {
    transform: translate3d(var(--coin-rest-x), -7px, 0) rotateZ(var(--coin-mobile-spin-d)) scale(0.99);
  }
  100% {
    transform: translate3d(var(--coin-rest-x), var(--coin-rest-y), 0) rotateZ(var(--coin-rest-r)) scale(1);
  }
}

body.mobile-web-build .coins,
body.web-performance-lite .coins {
  overflow: hidden;
  perspective: none;
}

body.mobile-web-build .coins.flipping > .coin-face,
body.web-performance-lite .coins.flipping > .coin-face {
  animation: coin-cast-mobile-safe 1060ms cubic-bezier(0.18, 0.82, 0.22, 1) both;
}

@keyframes coin-cast-real {
  0% {
    filter: brightness(0.92) blur(0);
    transform:
      translate(var(--coin-rest-x), var(--coin-rest-y))
      rotateX(0deg)
      rotateY(0deg)
      rotateZ(var(--coin-rest-r))
      scale(1);
  }
  16% {
    filter: brightness(1.12) blur(0.2px);
    transform:
      translate(calc(var(--coin-flight-x) * 0.8), -42px)
      rotateX(24deg)
      rotateY(210deg)
      rotateZ(calc(var(--coin-rest-r) + 84deg))
      scale(1.05);
  }
  43% {
    filter: brightness(1.18) blur(0.35px);
    transform:
      translate(var(--coin-air-x), -78px)
      rotateX(-18deg)
      rotateY(calc(var(--coin-final-spin) * 0.68))
      rotateZ(calc(var(--coin-rest-r) + 172deg))
      scale(0.96);
  }
  69% {
    filter: brightness(0.98) blur(0);
    transform:
      translate(calc(var(--coin-rest-x) * 0.78), 12px)
      rotateX(0deg)
      rotateY(var(--coin-final-spin))
      rotateZ(calc(var(--coin-rest-r) - 5deg))
      scale(1.05);
  }
  86% {
    transform:
      translate(calc(var(--coin-rest-x) * 0.96), -7px)
      rotateX(0deg)
      rotateY(var(--coin-final-spin))
      rotateZ(calc(var(--coin-rest-r) + 3deg))
      scale(0.985);
  }
  100% {
    filter: brightness(1) blur(0);
    transform:
      translate(var(--coin-rest-x), var(--coin-rest-y))
      rotateX(0deg)
      rotateY(0deg)
      rotateZ(var(--coin-rest-r))
      scale(1);
  }
}

@keyframes module-card-ripple {
  0% {
    opacity: 0.86;
    transform: translate(-50%, -50%) scale(0);
  }
  72% {
    opacity: 0.28;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(24);
  }
}

@keyframes tarot-riffle {
  0% {
    opacity: 0.72;
    transform: var(--deck-rest);
  }
  18% {
    opacity: 0.94;
    transform: var(--shuffle-a) scale(0.98);
  }
  42% {
    opacity: 1;
    transform: var(--shuffle-b) scale(1.02);
  }
  64% {
    transform: var(--shuffle-c) scale(1);
  }
  82% {
    transform: rotate(0deg) translate(0, -18px) scale(1.03);
  }
  100% {
    opacity: var(--deck-opacity, 0.92);
    transform: var(--deck-rest);
  }
}

@keyframes tarot-cut {
  0% {
    transform: var(--deck-rest);
  }
  42% {
    transform: translate(74px, -16px) rotate(8deg) scale(0.98);
  }
  70% {
    transform: translate(-34px, 10px) rotate(-5deg) scale(1.01);
  }
  100% {
    transform: var(--deck-rest);
  }
}

@keyframes tarot-flip-in {
  from {
    opacity: 0;
    transform: translateY(10px) rotateX(12deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
  }
}

.drawer-backdrop {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: block;
  background:
    radial-gradient(circle at 50% 18%, rgba(216, 200, 255, 0.08), transparent 36%),
    rgba(3, 2, 10, 0.34);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(8px) saturate(1.14);
  transition: opacity 240ms ease, backdrop-filter 240ms ease;
}

.drawer-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
  touch-action: none;
}

body.apple-store-build #premiumCenter,
body.apple-store-build #monthlyFortunePage,
body.apple-store-build #yearlyFortunePage,
body.apple-store-build #lifeKlinePage,
body.apple-store-build #fuyaoPavilionPage,
body.apple-store-build #skinShopPage,
body.apple-store-build #paySheet,
body.apple-store-build .asset-panel-card,
body.apple-store-build .premium-module-entry,
body.apple-store-build .fuyao-pavilion-entry,
body.apple-store-build .fuyao-pavilion-card,
body.apple-store-build .skin-shop-entry,
body.apple-store-build .source-license-entry,
body.apple-store-build [data-module-target="premiumCenter"],
body.apple-store-build [data-module-target="monthlyFortunePage"],
body.apple-store-build [data-module-target="yearlyFortunePage"],
body.apple-store-build [data-module-target="lifeKlinePage"],
body.apple-store-build [data-module-target="fuyaoPavilionPage"],
body.apple-store-build [data-module-target="skinShopPage"],
body.apple-store-build [data-pay],
body.apple-store-build [data-source-license-product],
body.apple-store-build [data-open-vip],
body.apple-store-build [data-open-recharge],
body.apple-store-build [data-report-lock-vip],
body.apple-store-build [data-report-lock-recharge],
body.apple-store-build [data-report-lock-purchase] {
  display: none !important;
}

body.apple-store-build .home-float-menu {
  width: min(288px, calc(100% - 72px));
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  border-radius: 28px;
}

body.apple-store-build .home-float-menu button {
  min-height: 64px;
  border-radius: 22px;
}

body.apple-store-build .home-float-menu button span {
  width: 30px;
  height: 30px;
  font-size: 18px;
}

body.apple-store-build .home-float-menu button em {
  font-size: 12px;
}

.drawer,
.pay-sheet,
.daily-fortune-sheet {
  position: absolute;
  z-index: 9;
  top: 0;
  bottom: 0;
  width: 75%;
  max-width: 340px;
  padding: 54px 18px 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  border: 1px solid var(--glass-line);
  background:
    radial-gradient(circle at 50% 0, rgba(216, 200, 255, 0.16), transparent 36%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.018) 46%, rgba(243, 208, 107, 0.055)),
    rgba(47, 40, 72, 0.74);
  box-shadow: var(--glass-shadow), inset 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(28px) saturate(1.18);
  transition: transform 360ms cubic-bezier(0.2, 0.8, 0.22, 1), opacity 220ms ease;
}

.drawer-left {
  left: 0;
  width: min(86%, 360px);
  max-width: 360px;
  padding: 56px 16px 28px;
  border-radius: 0 34px 34px 0;
  transform: translateX(-105%);
  background:
    radial-gradient(circle at 22% 4%, var(--profile-root-glow, rgba(216, 200, 255, 0.16)), transparent 30%),
    linear-gradient(180deg, rgba(10, 7, 22, 0.18), rgba(12, 8, 25, 0.42) 38%, rgba(10, 8, 19, 0.88)),
    linear-gradient(90deg, rgba(8, 5, 18, 0.08), rgba(8, 5, 18, 0.36) 74%, rgba(8, 5, 18, 0.68)),
    var(--profile-bg),
    rgba(22, 17, 38, 0.86);
  background-size: cover;
  background-position: center top;
}

.drawer-right {
  right: 0;
  border-radius: 30px 0 0 30px;
  transform: translateX(105%);
  background:
    radial-gradient(circle at 72% 0, rgba(243, 208, 107, 0.14), transparent 32%),
    radial-gradient(circle at 18% 22%, rgba(216, 200, 255, 0.12), transparent 36%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.018) 46%, rgba(94, 208, 255, 0.045)),
    rgba(30, 24, 47, 0.72);
}

.drawer.open {
  transform: translateX(0);
}

.drawer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(246, 241, 255, 0.22);
  border-radius: 50%;
  color: var(--soft);
  background:
    radial-gradient(circle at 35% 15%, rgba(255, 255, 255, 0.16), transparent 42%),
    rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
  font-size: 24px;
}

.profile-root-row {
  --profile-root-accent: rgba(216, 200, 255, 0.72);
  --profile-root-glow: rgba(216, 200, 255, 0.18);
  --profile-root-glyph: "命";
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px;
  grid-template-areas:
    "name orb"
    "archive orb";
  align-items: center;
  gap: 10px 14px;
  min-height: 158px;
  margin: 0 0 12px;
  padding: 17px 15px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 18%, var(--profile-root-glow), transparent 38%),
    radial-gradient(circle at 8% 0, rgba(255, 255, 255, 0.13), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.012)),
    rgba(255, 255, 255, 0.018);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.2),
    inset 0 -1px rgba(255, 255, 255, 0.05),
    0 18px 46px rgba(0, 0, 0, 0.2);
}

.profile-root-row::before {
  content: var(--profile-root-glyph);
  position: absolute;
  right: 82px;
  top: 18px;
  color: var(--profile-root-accent);
  font-family: "Songti SC", "STSong", serif;
  font-size: 112px;
  font-weight: 950;
  line-height: 1;
  opacity: 0.08;
  pointer-events: none;
}

.profile-root-row::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 18px;
  bottom: 14px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--profile-root-accent), rgba(255, 255, 255, 0.24), transparent);
  opacity: 0.55;
  pointer-events: none;
}

.archive-link-card {
  grid-area: archive;
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 46px;
  padding: 8px 12px;
  border: 1px solid rgba(246, 241, 255, 0.26);
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.02)),
    radial-gradient(circle at 12% 0, var(--profile-root-glow, rgba(216, 200, 255, 0.14)), transparent 58%),
    rgba(255, 255, 255, 0.026);
  text-align: center;
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.14),
    0 12px 24px rgba(0, 0, 0, 0.12);
  backdrop-filter: none;
}

.archive-link-card:hover,
.archive-link-card:focus-visible {
  outline: none;
  color: #efe7ff;
}

.archive-link-card:active {
  transform: translateY(1px) scale(0.99);
}

.archive-link-card span {
  display: block;
  color: rgba(246, 241, 255, 0.58);
  font-size: 13px;
}

.archive-link-card strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #fff;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0;
}

.archive-link-card strong i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(243, 208, 107, 0.28);
  border-radius: 999px;
  color: rgba(255, 236, 176, 0.94);
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 21px;
  font-style: normal;
  line-height: 1;
  background:
    radial-gradient(circle at 42% 38%, rgba(255, 236, 176, 0.22), transparent 58%),
    rgba(255, 255, 255, 0.035);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.13),
    0 0 16px rgba(243, 208, 107, 0.16);
  transform: translateY(1px);
}

.archive-link-card em {
  display: block;
  max-width: 120px;
  color: rgba(246, 241, 255, 0.62);
  font-size: 14px;
  font-style: normal;
  line-height: 1.45;
}

.profile-title-row {
  margin: 0 44px 14px 0;
}

.profile-name-line {
  display: block;
  min-width: 0;
}

.profile-name-avatar {
  --profile-avatar-accent: rgba(216, 200, 255, 0.72);
  --profile-avatar-glow: rgba(216, 200, 255, 0.18);
  --profile-avatar-glyph: "命";
  grid-area: name;
  position: relative;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  min-height: 58px;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  color: #fff;
  background: transparent;
  box-shadow: none;
}

.profile-name-avatar::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 24px;
  bottom: 2px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--profile-avatar-accent), rgba(255, 255, 255, 0.3), transparent);
  opacity: 0.58;
}

.profile-name-avatar span {
  margin: 0;
  overflow: hidden;
  color: #fff;
  max-width: 100%;
  font-size: 28px;
  line-height: 1.06;
  font-weight: 950;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-title-row p {
  margin: 0;
  color: rgba(246, 241, 255, 0.56);
  font-size: 15px;
  line-height: 1.4;
}

.profile-orb {
  --profile-orb-color: rgba(242, 214, 134, 0.72);
  grid-area: orb;
  align-self: center;
  justify-self: end;
  width: 74px;
  height: 74px;
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--profile-orb-color) 42%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--profile-orb-color) 16%, transparent), transparent 62%),
    rgba(0, 0, 0, 0.08);
  box-shadow:
    0 0 18px color-mix(in srgb, var(--profile-orb-color) 28%, transparent),
    inset 0 0 18px color-mix(in srgb, var(--profile-orb-color) 8%, transparent);
}

.profile-orb::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid color-mix(in srgb, var(--profile-orb-color) 24%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 24px color-mix(in srgb, var(--profile-orb-color) 18%, transparent);
}

.profile-orb::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--profile-orb-color) 18%, transparent), transparent 64%);
  opacity: 0.9;
  animation: profileLightGlyphAura 2.8s ease-in-out infinite;
}

.profile-orb span {
  display: inline-block;
  color: var(--profile-orb-color);
  position: relative;
  z-index: 1;
  font-size: 42px;
  font-family: "Songti SC", "STSong", serif;
  font-weight: 950;
  line-height: 0.92;
  text-shadow:
    0 0 10px color-mix(in srgb, var(--profile-orb-color) 72%, transparent),
    0 0 24px color-mix(in srgb, var(--profile-orb-color) 46%, transparent),
    0 2px 12px rgba(0, 0, 0, 0.22);
  animation: profileLightGlyphBreath 2.55s ease-in-out infinite;
}

.drawer-left[data-day-element="木"] {
  --profile-element-core: rgba(127, 236, 112, 0.76);
  --profile-element-ring: rgba(166, 255, 139, 0.72);
  --profile-element-soft: rgba(88, 219, 134, 0.18);
}

.drawer-left[data-day-element="火"] {
  --profile-element-core: rgba(255, 98, 62, 0.78);
  --profile-element-ring: rgba(255, 205, 116, 0.76);
  --profile-element-soft: rgba(255, 128, 76, 0.2);
}

.drawer-left[data-day-element="土"] {
  --profile-element-core: rgba(226, 173, 89, 0.78);
  --profile-element-ring: rgba(255, 217, 139, 0.74);
  --profile-element-soft: rgba(206, 146, 75, 0.18);
}

.drawer-left[data-day-element="金"] {
  --profile-element-core: rgba(224, 232, 244, 0.8);
  --profile-element-ring: rgba(255, 247, 214, 0.74);
  --profile-element-soft: rgba(194, 211, 236, 0.18);
}

.drawer-left[data-day-element="水"] {
  --profile-element-core: rgba(91, 202, 255, 0.78);
  --profile-element-ring: rgba(147, 226, 255, 0.74);
  --profile-element-soft: rgba(70, 151, 255, 0.18);
}

.drawer-left[data-day-element]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 12%, var(--profile-element-soft), transparent 30%),
    radial-gradient(circle at 16% 30%, color-mix(in srgb, var(--profile-element-core) 22%, transparent), transparent 34%),
    repeating-radial-gradient(circle at 50% 64%, color-mix(in srgb, var(--profile-element-ring) 13%, transparent) 0 1px, transparent 1px 38px);
  mix-blend-mode: screen;
  opacity: 0.58;
  animation: profileElementAura 6.2s ease-in-out infinite;
}

.drawer-left[data-day-element] .profile-root-row {
  border-color: color-mix(in srgb, var(--profile-element-ring) 48%, rgba(255, 255, 255, 0.18));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.2),
    inset 0 -1px color-mix(in srgb, var(--profile-element-core) 12%, transparent),
    0 0 32px color-mix(in srgb, var(--profile-element-core) 14%, transparent),
    0 18px 46px rgba(0, 0, 0, 0.2);
  animation: profileRootElementBreath 5.2s ease-in-out infinite;
}

.drawer-left[data-day-element] .profile-root-row::before {
  color: var(--profile-element-ring);
  text-shadow: 0 0 26px color-mix(in srgb, var(--profile-element-core) 42%, transparent);
  animation: profileElementGlyph 5.2s ease-in-out infinite;
}

.drawer-left[data-day-element] .profile-root-row::after {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--profile-element-ring), var(--profile-element-core), transparent);
  opacity: 0.72;
  animation: profileElementLine 3.8s ease-in-out infinite;
}

.drawer-left[data-day-element] .profile-orb {
  border-color: var(--profile-element-ring);
  background:
    radial-gradient(circle at 50% 50%, var(--profile-element-soft), transparent 66%),
    rgba(0, 0, 0, 0.08);
  box-shadow:
    0 0 26px color-mix(in srgb, var(--profile-element-ring) 32%, transparent),
    inset 0 0 22px color-mix(in srgb, var(--profile-element-core) 9%, transparent);
  animation: profileOrbElementPulse 3.2s ease-in-out infinite;
}

.drawer-left[data-day-element] .profile-orb::before {
  inset: -7px;
  border-color: color-mix(in srgb, var(--profile-element-ring) 44%, transparent);
  box-shadow:
    0 0 0 8px color-mix(in srgb, var(--profile-element-core) 5%, transparent),
    0 0 28px color-mix(in srgb, var(--profile-element-core) 24%, transparent),
    inset 0 0 18px rgba(255, 255, 255, 0.04);
  animation: profileOrbElementRing 5.6s linear infinite;
}

.drawer-left[data-day-element] .profile-orb::after {
  inset: 13px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--profile-element-ring) 18%, transparent), transparent 64%);
  opacity: 0.9;
  transform: none;
  animation: profileLightGlyphAura 2.8s ease-in-out infinite;
}

.drawer-left[data-day-element] .profile-orb span {
  color: var(--profile-element-ring) !important;
  text-shadow: 0 0 14px color-mix(in srgb, var(--profile-element-core) 64%, transparent), 0 2px 12px rgba(0, 0, 0, 0.24);
  animation: profileStemBreath 2.85s ease-in-out infinite;
}

.drawer-left[data-day-element] .profile-orb span::before,
.drawer-left[data-day-element] .profile-orb span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -19px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--profile-element-ring);
  box-shadow: 0 0 12px color-mix(in srgb, var(--profile-element-core) 58%, transparent);
  pointer-events: none;
  animation: profileElementParticle 3.4s ease-in-out infinite;
}

.drawer-left[data-day-element] .profile-orb span::after {
  left: 24%;
  width: 3px;
  height: 3px;
  animation-delay: 1.24s;
  opacity: 0.72;
}

.drawer-left[data-day-element] .profile-five-card {
  animation: profileFiveCardBreath 4.4s ease-in-out infinite;
}

.drawer-left[data-day-element] .profile-five-card::before {
  text-shadow: 0 0 24px color-mix(in srgb, var(--profile-element-core) 54%, transparent);
  animation: profileFiveGlyphFloat 3.6s ease-in-out infinite;
}

.drawer-left[data-day-element] .profile-five-card::after {
  animation: profileFiveLinePulse 2.9s ease-in-out infinite;
}

@keyframes profileElementAura {
  0%, 100% { opacity: 0.42; transform: translate3d(0, 0, 0) scale(1); }
  50% { opacity: 0.72; transform: translate3d(0, -7px, 0) scale(1.018); }
}

@keyframes rootLightGlyphBreath {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1) saturate(1);
  }
  50% {
    transform: scale(1.06);
    filter: brightness(1.28) saturate(1.14);
  }
}

@keyframes profileLightGlyphAura {
  0%, 100% { opacity: 0.46; transform: scale(0.92); }
  50% { opacity: 0.96; transform: scale(1.1); }
}

@keyframes profileLightGlyphBreath {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: brightness(1) saturate(1);
  }
  50% {
    transform: translateY(-1px) scale(1.1);
    filter: brightness(1.3) saturate(1.16);
  }
}

@keyframes profileRootElementBreath {
  0%, 100% { filter: saturate(1); }
  50% { filter: saturate(1.12); }
}

@keyframes profileElementGlyph {
  0%, 100% { opacity: 0.075; transform: scale(1); }
  50% { opacity: 0.125; transform: scale(1.03); }
}

@keyframes profileElementLine {
  0%, 100% { opacity: 0.38; transform: scaleX(0.76); }
  50% { opacity: 0.84; transform: scaleX(1); }
}

@keyframes profileOrbElementPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes profileOrbElementRing {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1); }
}

@keyframes profileOrbElementSpark {
  0%, 100% { opacity: 0.42; width: 14px; }
  50% { opacity: 0.92; width: 30px; }
}

@keyframes profileElementParticle {
  0% { transform: translate(-50%, 0) scale(0.58); opacity: 0; }
  24% { opacity: 0.82; }
  100% { transform: translate(-50%, -50px) scale(1.05); opacity: 0; }
}

@keyframes profileStemBreath {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: brightness(1) saturate(1);
    text-shadow: 0 0 12px color-mix(in srgb, var(--profile-element-core) 48%, transparent), 0 2px 12px rgba(0, 0, 0, 0.24);
  }
  45% {
    transform: translateY(-2px) scale(1.085);
    filter: brightness(1.28) saturate(1.16);
    text-shadow:
      0 0 12px color-mix(in srgb, var(--profile-element-ring) 76%, transparent),
      0 0 28px color-mix(in srgb, var(--profile-element-core) 58%, transparent),
      0 2px 12px rgba(0, 0, 0, 0.24);
  }
}

@keyframes profileFiveCardBreath {
  0%, 100% {
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.18), 0 0 20px var(--profile-five-glow), 0 12px 28px rgba(0, 0, 0, 0.12);
    filter: saturate(1);
  }
  50% {
    box-shadow:
      inset 0 1px rgba(255, 255, 255, 0.22),
      0 0 30px color-mix(in srgb, var(--profile-five-accent) 36%, transparent),
      0 14px 32px rgba(0, 0, 0, 0.14);
    filter: saturate(1.12);
  }
}

@keyframes profileFiveGlyphFloat {
  0%, 100% { opacity: 0.1; transform: translateY(-50%) scale(1) rotate(0deg); }
  50% { opacity: 0.18; transform: translateY(-53%) scale(1.06) rotate(-1deg); }
}

@keyframes profileFiveLinePulse {
  0%, 100% { opacity: 0.44; transform: scaleX(0.72); }
  50% { opacity: 0.9; transform: scaleX(1); }
}

.drawer-left[data-day-master="丁"] {
  --ding-fire-core: rgba(255, 98, 62, 0.72);
  --ding-fire-gold: rgba(255, 206, 116, 0.86);
  --ding-fire-soft: rgba(255, 157, 75, 0.26);
}

.drawer-left[data-day-master="丁"]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 12%, rgba(255, 205, 116, 0.22), transparent 28%),
    radial-gradient(circle at 18% 28%, rgba(255, 86, 46, 0.12), transparent 34%),
    repeating-radial-gradient(circle at 48% 64%, rgba(255, 211, 136, 0.12) 0 1px, transparent 1px 36px);
  mix-blend-mode: screen;
  opacity: 0.66;
  animation: dingDrawerGlow 5.8s ease-in-out infinite;
}

.drawer-left[data-day-master="丁"] .profile-root-row {
  border-color: rgba(255, 204, 122, 0.46);
  background:
    radial-gradient(circle at 78% 42%, rgba(255, 82, 48, 0.22), transparent 34%),
    radial-gradient(circle at 34% 12%, rgba(255, 218, 132, 0.16), transparent 38%),
    linear-gradient(145deg, rgba(255, 143, 70, 0.105), rgba(255, 255, 255, 0.018)),
    rgba(255, 255, 255, 0.02);
  box-shadow:
    inset 0 1px rgba(255, 242, 190, 0.22),
    inset 0 -1px rgba(255, 122, 64, 0.08),
    0 0 34px rgba(255, 98, 62, 0.12),
    0 18px 46px rgba(0, 0, 0, 0.22);
  animation: dingRootBreath 4.6s ease-in-out infinite;
}

.drawer-left[data-day-master="丁"] .profile-root-row::before {
  color: rgba(255, 205, 116, 0.9);
  text-shadow: 0 0 28px rgba(255, 98, 62, 0.38);
  animation: dingGlyphPulse 4.6s ease-in-out infinite;
}

.drawer-left[data-day-master="丁"] .profile-root-row::after {
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 207, 117, 0.92), rgba(255, 92, 54, 0.72), transparent);
  opacity: 0.78;
  animation: dingLineSweep 3.4s ease-in-out infinite;
}

.drawer-left[data-day-master="丁"] .profile-orb {
  border-color: rgba(255, 202, 116, 0.9);
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 70, 44, 0.24), transparent 66%),
    rgba(24, 8, 10, 0.12);
  box-shadow:
    0 0 26px rgba(255, 209, 122, 0.32),
    0 0 44px rgba(255, 75, 44, 0.18),
    inset 0 0 22px rgba(255, 190, 94, 0.08);
  animation: dingOrbPulse 2.8s ease-in-out infinite;
}

.drawer-left[data-day-master="丁"] .profile-orb::before {
  inset: -8px;
  border-color: rgba(255, 108, 68, 0.38);
  box-shadow: 0 0 0 9px rgba(255, 93, 52, 0.045), 0 0 30px rgba(255, 113, 58, 0.2);
  animation: dingOuterRing 4.8s linear infinite;
}

.drawer-left[data-day-master="丁"] .profile-orb::after {
  inset: 13px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 209, 122, 0.18), transparent 64%);
  opacity: 0.9;
  transform: none;
  filter: none;
  animation: profileLightGlyphAura 2.8s ease-in-out infinite;
}

.drawer-left[data-day-master="丁"] .profile-orb span {
  color: #ffd178 !important;
  text-shadow: 0 0 14px rgba(255, 82, 48, 0.62), 0 2px 12px rgba(0, 0, 0, 0.24);
  animation: dingStemFlicker 2.2s ease-in-out infinite;
}

.drawer-left[data-day-master="丁"] .profile-orb span::before,
.drawer-left[data-day-master="丁"] .profile-orb span::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 215, 128, 0.86);
  box-shadow: 0 0 12px rgba(255, 92, 54, 0.62);
  pointer-events: none;
  animation: dingSparkRise 3s ease-in-out infinite;
}

.drawer-left[data-day-master="丁"] .profile-orb span::after {
  left: 22%;
  width: 3px;
  height: 3px;
  animation-delay: 1.15s;
  opacity: 0.78;
}

.drawer-left[data-day-master="丁"] .profile-name-avatar::after,
.drawer-left[data-day-master="丁"] .archive-link-card {
  animation: dingSoftShimmer 4.2s ease-in-out infinite;
}

.drawer-left[data-day-master="丁"] .profile-five-card {
  border-color: rgba(255, 205, 116, 0.52);
  background:
    radial-gradient(circle at 88% 42%, rgba(255, 88, 50, 0.18), transparent 45%),
    linear-gradient(90deg, rgba(255, 184, 92, 0.13), transparent 46%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.012)),
    rgba(255, 255, 255, 0.012);
}

.drawer-left[data-day-master="丁"] .profile-five-card::before {
  text-shadow: 0 0 26px rgba(255, 92, 54, 0.46), 0 0 42px rgba(255, 205, 116, 0.22);
  animation: dingFiveGlyphFlame 2.9s ease-in-out infinite;
}

@keyframes dingDrawerGlow {
  0%, 100% { opacity: 0.48; transform: translate3d(0, 0, 0) scale(1); }
  50% { opacity: 0.78; transform: translate3d(0, -8px, 0) scale(1.02); }
}

@keyframes dingRootBreath {
  0%, 100% { box-shadow: inset 0 1px rgba(255, 242, 190, 0.2), inset 0 -1px rgba(255, 122, 64, 0.07), 0 0 28px rgba(255, 98, 62, 0.1), 0 18px 46px rgba(0, 0, 0, 0.22); }
  50% { box-shadow: inset 0 1px rgba(255, 242, 190, 0.28), inset 0 -1px rgba(255, 122, 64, 0.12), 0 0 44px rgba(255, 98, 62, 0.2), 0 18px 46px rgba(0, 0, 0, 0.22); }
}

@keyframes dingGlyphPulse {
  0%, 100% { opacity: 0.07; transform: scale(1); }
  50% { opacity: 0.13; transform: scale(1.035); }
}

@keyframes dingLineSweep {
  0%, 100% { opacity: 0.42; transform: scaleX(0.74); }
  50% { opacity: 0.86; transform: scaleX(1); }
}

@keyframes dingOrbPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

@keyframes dingOuterRing {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1); }
}

@keyframes dingFlame {
  0% { transform: translateX(-50%) rotate(-7deg) scaleY(0.9); opacity: 0.68; }
  100% { transform: translateX(-50%) rotate(6deg) scaleY(1.12); opacity: 0.96; }
}

@keyframes dingSparkRise {
  0% { transform: translate(-50%, 0) scale(0.58); opacity: 0; }
  24% { opacity: 0.9; }
  100% { transform: translate(-50%, -58px) scale(1.08); opacity: 0; }
}

@keyframes dingSoftShimmer {
  0%, 100% { opacity: 0.56; }
  50% { opacity: 0.92; }
}

@keyframes dingStemFlicker {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: brightness(1);
    text-shadow: 0 0 14px rgba(255, 82, 48, 0.62), 0 2px 12px rgba(0, 0, 0, 0.24);
  }
  36% {
    transform: translateY(-2px) scale(1.1) rotate(-1deg);
    filter: brightness(1.32);
    text-shadow: 0 0 16px rgba(255, 210, 124, 0.86), 0 0 30px rgba(255, 78, 49, 0.56), 0 2px 12px rgba(0, 0, 0, 0.24);
  }
  58% {
    transform: translateY(-1px) scale(1.04) rotate(1deg);
    filter: brightness(1.14);
  }
}

@keyframes dingFiveGlyphFlame {
  0%, 100% { opacity: 0.12; transform: translateY(-50%) scale(1) rotate(0deg); }
  42% { opacity: 0.22; transform: translateY(-54%) scale(1.08) rotate(-1.5deg); }
  68% { opacity: 0.16; transform: translateY(-51%) scale(1.03) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .drawer-left[data-day-element]::before,
  .drawer-left[data-day-element] .profile-root-row,
  .drawer-left[data-day-element] .profile-root-row::before,
  .drawer-left[data-day-element] .profile-root-row::after,
  .drawer-left[data-day-element] .profile-orb,
  .drawer-left[data-day-element] .profile-orb::before,
  .drawer-left[data-day-element] .profile-orb::after,
  .drawer-left[data-day-element] .profile-orb span,
  .drawer-left[data-day-element] .profile-orb span::before,
  .drawer-left[data-day-element] .profile-orb span::after,
  .drawer-left[data-day-element] .profile-five-card,
  .drawer-left[data-day-element] .profile-five-card::before,
  .drawer-left[data-day-element] .profile-five-card::after,
  .drawer-left[data-day-master="丁"]::before,
  .drawer-left[data-day-master="丁"] .profile-root-row,
  .drawer-left[data-day-master="丁"] .profile-root-row::before,
  .drawer-left[data-day-master="丁"] .profile-root-row::after,
  .drawer-left[data-day-master="丁"] .profile-orb,
  .drawer-left[data-day-master="丁"] .profile-orb::before,
  .drawer-left[data-day-master="丁"] .profile-orb::after,
  .drawer-left[data-day-master="丁"] .profile-orb span,
  .drawer-left[data-day-master="丁"] .profile-orb span::before,
  .drawer-left[data-day-master="丁"] .profile-orb span::after,
  .drawer-left[data-day-master="丁"] .profile-five-card::before,
  .drawer-left[data-day-master="丁"] .profile-name-avatar::after,
  .drawer-left[data-day-master="丁"] .archive-link-card {
    animation: none !important;
  }
}

.profile-edit-btn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(246, 241, 255, 0.12);
  border-radius: 50%;
  color: #d8c8ff;
  background: rgba(255, 255, 255, 0.11);
  font-size: 20px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.09);
}

.mini-add-btn {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(220, 205, 255, 0.26);
  border-radius: 50%;
  color: var(--text);
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.24), transparent 44%),
    rgba(118, 68, 255, 0.42);
  font-size: 34px;
  line-height: 1;
}

.drawer-list,
.fortune-modules {
  display: grid;
  gap: 10px;
}

.drawer-split-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.drawer-split-row article {
  min-width: 0;
  min-height: 76px;
}

.drawer-list article,
.drawer-menu-card,
.fortune-modules article {
  padding: 14px 15px;
  border: 1px solid rgba(246, 241, 255, 0.2);
  border-radius: 22px;
  background:
    radial-gradient(circle at 0 0, var(--profile-root-glow, rgba(216, 200, 255, 0.08)), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.01)),
    rgba(255, 255, 255, 0.012);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.14),
    inset 0 -1px rgba(255, 255, 255, 0.04),
    0 14px 30px rgba(0, 0, 0, 0.14);
  backdrop-filter: none;
}

.drawer-menu-card {
  width: 100%;
  color: var(--text);
  text-align: left;
}

.drawer-list span,
.drawer-menu-card span,
.fortune-modules span {
  display: block;
  margin-bottom: 6px;
  color: rgba(246, 241, 255, 0.62);
  font-size: 13px;
}

.drawer-list strong,
.drawer-menu-card strong,
.fortune-modules strong {
  display: block;
  color: #fff;
  font-size: 16px;
  line-height: 1.45;
}

.profile-five-card {
  --profile-five-accent: rgba(154, 229, 86, 0.72);
  --profile-five-glow: rgba(154, 229, 86, 0.16);
  --profile-five-glyph: "木";
  position: relative;
  overflow: hidden;
  border-color: var(--profile-five-accent);
  background:
    radial-gradient(circle at 92% 52%, var(--profile-five-glow), transparent 46%),
    linear-gradient(90deg, var(--profile-five-glow), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.012)),
    rgba(255, 255, 255, 0.012);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.18),
    0 0 24px var(--profile-five-glow),
    0 12px 28px rgba(0, 0, 0, 0.12);
}

.profile-five-card::before {
  content: var(--profile-five-glyph);
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--profile-five-accent);
  font-family: "Songti SC", "STSong", serif;
  font-size: 70px;
  font-weight: 950;
  line-height: 1;
  opacity: 0.12;
  pointer-events: none;
}

.profile-five-card::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 52px;
  bottom: 12px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--profile-five-accent), rgba(255,255,255,.28), transparent);
  opacity: 0.72;
  pointer-events: none;
  transform-origin: left center;
}

.profile-five-card span,
.profile-five-card strong {
  position: relative;
  z-index: 1;
}

.profile-five-card strong {
  max-width: calc(100% - 42px);
}

.asset-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  align-items: stretch;
}

.asset-mini {
  border: 1px solid rgba(220, 205, 255, 0.2);
  min-width: 0;
  min-height: 82px;
  padding: 10px 7px;
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
  gap: 3px;
  border-radius: 18px;
  color: var(--text);
  background:
    radial-gradient(circle at 28% 0, rgba(255, 255, 255, 0.15), transparent 42%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.008)),
    rgba(255, 255, 255, 0.018);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.12),
    0 10px 22px rgba(0, 0, 0, 0.12);
}

.asset-mini i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #1c1630;
  background: linear-gradient(135deg, #ffe99b, #b87923);
  font-style: normal;
  font-size: 11px;
  font-weight: 950;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.58);
}

.spirit-stone-icon {
  position: relative;
  color: transparent;
  background: linear-gradient(135deg, #d9f6ff 0%, #8ad8ff 38%, #7d66ff 100%);
  clip-path: polygon(50% 0, 88% 25%, 76% 82%, 50% 100%, 24% 82%, 12% 25%);
}

.spirit-stone-icon::before {
  content: "";
  width: 10px;
  height: 15px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  transform: rotate(34deg);
}

.asset-mini b {
  display: block;
  color: var(--text);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.asset-mini em {
  display: block;
  width: 100%;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  text-align: center;
}

.profile-switcher,
.profile-manager-list {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}

.profile-switcher-row,
.profile-manager-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
}

.profile-select-btn,
.profile-manager-main,
.profile-row-action {
  width: 100%;
  border: 1px solid rgba(220, 205, 255, 0.16);
  border-radius: 12px;
  color: var(--text);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.045);
}

.profile-select-btn,
.profile-manager-main {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  text-align: left;
  min-height: 58px;
}

.profile-manager-main {
  grid-template-columns: 42px minmax(0, 1fr);
}

.profile-switcher-row.active .profile-select-btn,
.profile-manager-row.active .profile-manager-main {
  border-color: rgba(243, 208, 107, 0.58);
  background:
    radial-gradient(circle at 20% 0, rgba(243, 208, 107, 0.18), transparent 45%),
    rgba(243, 208, 107, 0.09);
}

.profile-switcher .profile-stem,
.profile-manager-list .profile-stem {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 26%, rgba(255, 255, 255, 0.18), transparent 34%),
    rgba(0, 0, 0, 0.28);
  box-shadow: inset 0 0 0 1px rgba(220, 205, 255, 0.18), 0 8px 18px rgba(0, 0, 0, 0.18);
  font-family: "Songti SC", "STSong", serif;
  font-size: 29px;
  font-weight: 950;
  line-height: 1;
}

.profile-row-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 2px;
  line-height: 1.18;
}

.profile-row-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.18;
}

.profile-row-copy em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.1;
}

.profile-row-action {
  min-width: 42px;
  padding: 0 8px;
  align-self: stretch;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.profile-row-action.edit {
  color: var(--gold);
  background: rgba(243, 208, 107, 0.1);
  border-color: rgba(243, 208, 107, 0.28);
}

.profile-row-action.delete {
  color: #ffb1b1;
  background: rgba(255, 87, 87, 0.09);
  border-color: rgba(255, 116, 116, 0.22);
}

.drawer-left .archive-link-card,
.drawer-left .drawer-list article,
.drawer-left .drawer-menu-card,
.drawer-left .asset-mini,
.drawer-left .profile-select-btn,
.drawer-left .profile-manager-main,
.drawer-left .profile-row-action {
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.16),
    inset 0 -1px rgba(255, 255, 255, 0.045),
    0 14px 30px rgba(0, 0, 0, 0.13);
  backdrop-filter: none;
}

.drawer-left .archive-link-card,
.drawer-left .drawer-list article,
.drawer-left .drawer-menu-card {
  background:
    radial-gradient(circle at 0 0, var(--profile-root-glow, rgba(216, 200, 255, 0.08)), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01)),
    rgba(255, 255, 255, 0.014);
}

.drawer-left .asset-mini,
.drawer-left .profile-select-btn,
.drawer-left .profile-manager-main,
.drawer-left .profile-row-action {
  background:
    radial-gradient(circle at 28% 0, rgba(255, 255, 255, 0.12), transparent 44%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.046), rgba(255, 255, 255, 0.008)),
    rgba(255, 255, 255, 0.012);
}

.drawer-left .asset-mini[data-asset-action="invite"] i {
  background: linear-gradient(135deg, rgba(240, 211, 123, 0.95), rgba(114, 241, 220, 0.52));
}

.referral-coming-soon {
  min-height: 120px;
  display: grid;
  place-items: center;
}

.fortune-modules p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.65;
}

.calendar-drawer {
  width: 86%;
  max-width: 390px;
}

.calendar-drawer #todayTitle {
  display: none;
}

.calendar-drawer-hint {
  margin: -4px 0 10px;
  color: rgba(243, 208, 107, 0.86);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.45;
}

.calendar-panel {
  gap: 14px;
}

.calendar-toolbar {
  display: grid;
  grid-template-columns: 40px 1fr 40px auto;
  gap: 8px;
  align-items: center;
}

.calendar-toolbar button {
  height: 40px;
  border: 1px solid rgba(246, 241, 255, 0.14);
  border-radius: 50%;
  color: var(--soft);
  background:
    radial-gradient(circle at 35% 15%, rgba(255, 255, 255, 0.14), transparent 42%),
    rgba(255, 255, 255, 0.065);
  font-size: 20px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

.calendar-toolbar strong {
  color: #d7caff;
  font-size: 24px;
}

.calendar-month-picker {
  width: 100% !important;
  min-width: 0;
  padding: 0 12px;
  border-radius: 999px !important;
  color: #f6f1ff !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.06) !important;
  font-size: 18px !important;
  font-weight: 900;
  text-align: center;
}

.calendar-picker-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.82fr) minmax(0, 0.82fr) auto;
  gap: 7px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(220, 205, 255, 0.16);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.045);
}

.calendar-picker-panel select,
.calendar-picker-panel button {
  height: 38px;
  min-width: 0;
  border: 1px solid rgba(246, 241, 255, 0.16);
  border-radius: 12px;
  color: #f6f1ff;
  background: rgba(16, 11, 28, 0.72);
  font-weight: 800;
}

.calendar-picker-panel button {
  padding: 0 12px;
  color: #261704;
  background: linear-gradient(135deg, #ffe6a6, var(--gold));
}

.calendar-toolbar em,
.calendar-today-jump {
  color: #d7caff;
  font-style: normal;
  font-weight: 800;
}

.calendar-today-jump {
  width: auto !important;
  padding: 0 12px;
  border-radius: 999px !important;
  font-size: 12px;
}

.calendar-week,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.calendar-week span {
  margin: 0;
  color: rgba(215, 202, 255, 0.62);
  text-align: center;
}

.calendar-grid button,
.calendar-empty {
  min-height: 66px;
  border: 1px solid transparent;
  border-radius: 18px;
  color: rgba(246, 241, 255, 0.76);
  background: transparent;
}

.calendar-grid button {
  position: relative;
  display: grid;
  align-content: center;
  gap: 2px;
}

.calendar-grid button > * {
  position: relative;
  z-index: 1;
}

.calendar-grid button b {
  color: rgba(246, 241, 255, 0.88);
  font-size: 21px;
}

.calendar-grid button span,
.calendar-grid button em,
.calendar-grid button i {
  color: rgba(215, 202, 255, 0.42);
  font-size: 10px;
  font-style: normal;
  line-height: 1.12;
}

.calendar-grid button em {
  color: rgba(216, 200, 255, 0.58);
}

.calendar-grid button i {
  color: rgba(243, 208, 107, 0.62);
}

.calendar-grid button.enabled {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.calendar-grid button.checked-in {
  overflow: visible;
  border-color: rgba(255, 255, 255, 0.42);
  background:
    radial-gradient(circle at 30% 0, rgba(255, 255, 255, 0.58), transparent 42%),
    linear-gradient(145deg, rgba(252, 220, 130, 0.96), rgba(216, 200, 255, 0.92));
  box-shadow: 0 16px 36px rgba(216, 200, 255, 0.28), inset 0 1px rgba(255, 255, 255, 0.5);
}

.calendar-grid button.selected:not(.checked-in) {
  border-color: rgba(243, 208, 107, 0.48);
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(243, 208, 107, 0.1);
}

.calendar-grid button.checked-in::before,
.calendar-grid button.checked-in::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.calendar-grid button.checked-in::before {
  inset: -5px;
  z-index: -1;
  border: 1px solid rgba(243, 208, 107, 0.5);
  border-radius: 22px;
  background: radial-gradient(circle at 50% 46%, rgba(243, 208, 107, 0.24), transparent 68%);
  box-shadow: 0 0 24px rgba(243, 208, 107, 0.22), 0 0 0 5px rgba(216, 200, 255, 0.055);
}

.calendar-grid button.checked-in::after {
  inset: 7px;
  z-index: 0;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.18), transparent 58%);
}

.calendar-grid button.checked-in b,
.calendar-grid button.checked-in span,
.calendar-grid button.checked-in em,
.calendar-grid button.checked-in i {
  color: #332648;
  font-weight: 900;
}

.calendar-grid button.today:not(.checked-in) b {
  color: rgba(243, 208, 107, 0.9);
}

.calendar-grid button.future:not(.checked-in) b {
  color: rgba(216, 200, 255, 0.74);
}

.calendar-grid button.future:not(.checked-in) span,
.calendar-grid button.future:not(.checked-in) em,
.calendar-grid button.future:not(.checked-in) i {
  color: rgba(216, 200, 255, 0.36);
}

.calendar-grid button.disabled {
  opacity: 0.28;
}

.calendar-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(220, 205, 255, 0.14);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.04);
}

.calendar-detail span {
  color: var(--muted);
  font-size: 13px;
}

.calendar-detail small {
  display: block;
  margin-top: 4px;
  color: rgba(215, 202, 255, 0.62);
  font-size: 12px;
}

.calendar-detail strong {
  color: var(--text);
}

.calendar-lucky-card {
  margin-top: 0;
}

.daily-fortune-capsule {
  display: block;
  width: 100%;
  padding: 15px;
  border: 1px solid rgba(220, 205, 255, 0.18);
  border-radius: 22px;
  color: var(--text);
  background:
    radial-gradient(circle at 92% 12%, rgba(137, 91, 255, 0.2), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.045);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.075), 0 12px 30px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.daily-fortune-capsule.unlocked {
  border-color: rgba(243, 208, 107, 0.45);
  background:
    radial-gradient(circle at 88% 10%, rgba(243, 208, 107, 0.24), transparent 34%),
    linear-gradient(135deg, rgba(243, 208, 107, 0.12), rgba(255, 255, 255, 0.045));
}

.daily-fortune-capsule span {
  display: block;
  margin-bottom: 6px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 900;
}

.daily-fortune-capsule strong {
  display: block;
  color: var(--text);
  font-size: 17px;
}

.daily-fortune-capsule p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.calendar-checkin-btn {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid rgba(243, 208, 107, 0.36);
  border-radius: 999px;
  color: #21172c;
  background: linear-gradient(135deg, #f3d06b, #d8c8ff);
  font-weight: 950;
}

.calendar-checkin-btn.done {
  color: rgba(246, 241, 255, 0.72);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.045);
  border-color: rgba(220, 205, 255, 0.16);
}

.pay-sheet {
  display: flex;
  flex-direction: column;
  left: 50%;
  top: calc(50% - 44px);
  bottom: auto;
  width: calc(100% - 32px);
  max-width: 370px;
  max-height: min(76vh, 660px);
  padding: 30px 16px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 30px;
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(28px) saturate(1.18);
}

.pay-sheet.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.pay-sheet #closePaySheet {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 6;
  float: none;
  display: grid;
  width: 38px;
  height: 38px;
  margin: 0;
  place-items: center;
  border: 1px solid rgba(246, 241, 255, 0.18);
  border-radius: 999px;
  color: rgba(255, 248, 232, 0.88);
  background:
    radial-gradient(circle at 35% 15%, rgba(255, 255, 255, 0.18), transparent 42%),
    rgba(20, 14, 34, 0.78);
  backdrop-filter: blur(16px);
}

.daily-fortune-sheet {
  left: 50%;
  top: 50%;
  bottom: auto;
  width: calc(100% - 18px);
  max-width: 410px;
  height: min(94dvh, 920px);
  max-height: calc(100dvh - 14px);
  padding: 62px 16px max(28px, env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: 30px;
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(28px) saturate(1.18);
}

.daily-fortune-sheet #closeDailyFortuneSheet {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 6;
  float: none;
  margin: 0;
  width: 38px;
  height: 38px;
  background:
    radial-gradient(circle at 35% 15%, rgba(255, 255, 255, 0.22), transparent 42%),
    rgba(20, 14, 34, 0.78);
  backdrop-filter: blur(16px);
}

.daily-fortune-sheet.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.daily-fortune-sheet .report-hero {
  clear: none;
  min-height: 190px;
  margin-bottom: 12px;
  padding-right: 58px;
}

.daily-fortune-sheet .score-orbit {
  grid-template-columns: 118px 1fr;
  gap: 13px;
}

.daily-fortune-sheet .score-ring {
  min-height: 118px;
}

.daily-fortune-sheet .score-ring strong {
  font-size: 28px;
}

.daily-fortune-sheet .fortune-detail-card {
  min-height: 0;
  padding: 14px;
}

.daily-fortune-sheet .day-timeline article {
  padding: 14px;
}

@media (max-width: 520px) {
  .daily-fortune-sheet {
    width: calc(100% - 14px);
    height: min(95dvh, 940px);
    max-height: calc(100dvh - 10px);
    padding-left: 14px;
    padding-right: 14px;
  }

  .daily-fortune-sheet .report-hero {
    min-height: 204px;
    padding: 18px 56px 18px 16px;
  }

  .daily-fortune-sheet .score-orbit {
    grid-template-columns: 1fr;
  }

  .daily-fortune-sheet .score-ring {
    width: 118px;
    min-height: 118px;
    justify-self: center;
  }

  .daily-prompt-grid {
    grid-template-columns: 1fr;
  }
}

.pay-sheet p {
  color: var(--muted);
  line-height: 1.75;
}

.pay-sheet h3 {
  margin: 3px 0 8px;
  font-size: 24px;
  line-height: 1.18;
}

.pay-sheet #payText {
  margin: 0;
  font-size: 13px;
}

.pay-sheet-vip #payText,
.pay-sheet-recharge #payText,
.pay-sheet-sponsor #payText {
  order: 5;
  margin-top: 10px;
}

.pay-sheet-vip #purchaseOptions,
.pay-sheet-recharge #purchaseOptions,
.pay-sheet-sponsor #purchaseOptions {
  order: 2;
}

.pay-sheet-vip #confirmPurchase,
.pay-sheet-recharge #confirmPurchase,
.pay-sheet-sponsor #confirmPurchase {
  order: 3;
}

.pay-sheet-vip #restorePurchase,
.pay-sheet-recharge #restorePurchase,
.pay-sheet-sponsor #restorePurchase {
  order: 4;
}

.pay-sheet-vip #payPreview,
.pay-sheet-recharge #payPreview,
.pay-sheet-sponsor #payPreview {
  order: 6;
}

.pay-sheet-vip #payFootnote,
.pay-sheet-recharge #payFootnote,
.pay-sheet-sponsor #payFootnote {
  order: 7;
}

.pay-preview {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
}

.pay-preview:empty {
  display: none;
}

.commerce-hero {
  padding: 15px;
  overflow: hidden;
  border: 1px solid rgba(243, 208, 107, 0.46);
  border-radius: 22px;
  background:
    linear-gradient(150deg, rgba(243, 208, 107, 0.18), rgba(255, 255, 255, 0.06) 48%, rgba(94, 208, 255, 0.1)),
    rgba(16, 11, 28, 0.48);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 14px 34px rgba(0, 0, 0, 0.16);
}

.commerce-hero > span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #221709;
  background: linear-gradient(135deg, #f9dfa0, var(--gold));
  font-size: 11px;
  font-weight: 900;
}

.commerce-hero strong {
  display: block;
  margin: 0 0 7px;
  font-size: 20px;
  line-height: 1.25;
}

.commerce-hero p {
  margin: 0;
  color: rgba(246, 241, 255, 0.78);
  font-size: 13px;
  line-height: 1.65;
}

.commerce-hero div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}

.commerce-hero b {
  display: inline-flex;
  padding: 5px 8px;
  border: 1px solid rgba(246, 241, 255, 0.16);
  border-radius: 999px;
  color: rgba(255, 250, 248, 0.9);
  background: rgba(255, 255, 255, 0.075);
  font-size: 12px;
}

.pay-preview article {
  padding: 12px;
  border: 1px solid rgba(246, 241, 255, 0.16);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.045);
}

.pay-preview strong {
  display: block;
  margin-bottom: 6px;
}

.pay-preview p {
  margin: 0;
  font-size: 13px;
}

.purchase-options {
  display: grid;
  gap: 10px;
  margin: 14px 0 14px;
}

.purchase-section-head {
  display: grid;
  gap: 3px;
  margin: 2px 0 0;
}

.purchase-section-head span {
  font-size: 15px;
  font-weight: 900;
}

.purchase-section-head small {
  color: rgba(246, 241, 255, 0.58);
  font-size: 12px;
  line-height: 1.45;
}

#confirmPurchase {
  display: block;
  width: min(240px, 100%);
  margin: 4px auto 0;
  text-align: center;
}

.restore-purchase {
  display: block;
  width: min(180px, 100%);
  margin: 10px auto 0;
  text-align: center;
}

.purchase-option {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 76px;
  padding: 13px 14px;
  border: 1px solid rgba(246, 241, 255, 0.16);
  border-radius: 20px;
  color: var(--text);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025)),
    rgba(255, 255, 255, 0.045);
  text-align: left;
}

.purchase-option.featured {
  border-color: rgba(243, 208, 107, 0.58);
  background:
    linear-gradient(145deg, rgba(243, 208, 107, 0.16), rgba(255, 255, 255, 0.045)),
    rgba(255, 255, 255, 0.055);
}

.purchase-option.has-image {
  grid-template-columns: 48px 1fr auto;
}

.purchase-thumb {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(246, 241, 255, 0.14);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.purchase-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pay-sheet-sponsor .purchase-option.featured {
  border-color: rgba(255, 193, 123, 0.66);
  background:
    radial-gradient(circle at 92% 8%, rgba(255, 112, 100, 0.18), transparent 38%),
    linear-gradient(145deg, rgba(243, 151, 83, 0.18), rgba(255, 255, 255, 0.04)),
    rgba(255, 255, 255, 0.055);
}

.sponsor-quantity-box {
  display: grid;
  gap: 9px;
  padding: 13px 14px;
  border: 1px solid rgba(255, 205, 136, 0.28);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 0%, rgba(255, 132, 102, 0.13), transparent 38%),
    rgba(255, 255, 255, 0.055);
}

.sponsor-quantity-box > span {
  color: rgba(255, 239, 205, 0.94);
  font-size: 13px;
  font-weight: 950;
}

.sponsor-quantity-stepper {
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  gap: 8px;
  align-items: center;
}

.sponsor-quantity-stepper button,
.sponsor-quantity-stepper input {
  height: 40px;
  border: 1px solid rgba(255, 226, 177, 0.22);
  border-radius: 999px;
  color: #fff8e8;
  background: rgba(255, 255, 255, 0.08);
  text-align: center;
  font-weight: 950;
}

.sponsor-quantity-stepper button {
  color: #24140f;
  background: linear-gradient(135deg, #ffe9ad, #e4a34b);
}

.sponsor-quantity-stepper input {
  width: 100%;
  outline: none;
}

.sponsor-quantity-box small {
  color: rgba(255, 218, 155, 0.88);
  line-height: 1.45;
}

.purchase-option.active {
  border-color: rgba(243, 208, 107, 0.72);
  background:
    linear-gradient(145deg, rgba(243, 208, 107, 0.18), rgba(255, 255, 255, 0.05)),
    rgba(243, 208, 107, 0.08);
  box-shadow: inset 0 0 0 1px rgba(243, 208, 107, 0.16);
}

.purchase-copy {
  min-width: 0;
}

.purchase-title-line {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-bottom: 5px;
}

.purchase-option strong {
  display: block;
  margin: 0;
}

.purchase-title-line b {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 999px;
  color: #211605;
  background: linear-gradient(135deg, #fbe4a7, var(--gold));
  font-size: 11px;
  font-weight: 900;
}

.purchase-option small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.purchase-value-line,
.purchase-bonus-line {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  margin: 1px 0 6px;
  padding: 5px 8px;
  border: 1px solid rgba(243, 208, 107, 0.38);
  border-radius: 999px;
  color: #ffe6a6;
  background: rgba(243, 208, 107, 0.12);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.purchase-bonus-line {
  color: #241604;
  background: linear-gradient(135deg, #ffe7aa, var(--gold));
}

.purchase-option i {
  display: block;
  margin-top: 5px;
  color: rgba(246, 241, 255, 0.66);
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.purchase-price-box {
  display: grid;
  justify-items: end;
  gap: 5px;
}

.purchase-option em {
  justify-self: end;
  min-width: 64px;
  color: var(--gold);
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.purchase-price-box mark {
  padding: 3px 7px;
  border-radius: 999px;
  color: rgba(255, 250, 248, 0.92);
  background: rgba(255, 255, 255, 0.1);
  font-size: 11px;
  font-weight: 900;
}

.pay-footnote {
  max-width: 280px;
  margin: 10px auto 0;
  color: rgba(246, 241, 255, 0.56) !important;
  font-size: 12px;
  line-height: 1.55 !important;
  text-align: center;
}

@media (max-width: 380px) {
  .purchase-option {
    grid-template-columns: 1fr;
  }

  .purchase-option em {
    justify-self: start;
    text-align: left;
  }
}

.spirit-sheet,
.profile-tool-sheet {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: calc(50% - 44px);
  bottom: auto;
  width: calc(100% - 32px);
  max-width: 360px;
  max-height: min(58vh, 470px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 22px;
  border: 1px solid var(--glass-line);
  border-radius: 30px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0, rgba(243, 208, 107, 0.14), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.022) 52%, rgba(216, 200, 255, 0.05)),
    rgba(47, 40, 72, 0.76);
  box-shadow: var(--glass-shadow), inset 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(28px) saturate(1.18);
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0;
  pointer-events: none;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.22, 1), opacity 220ms ease;
}

.spirit-sheet.open,
.profile-tool-sheet.open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.profile-tool-sheet {
  text-align: left;
  max-height: min(68vh, 560px);
}

.spirit-sheet img {
  width: 104px;
  height: 104px;
  margin: 0 auto 14px;
  border: 2px solid var(--line-bright);
  border-radius: 50%;
  object-fit: cover;
}

.spirit-sheet p {
  color: var(--muted);
  line-height: 1.75;
}

.history-list,
.settings-form {
  display: grid;
  gap: 12px;
}

.history-item {
  width: 100%;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  text-align: left;
}

.history-item span,
.empty-state p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.history-item strong {
  display: block;
  margin: 6px 0;
  font-size: 17px;
}

.history-item p {
  margin: 0;
  color: var(--gold);
  letter-spacing: 1px;
}

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

.report-record-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
}

.report-record-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.report-record-head span,
.report-record-card p,
.report-record-card small,
.report-record-card em {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.report-record-card strong {
  font-size: 17px;
}

.report-record-card p,
.report-record-card small,
.report-record-card em {
  margin: 0;
  font-style: normal;
}

.report-record-card small {
  color: rgba(246, 241, 255, 0.72);
}

.report-record-card em {
  color: var(--gold);
}

.settings-form label {
  display: grid;
  gap: 7px;
}

.settings-inline-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 10px;
}

.settings-inline-row .hint {
  margin: 0;
}

.settings-inline-row .soft-btn {
  min-height: 42px;
}

.settings-form input[type="text"],
.settings-form input[type="tel"],
.settings-form input[type="email"],
.settings-form input[type="url"],
.settings-form input[type="text"][id^="settingsAi"],
.settings-form input[type="password"],
.settings-form input[type="number"],
.settings-form input[type="file"],
.settings-form textarea,
.settings-form select {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
}

.settings-form textarea {
  min-height: 104px;
  resize: vertical;
  line-height: 1.6;
}

.settings-form input[type="number"] {
  appearance: textfield;
}

.settings-form select {
  background: rgba(255, 255, 255, 0.08);
}

.referral-panel {
  display: grid;
  gap: 12px;
}

.referral-hero-card,
.referral-code-card,
.referral-progress-card,
.referral-rule-card,
.referral-info-grid article {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 18% 0, rgba(243, 208, 107, 0.16), transparent 42%),
    rgba(255, 255, 255, 0.065);
}

.referral-hero-card {
  display: grid;
  gap: 9px;
}

.referral-hero-card small,
.referral-progress-card__head span,
.referral-tier-grid small {
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
}

.referral-hero-card h4 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0;
}

.referral-hero-card p,
.referral-share-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.referral-balance {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
}

.referral-balance span,
.referral-balance em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.referral-balance strong {
  color: var(--gold);
  font-size: 26px;
  line-height: 1;
}

.referral-share-guide {
  position: fixed;
  inset: 0;
  z-index: 36000;
  display: grid;
  align-items: start;
  justify-items: end;
  padding: max(18px, env(safe-area-inset-top)) 14px 0;
  background: rgba(8, 6, 18, 0.68);
  backdrop-filter: blur(10px);
}

.referral-share-guide-arrow {
  margin: 2px 18px 4px 0;
  color: var(--gold);
  font-size: 38px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.42);
}

.referral-share-guide-card {
  width: min(312px, calc(100vw - 32px));
  padding: 18px;
  border: 1px solid rgba(243, 208, 107, 0.32);
  border-radius: 22px;
  background:
    radial-gradient(circle at 84% 0, rgba(243, 208, 107, 0.18), transparent 42%),
    rgba(31, 24, 49, 0.92);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.46);
}

.referral-share-guide-card span {
  color: var(--gold);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.16em;
}

.referral-share-guide-card strong {
  display: block;
  margin-top: 7px;
  color: #fff8e8;
  font-size: 20px;
  line-height: 1.35;
}

.referral-share-guide-card p {
  margin: 10px 0 0;
  color: rgba(230, 222, 255, 0.72);
  font-size: 13px;
  line-height: 1.65;
}

.referral-share-guide-card div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.referral-share-guide-card button {
  min-height: 38px;
  border: 1px solid rgba(246, 241, 255, 0.16);
  border-radius: 999px;
  color: rgba(255, 248, 232, 0.9);
  background: rgba(255, 255, 255, 0.08);
  font-size: 13px;
  font-weight: 900;
}

.referral-share-guide-card button:last-child {
  border-color: rgba(243, 208, 107, 0.36);
  color: #221831;
  background: linear-gradient(135deg, rgba(243, 208, 107, 0.96), rgba(255, 234, 164, 0.92));
}

.referral-code-card {
  display: grid;
  gap: 10px;
  text-align: center;
}

.referral-code-card span,
.referral-info-grid span {
  color: var(--muted);
  font-size: 12px;
}

.referral-code-card strong {
  display: block;
  color: var(--gold);
  font-size: 22px;
  letter-spacing: 0;
}

.referral-share-card .primary-btn {
  width: 100%;
}

.referral-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.referral-info-grid strong {
  display: block;
  margin: 6px 0;
  font-size: 20px;
}

.referral-info-grid p,
.referral-rule-card p,
.referral-withdraw-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.referral-rule-card strong {
  display: block;
  margin-bottom: 6px;
}

.referral-progress-card {
  display: grid;
  gap: 10px;
}

.referral-progress-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.referral-progress-card__head strong {
  color: var(--gold);
  font-size: 18px;
}

.referral-progress-track {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
}

.referral-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), rgba(114, 241, 220, 0.9));
  box-shadow: 0 0 18px rgba(240, 211, 123, 0.32);
}

.referral-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.referral-tier-grid div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 9px 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}

.referral-tier-grid strong {
  color: var(--text);
  font-size: 17px;
}

.referral-tier-grid span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.referral-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 7px;
  margin: 8px 0 10px;
}

.referral-flow div {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--text);
  font-size: 11px;
  font-weight: 900;
}

.referral-flow b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(240, 211, 123, 0.9);
  color: #2a183f;
}

.referral-flow i {
  width: 12px;
  height: 1px;
  background: rgba(240, 211, 123, 0.46);
}

.referral-withdraw-form {
  padding-top: 2px;
}

.settings-link-list,
.settings-subpage {
  display: grid;
  gap: 10px;
}

.settings-link-list {
  padding: 4px 0;
}

.settings-link-list button {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  color: var(--text);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.035)),
    rgba(255, 255, 255, 0.04);
  text-align: left;
  font-weight: 900;
}

.feedback-form {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
}

.feedback-preview {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.feedback-preview img,
.feedback-item img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
}

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

.feedback-item {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.055);
}

.feedback-item span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
}

.feedback-item p {
  margin: 0 0 10px;
  color: var(--text);
  line-height: 1.65;
}

.feedback-item p:last-child {
  margin-bottom: 0;
}

.legal-placeholder,
.legal-document {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
}

.legal-document {
  display: grid;
  gap: 14px;
  max-height: min(48vh, 430px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.legal-meta {
  display: grid;
  gap: 6px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(246, 241, 255, 0.12);
}

.legal-meta strong {
  color: var(--gold);
  font-size: 15px;
}

.legal-meta span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.legal-document section {
  display: grid;
  gap: 8px;
}

.legal-document h4 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
}

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

.danger-ghost-btn {
  min-height: 46px;
  border: 1px solid rgba(255, 107, 84, 0.36);
  border-radius: 16px;
  color: #ffb2a5;
  background: rgba(255, 107, 84, 0.08);
  font-weight: 900;
}

.danger-ghost-btn.small {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 12px;
}

.empty-state {
  display: grid;
  gap: 14px;
}

.toast {
  position: absolute;
  z-index: 12;
  left: 20px;
  right: 20px;
  bottom: 24px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--text);
  background: rgba(31, 24, 49, 0.96);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32);
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: 220ms ease;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.icp-footer {
  position: absolute;
  z-index: 6;
  left: 0;
  right: 0;
  bottom: max(7px, env(safe-area-inset-bottom));
  display: none;
  justify-content: center;
  pointer-events: none;
}

@media (min-width: 720px) {
  body.web-build .phone-shell:has(#loginScreen.active) .icp-footer {
    display: flex;
  }
}

body.mobile-web-build .phone-shell:has(#loginScreen.active) .icp-footer {
  display: none !important;
}

.icp-footer a {
  pointer-events: auto;
  padding: 4px 10px;
  border-radius: 999px;
  color: rgba(246, 241, 255, 0.62);
  background: rgba(9, 6, 22, 0.42);
  font-size: 11px;
  line-height: 1.2;
  text-decoration: none;
  backdrop-filter: blur(10px);
}

.icp-footer a:focus-visible {
  outline: 2px solid rgba(243, 208, 107, 0.58);
  outline-offset: 2px;
}

.bottom-tabbar {
  position: relative;
  z-index: 7;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  padding: 8px;
  border: 1px solid rgba(220, 205, 255, 0.18);
  border-radius: 26px;
  background:
    radial-gradient(circle at 18% 0, rgba(255, 255, 255, 0.12), transparent 38%),
    rgba(34, 26, 52, 0.7);
  box-shadow: var(--glass-shadow), inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px) saturate(1.14);
}

.bottom-tabbar button {
  min-width: 0;
  min-height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 18px;
  color: var(--soft);
  background: transparent;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.bottom-tabbar button.active,
.bottom-tabbar button:focus-visible {
  color: #201636;
  outline: none;
  background: linear-gradient(135deg, var(--gold), #f6e6a5);
}

.home-float-menu {
  position: absolute;
  z-index: 12;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: calc(100% - 20px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(246, 241, 255, 0.22);
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.18), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.018) 52%, rgba(243, 208, 107, 0.045)),
    rgba(14, 9, 26, 0.34);
  box-shadow: var(--glass-shadow), inset 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(26px) saturate(1.18);
  transform: translateX(-50%);
}

.customer-service-float {
  display: none;
  position: absolute;
  z-index: 13;
  left: max(12px, env(safe-area-inset-left));
  top: 50%;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgba(255, 235, 180, 0.44);
  border-radius: 50%;
  color: rgba(255, 247, 220, 0.96);
  background:
    radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.28), transparent 28%),
    linear-gradient(145deg, rgba(54, 34, 24, 0.76), rgba(18, 12, 30, 0.54));
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.3),
    inset 0 1px rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(18px) saturate(1.15);
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.04em;
  -webkit-tap-highlight-color: transparent;
}

body.mobile-web-build .daily-screen.wake-active .customer-service-float,
body:is(.mobile-preview, .web-build.mobile-preview) .daily-screen.wake-active .customer-service-float {
  display: grid;
}

.customer-service-float:active {
  transform: translateY(-50%) scale(0.96);
}

.daily-screen.skin-active .customer-service-float {
  border-color: color-mix(in srgb, var(--skin-accent) 46%, transparent);
  color: var(--skin-soft);
  background:
    radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.24), transparent 28%),
    var(--skin-panel);
}

.star-map-page {
  position: relative;
  height: 100%;
  padding: 18px 12px 108px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 12%, rgba(125, 92, 255, 0.2), transparent 28%),
    radial-gradient(circle at 18% 68%, rgba(75, 217, 205, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(8, 5, 21, 0.86), rgba(5, 3, 14, 0.98));
}

body.mobile-web-build .star-map-page.active,
body:is(.mobile-preview, .web-build.mobile-preview) .star-map-page.active {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 18px 12px calc(112px + env(safe-area-inset-bottom));
  overflow: hidden;
}

body.mobile-web-build .daily-screen:not(.wake-active) .module-page,
body.mobile-preview .daily-screen:not(.wake-active) .module-page {
  padding-top: 18px;
}

body.mobile-web-build .daily-screen:not(.wake-active) .module-page.panel,
body.mobile-preview .daily-screen:not(.wake-active) .module-page.panel {
  height: calc(100% - 128px);
  margin-top: 16px;
}

.star-map-head {
  position: relative;
  z-index: 12;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  justify-items: center;
  gap: 12px;
  padding: 12px 6px 10px;
}

.star-map-head .eyebrow {
  margin: 0;
  color: rgba(240, 211, 123, 0.88);
  font-size: 13px;
  letter-spacing: 0.26em;
}

.star-map-friend-button,
.star-map-notice-button {
  position: relative;
  min-width: 58px;
  height: 34px;
  padding: 0 22px 0 14px;
  border: 1px solid rgba(243, 208, 107, 0.32);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #f8e8b5;
  font-weight: 900;
  backdrop-filter: blur(14px);
}

.star-map-friend-button {
  justify-self: start;
}

.star-map-notice-button {
  justify-self: end;
}

.star-map-friend-button b,
.star-map-notice-button b {
  position: absolute;
  right: 3px;
  top: 3px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #ff6262;
  color: #fff;
  font-size: 10px;
}

.star-map-friend-bar {
  position: absolute;
  left: 12px;
  top: 58px;
  z-index: 18;
  width: min(282px, calc(100% - 24px));
  max-height: 238px;
  overflow: auto;
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(240, 211, 123, 0.24);
  border-radius: 20px;
  background: rgba(7, 5, 18, 0.9);
  color: #fff8e8;
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(18px);
}

.star-map-friend-bar.hidden {
  display: none;
}

.star-map-friend-bar > span {
  color: rgba(240, 211, 123, 0.9);
  font-size: 11px;
  font-weight: 950;
}

.star-map-friend-bar button {
  width: 100%;
  min-height: 44px;
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(218, 199, 255, 0.16);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 248, 232, 0.88);
  text-align: left;
}

.star-map-friend-bar button.active {
  border-color: rgba(240, 211, 123, 0.36);
  background: rgba(240, 211, 123, 0.13);
}

.star-map-friend-bar i {
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background: radial-gradient(circle, #fff8d8 0 20%, #72f1dc 44%, rgba(114, 241, 220, 0.18) 70%, transparent 72%);
  box-shadow: 0 0 0 6px rgba(114, 241, 220, 0.07), 0 0 20px rgba(114, 241, 220, 0.48);
}

.star-map-friend-bar strong,
.star-map-friend-bar em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.star-map-friend-bar strong {
  font-size: 13px;
}

.star-map-friend-bar em,
.star-map-friend-empty {
  color: rgba(255, 248, 232, 0.62);
  font-size: 11px;
  font-style: normal;
}

.star-map-friend-empty {
  margin: 0;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}

.star-map-mode-tabs {
  position: relative;
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 5px;
  border: 1px solid rgba(218, 199, 255, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
}

.star-map-mode-tabs button {
  height: 38px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: rgba(244, 238, 255, 0.62);
  font-size: 13px;
  font-weight: 900;
}

.star-map-mode-tabs button.active {
  color: #201636;
  background: linear-gradient(135deg, #f0d37b, #fff2b6);
  box-shadow: 0 10px 24px rgba(240, 211, 123, 0.16);
}

.star-map-context {
  position: relative;
  z-index: 4;
  min-height: 34px;
  margin: 10px 6px 8px;
  color: rgba(242, 235, 255, 0.7);
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
}

.star-map-canvas {
  position: relative;
  height: calc(100% - 126px);
  min-height: 480px;
  overflow: hidden;
  touch-action: none;
  border: 1px solid rgba(218, 199, 255, 0.18);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 45%, rgba(117, 86, 255, 0.24), transparent 34%),
    radial-gradient(circle at 66% 58%, rgba(240, 211, 123, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(18, 11, 43, 0.92), rgba(5, 3, 14, 0.96));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.1),
    0 26px 80px rgba(0, 0, 0, 0.34);
}

body.mobile-web-build .star-map-canvas,
body:is(.mobile-preview, .web-build.mobile-preview) .star-map-canvas {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.star-map-aurora {
  position: absolute;
  inset: -22%;
  background:
    conic-gradient(from 40deg at 50% 50%, rgba(126, 96, 255, 0.06), rgba(122, 76, 255, 0.36), rgba(74, 218, 207, 0.16), rgba(126, 96, 255, 0.06)),
    radial-gradient(circle at 50% 50%, rgba(217, 198, 255, 0.08), transparent 50%);
  filter: blur(1px) saturate(1.2);
  animation: star-map-breathe 5.8s ease-in-out infinite;
}

.star-map-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 620px;
  height: 420px;
  transform: translate(-50%, -50%);
  transform-origin: center;
  transition: transform 240ms ease;
  --star-map-marker-scale: 1;
}

.star-map-canvas.is-gesture-active .star-map-layer {
  transition: none;
}

.star-map-land {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 58% 51%, rgba(240, 211, 123, 0.12), transparent 44%),
    radial-gradient(ellipse at 45% 56%, rgba(126, 96, 255, 0.22), transparent 58%);
  opacity: 0.96;
  filter: drop-shadow(0 0 30px rgba(126, 96, 255, 0.22));
}

.star-map-china {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.44;
  mix-blend-mode: screen;
  user-select: none;
  -webkit-user-drag: none;
  filter:
    saturate(0.95)
    brightness(1.08)
    drop-shadow(0 0 14px rgba(114, 241, 220, 0.25))
    drop-shadow(0 0 28px rgba(240, 211, 123, 0.12));
}

.star-map-stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.star-map-light,
.star-map-self {
  position: absolute;
  z-index: 3;
  --star-map-anchor-y: 9.5px;
  transform: translate(-50%, calc(-1 * var(--star-map-anchor-y))) scale(var(--star-map-marker-scale, 1));
  transform-origin: 50% var(--star-map-anchor-y);
  border: 0;
  background: transparent;
  display: grid;
  justify-items: center;
  gap: 4px;
  color: #f0d37b;
  filter: drop-shadow(0 0 14px rgba(240, 211, 123, 0.72));
}

.star-map-self {
  pointer-events: none;
}

.star-map-light::before,
.star-map-light::after,
.star-map-self::before,
.star-map-self::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 9px;
  z-index: -1;
  width: 42px;
  height: 42px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: 0.18;
  transform: translate(-50%, -50%);
  animation: star-light-ripple 3.8s ease-out infinite;
}

.star-map-light::after,
.star-map-self::after {
  width: 68px;
  height: 68px;
  opacity: 0.09;
  animation-delay: 1.2s;
}

.star-map-light i,
.star-map-self i,
.star-map-light strong {
  width: 19px;
  height: 19px;
  border-radius: 999px;
  background: radial-gradient(circle, #fff8d8 0 22%, #f0d37b 40%, rgba(240, 211, 123, 0.2) 68%, transparent 70%);
  box-shadow: 0 0 0 8px rgba(240, 211, 123, 0.08), 0 0 28px rgba(240, 211, 123, 0.68);
  animation: star-light-pulse 3.5s ease-in-out infinite;
}

.star-map-light strong {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #fff8d8 0 18%, #dba83f 42%, rgba(75, 43, 8, 0.96) 72%);
  color: #fff8e8;
  font-size: 11px;
  font-weight: 950;
}

.star-map-light span,
.star-map-self span {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(5, 3, 14, 0.72);
  color: rgba(255, 248, 232, 0.86);
  font-size: 10px;
  white-space: nowrap;
}

.star-map-light b {
  margin-top: -2px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(5, 3, 14, 0.8);
  color: currentColor;
  font-size: 9px;
}

.star-map-light.cluster {
  color: #f4cf76;
  --star-map-anchor-y: 15.5px;
}

.star-map-light.self-fixed {
  pointer-events: none;
  color: #fff4c8;
  z-index: 6;
  --star-map-anchor-y: 13px;
  filter: drop-shadow(0 0 18px rgba(255, 233, 162, 0.86));
}

.star-map-light.self-fixed i {
  width: 26px;
  height: 26px;
  box-shadow: 0 0 0 9px rgba(240, 211, 123, 0.1), 0 0 34px rgba(240, 211, 123, 0.78);
}

.star-map-light.harmony {
  color: #72f1dc;
  filter: drop-shadow(0 0 16px rgba(114, 241, 220, 0.82));
}

.star-map-light.harmony i {
  background: radial-gradient(circle, #effffc 0 20%, #72f1dc 42%, rgba(114, 241, 220, 0.18) 70%, transparent 72%);
  box-shadow: 0 0 0 8px rgba(114, 241, 220, 0.08), 0 0 30px rgba(114, 241, 220, 0.72);
}

.star-map-light.mirror {
  color: #d8c7ff;
  filter: drop-shadow(0 0 18px rgba(185, 152, 255, 0.92));
}

.star-map-light.mirror i {
  background: radial-gradient(circle, #fff 0 18%, #c7abff 42%, rgba(185, 152, 255, 0.2) 70%, transparent 72%);
  box-shadow: 0 0 0 9px rgba(185, 152, 255, 0.08), 0 0 34px rgba(185, 152, 255, 0.78);
}

.star-map-self {
  z-index: 5;
  color: #fff4c8;
}

.star-map-self i {
  width: 26px;
  height: 26px;
}

.star-map-zoom {
  position: absolute;
  right: 8px;
  top: 8px;
  z-index: 7;
  display: grid;
  gap: 6px;
  width: 34px;
}

.star-map-zoom button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  border: 1px solid rgba(218, 199, 255, 0.2);
  border-radius: 999px;
  background: rgba(5, 3, 14, 0.66);
  color: #fff8e8;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  backdrop-filter: blur(12px);
}

.star-map-locate-button {
  color: #f0d37b;
}

.star-map-locate-button span {
  position: relative;
  display: block;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 999px;
  box-shadow: 0 0 0 5px rgba(240, 211, 123, 0.08), 0 0 14px rgba(240, 211, 123, 0.28);
}

.star-map-locate-button span::before,
.star-map-locate-button span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.star-map-locate-button span::before {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
}

.star-map-locate-button span::after {
  width: 24px;
  height: 24px;
  border: 1px solid rgba(240, 211, 123, 0.22);
  border-radius: 999px;
}

.star-map-empty {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 6;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: 72%;
  margin: 0;
  padding: 12px 15px;
  border: 1px solid rgba(218, 199, 255, 0.18);
  border-radius: 18px;
  background: rgba(5, 3, 14, 0.72);
  color: rgba(255, 248, 232, 0.78);
  text-align: center;
  backdrop-filter: blur(14px);
}

.star-map-selected {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 8;
  transform: translateY(var(--star-map-card-y, 0));
  transition: transform 180ms ease;
  will-change: transform;
  max-height: min(342px, calc(100% - 74px));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 18px 16px 12px;
  border: 1px solid rgba(240, 211, 123, 0.24);
  border-radius: 22px;
  background: rgba(7, 5, 18, 0.86);
  color: #fff8e8;
  box-shadow: 0 -18px 46px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
}

.star-map-selected.is-dragging {
  transition: none;
}

.star-map-selected-grip {
  width: 46px;
  height: 5px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: rgba(255, 248, 232, 0.28);
  box-shadow: 0 0 12px rgba(240, 211, 123, 0.12);
  touch-action: none;
}

.star-map-selected span {
  color: #f0d37b;
  font-size: 11px;
  font-weight: 900;
}

.star-map-selected strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
}

.star-map-selected p,
.star-map-selected em {
  display: block;
  margin: 5px 0 0;
  color: rgba(242, 235, 255, 0.72);
  font-size: 12px;
  font-style: normal;
}

.star-map-selected-close {
  position: absolute;
  right: 10px;
  top: 10px;
  min-width: 44px;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 248, 232, 0.8);
  font-size: 11px;
  font-weight: 950;
}

.star-map-selected-action {
  width: 100%;
  min-height: 38px;
  margin-top: 12px;
  border: 1px solid rgba(240, 211, 123, 0.38);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(240, 211, 123, 0.94), rgba(255, 239, 173, 0.88));
  color: #201636;
  font-weight: 950;
}

.star-map-social-panel {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid rgba(218, 199, 255, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
}

.star-map-social-panel small {
  display: block;
  color: rgba(255, 248, 232, 0.76);
  font-size: 11px;
  line-height: 1.45;
}

.star-map-cluster-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.star-map-cluster-list button {
  display: grid;
  gap: 3px;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid rgba(218, 199, 255, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.075);
  color: #fff8e8;
  text-align: left;
}

.star-map-cluster-list button strong {
  margin: 0;
  font-size: 13px;
}

.star-map-cluster-list button span {
  color: rgba(242, 235, 255, 0.68);
  font-size: 11px;
}

.star-map-selected-action:disabled {
  opacity: 0.62;
  color: rgba(255, 248, 232, 0.72);
  background: rgba(255, 255, 255, 0.08);
}

.star-map-secondary-action {
  width: 100%;
  min-height: 34px;
  margin-top: 8px;
  border: 1px solid rgba(218, 199, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 248, 232, 0.8);
  font-weight: 900;
}

.star-map-secondary-action.danger {
  border-color: rgba(255, 111, 111, 0.26);
  color: rgba(255, 188, 188, 0.92);
}

.star-map-chat-panel .star-map-chat-thread {
  display: grid;
  gap: 7px;
  align-content: end;
  min-height: 0;
  overflow: auto;
  padding: 12px 12px;
}

.star-map-chat-thread p {
  max-width: 86%;
  margin: 0;
  padding: 8px 10px;
  border-radius: 14px 14px 14px 4px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 248, 232, 0.9);
}

.star-map-chat-thread p.mine {
  justify-self: end;
  border-radius: 14px 14px 4px 14px;
  background: rgba(114, 241, 220, 0.14);
}

.star-map-chat-thread p span,
.star-map-chat-thread p em {
  display: block;
}

.star-map-chat-thread p em {
  margin-top: 3px;
  font-size: 10px;
  opacity: 0.58;
}

.star-map-chat-panel .star-map-chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 10px 12px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(218, 199, 255, 0.12);
  background:
    linear-gradient(180deg, rgba(7, 5, 18, 0.18), rgba(7, 5, 18, 0.74)),
    rgba(255, 255, 255, 0.045);
  backdrop-filter: blur(18px) saturate(1.08);
}

.star-map-chat-panel .star-map-chat-form input {
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(218, 199, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff8e8;
  outline: none;
}

.star-map-chat-panel .star-map-chat-form button {
  min-width: 54px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(240, 211, 123, 0.94);
  color: #201636;
  font-weight: 950;
}

.star-map-chat-panel {
  position: absolute;
  left: 0;
  top: max(14px, env(safe-area-inset-top));
  bottom: 104px;
  z-index: 44;
  width: 75%;
  max-width: none;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border: 1px solid rgba(246, 241, 255, 0.22);
  border-left: 0;
  border-radius: 0 34px 34px 0;
  background:
    radial-gradient(circle at 22% 4%, rgba(216, 200, 255, 0.18), transparent 30%),
    linear-gradient(180deg, rgba(10, 7, 22, 0.2), rgba(12, 8, 25, 0.42) 38%, rgba(10, 8, 19, 0.82)),
    linear-gradient(90deg, rgba(8, 5, 18, 0.12), rgba(8, 5, 18, 0.4) 74%, rgba(8, 5, 18, 0.68)),
    rgba(22, 17, 38, 0.68);
  color: #fff8e8;
  box-shadow: var(--glass-shadow), 24px 0 72px rgba(0, 0, 0, 0.42), inset 0 1px rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(28px) saturate(1.18);
  transform: translateX(0);
  animation: star-map-chat-slide-in 220ms cubic-bezier(0.2, 0.8, 0.22, 1) both;
}

.star-map-chat-panel.hidden {
  display: none;
}

.star-map-chat-panel header {
  min-height: 82px;
  display: grid;
  grid-template-columns: 34px 30px minmax(0, 1fr) auto;
  grid-template-areas:
    "close avatar name block"
    "close avatar meta block";
  align-items: center;
  column-gap: 8px;
  padding: 14px 12px 14px;
  border-bottom: 1px solid rgba(218, 199, 255, 0.12);
  background:
    radial-gradient(circle at 0 0, rgba(216, 200, 255, 0.12), transparent 44%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.016)),
    rgba(255, 255, 255, 0.035);
}

.star-map-chat-panel header button {
  grid-area: close;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 248, 232, 0.86);
  font-size: 20px;
  line-height: 1;
}

.star-map-chat-panel header .star-map-chat-block {
  grid-area: block;
  width: auto;
  min-width: 48px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255, 116, 116, 0.24);
  background: rgba(255, 87, 87, 0.1);
  color: rgba(255, 206, 206, 0.92);
  font-size: 11px;
  font-weight: 950;
}

.star-map-chat-panel header i {
  grid-area: avatar;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: radial-gradient(circle, #fff8d8 0 20%, #72f1dc 44%, rgba(114, 241, 220, 0.18) 70%, transparent 72%);
  box-shadow: 0 0 0 7px rgba(114, 241, 220, 0.07), 0 0 20px rgba(114, 241, 220, 0.48);
}

.star-map-chat-panel header strong {
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  font-size: 17px;
}

.star-map-chat-panel header span {
  grid-area: meta;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(255, 248, 232, 0.58);
  font-size: 12px;
}

@keyframes star-map-chat-slide-in {
  from { opacity: 0.7; transform: translateX(-100%); }
  to { opacity: 1; transform: translateX(0); }
}

.star-map-selected-footer-close {
  width: 100%;
  min-height: 34px;
  margin-top: 10px;
  border: 1px solid rgba(218, 199, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
  color: rgba(255, 248, 232, 0.8);
  font-weight: 900;
}

.star-map-notifications {
  position: absolute;
  z-index: 20;
  left: 14px;
  right: 14px;
  top: 142px;
  max-height: min(360px, calc(100% - 260px));
  overflow: hidden;
  border: 1px solid rgba(240, 211, 123, 0.24);
  border-radius: 24px;
  background: rgba(7, 5, 18, 0.94);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(22px);
}

.star-map-notifications header {
  min-height: 50px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(218, 199, 255, 0.12);
  color: #fff8e8;
}

.star-map-notifications header button {
  border: 0;
  background: transparent;
  color: #f0d37b;
  font-weight: 900;
}

.star-map-notice-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.star-map-notice-actions button {
  min-height: 32px;
  border: 1px solid rgba(218, 199, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 248, 232, 0.82);
  font-weight: 900;
}

.star-map-notice-actions button:last-child {
  border-color: rgba(240, 211, 123, 0.38);
  background: rgba(240, 211, 123, 0.92);
  color: #201636;
}

.star-map-notification-list {
  max-height: 304px;
  overflow-y: auto;
  padding: 8px;
}

.star-map-notification-list article {
  padding: 11px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff8e8;
}

.star-map-notification-list article + article {
  margin-top: 8px;
}

.star-map-notification-list article.read {
  opacity: 0.56;
}

.star-map-notification-list p,
.star-map-notice-empty {
  margin: 5px 0 0;
  color: rgba(242, 235, 255, 0.7);
  font-size: 12px;
  line-height: 1.55;
}

.star-map-notification-list time {
  display: block;
  margin-top: 6px;
  color: rgba(242, 235, 255, 0.42);
  font-size: 10px;
}

@keyframes star-map-breathe {
  0%, 100% { opacity: 0.76; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.03); }
}

@keyframes star-light-pulse {
  0%, 100% { opacity: 0.78; transform: scale(0.86); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes star-light-ripple {
  0% { opacity: 0.2; transform: translate(-50%, -50%) scale(0.62); }
  72%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); }
}

body.mobile-web-build .home-float-menu {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.mobile-web-build .home-float-menu .mobile-hidden-nav {
  display: none;
}

body.mobile-web-build .liuyao-panel .mobile-remove-liuyao-intro {
  display: none;
}

body.mobile-web-build .liuyao-panel .liuyao-question {
  margin-top: 0;
}

.web-only-nav {
  display: none;
}

.mobile-only-nav {
  display: grid;
}

.home-float-menu button {
  min-width: 0;
  min-height: 58px;
  display: grid;
  place-items: center;
  gap: 3px;
  border: 1px solid rgba(246, 241, 255, 0.14);
  border-radius: 22px;
  color: rgba(246, 241, 255, 0.82);
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.12), transparent 46%),
    rgba(255, 255, 255, 0.052);
  font-weight: 900;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.065);
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.home-float-menu button span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.94);
  background: rgba(255, 255, 255, 0.1);
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 17px;
}

.home-float-menu button em {
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.08em;
}

.home-float-menu button.active,
.home-float-menu button:focus-visible {
  color: #241a38;
  outline: none;
  border-color: rgba(255, 217, 73, 0.45);
  background:
    radial-gradient(circle at 30% 0, rgba(255, 255, 255, 0.34), transparent 40%),
    linear-gradient(135deg, rgba(255, 217, 73, 0.92), rgba(246, 230, 165, 0.88));
  box-shadow: 0 12px 30px rgba(255, 217, 73, 0.22), inset 0 1px rgba(255, 255, 255, 0.32);
}

.home-float-menu button.active span,
.home-float-menu button:focus-visible span {
  color: #241a38;
  background: rgba(36, 26, 56, 0.1);
}

.home-float-menu button:active {
  transform: translateY(1px) scale(0.98);
}

/* Life Sandbox: local prototype */
.daily-screen.sandbox-active .top-nav {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
}

.daily-screen.sandbox-active .home-float-menu {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 130%);
}

.daily-screen .top-nav {
  transition: opacity 180ms ease, transform 180ms ease;
}

.daily-screen:not(.wake-active) .top-nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-16px);
}

.daily-screen.sandbox-active .top-nav {
  pointer-events: none;
}

.life-sandbox-page {
  --sandbox-ink: #f7f2e8;
  --sandbox-muted: rgba(247, 242, 232, 0.64);
  --sandbox-line: rgba(255, 255, 255, 0.13);
  --sandbox-gold: #f0c96b;
  --sandbox-jade: #72d6a0;
  width: 100%;
  padding: max(58px, calc(env(safe-area-inset-top) + 46px)) 12px max(18px, env(safe-area-inset-bottom));
  color: var(--sandbox-ink);
  background:
    linear-gradient(rgba(8, 14, 17, 0.68), rgba(7, 10, 12, 0.94)),
    url("assets/daymasters/ren-water.png") center 24% / cover fixed;
}

.life-sandbox-page.active {
  display: block;
}

.sandbox-view {
  width: min(100%, 720px);
  margin: 0 auto;
}

.sandbox-view:not(.active) {
  display: none;
}

.sandbox-page-header,
.sandbox-sim-header {
  position: relative;
  z-index: 35;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  background: rgba(8, 13, 17, 0.42);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18), inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(1.08);
}

.sandbox-page-header {
  margin: 4px 10px 14px;
}

.sandbox-page-header h3 {
  margin: 2px 0 0;
  color: #fff;
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 26px;
  letter-spacing: 0;
}

.sandbox-private-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(114, 214, 160, 0.32);
  border-radius: 999px;
  color: #a5eac1;
  background: rgba(21, 64, 47, 0.46);
  font-size: 11px;
  font-weight: 900;
}

.sandbox-town-header {
  min-height: 54px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

.sandbox-town-header > div {
  text-align: center;
}

.sandbox-town-header > div span,
.sandbox-town-header > div strong {
  display: block;
}

.sandbox-town-header > div span {
  color: rgba(255, 255, 255, 0.52);
  font-size: 9px;
  font-weight: 900;
}

.sandbox-town-header > div strong {
  color: #fff;
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 22px;
}

.sandbox-builder-map {
  position: relative;
  isolation: isolate;
  height: clamp(500px, 66dvh, 620px);
  overflow: hidden;
  margin: 0 -12px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: #96c4c2;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.36), 0 24px 46px rgba(0, 0, 0, 0.32);
}

.world-sandbox-page {
  padding: max(46px, calc(env(safe-area-inset-top) + 34px)) 0 max(18px, env(safe-area-inset-bottom));
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(5, 11, 12, 0.54), rgba(8, 12, 13, 0.92)),
    radial-gradient(circle at 50% 18%, rgba(240, 201, 107, 0.18), transparent 32%),
    #0b1112;
  touch-action: pan-y;
  overflow-anchor: none;
}

.sandbox-floating-back {
  position: absolute;
  z-index: 120;
  left: 12px;
  top: 50%;
  width: 40px;
  height: 40px;
  min-height: 40px;
  display: none;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 50%;
  color: #142019;
  background:
    radial-gradient(circle at 35% 18%, rgba(255, 255, 255, 0.52), transparent 34%),
    linear-gradient(135deg, #f0c96b, #f8e6a8);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34), 0 0 0 3px rgba(8, 13, 17, 0.22);
  backdrop-filter: blur(18px) saturate(1.08);
  transform: translateY(-50%);
  touch-action: manipulation;
}

.daily-screen.sandbox-active .sandbox-floating-back {
  display: grid;
}

.mobile-overlay-back {
  position: fixed;
  z-index: 16000;
  left: max(10px, env(safe-area-inset-left));
  top: 50dvh;
  width: 40px;
  height: 40px;
  min-height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 50%;
  color: #142019;
  background:
    radial-gradient(circle at 35% 18%, rgba(255, 255, 255, 0.55), transparent 34%),
    linear-gradient(135deg, #f0c96b, #f8e6a8);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.36), 0 0 0 3px rgba(8, 13, 17, 0.22);
  backdrop-filter: blur(18px) saturate(1.08);
  opacity: 0;
  pointer-events: none;
  transform: translate(-16px, -50%) scale(0.92);
  transition: opacity 180ms ease, transform 180ms ease;
  touch-action: manipulation;
}

.mobile-overlay-back.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

.mobile-overlay-back span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #142019;
  font-size: 27px;
  font-weight: 950;
  line-height: 1;
}

.sandbox-floating-back span {
  display: block;
  font-style: normal;
  line-height: 1;
}

.sandbox-floating-back span {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #142019;
  font-size: 27px;
  font-weight: 950;
}

.world-sandbox-page .sandbox-top-back {
  visibility: hidden;
  pointer-events: none;
}

.world-sandbox-page .sandbox-view {
  width: 100%;
  max-width: none;
}

.world-sandbox-page .sandbox-town-header {
  position: relative;
  z-index: 30;
  margin: 0 12px 10px;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(7, 12, 13, 0.62);
  backdrop-filter: blur(16px);
}

.world-sandbox-page .sandbox-town-header > div span {
  color: rgba(240, 201, 107, 0.86);
}

.world-sandbox-page .sandbox-town-header > div strong {
  font-size: 24px;
}

.world-sandbox-page .sandbox-builder-map {
  width: 100%;
  max-width: 100dvw;
  height: clamp(420px, calc(100dvh - 214px), 610px);
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: inset 0 34px 54px rgba(6, 12, 12, 0.24), inset 0 -42px 60px rgba(4, 9, 10, 0.38);
  touch-action: manipulation;
}

.world-sandbox-page .sandbox-builder-land {
  inset: 4% -2% 2%;
  clip-path: polygon(3% 24%, 12% 13%, 27% 16%, 36% 6%, 52% 7%, 62% 12%, 75% 10%, 89% 23%, 98% 37%, 91% 48%, 93% 63%, 78% 72%, 67% 86%, 53% 79%, 41% 92%, 29% 82%, 16% 85%, 10% 69%, 2% 60%, 8% 47%, 0 39%);
  filter: drop-shadow(0 24px 26px rgba(12, 29, 24, 0.42));
}

.world-sandbox-page .sandbox-builder-compass {
  top: 18px;
  left: 18px;
}

.world-sandbox-hud {
  position: absolute;
  z-index: 12;
  top: 18px;
  right: 12px;
  display: grid;
  gap: 7px;
  pointer-events: none;
}

.world-sandbox-hud span {
  min-width: 90px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(8, 13, 13, 0.52);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(14px);
}

.world-sandbox-hud b,
.world-sandbox-hud em {
  display: block;
  font-style: normal;
}

.world-sandbox-hud b {
  color: #fff7da;
  font-size: 12px;
}

.world-sandbox-hud em {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 9px;
}

.world-sandbox-page .sandbox-builder-hint {
  bottom: 108px;
  border-radius: 16px;
  text-align: left;
}

.world-sandbox-page .sandbox-world-console {
  position: relative;
  z-index: 28;
  margin: -88px 12px 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px 22px 0 0;
  background: rgba(9, 14, 15, 0.76);
  box-shadow: 0 -18px 42px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(20px) saturate(1.08);
}

.world-sandbox-page .sandbox-console-actions button,
.world-sandbox-page .sandbox-start-button {
  border-radius: 999px;
}

.sandbox-layout-switch {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0 12px 12px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(7, 12, 13, 0.58);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
}

.sandbox-layout-switch button {
  min-width: 0;
  min-height: 48px;
  display: grid;
  align-content: center;
  gap: 2px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.62);
  background: transparent;
}

.sandbox-layout-switch button span,
.sandbox-layout-switch button em {
  display: block;
  line-height: 1.15;
}

.sandbox-layout-switch button span {
  font-size: 14px;
  font-weight: 950;
}

.sandbox-layout-switch button em {
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.sandbox-layout-switch button.active {
  border-color: rgba(240, 201, 107, 0.4);
  color: #162019;
  background: linear-gradient(135deg, #f3d779, #8ce0ae);
  box-shadow: 0 10px 22px rgba(18, 34, 28, 0.26), inset 0 1px rgba(255, 255, 255, 0.42);
}

.sandbox-lobby.card-layout #sandboxBuilderMap,
.sandbox-lobby.card-layout .sandbox-world-console {
  display: none;
}

.sandbox-card-lobby {
  display: grid;
  gap: 12px;
  margin: 0 12px 24px;
}

.sandbox-card-lobby.hidden {
  display: none;
}

.sandbox-card-theater-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 0;
}

.sandbox-card-theater-head span,
.sandbox-card-theater-head strong {
  display: block;
}

.sandbox-card-theater-head span,
.sandbox-card-theater-head em {
  color: rgba(240, 201, 107, 0.78);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.sandbox-card-theater-head strong {
  margin-top: 3px;
  color: #fff;
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 21px;
  line-height: 1.15;
}

.sandbox-card-scenario-deck {
  display: grid;
  gap: 10px;
}

.sandbox-card-scene {
  position: relative;
  min-height: 232px;
  overflow: hidden;
  display: grid;
  align-content: end;
  gap: 8px;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--card-color), transparent 38%);
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 78% 16%, color-mix(in srgb, var(--card-color), transparent 46%), transparent 34%),
    var(--scenario-bg),
    rgba(7, 12, 13, 0.92);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.14);
  isolation: isolate;
}

.sandbox-card-scene::before,
.sandbox-card-scene::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.sandbox-card-scene::before {
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 17px;
}

.sandbox-card-scene::after {
  right: -28px;
  top: -18px;
  width: 160px;
  height: 230px;
  opacity: 0.4;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 50%;
  transform: rotate(24deg);
}

.sandbox-card-scene-glow {
  position: absolute;
  inset: auto -28px -64px 32%;
  height: 160px;
  opacity: 0.7;
  background: radial-gradient(circle, color-mix(in srgb, var(--card-color), transparent 20%), transparent 68%);
  filter: blur(16px);
  z-index: -1;
}

.sandbox-card-scene > span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  font-weight: 900;
}

.sandbox-card-scene-label {
  justify-self: start;
  min-width: 78px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 247, 210, 0.54);
  border-radius: 999px;
  color: #1b1710 !important;
  background: linear-gradient(135deg, #fff1b9, var(--card-color));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  font-size: 13px !important;
  letter-spacing: 0.12em;
  text-align: center;
}

.sandbox-card-scene-venue {
  justify-self: start;
  min-width: 78px;
  margin-top: -3px;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1.1;
  text-align: center;
}

.sandbox-card-scene > strong {
  max-width: 92%;
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 29px;
  line-height: 1.08;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}

.sandbox-card-scene > p {
  max-width: 96%;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  line-height: 1.72;
}

.sandbox-card-scene-beats {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin: 2px -18px 0;
  padding: 0 18px 2px;
  scrollbar-width: none;
}

.sandbox-card-scene-beats::-webkit-scrollbar,
.sandbox-card-scenario-strip::-webkit-scrollbar,
.sandbox-card-profile-deck::-webkit-scrollbar {
  display: none;
}

.sandbox-card-scene-beats em {
  flex: 0 0 auto;
  max-width: 190px;
  overflow: hidden;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(0, 0, 0, 0.18);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sandbox-card-scene footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}

.sandbox-card-scene footer b,
.sandbox-card-scene footer small {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
  font-size: 10px;
}

.sandbox-card-scene footer b {
  color: #fff7d4;
}

.sandbox-card-scene footer small {
  color: rgba(255, 255, 255, 0.64);
}

.sandbox-card-scenario-strip {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  margin: 0 -12px;
  padding: 0 12px 4px;
  scroll-snap-type: none;
  scrollbar-width: none;
}

.sandbox-card-scenario-strip button {
  flex: 0 0 126px;
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 18px;
  color: rgba(255, 255, 255, 0.72);
  background:
    radial-gradient(circle at 80% 0, color-mix(in srgb, var(--card-color), transparent 70%), transparent 44%),
    rgba(255, 255, 255, 0.045);
  text-align: left;
  scroll-snap-align: none;
}

.sandbox-card-scenario-strip button span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #111b18;
  background: var(--card-color);
  font-size: 10px;
  font-weight: 950;
}

.sandbox-card-scenario-strip button strong {
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sandbox-card-scenario-strip button small {
  color: rgba(255, 255, 255, 0.5);
  font-size: 9px;
}

.sandbox-card-scenario-strip button.selected {
  border-color: color-mix(in srgb, var(--card-color), transparent 28%);
  background:
    radial-gradient(circle at 80% 0, color-mix(in srgb, var(--card-color), transparent 54%), transparent 48%),
    rgba(255, 255, 255, 0.09);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.sandbox-card-profile-deck {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  margin: 0 -12px;
  padding: 2px 12px 7px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.sandbox-card-profile {
  position: relative;
  flex: 0 0 min(62vw, 222px);
  min-height: 272px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  align-content: start;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--profile-color), transparent 70%), transparent 32%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.026)),
    rgba(7, 12, 13, 0.78);
  text-align: left;
  scroll-snap-align: center;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
}

.sandbox-card-profile::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  pointer-events: none;
}

.sandbox-card-profile.selected {
  border-color: color-mix(in srgb, var(--profile-color), transparent 24%);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.24), 0 0 0 3px color-mix(in srgb, var(--profile-color), transparent 86%);
}

.sandbox-card-remove {
  position: absolute;
  z-index: 3;
  right: 10px;
  top: 10px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.76);
  background: rgba(0, 0, 0, 0.36);
  font-size: 18px;
  font-weight: 900;
}

.sandbox-card-profile-order {
  justify-self: start;
  padding: 4px 8px;
  border-radius: 999px;
  color: #111b18;
  background: var(--profile-color);
  font-size: 9px;
  font-weight: 950;
}

.sandbox-card-profile img {
  width: 78px;
  height: 78px;
  justify-self: center;
  object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--profile-color), transparent 22%);
  border-radius: 50%;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--profile-color), transparent 86%), 0 10px 20px rgba(0, 0, 0, 0.24);
}

.sandbox-card-profile strong {
  overflow: hidden;
  color: #fff;
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 18px;
  line-height: 1.12;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sandbox-card-profile small {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.56);
  font-size: 10px;
  font-weight: 800;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sandbox-card-profile p {
  margin: 2px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 10px;
  line-height: 1.48;
}

.sandbox-card-profile em {
  align-self: end;
  display: block;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(240, 201, 107, 0.74);
  font-size: 9px;
  font-style: normal;
  line-height: 1.42;
}

.sandbox-card-profile-placeholder {
  min-height: 272px;
  place-items: center;
  align-content: center;
  border-style: dashed;
  border-color: rgba(240, 201, 107, 0.32);
  color: rgba(255, 255, 255, 0.72);
  background:
    radial-gradient(circle at 50% 42%, rgba(240, 201, 107, 0.12), transparent 38%),
    rgba(255, 255, 255, 0.032);
  text-align: center;
}

.sandbox-card-profile-placeholder::before {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.16);
}

.sandbox-placeholder-plus {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(240, 201, 107, 0.38);
  border-radius: 50%;
  color: #f0c96b;
  background: rgba(240, 201, 107, 0.08);
  font-size: 34px;
  font-weight: 800;
}

.sandbox-card-profile-placeholder strong {
  white-space: normal;
}

.sandbox-card-profile-placeholder p {
  max-width: 150px;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

.sandbox-card-lobby {
  position: relative;
  gap: 15px;
  margin: 2px 10px 24px;
  padding: 12px 0 0;
}

.sandbox-card-lobby::before {
  content: "";
  position: absolute;
  inset: -8px -10px auto;
  height: 128px;
  pointer-events: none;
  border-radius: 30px;
  background:
    radial-gradient(circle at 22% 0%, rgba(240, 201, 107, 0.18), transparent 38%),
    radial-gradient(circle at 78% 20%, rgba(126, 225, 197, 0.12), transparent 36%);
  opacity: 0.72;
}

.sandbox-card-theater-head {
  position: relative;
  z-index: 1;
  padding: 6px 4px 0;
}

.sandbox-card-theater-head div small {
  display: block;
  margin-top: 4px;
  color: rgba(246, 241, 255, 0.58);
  font-size: 11px;
  line-height: 1.45;
}

.sandbox-card-theater-head em {
  padding: 7px 10px;
  border: 1px solid rgba(240, 201, 107, 0.3);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(240, 201, 107, 0.14), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1);
}

.sandbox-card-scene,
.sandbox-card-profile,
.sandbox-card-scenario-strip button {
  transform: translateZ(0);
  transition:
    transform 220ms cubic-bezier(0.2, 0.8, 0.22, 1),
    border-color 220ms ease,
    box-shadow 220ms ease,
    filter 220ms ease;
}

.sandbox-card-scene {
  min-height: 252px;
  padding: 20px;
  border-width: 2px;
  border-color: color-mix(in srgb, var(--card-color), #fff 18%);
  border-radius: 27px;
  background:
    radial-gradient(circle at 78% 16%, color-mix(in srgb, var(--card-color), transparent 42%), transparent 34%),
    radial-gradient(circle at 25% 4%, rgba(255, 255, 255, 0.16), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 28%),
    var(--scenario-bg),
    rgba(7, 12, 13, 0.94);
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.36),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px rgba(255, 255, 255, 0.2),
    inset 0 -20px 42px rgba(0, 0, 0, 0.22);
}

.sandbox-card-frame {
  position: absolute;
  inset: 9px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--card-color, var(--profile-color)), #fff 22%);
  border-radius: inherit;
  opacity: 0.78;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 0 32px color-mix(in srgb, var(--card-color, var(--profile-color)) 18%, transparent);
}

.sandbox-card-scene > *:not(.sandbox-card-frame):not(.sandbox-card-scene-glow),
.sandbox-card-profile > *:not(.sandbox-card-frame) {
  position: relative;
  z-index: 1;
}

.sandbox-card-corner-mark {
  position: absolute;
  z-index: 2;
  top: 13px;
  right: 13px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 247, 210, 0.62);
  border-radius: 50%;
  color: #1d170c;
  background:
    radial-gradient(circle at 35% 22%, #fff8c9, #e9b75e 60%, #8b6128);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.26),
    0 0 20px rgba(240, 201, 107, 0.18),
    inset 0 1px rgba(255, 255, 255, 0.7);
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 15px;
  font-weight: 950;
}

.sandbox-card-scene-label {
  min-width: 92px;
  padding: 8px 15px;
  border-color: rgba(255, 247, 210, 0.68);
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.24),
    0 0 18px color-mix(in srgb, var(--card-color), transparent 58%);
}

.sandbox-card-scene > strong {
  padding-right: 34px;
  letter-spacing: 0.02em;
}

.sandbox-card-scene-stats,
.sandbox-card-stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.sandbox-card-scene-stats span,
.sandbox-card-stat-row span {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.026)),
    rgba(0, 0, 0, 0.18);
  text-align: center;
}

.sandbox-card-scene-stats b,
.sandbox-card-stat-row b {
  display: block;
  color: #fff7d4;
  font-size: 15px;
  line-height: 1;
}

.sandbox-card-scene-stats em,
.sandbox-card-stat-row em {
  display: block;
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.sandbox-card-scenario-strip {
  gap: 10px;
  padding: 2px 12px 8px;
}

.sandbox-card-scenario-strip button {
  position: relative;
  flex-basis: 132px;
  min-height: 102px;
  overflow: hidden;
  border-radius: 20px;
}

.sandbox-card-scenario-strip button::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 15px;
  pointer-events: none;
}

.sandbox-card-scenario-strip button.selected {
  transform: translateY(-2px);
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.28),
    0 0 0 2px color-mix(in srgb, var(--card-color), transparent 78%);
}

.sandbox-card-profile-deck {
  gap: 11px;
  padding: 4px 12px 12px;
  perspective: 900px;
}

.sandbox-card-profile {
  flex-basis: min(66vw, 236px);
  min-height: 300px;
  padding: 14px;
  border-width: 2px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--profile-color), transparent 62%), transparent 33%),
    radial-gradient(circle at 14% 8%, rgba(255, 255, 255, 0.12), transparent 26%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.026)),
    rgba(7, 12, 13, 0.82);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.28),
    inset 0 1px rgba(255, 255, 255, 0.16),
    inset 0 -22px 38px rgba(0, 0, 0, 0.18);
}

.sandbox-card-profile:nth-child(2n) {
  transform: rotate(1deg);
}

.sandbox-card-profile:nth-child(3n) {
  transform: rotate(-1deg);
}

.sandbox-card-profile:hover,
.sandbox-card-profile:focus-visible {
  outline: none;
  transform: translateY(-4px) rotate(0deg);
}

.sandbox-card-profile.selected {
  transform: translateY(-5px) rotate(0deg);
  border-color: color-mix(in srgb, var(--profile-color), #fff 20%);
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.32),
    0 0 0 3px color-mix(in srgb, var(--profile-color), transparent 78%),
    0 0 32px color-mix(in srgb, var(--profile-color), transparent 68%);
}

.sandbox-card-profile.selected::after {
  content: "已入场";
  position: absolute;
  z-index: 3;
  left: 13px;
  bottom: 13px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb, var(--profile-color), #fff 16%);
  border-radius: 999px;
  color: #fff7d4;
  background: rgba(0, 0, 0, 0.34);
  font-size: 9px;
  font-weight: 950;
}

.sandbox-card-profile img {
  width: 86px;
  height: 86px;
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--profile-color), transparent 85%),
    0 0 26px color-mix(in srgb, var(--profile-color), transparent 64%),
    0 12px 22px rgba(0, 0, 0, 0.28);
}

.sandbox-card-profile strong {
  font-size: 20px;
}

.sandbox-card-profile em {
  display: grid;
  gap: 4px;
  padding-bottom: 24px;
}

.sandbox-card-profile em b {
  color: color-mix(in srgb, var(--profile-color), #fff 34%);
  font-size: 10px;
}

.sandbox-card-profile-placeholder {
  border-width: 2px;
  border-style: dashed;
}

.sandbox-card-profile-placeholder .sandbox-card-corner-mark,
.sandbox-card-profile-placeholder .sandbox-card-frame {
  display: none;
}

.sandbox-card-start-dock {
  position: sticky;
  bottom: 10px;
  z-index: 4;
  border: 1px solid rgba(240, 201, 107, 0.2);
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.32),
    inset 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(18px) saturate(1.15);
}

.sandbox-card-start-dock .sandbox-start-button:not(:disabled) {
  animation: sandboxStartReady 2.8s ease-in-out infinite;
}

@keyframes sandboxStartReady {
  0%,
  100% {
    box-shadow: 0 10px 22px rgba(240, 201, 107, 0.18);
  }
  50% {
    box-shadow: 0 12px 30px rgba(240, 201, 107, 0.38);
  }
}

@media (max-width: 430px) {
  .sandbox-card-scene {
    min-height: 236px;
    padding: 17px;
    border-radius: 24px;
  }

  .sandbox-card-profile {
    flex-basis: min(70vw, 232px);
    min-height: 292px;
  }

  .sandbox-card-scene > strong {
    font-size: 26px;
  }
}

.sandbox-profile-library-modal {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 18px 14px calc(18px + env(safe-area-inset-bottom));
}

.sandbox-profile-library-modal.active {
  display: flex;
}

.sandbox-profile-library-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 12, 0.62);
  backdrop-filter: blur(12px);
}

.sandbox-profile-library-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  max-height: min(72vh, 620px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid rgba(240, 201, 107, 0.18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 20% 0, rgba(240, 201, 107, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(45, 36, 68, 0.96), rgba(17, 18, 31, 0.98));
  box-shadow: 0 -18px 46px rgba(0, 0, 0, 0.42);
}

.sandbox-profile-library-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sandbox-profile-library-dialog header div {
  display: grid;
  gap: 3px;
}

.sandbox-profile-library-dialog header small {
  color: rgba(240, 201, 107, 0.7);
  font-size: 11px;
  font-weight: 900;
}

.sandbox-profile-library-dialog header strong {
  color: #fff;
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 22px;
}

.sandbox-profile-library-dialog header button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.26);
  font-size: 24px;
  font-weight: 700;
}

.sandbox-profile-library-list {
  overflow-y: auto;
  display: grid;
  gap: 10px;
  padding: 12px 14px 16px;
  -webkit-overflow-scrolling: touch;
}

.sandbox-profile-library-item {
  width: 100%;
  min-height: 74px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--profile-color), transparent 76%), transparent 40%),
    rgba(255, 255, 255, 0.055);
  text-align: left;
}

.sandbox-profile-library-item.selected {
  border-color: color-mix(in srgb, var(--profile-color), transparent 28%);
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--profile-color), transparent 64%), transparent 42%),
    rgba(255, 255, 255, 0.09);
}

.sandbox-profile-library-item img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border: 2px solid color-mix(in srgb, var(--profile-color), transparent 24%);
  border-radius: 50%;
}

.sandbox-profile-library-item span {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.sandbox-profile-library-item strong,
.sandbox-profile-library-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sandbox-profile-library-item strong {
  font-size: 16px;
  font-weight: 950;
}

.sandbox-profile-library-item small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  font-weight: 800;
}

.sandbox-profile-library-item em {
  padding: 6px 9px;
  border-radius: 999px;
  color: #1c1609;
  background: var(--profile-color);
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.sandbox-profile-library-item.selected em {
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.11);
}

.sandbox-profile-library-empty {
  display: grid;
  gap: 10px;
  padding: 22px 16px;
  border: 1px dashed rgba(240, 201, 107, 0.3);
  border-radius: 18px;
  color: rgba(255, 255, 255, 0.72);
  text-align: center;
}

.sandbox-profile-library-empty b {
  color: #fff;
  font-size: 17px;
}

.sandbox-profile-library-empty span {
  font-size: 13px;
  line-height: 1.6;
}

.sandbox-profile-library-empty button {
  justify-self: center;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  color: #1b1508;
  background: #f0c96b;
  font-size: 13px;
  font-weight: 950;
}

.sandbox-card-consent {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 12px 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.045);
  font-size: 11px;
  line-height: 1.55;
}

.sandbox-card-consent input {
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: var(--sandbox-gold);
}

.sandbox-card-start-dock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(240, 201, 107, 0.24);
  border-radius: 20px;
  background:
    radial-gradient(circle at 16% 0, rgba(240, 201, 107, 0.14), transparent 42%),
    rgba(8, 13, 14, 0.82);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.08);
}

.sandbox-card-start-dock span,
.sandbox-card-start-dock small {
  display: block;
}

.sandbox-card-start-dock span {
  color: #fff;
  font-size: 13px;
  font-weight: 950;
}

.sandbox-card-start-dock small {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 10px;
  line-height: 1.45;
}

.sandbox-card-empty {
  padding: 22px 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.04);
  text-align: center;
}

@media (max-width: 430px) {
  .world-sandbox-page .sandbox-builder-map {
    height: clamp(350px, calc(100dvh - 248px), 520px);
    min-height: 0;
  }

  .world-sandbox-hud {
    top: 16px;
    right: 10px;
  }

  .world-sandbox-hud span {
    min-width: 76px;
    padding: 6px 8px;
  }

  .sandbox-card-scene {
    min-height: 226px;
    padding: 17px;
  }

  .sandbox-card-scene > strong {
    font-size: 27px;
  }

  .sandbox-card-start-dock {
    grid-template-columns: 1fr;
  }

  .sandbox-card-start-dock .sandbox-start-button {
    min-height: 48px;
  }
}

.sandbox-builder-sky,
.sandbox-builder-land,
.sandbox-builder-roads,
.sandbox-builder-villages,
.sandbox-builder-venues,
.sandbox-builder-residents {
  position: absolute;
  inset: 0;
}

.sandbox-builder-sky {
  z-index: -5;
  background:
    linear-gradient(180deg, rgba(255, 241, 200, 0.72) 0 9%, transparent 30%),
    linear-gradient(180deg, #88bbb9 0, #a8c9b5 42%, #738e6f 100%);
}

.sandbox-builder-sky::before {
  content: "";
  position: absolute;
  top: 6%;
  right: 11%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #f4d98c;
  box-shadow: 0 0 42px rgba(244, 217, 140, 0.55);
}

.sandbox-builder-land {
  z-index: -4;
  inset: 8% 2% 7%;
  background:
    radial-gradient(circle at 26% 33%, rgba(220, 202, 140, 0.42), transparent 17%),
    radial-gradient(circle at 70% 58%, rgba(208, 180, 112, 0.34), transparent 19%),
    linear-gradient(145deg, #6f946d, #9ba76d 52%, #6d8e65);
  clip-path: polygon(5% 28%, 14% 18%, 28% 21%, 34% 10%, 49% 8%, 59% 15%, 69% 12%, 78% 23%, 91% 24%, 98% 39%, 88% 47%, 84% 62%, 73% 65%, 66% 78%, 53% 74%, 44% 88%, 34% 80%, 22% 83%, 19% 68%, 8% 60%, 11% 48%, 2% 42%);
  filter: drop-shadow(0 18px 24px rgba(26, 47, 39, 0.32));
}

.sandbox-builder-land::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.34;
  background:
    repeating-linear-gradient(28deg, transparent 0 24px, rgba(251, 237, 186, 0.2) 24px 26px),
    repeating-linear-gradient(112deg, transparent 0 38px, rgba(50, 95, 68, 0.2) 38px 40px);
}

.sandbox-builder-roads {
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sandbox-builder-river {
  fill: none;
  stroke: rgba(93, 202, 218, 0.72);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 2px 0 rgba(255, 255, 255, 0.28));
}

.sandbox-builder-route,
.sandbox-builder-relation {
  fill: none;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.sandbox-builder-route {
  stroke: rgba(247, 222, 158, 0.82);
  stroke-width: 1.8;
  stroke-dasharray: 3 2;
  animation: sandbox-line-flow 2.2s linear infinite;
}

.sandbox-builder-relation {
  stroke: rgba(255, 132, 119, 0.82);
  stroke-width: 1.4;
  stroke-dasharray: 1.5 2.5;
  animation: sandbox-line-flow 1.5s linear infinite reverse;
}

.sandbox-builder-villages {
  z-index: 2;
  pointer-events: none;
}

.sandbox-builder-village {
  position: absolute;
  left: var(--village-x);
  top: var(--village-y);
  width: 14px;
  height: 11px;
  opacity: 0.42;
  border: 1px solid rgba(75, 58, 38, 0.55);
  border-radius: 2px 2px 4px 4px;
  background: #ead9aa;
  box-shadow: 8px 4px 0 -2px rgba(234, 217, 170, 0.72), -7px 5px 0 -3px rgba(234, 217, 170, 0.62);
  transform: translate(-50%, -50%);
}

.sandbox-builder-village::before {
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  top: -6px;
  height: 7px;
  background: #76513b;
  clip-path: polygon(50% 0, 100% 72%, 88% 100%, 12% 100%, 0 72%);
}

.sandbox-builder-village b {
  position: absolute;
  left: 50%;
  top: calc(100% + 2px);
  display: none;
  width: max-content;
  color: rgba(255, 255, 255, 0.75);
  font-size: 6px;
  transform: translateX(-50%);
}

.sandbox-builder-village.active {
  opacity: 1;
  box-shadow: 0 0 0 5px rgba(240, 201, 107, 0.2), 8px 4px 0 -2px #ead9aa, -7px 5px 0 -3px #ead9aa;
}

.sandbox-builder-village.active b {
  display: block;
}

.sandbox-builder-venues {
  z-index: 4;
  pointer-events: none;
  max-width: 100%;
}

.sandbox-builder-venue {
  position: absolute;
  left: var(--venue-x);
  top: var(--venue-y);
  width: 68px;
  display: grid;
  justify-items: center;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.sandbox-builder-venue > span {
  position: relative;
  width: 40px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 2px solid #644431;
  border-radius: 3px 3px 7px 7px;
  color: #3a2517;
  background: #efd6a4;
  box-shadow: 0 10px 14px rgba(31, 39, 29, 0.25);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.sandbox-builder-venue > span::before {
  content: "";
  position: absolute;
  left: -7px;
  right: -7px;
  top: -12px;
  height: 14px;
  background: #76513b;
  clip-path: polygon(50% 0, 100% 66%, 90% 100%, 10% 100%, 0 66%);
}

.sandbox-builder-venue > span b {
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.sandbox-builder-venue strong,
.sandbox-builder-venue small {
  max-width: 76px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sandbox-builder-venue strong {
  margin-top: 5px;
  padding: 2px 5px;
  border-radius: 999px;
  color: #fff;
  background: rgba(9, 15, 14, 0.64);
  font-size: 8px;
}

.sandbox-builder-venue small {
  display: none;
  margin-top: 2px;
  color: #fff4d0;
  font-size: 7px;
}

.sandbox-builder-venue.selected {
  z-index: 3;
}

.sandbox-builder-venue.selected > span {
  border-color: var(--scenario-color);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--scenario-color), transparent 70%), 0 13px 20px rgba(31, 39, 29, 0.3);
  transform: translateY(-3px) scale(1.12);
}

.sandbox-builder-venue.selected > span::before {
  background: var(--scenario-color);
}

.sandbox-builder-venue.selected small {
  display: block;
}

.sandbox-builder-residents {
  z-index: 7;
  pointer-events: none;
  max-width: 100%;
}

.sandbox-builder-resident {
  position: absolute;
  left: var(--resident-x);
  top: var(--resident-y);
  width: 54px;
  display: grid;
  justify-items: center;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  opacity: 0.68;
  pointer-events: auto;
  transform: translate(-50%, -64%) scale(0.9);
  transition: opacity 180ms ease, transform 180ms ease;
}

.sandbox-builder-resident img {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 50%;
  background: #22302e;
  box-shadow: 0 8px 14px rgba(19, 31, 27, 0.3);
}

.sandbox-builder-resident > span {
  position: absolute;
  top: 28px;
  right: 2px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #16201c;
  background: var(--profile-color);
  font-size: 8px;
  font-weight: 950;
}

.sandbox-builder-resident strong,
.sandbox-builder-resident small {
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sandbox-builder-resident strong {
  margin-top: 4px;
  padding: 2px 5px;
  border-radius: 999px;
  color: #fff;
  background: rgba(8, 13, 12, 0.72);
  font-size: 8px;
}

.sandbox-builder-resident small {
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 7px;
}

.sandbox-builder-resident.selected {
  opacity: 1;
  transform: translate(-50%, -68%) scale(1.08);
}

.sandbox-builder-resident.selected img {
  border-color: var(--profile-color);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--profile-color), transparent 72%), 0 10px 18px rgba(19, 31, 27, 0.34);
  animation: sandbox-resident-online 1.8s ease-in-out infinite;
}

.sandbox-builder-compass {
  position: absolute;
  z-index: 3;
  left: 14px;
  top: 14px;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 244, 208, 0.48);
  border-radius: 50%;
  color: #fff4cf;
  background: rgba(19, 50, 45, 0.42);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.04);
}

.sandbox-builder-compass i {
  position: absolute;
  width: 2px;
  height: 44px;
  background: linear-gradient(#f3ce70 0 50%, #c25f55 50%);
  transform: rotate(24deg);
}

.sandbox-builder-compass span {
  position: absolute;
  top: calc(100% + 5px);
  width: max-content;
  color: rgba(255, 255, 255, 0.78);
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 10px;
  font-weight: 900;
}

.sandbox-builder-hint {
  position: absolute;
  z-index: 9;
  left: 50%;
  bottom: 12px;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #fff;
  background: rgba(8, 14, 13, 0.72);
  text-align: center;
  transform: translateX(-50%);
}

.sandbox-builder-hint strong,
.sandbox-builder-hint span {
  display: block;
}

.sandbox-builder-hint strong {
  font-size: 9px;
}

.sandbox-builder-hint span {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 7px;
}

.sandbox-world-console {
  position: relative;
  z-index: 10;
  margin: 0 -12px;
  padding: 13px 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(8, 13, 14, 0.9);
  box-shadow: 0 -18px 38px rgba(8, 13, 14, 0.32);
  backdrop-filter: blur(18px);
}

.sandbox-world-console > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.sandbox-world-console > header span,
.sandbox-world-console > header strong {
  display: block;
}

.sandbox-world-console > header span {
  color: #8ce0ae;
  font-size: 9px;
  font-weight: 900;
}

.sandbox-world-console > header strong {
  margin-top: 2px;
  color: #fff;
  font-size: 13px;
}

.sandbox-world-console > header em {
  color: rgba(255, 255, 255, 0.46);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.sandbox-console-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.sandbox-console-actions button {
  min-height: 42px;
  display: grid;
  grid-template-columns: 24px auto;
  place-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.045);
}

.sandbox-console-actions button span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #142019;
  background: #8ce0ae;
  font-size: 11px;
  font-weight: 950;
}

.sandbox-console-actions button em {
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
}

.sandbox-console-panel {
  margin: 12px -12px 0;
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.025);
}

.sandbox-console-panel > header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.sandbox-console-panel > header strong {
  margin-right: auto;
  color: #fff;
  font-size: 13px;
}

.sandbox-console-panel > header em {
  color: #8ce0ae;
  font-size: 9px;
  font-style: normal;
}

.sandbox-console-panel > header button {
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  color: rgba(255, 255, 255, 0.5);
  background: transparent;
  font-size: 9px;
}

.sandbox-world-console .sandbox-consent-row {
  margin: 11px 0 9px;
}

.sandbox-world-console .sandbox-start-dock {
  margin: 0;
  padding: 9px 0 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

@keyframes sandbox-resident-online {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.sandbox-lobby-hero {
  position: relative;
  min-height: 158px;
  overflow: hidden;
  display: grid;
  align-items: center;
  margin: 0 12px 12px;
  padding: 16px 130px 15px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  background:
    radial-gradient(circle at 83% 26%, rgba(240, 201, 107, 0.18), transparent 34%),
    radial-gradient(circle at 16% 0%, rgba(114, 214, 160, 0.12), transparent 34%),
    linear-gradient(145deg, rgba(19, 36, 35, 0.92), rgba(9, 14, 15, 0.74));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(1.08);
}

.sandbox-lobby-hero::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 48px;
  opacity: 0.42;
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(240, 201, 107, 0.18) 18px 20px),
    linear-gradient(180deg, transparent, rgba(4, 9, 10, 0.48));
  pointer-events: none;
}

.sandbox-lobby-copy {
  position: relative;
  z-index: 3;
  min-width: 0;
}

.sandbox-lobby-copy > span {
  color: var(--sandbox-gold);
  font-size: 10px;
  font-weight: 900;
}

.sandbox-lobby-copy h4 {
  margin: 5px 0 7px;
  color: #fff;
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: 0;
}

.sandbox-lobby-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  line-height: 1.58;
}

.sandbox-intro-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

.sandbox-intro-tags i {
  padding: 4px 7px;
  border-radius: 999px;
  color: #142019;
  background: rgba(240, 201, 107, 0.9);
  font-size: 9px;
  font-style: normal;
  font-weight: 950;
}

.sandbox-lobby-visual {
  position: absolute;
  z-index: 2;
  top: 20px;
  right: 14px;
  width: 104px;
  height: 116px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 42% 22%, rgba(255, 255, 255, 0.22), transparent 12%),
    linear-gradient(150deg, #7aa66c, #526f5d 55%, #304840);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 16px 30px rgba(0, 0, 0, 0.24);
  transform: rotate(7deg);
}

.sandbox-visual-road,
.sandbox-visual-house,
.sandbox-visual-person {
  position: absolute;
  display: block;
}

.sandbox-visual-road {
  inset: 24px 16px 18px;
  border: 2px dashed rgba(248, 230, 168, 0.76);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(22deg);
}

.sandbox-visual-house {
  width: 24px;
  height: 20px;
  border: 2px solid rgba(81, 53, 35, 0.72);
  border-radius: 3px 3px 7px 7px;
  background: #efd6a4;
  box-shadow: 0 5px 10px rgba(16, 29, 25, 0.22);
}

.sandbox-visual-house::before {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: -9px;
  height: 10px;
  background: #76513b;
  clip-path: polygon(50% 0, 100% 70%, 88% 100%, 12% 100%, 0 70%);
}

.sandbox-visual-house.house-a { left: 18px; top: 31px; }
.sandbox-visual-house.house-b { right: 15px; top: 49px; transform: scale(0.92); }
.sandbox-visual-house.house-c { left: 42px; bottom: 19px; transform: scale(0.78); }

.sandbox-visual-person {
  width: 19px;
  height: 19px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: var(--person-color, #f0c96b);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08), 0 6px 12px rgba(0, 0, 0, 0.2);
}

.sandbox-visual-person.person-a { --person-color: #eaa39b; left: 16px; bottom: 22px; }
.sandbox-visual-person.person-b { --person-color: #72d6a0; right: 23px; top: 25px; }
.sandbox-visual-person.person-c { --person-color: #75b8dc; right: 11px; bottom: 23px; }

.sandbox-lobby-visual::after {
  content: "";
  position: absolute;
  left: 28px;
  right: 20px;
  top: 47px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(234, 163, 155, 0.9), rgba(114, 214, 160, 0.95), rgba(117, 184, 220, 0.9));
  box-shadow: 0 0 12px rgba(240, 201, 107, 0.38);
}

.sandbox-hero-constellation {
  position: absolute;
  z-index: 2;
  inset: 16px 12px auto auto;
  width: 214px;
  height: 184px;
}

.sandbox-hero-constellation::before {
  content: "";
  position: absolute;
  inset: 35px 26px 28px;
  opacity: 0.54;
  background:
    linear-gradient(28deg, transparent 48%, rgba(240, 201, 107, 0.6) 49% 51%, transparent 52%),
    linear-gradient(148deg, transparent 48%, rgba(114, 214, 160, 0.5) 49% 51%, transparent 52%);
}

.sandbox-hero-person {
  position: absolute;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border: 2px solid var(--person-color, var(--sandbox-gold));
  border-radius: 50%;
  background: rgba(8, 13, 18, 0.7);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--person-color), transparent 84%), 0 14px 30px rgba(0, 0, 0, 0.3);
}

.sandbox-hero-person:nth-child(1) { left: 8px; top: 54px; }
.sandbox-hero-person:nth-child(2) { right: 6px; top: 8px; }
.sandbox-hero-person:nth-child(3) { right: 24px; bottom: 2px; }

.sandbox-hero-person img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
}

.sandbox-hero-person b {
  position: absolute;
  right: -3px;
  bottom: -4px;
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #10151a;
  background: var(--person-color, var(--sandbox-gold));
  font-size: 12px;
}

.sandbox-lobby-section {
  margin: 0 0 24px;
}

.sandbox-lobby-section > header,
.sandbox-intervention-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.sandbox-lobby-section > header > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.sandbox-lobby-section > header strong {
  color: #fff;
  font-size: 16px;
}

.sandbox-lobby-section > header em,
.sandbox-intervention-panel > header em {
  color: var(--sandbox-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.sandbox-step-index {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(240, 201, 107, 0.38);
  border-radius: 50%;
  color: var(--sandbox-gold);
  background: rgba(240, 201, 107, 0.08);
  font-size: 10px;
  font-weight: 950;
}

.sandbox-profile-picker {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  margin: 0 -12px;
  padding: 3px 12px 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.sandbox-profile-picker::-webkit-scrollbar,
.sandbox-scenario-picker::-webkit-scrollbar {
  display: none;
}

.sandbox-profile-card {
  position: relative;
  flex: 0 0 126px;
  min-height: 166px;
  overflow: hidden;
  display: grid;
  align-content: end;
  scroll-snap-align: start;
  padding: 12px;
  border: 1px solid var(--sandbox-line);
  border-radius: 18px;
  color: var(--sandbox-ink);
  text-align: left;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.07);
}

.sandbox-profile-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 28%, rgba(6, 9, 12, 0.94) 88%);
}

.sandbox-profile-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.72;
  transition: transform 220ms ease, opacity 220ms ease;
}

.sandbox-profile-card > span,
.sandbox-profile-card > strong,
.sandbox-profile-card > small {
  position: relative;
  z-index: 2;
}

.sandbox-profile-card > span {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  margin-bottom: 6px;
  border-radius: 50%;
  color: #11171a;
  background: var(--profile-color, var(--sandbox-gold));
  font-size: 12px;
  font-weight: 950;
}

.sandbox-profile-card > strong {
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sandbox-profile-card > small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
}

.sandbox-profile-card.selected {
  border-color: var(--profile-color, var(--sandbox-gold));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--profile-color), transparent 62%), 0 16px 30px rgba(0, 0, 0, 0.24);
}

.sandbox-profile-card.selected img {
  opacity: 0.95;
  transform: scale(1.04);
}

.sandbox-profile-card.selected::before {
  content: "✓";
  position: absolute;
  z-index: 3;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #11171a;
  background: var(--profile-color, var(--sandbox-gold));
  font-size: 13px;
  font-weight: 950;
}

.sandbox-inline-action {
  margin-top: 6px;
  padding: 7px 0;
  border: 0;
  color: #a5eac1;
  background: transparent;
  font-size: 12px;
  font-weight: 900;
}

.sandbox-character-setup {
  display: grid;
  gap: 10px;
}

.sandbox-character-row {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 11px;
  padding: 11px;
  border: 1px solid var(--sandbox-line);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.045);
}

.sandbox-character-avatar {
  position: relative;
  width: 62px;
  height: 76px;
  overflow: hidden;
  padding: 0;
  border: 2px solid var(--character-color, var(--sandbox-gold));
  border-radius: 15px;
  background: #202b2d;
}

.sandbox-character-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sandbox-character-avatar span {
  position: absolute;
  inset: auto 0 0;
  padding: 4px 2px;
  color: #fff;
  background: rgba(6, 10, 13, 0.76);
  font-size: 9px;
  font-weight: 900;
  text-align: center;
}

.sandbox-character-fields {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sandbox-character-fields > strong {
  grid-column: 1 / -1;
  overflow: hidden;
  color: #fff;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sandbox-character-calling {
  grid-column: 1 / -1;
  color: #bfe8ce;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.45;
}

.sandbox-character-fields label {
  display: grid;
  gap: 4px;
}

.sandbox-character-fields label:first-of-type {
  grid-column: 1 / -1;
}

.sandbox-character-fields label span {
  color: rgba(255, 255, 255, 0.48);
  font-size: 9px;
  font-weight: 900;
}

.sandbox-character-fields input,
.sandbox-character-fields select {
  width: 100%;
  min-width: 0;
  height: 35px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 9px;
  color: #fff;
  background: rgba(5, 9, 12, 0.55);
  font-size: 11px;
}

.sandbox-character-fields select option {
  color: #111;
}

.sandbox-character-file {
  display: none;
}

.sandbox-section-note {
  margin: -4px 0 10px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 10px;
  line-height: 1.55;
}

.sandbox-connection-picker,
.sandbox-director-pairs,
.sandbox-director-events {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sandbox-connection-button,
.sandbox-director-pair,
.sandbox-director-event {
  min-height: 35px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.05);
  font-size: 10px;
  font-weight: 900;
}

.sandbox-connection-button.active,
.sandbox-director-pair.active,
.sandbox-director-event.active {
  color: #122018;
  border-color: rgba(114, 214, 160, 0.74);
  background: #8ce0ae;
  box-shadow: 0 8px 18px rgba(83, 180, 122, 0.18);
}

.sandbox-scenario-picker {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 62%);
  gap: 10px;
  overflow-x: auto;
  margin: 0 -12px;
  padding: 3px 12px 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.sandbox-scenario-card {
  min-height: 150px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  scroll-snap-align: start;
  padding: 15px;
  border: 1px solid var(--sandbox-line);
  border-radius: 18px;
  color: var(--sandbox-ink);
  text-align: left;
  background: var(--scenario-bg, rgba(255, 255, 255, 0.055));
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.sandbox-scenario-card > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--scenario-color), white 20%);
  border-radius: 50%;
  color: #11171a;
  background: var(--scenario-color, var(--sandbox-gold));
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 19px;
  font-weight: 950;
}

.sandbox-scenario-card strong {
  display: block;
  margin: 10px 0 5px;
  color: #fff;
  font-size: 17px;
}

.sandbox-scenario-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.63);
  font-size: 12px;
  line-height: 1.55;
}

.sandbox-scenario-card small {
  margin-top: 10px;
  color: color-mix(in srgb, var(--scenario-color), white 28%);
  font-size: 10px;
  font-weight: 900;
}

.sandbox-scenario-card.selected {
  border-color: var(--scenario-color, var(--sandbox-gold));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--scenario-color), transparent 70%), 0 16px 32px rgba(0, 0, 0, 0.22);
  transform: translateY(-2px);
}

.sandbox-consent-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 8px 0 18px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 11px;
  line-height: 1.6;
}

.sandbox-consent-row input {
  width: 19px;
  height: 19px;
  margin: 0;
  accent-color: var(--sandbox-jade);
}

.sandbox-start-dock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 0 -4px 26px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 20px;
  background: rgba(9, 14, 18, 0.74);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(18px);
}

.sandbox-start-dock > div {
  min-width: 0;
}

.sandbox-start-dock > div span,
.sandbox-start-dock > div small {
  display: block;
}

.sandbox-start-dock > div span {
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.sandbox-start-dock > div small {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 9px;
  line-height: 1.45;
}

.sandbox-start-button,
.sandbox-secondary-button,
.sandbox-next-button {
  min-height: 48px;
  border: 0;
  border-radius: 16px;
  font-weight: 950;
}

.sandbox-start-button {
  min-width: 132px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  color: #10161a;
  background: linear-gradient(135deg, #f0c96b, #f8e6a8);
  box-shadow: 0 10px 24px rgba(240, 201, 107, 0.22);
}

.sandbox-start-button b {
  font-size: 19px;
}

.sandbox-start-button:disabled {
  opacity: 0.38;
  box-shadow: none;
}

.sandbox-history-section > header button {
  border: 0;
  color: rgba(255, 255, 255, 0.46);
  background: transparent;
  font-size: 11px;
}

.sandbox-history-list {
  display: grid;
  gap: 9px;
}

.sandbox-history-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
  min-height: 64px;
  padding: 8px;
  border: 1px solid var(--sandbox-line);
  border-radius: 16px;
  color: var(--sandbox-ink);
  text-align: left;
  background: rgba(255, 255, 255, 0.045);
}

.sandbox-history-open {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.sandbox-history-open > span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #11171a;
  background: var(--history-color, var(--sandbox-gold));
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 19px;
  font-weight: 950;
}

.sandbox-history-card strong,
.sandbox-history-card small {
  display: block;
}

.sandbox-history-card strong {
  overflow: hidden;
  color: #fff;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sandbox-history-card small {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
}

.sandbox-history-card em {
  color: var(--sandbox-gold);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.sandbox-history-delete {
  align-self: center;
  min-height: 38px;
  padding: 0 10px;
  border: 1px solid rgba(255, 129, 110, 0.28);
  border-radius: 999px;
  color: rgba(255, 174, 160, 0.92);
  background: rgba(255, 90, 70, 0.08);
  font-size: 11px;
  font-weight: 900;
}

.sandbox-simulation {
  min-height: calc(100dvh - 132px);
  padding: 0 12px max(12px, env(safe-area-inset-bottom));
  overflow-x: hidden;
}

.sandbox-sim-header {
  margin: 4px 10px 12px;
}

.sandbox-sim-header > div {
  min-width: 0;
  text-align: center;
}

.sandbox-sim-header span,
.sandbox-sim-header strong {
  display: block;
}

.sandbox-sim-header span {
  color: var(--sandbox-gold);
  font-size: 10px;
  font-weight: 900;
}

.sandbox-sim-header strong {
  max-width: 230px;
  overflow: hidden;
  color: #fff;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sandbox-sim-header small {
  display: block;
  margin-top: 2px;
  color: #8ce0ae;
  font-size: 9px;
  font-weight: 900;
}

.sandbox-time-control {
  width: max-content;
  max-width: 100%;
  display: grid;
  grid-template-columns: auto repeat(4, 38px);
  gap: 3px;
  align-items: center;
  margin: 0 auto 9px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  background: rgba(8, 13, 17, 0.64);
}

.sandbox-time-control > span {
  padding: 0 7px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 9px;
  font-weight: 900;
}

.sandbox-time-control button {
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.58);
  background: transparent;
  font-size: 10px;
  font-weight: 900;
}

.sandbox-time-control button.active {
  color: #12191a;
  background: var(--sandbox-gold);
}

.sandbox-icon-button,
.sandbox-control-button {
  position: relative;
  z-index: 45;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  color: #fff;
  background: rgba(9, 14, 18, 0.64);
  font-size: 19px;
  font-weight: 900;
  touch-action: manipulation;
}

.sandbox-world {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 100%;
  height: clamp(340px, 49dvh, 480px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 22px;
  background: #b7d1cd;
  box-shadow: 0 24px 52px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.32);
  touch-action: manipulation;
}

.sandbox-world-sky,
.sandbox-world-backdrop,
.sandbox-world-ground,
.sandbox-scene-objects,
.sandbox-agents,
.sandbox-relation-lines {
  position: absolute;
  inset: 0;
}

.sandbox-world-sky { z-index: -4; }
.sandbox-world-backdrop { z-index: -3; }
.sandbox-world-ground { z-index: -2; }
.sandbox-scene-objects { z-index: -1; }
.sandbox-relation-lines { z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sandbox-agents { z-index: 2; pointer-events: none; }

.sandbox-world[data-scene="romance"] .sandbox-world-sky {
  background: linear-gradient(180deg, #f0b888 0, #9d7284 48%, #425c69 49%, #24434d 100%);
}

.sandbox-world[data-scene="marriage"] .sandbox-world-sky,
.sandbox-world[data-scene="family"] .sandbox-world-sky {
  background: linear-gradient(180deg, #e8c695 0 54%, #8e6b50 54% 100%);
}

.sandbox-world[data-scene="business"] .sandbox-world-sky {
  background: linear-gradient(180deg, #afd3ce 0 46%, #6e8f88 46% 100%);
}

.sandbox-world[data-scene="teamwork"] .sandbox-world-sky,
.sandbox-world[data-scene="challenge"] .sandbox-world-sky {
  background: linear-gradient(180deg, #9cb5ca 0 45%, #52677a 45% 100%);
}

.sandbox-world[data-scene="travel"] .sandbox-world-sky {
  background: linear-gradient(180deg, #88c7db 0 48%, #547d7a 48% 100%);
}

.sandbox-world[data-scene="reunion"] .sandbox-world-sky {
  background: linear-gradient(180deg, #d7c29e 0 48%, #596d5c 48% 100%);
}

.sandbox-world-backdrop::before,
.sandbox-world-backdrop::after,
.sandbox-world-ground::before,
.sandbox-world-ground::after {
  content: "";
  position: absolute;
}

.sandbox-world-backdrop::before {
  left: 0;
  right: 0;
  bottom: 42%;
  height: 40%;
  opacity: 0.78;
  background: linear-gradient(90deg, rgba(22, 43, 49, 0.72) 0 12%, transparent 12% 17%, rgba(26, 48, 55, 0.8) 17% 34%, transparent 34% 39%, rgba(22, 42, 48, 0.74) 39% 58%, transparent 58% 63%, rgba(20, 39, 45, 0.76) 63% 83%, transparent 83% 88%, rgba(20, 39, 45, 0.72) 88%);
  clip-path: polygon(0 100%, 0 48%, 10% 48%, 10% 20%, 28% 20%, 28% 56%, 40% 56%, 40% 0, 58% 0, 58% 44%, 70% 44%, 70% 16%, 86% 16%, 86% 52%, 100% 52%, 100% 100%);
}

.sandbox-world[data-scene="marriage"] .sandbox-world-backdrop::before,
.sandbox-world[data-scene="family"] .sandbox-world-backdrop::before,
.sandbox-world[data-scene="business"] .sandbox-world-backdrop::before,
.sandbox-world[data-scene="teamwork"] .sandbox-world-backdrop::before,
.sandbox-world[data-scene="challenge"] .sandbox-world-backdrop::before {
  bottom: 44%;
  height: 52%;
  opacity: 1;
  background: rgba(244, 233, 214, 0.9);
  clip-path: none;
}

.sandbox-world-ground::before {
  left: -12%;
  right: -12%;
  bottom: -18%;
  height: 64%;
  transform: perspective(260px) rotateX(48deg);
  transform-origin: bottom;
  background:
    linear-gradient(90deg, transparent 49.5%, rgba(255, 255, 255, 0.12) 50%, transparent 50.5%),
    linear-gradient(0deg, transparent 49.5%, rgba(255, 255, 255, 0.1) 50%, transparent 50.5%),
    rgba(36, 58, 59, 0.92);
  background-size: 48px 48px;
}

.sandbox-world[data-scene="marriage"] .sandbox-world-ground::before,
.sandbox-world[data-scene="family"] .sandbox-world-ground::before {
  background-color: #a77e5e;
}

.sandbox-world[data-scene="business"] .sandbox-world-ground::before {
  background-color: #668a7b;
}

.sandbox-world[data-scene="teamwork"] .sandbox-world-ground::before,
.sandbox-world[data-scene="challenge"] .sandbox-world-ground::before {
  background-color: #60758b;
}

.sandbox-world[data-scene="travel"] .sandbox-world-ground::before {
  background-color: #496c6d;
}

.sandbox-world[data-scene="reunion"] .sandbox-world-ground::before {
  background-color: #66725d;
}

.sandbox-scene-object {
  position: absolute;
  display: block;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.2));
}

.sandbox-town-map {
  position: absolute;
  inset: 0;
}

.sandbox-town-contour {
  position: absolute;
  inset: 10% 7% 12%;
  opacity: 0.72;
  background: rgba(234, 222, 181, 0.2);
  clip-path: polygon(6% 33%, 17% 24%, 27% 26%, 33% 15%, 48% 13%, 58% 20%, 68% 17%, 78% 28%, 91% 28%, 97% 42%, 87% 49%, 84% 61%, 73% 64%, 66% 75%, 52% 72%, 44% 84%, 34% 77%, 23% 80%, 20% 67%, 9% 59%, 12% 47%, 3% 42%);
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.18));
}

.sandbox-town-road-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sandbox-town-road {
  fill: none;
  stroke: rgba(250, 232, 177, 0.36);
  stroke-width: 0.9;
  stroke-dasharray: 2 1.8;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.sandbox-town-river {
  fill: none;
  stroke: rgba(100, 203, 225, 0.4);
  stroke-width: 2.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.sandbox-village-node {
  --village-color: #d9c486;
  position: absolute;
  left: var(--village-x);
  top: var(--village-y);
  width: 8px;
  height: 8px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(245, 222, 159, 0.62);
  box-shadow: 0 0 0 2px rgba(10, 21, 24, 0.28);
  transform: translate(-50%, -50%);
}

.sandbox-village-node.active {
  z-index: 3;
  width: 29px;
  height: 22px;
  border: 2px solid var(--village-color);
  border-radius: 3px 3px 7px 7px;
  background: #f4e4bb;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--village-color), transparent 76%), 0 9px 17px rgba(0, 0, 0, 0.3);
}

.sandbox-village-node.active::before {
  content: "";
  position: absolute;
  left: -5px;
  right: -5px;
  top: -10px;
  height: 12px;
  background: var(--village-color);
  clip-path: polygon(50% 0, 100% 74%, 88% 100%, 12% 100%, 0 74%);
}

.sandbox-village-node span {
  display: none;
}

.sandbox-village-node.active span {
  position: absolute;
  left: 50%;
  top: calc(100% + 7px);
  width: max-content;
  max-width: 72px;
  display: block;
  overflow: hidden;
  padding: 3px 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: #fff;
  background: rgba(7, 12, 14, 0.76);
  font-size: 8px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translateX(-50%);
}

.sandbox-town-nameplate {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  display: grid;
  justify-items: end;
  pointer-events: none;
}

.sandbox-town-nameplate strong {
  padding: 6px 10px;
  border: 1px solid rgba(240, 201, 107, 0.46);
  border-radius: 4px;
  color: #3a2511;
  background: rgba(245, 224, 165, 0.9);
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 15px;
}

.sandbox-town-nameplate small {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.66);
  font-size: 8px;
}

.sandbox-town-venue {
  --venue-color: #f0c96b;
  position: absolute;
  z-index: 3;
  left: var(--venue-x, 52%);
  top: var(--venue-y, 54%);
  width: 54px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 3px solid #6e4930;
  border-radius: 3px 3px 8px 8px;
  color: #3b2413;
  background: #efd7a7;
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--venue-color), transparent 82%), 0 14px 24px rgba(0, 0, 0, 0.34);
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 10px;
  font-weight: 950;
  transform: translate(-50%, -50%);
}

.sandbox-town-venue::before {
  content: "";
  position: absolute;
  left: -9px;
  right: -9px;
  top: -17px;
  height: 19px;
  background: var(--venue-color);
  clip-path: polygon(50% 0, 100% 66%, 92% 100%, 8% 100%, 0 66%);
}

.sandbox-town-venue::after {
  content: attr(data-venue-subtitle);
  position: absolute;
  left: 50%;
  top: calc(100% + 7px);
  width: max-content;
  max-width: 110px;
  padding: 3px 7px;
  border-radius: 999px;
  color: #fff;
  background: rgba(7, 12, 14, 0.78);
  font-family: system-ui, sans-serif;
  font-size: 8px;
  transform: translateX(-50%);
}

.sandbox-object-window {
  top: 14%;
  left: 8%;
  width: 30%;
  height: 28%;
  border: 8px solid #6d5746;
  background: linear-gradient(180deg, #89c4d5, #f1c084 62%, #5e7b70 63%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.52);
}

.sandbox-object-window::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 47%, rgba(109, 87, 70, 0.85) 48% 52%, transparent 53%), linear-gradient(0deg, transparent 47%, rgba(109, 87, 70, 0.85) 48% 52%, transparent 53%);
}

.sandbox-object-sofa {
  left: 7%;
  bottom: 14%;
  width: 42%;
  height: 21%;
  border: 5px solid #694c3b;
  border-radius: 14px 14px 8px 8px;
  background: #b8815f;
}

.sandbox-object-sofa::before,
.sandbox-object-sofa::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 42%;
  height: 56%;
  border-radius: 8px;
  background: rgba(255, 231, 194, 0.34);
}

.sandbox-object-sofa::before { left: 6%; }
.sandbox-object-sofa::after { right: 6%; }

.sandbox-object-table {
  right: 8%;
  bottom: 13%;
  width: 32%;
  height: 12%;
  border: 4px solid #5e4435;
  border-radius: 50%;
  background: #c89d6e;
}

.sandbox-object-table::after {
  content: "";
  position: absolute;
  left: 44%;
  top: 86%;
  width: 12%;
  height: 72%;
  background: #5e4435;
}

.sandbox-object-bench {
  left: 10%;
  bottom: 18%;
  width: 40%;
  height: 10%;
  border: 4px solid #3e2b23;
  border-radius: 7px;
  background: repeating-linear-gradient(0deg, #a87548 0 8px, #825735 8px 11px);
}

.sandbox-object-lamp {
  right: 12%;
  top: 12%;
  width: 8px;
  height: 57%;
  background: #243137;
}

.sandbox-object-lamp::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  width: 38px;
  height: 38px;
  border: 5px solid #253137;
  border-radius: 50% 50% 44% 44%;
  background: #ffd986;
  box-shadow: 0 0 32px rgba(255, 217, 134, 0.6);
  transform: translateX(-50%);
}

.sandbox-object-counter {
  left: 7%;
  right: 7%;
  bottom: 13%;
  height: 17%;
  border: 5px solid #425d55;
  border-radius: 8px;
  background: repeating-linear-gradient(90deg, #8db49d 0 34px, #739987 34px 38px);
}

.sandbox-object-shelf {
  right: 6%;
  top: 11%;
  width: 29%;
  height: 38%;
  border: 6px solid #4b675e;
  background: repeating-linear-gradient(0deg, rgba(243, 225, 175, 0.7) 0 22%, #4b675e 22% 26%);
}

.sandbox-object-board {
  top: 12%;
  left: 8%;
  width: 48%;
  height: 28%;
  border: 7px solid #4d5964;
  border-radius: 5px;
  background: linear-gradient(135deg, #ecf0ea, #cad9d3);
}

.sandbox-object-board::after {
  content: "";
  position: absolute;
  inset: 18% 12%;
  opacity: 0.7;
  background: linear-gradient(8deg, transparent 46%, #e46f5c 47% 50%, transparent 51%), linear-gradient(162deg, transparent 48%, #498a7a 49% 52%, transparent 53%);
}

.sandbox-object-desk {
  left: 15%;
  bottom: 14%;
  width: 67%;
  height: 12%;
  border: 4px solid #445261;
  border-radius: 8px;
  background: #9baeb9;
}

.sandbox-object-tree {
  left: 8%;
  top: 12%;
  width: 18px;
  height: 53%;
  border-radius: 12px;
  background: #5d4434;
}

.sandbox-object-tree::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -24px;
  width: 100px;
  height: 100px;
  border-radius: 52% 48% 46% 54%;
  background: #4f7658;
  box-shadow: 28px 18px 0 #648565, -24px 22px 0 #3f6a51;
  transform: translateX(-50%);
}

.sandbox-object-train {
  left: -4%;
  right: -4%;
  bottom: 39%;
  height: 25%;
  border: 6px solid #355b64;
  border-radius: 20px 20px 4px 4px;
  background: repeating-linear-gradient(90deg, #dbe9e8 0 12%, #5da2ae 12% 19%, #dbe9e8 19% 26%);
}

.sandbox-object-train::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11%;
  height: 10px;
  background: #e0aa4c;
}

.sandbox-object-roundtable {
  left: 22%;
  bottom: 11%;
  width: 56%;
  height: 24%;
  border: 6px solid #5a4938;
  border-radius: 50%;
  background: #b39875;
}

.sandbox-relation-line {
  stroke: var(--line-color, rgba(255, 255, 255, 0.34));
  stroke-width: var(--line-width, 0.7);
  stroke-linecap: round;
  stroke-dasharray: 3 2;
  vector-effect: non-scaling-stroke;
  animation: sandbox-line-flow 2.2s linear infinite;
}

.sandbox-agent {
  --agent-color: #f0c96b;
  position: absolute;
  left: var(--agent-x, 50%);
  top: var(--agent-y, 66%);
  width: 76px;
  display: grid;
  justify-items: center;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition: left 900ms cubic-bezier(0.22, 0.7, 0.2, 1), top 900ms cubic-bezier(0.22, 0.7, 0.2, 1), filter 280ms ease;
}

.sandbox-agent.walking .sandbox-agent-portrait {
  animation: sandbox-agent-step 460ms ease-in-out 2;
}

.sandbox-agent-shadow {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 21px;
  width: 48px;
  height: 13px;
  border-radius: 50%;
  background: rgba(4, 8, 10, 0.34);
  filter: blur(3px);
  transform: translateX(-50%);
}

.sandbox-agent-portrait {
  position: relative;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border: 3px solid var(--agent-color);
  border-radius: 50%;
  background: #202a2d;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--agent-color), transparent 82%), 0 12px 22px rgba(0, 0, 0, 0.28);
}

.sandbox-agent-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sandbox-agent-portrait b {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #10161a;
  background: var(--agent-color);
  font-size: 10px;
}

.sandbox-agent-name {
  max-width: 76px;
  overflow: hidden;
  margin-top: 5px;
  padding: 3px 7px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #fff;
  background: rgba(7, 11, 14, 0.76);
  font-size: 10px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sandbox-agent-name::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 4px;
  border-radius: 50%;
  background: #74e2a3;
  box-shadow: 0 0 7px rgba(116, 226, 163, 0.8);
  vertical-align: 1px;
}

.sandbox-agent-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  width: max-content;
  max-width: 132px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 11px 11px 11px 2px;
  color: #172026;
  background: rgba(255, 253, 244, 0.94);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.35;
  opacity: 0;
  transform: translate(-50%, 8px) scale(0.92);
  transition: opacity 180ms ease, transform 180ms ease;
}

.sandbox-agent.speaking .sandbox-agent-bubble {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.sandbox-moment-card {
  position: absolute;
  z-index: 5;
  top: 12px;
  left: 12px;
  width: min(70%, 280px);
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 14px;
  color: #fff;
  background: rgba(9, 14, 18, 0.7);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(13px);
}

.sandbox-moment-card span {
  color: var(--sandbox-gold);
  font-size: 9px;
  font-weight: 900;
}

.sandbox-moment-card strong {
  display: block;
  margin: 3px 0;
  font-size: 13px;
}

.sandbox-moment-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.67);
  font-size: 10px;
  line-height: 1.45;
}

.sandbox-world-pulse {
  position: absolute;
  z-index: 4;
  left: var(--pulse-x, 50%);
  top: var(--pulse-y, 58%);
  width: 16px;
  height: 16px;
  border: 2px solid var(--pulse-color, #f0c96b);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.sandbox-world-pulse.active {
  animation: sandbox-world-pulse 900ms ease-out;
}

.sandbox-agent-mind {
  position: absolute;
  z-index: 8;
  right: 10px;
  bottom: 10px;
  width: min(280px, calc(100% - 20px));
  max-height: 64%;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 16px;
  color: #fff;
  background: rgba(8, 13, 17, 0.88);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.36);
  backdrop-filter: blur(18px);
}

.sandbox-agent-mind > button {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  font-size: 15px;
}

.sandbox-agent-mind > header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding-right: 28px;
}

.sandbox-agent-mind > header img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border: 2px solid var(--mind-color, var(--sandbox-gold));
  border-radius: 50%;
}

.sandbox-agent-mind > header span,
.sandbox-agent-mind > header strong {
  display: block;
}

.sandbox-agent-mind > header span {
  color: var(--mind-color, var(--sandbox-gold));
  font-size: 9px;
  font-weight: 900;
}

.sandbox-agent-mind > header strong {
  margin-top: 3px;
  color: #fff;
  font-size: 15px;
}

.sandbox-agent-mind-grid {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.sandbox-agent-mind-grid > div {
  padding: 8px 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.045);
}

.sandbox-agent-mind-grid > .sandbox-mind-ability {
  border-color: color-mix(in srgb, var(--mind-color), transparent 52%);
  background: color-mix(in srgb, var(--mind-color), rgba(10, 15, 18, 0.82) 78%);
}

.sandbox-agent-mind-grid > .sandbox-mind-ability strong {
  color: #fff2bd;
}

.sandbox-agent-mind-grid > .sandbox-mind-shadow {
  border-color: rgba(255, 255, 255, 0.08);
}

.sandbox-agent-mind-grid > .sandbox-mind-shadow.triggered {
  border-color: rgba(236, 121, 103, 0.58);
  background: rgba(131, 49, 42, 0.25);
}

.sandbox-agent-mind-grid > .sandbox-mind-shadow.triggered p {
  color: #ffd2c7;
}

.sandbox-agent-mind-grid span {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, 0.45);
  font-size: 8px;
  font-weight: 900;
}

.sandbox-agent-mind-grid strong,
.sandbox-agent-mind-grid p {
  margin: 0;
  color: #fff;
  font-size: 10px;
  line-height: 1.5;
}

.sandbox-agent-mind-grid p {
  color: rgba(255, 255, 255, 0.68);
}

.sandbox-metric-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 10px 0;
}

.sandbox-metric {
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}

.sandbox-metric span,
.sandbox-metric strong {
  display: block;
}

.sandbox-metric span {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.56);
  font-size: 9px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sandbox-metric strong {
  margin: 3px 0 5px;
  color: #fff;
  font-size: 15px;
}

.sandbox-metric i {
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
}

.sandbox-metric i::after {
  content: "";
  display: block;
  width: var(--metric-value, 50%);
  height: 100%;
  border-radius: inherit;
  background: var(--metric-color, var(--sandbox-gold));
  transition: width 420ms ease;
}

.sandbox-intervention-panel {
  padding: 11px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 17px;
  background: rgba(9, 14, 18, 0.62);
}

.sandbox-intervention-panel > header {
  align-items: flex-start;
  margin-bottom: 9px;
}

.sandbox-intervention-head-actions {
  display: grid;
  justify-items: end;
  gap: 4px;
}

.sandbox-intervention-head-actions button {
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid rgba(240, 201, 107, 0.26);
  border-radius: 999px;
  color: var(--sandbox-gold);
  background: rgba(240, 201, 107, 0.07);
  font-size: 9px;
  font-weight: 900;
}

.sandbox-intervention-panel > header span,
.sandbox-intervention-panel > header strong {
  display: block;
}

.sandbox-intervention-panel > header span {
  color: var(--sandbox-gold);
  font-size: 9px;
  font-weight: 900;
}

.sandbox-intervention-panel > header strong {
  margin-top: 2px;
  color: #fff;
  font-size: 12px;
}

.sandbox-intervention-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.sandbox-intervention-choice {
  min-height: 42px;
  padding: 7px 6px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 11px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.055);
  font-size: 10px;
  font-weight: 900;
  line-height: 1.3;
}

.sandbox-intervention-choice.used {
  color: #14201a;
  border-color: rgba(114, 214, 160, 0.7);
  background: #8ce0ae;
}

.sandbox-director-panel {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sandbox-director-panel > div > span {
  display: block;
  margin-bottom: 6px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 9px;
  font-weight: 900;
}

.sandbox-creator-problem {
  display: grid;
  gap: 6px;
}

.sandbox-creator-problem > span,
.sandbox-creator-intensity > span {
  color: rgba(255, 255, 255, 0.52);
  font-size: 9px;
  font-weight: 900;
}

.sandbox-creator-problem textarea {
  width: 100%;
  min-height: 58px;
  resize: none;
  padding: 9px 10px;
  border: 1px solid rgba(240, 201, 107, 0.22);
  border-radius: 11px;
  color: #fff;
  background: rgba(5, 9, 12, 0.58);
  font-size: 11px;
  line-height: 1.5;
}

.sandbox-creator-problem textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.sandbox-creator-intensity {
  display: grid;
  grid-template-columns: auto repeat(3, 1fr);
  gap: 5px;
  align-items: center;
}

.sandbox-creator-intensity > span {
  padding-right: 4px;
}

.sandbox-creator-intensity button {
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.56);
  background: rgba(255, 255, 255, 0.04);
  font-size: 9px;
  font-weight: 900;
}

.sandbox-creator-intensity button.active {
  color: #251712;
  border-color: rgba(219, 132, 120, 0.72);
  background: #e39a8e;
}

.sandbox-director-trigger {
  min-height: 38px;
  border: 0;
  border-radius: 11px;
  color: #132018;
  background: #8ce0ae;
  font-size: 10px;
  font-weight: 950;
}

.sandbox-director-trigger:disabled {
  opacity: 0.4;
}

.sandbox-play-controls {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 9px;
  align-items: center;
  margin-top: 10px;
}

.sandbox-next-button {
  min-width: 0;
  color: #11171a;
  background: linear-gradient(135deg, #f0c96b, #f8e6a8);
}

.sandbox-finish-button {
  color: var(--sandbox-gold);
  font-size: 12px;
}

.sandbox-result {
  padding-bottom: 16px;
}

.sandbox-result .sandbox-page-header {
  align-items: flex-start;
}

.sandbox-result .sandbox-page-header h3 {
  max-width: 640px;
  font-size: clamp(24px, 4.2vw, 34px);
  line-height: 1.24;
}

.sandbox-result-summary {
  max-width: 720px;
  margin: 9px 0 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  line-height: 1.72;
}

.sandbox-result-scene {
  display: grid;
  gap: 12px;
  margin: 0 0 22px;
}

.sandbox-result-scene::before {
  content: none;
}

.sandbox-result-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.sandbox-result-facts article {
  min-height: 92px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.045);
}

.sandbox-result-facts article.resolved {
  border-color: rgba(114, 214, 160, 0.3);
  background: linear-gradient(145deg, rgba(114, 214, 160, 0.14), rgba(114, 214, 160, 0.035));
}

.sandbox-result-facts article.unresolved {
  border-color: rgba(240, 201, 107, 0.25);
  background: linear-gradient(145deg, rgba(240, 201, 107, 0.11), rgba(240, 201, 107, 0.025));
}

.sandbox-result-facts span,
.sandbox-result-facts strong {
  display: block;
}

.sandbox-result-facts span {
  color: rgba(255, 255, 255, 0.56);
  font-size: 10px;
  font-weight: 900;
}

.sandbox-result-facts strong {
  margin-top: 7px;
  color: #fff;
  font-size: 13px;
  line-height: 1.55;
}

.sandbox-result-cast {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sandbox-result-cast span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 4px 9px 4px 4px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.045);
  font-size: 10px;
}

.sandbox-result-cast img {
  width: 27px;
  height: 27px;
  object-fit: cover;
  border: 2px solid var(--person-color);
  border-radius: 50%;
}

.sandbox-story-beats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.sandbox-story-beats article {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
}

.sandbox-story-beats article > span {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #11181a;
  background: var(--sandbox-gold);
  font-size: 11px;
  font-weight: 950;
}

.sandbox-story-beats article[data-tone="tense"] > span {
  background: #e49a8e;
}

.sandbox-story-beats article[data-tone="turn"] > span {
  background: #8ce0ae;
}

.sandbox-story-beats em,
.sandbox-story-beats strong,
.sandbox-story-beats p {
  display: block;
}

.sandbox-story-beats em {
  color: rgba(255, 255, 255, 0.48);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.sandbox-story-beats strong {
  margin-top: 3px;
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
}

.sandbox-story-beats p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
  line-height: 1.55;
}

.sandbox-result-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.sandbox-result-metric {
  min-height: 98px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
}

.sandbox-result-metric[data-tone="better"] {
  border-color: rgba(114, 214, 160, 0.24);
}

.sandbox-result-metric[data-tone="worse"] {
  border-color: rgba(219, 132, 120, 0.26);
}

.sandbox-result-metric span,
.sandbox-result-metric strong,
.sandbox-result-metric small {
  display: block;
}

.sandbox-result-metric span {
  color: rgba(255, 255, 255, 0.48);
  font-size: 9px;
  font-weight: 900;
}

.sandbox-result-metric strong {
  margin-top: 5px;
  color: #fff;
  font-size: 14px;
}

.sandbox-result-metric small {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 10px;
  line-height: 1.5;
}

.sandbox-result-section {
  margin-bottom: 18px;
}

.sandbox-result-section > header {
  margin-bottom: 10px;
}

.sandbox-result-section > header span {
  color: var(--sandbox-gold);
  font-size: 10px;
  font-weight: 900;
}

.sandbox-result-section > header h4 {
  margin: 2px 0 0;
  color: #fff;
  font-size: 17px;
}

.sandbox-role-list,
.sandbox-result-moment-list {
  display: grid;
  gap: 10px;
}

.sandbox-role-card {
  display: grid;
  grid-template-columns: 49px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: start;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.045);
}

.sandbox-role-card img {
  width: 49px;
  height: 49px;
  object-fit: cover;
  border: 2px solid var(--role-color);
  border-radius: 50%;
}

.sandbox-role-copy {
  min-width: 0;
}

.sandbox-role-copy header {
  display: flex;
  gap: 7px;
  align-items: baseline;
  flex-wrap: wrap;
}

.sandbox-role-copy header strong {
  color: #fff;
  font-size: 13px;
}

.sandbox-role-copy header small {
  color: rgba(255, 255, 255, 0.52);
  font-size: 9px;
}

.sandbox-role-copy p {
  margin: 7px 0 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 10px;
  line-height: 1.55;
}

.sandbox-role-copy p b {
  margin-right: 7px;
  color: var(--role-color);
  font-size: 9px;
}

.sandbox-role-card em {
  padding: 4px 7px;
  border-radius: 999px;
  color: var(--role-color);
  background: color-mix(in srgb, var(--role-color), transparent 88%);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.sandbox-result-moment-list {
  grid-template-columns: 1fr;
}

.sandbox-result-moment {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--moment-color), transparent 88%), rgba(255, 255, 255, 0.035));
}

.sandbox-result-moment[data-tone="tense"] {
  border-color: rgba(219, 132, 120, 0.28);
}

.sandbox-result-moment[data-tone="repaired"] {
  border-color: rgba(114, 214, 160, 0.25);
}

.sandbox-moment-step {
  display: grid;
  grid-template-rows: 31px minmax(0, 1fr);
  justify-items: center;
}

.sandbox-moment-step > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #12181a;
  background: var(--moment-color, var(--sandbox-gold));
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 13px;
  font-weight: 950;
}

.sandbox-moment-step i {
  width: 1px;
  min-height: 24px;
  background: linear-gradient(rgba(255, 255, 255, 0.24), transparent);
}

.sandbox-result-moment-body {
  min-width: 0;
}

.sandbox-result-moment-body > header small,
.sandbox-result-moment-body > header strong {
  display: block;
}

.sandbox-result-moment-body > header small {
  color: var(--moment-color);
  font-size: 9px;
  font-weight: 900;
}

.sandbox-result-moment-body > header strong {
  margin-top: 2px;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
}

.sandbox-result-moment-scene,
.sandbox-result-intervention,
.sandbox-result-consequence {
  margin: 9px 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 11px;
  line-height: 1.6;
}

.sandbox-result-moment-scene b,
.sandbox-result-intervention b,
.sandbox-result-consequence b {
  display: inline-block;
  min-width: 52px;
  margin-right: 7px;
  color: rgba(255, 255, 255, 0.48);
  font-size: 9px;
}

.sandbox-result-moment-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.sandbox-result-action {
  min-width: 0;
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  gap: 7px;
  align-items: start;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  background: rgba(8, 15, 17, 0.28);
}

.sandbox-result-action img {
  width: 31px;
  height: 31px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
}

.sandbox-result-action b,
.sandbox-result-action span,
.sandbox-result-action q {
  display: block;
}

.sandbox-result-action b {
  color: #fff;
  font-size: 10px;
}

.sandbox-result-action span {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 9px;
  line-height: 1.45;
}

.sandbox-result-action q {
  margin-top: 5px;
  color: color-mix(in srgb, var(--moment-color), white 18%);
  font-size: 9px;
  line-height: 1.45;
  quotes: none;
}

.sandbox-result-intervention {
  padding: 7px 9px;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.76);
  background: rgba(117, 184, 220, 0.12);
}

.sandbox-result-consequence {
  padding: 9px 10px;
  border-left: 3px solid var(--moment-color);
  border-radius: 3px 10px 10px 3px;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.045);
}

.sandbox-result-history-gap {
  grid-column: 1 / -1;
  margin: 0;
  color: rgba(255, 255, 255, 0.46);
  font-size: 10px;
  line-height: 1.5;
}

.sandbox-result-evidence {
  padding-top: 2px;
}

.sandbox-result-verdict {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(240, 201, 107, 0.26);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(240, 201, 107, 0.12), rgba(255, 255, 255, 0.035));
}

.sandbox-result-verdict > strong {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(240, 201, 107, 0.54);
  border-radius: 18px;
  color: #171b18;
  background: var(--sandbox-gold);
  box-shadow: 0 12px 32px rgba(240, 201, 107, 0.17);
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 22px;
  font-weight: 950;
  text-align: center;
}

.sandbox-result-verdict > div,
.sandbox-result .sandbox-page-header > div {
  min-width: 0;
}

.sandbox-result-verdict[data-level="go"] {
  border-color: rgba(114, 214, 160, 0.34);
  background: linear-gradient(145deg, rgba(114, 214, 160, 0.14), rgba(255, 255, 255, 0.03));
}

.sandbox-result-verdict[data-level="go"] > strong {
  border-color: rgba(140, 224, 174, 0.7);
  background: #8ce0ae;
}

.sandbox-result-verdict[data-level="stop"] {
  border-color: rgba(219, 132, 120, 0.4);
  background: linear-gradient(145deg, rgba(219, 132, 120, 0.16), rgba(255, 255, 255, 0.03));
}

.sandbox-result-verdict[data-level="stop"] > strong {
  border-color: rgba(235, 154, 143, 0.76);
  background: #e89a8e;
}

.sandbox-result-verdict[data-level="incomplete"] > strong {
  font-size: 15px;
}

.sandbox-result-verdict span,
.sandbox-result-verdict h4,
.sandbox-result-verdict p {
  display: block;
}

.sandbox-result-verdict span {
  color: rgba(255, 255, 255, 0.48);
  font-size: 9px;
  font-weight: 900;
}

.sandbox-result-verdict h4 {
  margin: 3px 0 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.35;
}

.sandbox-result-verdict p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 11px;
  line-height: 1.55;
}

.sandbox-result-verdict p b {
  color: var(--sandbox-gold);
}

.sandbox-bazi-method,
.sandbox-bazi-network-note {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.045);
  font-size: 10px;
  line-height: 1.65;
}

.sandbox-bazi-network-note {
  color: rgba(240, 201, 107, 0.8);
  background: rgba(240, 201, 107, 0.07);
}

.sandbox-bazi-pair-list {
  display: grid;
  gap: 11px;
}

.sandbox-bazi-pair {
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.035);
}

.sandbox-bazi-pair[data-level="go"] {
  border-color: rgba(114, 214, 160, 0.24);
}

.sandbox-bazi-pair[data-level="stop"] {
  border-color: rgba(219, 132, 120, 0.28);
}

.sandbox-bazi-pair > header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.sandbox-bazi-pair > header > em {
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--sandbox-gold);
  background: rgba(240, 201, 107, 0.1);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.sandbox-bazi-pair[data-level="go"] > header > em {
  color: #8ce0ae;
  background: rgba(114, 214, 160, 0.1);
}

.sandbox-bazi-pair[data-level="stop"] > header > em {
  color: #e89a8e;
  background: rgba(219, 132, 120, 0.11);
}

.sandbox-bazi-pair-people {
  min-width: 0;
  display: flex;
  gap: 7px;
  align-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.sandbox-bazi-pair-people span {
  min-width: 0;
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.sandbox-bazi-pair-people img {
  width: 29px;
  height: 29px;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.23);
  border-radius: 50%;
}

.sandbox-bazi-pair-people i {
  color: rgba(255, 255, 255, 0.34);
  font-style: normal;
}

.sandbox-bazi-structures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 11px;
}

.sandbox-bazi-structures p {
  min-width: 0;
  margin: 0;
  padding: 8px 9px;
  border-radius: 10px;
  background: rgba(7, 14, 16, 0.27);
}

.sandbox-bazi-structures b,
.sandbox-bazi-structures span {
  display: block;
}

.sandbox-bazi-structures b {
  color: #fff;
  font-size: 10px;
}

.sandbox-bazi-structures span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 9px;
  line-height: 1.5;
}

.sandbox-bazi-evidence-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
}

.sandbox-bazi-evidence-list article {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
}

.sandbox-bazi-evidence-list article[data-tone="good"] {
  border-color: rgba(114, 214, 160, 0.2);
}

.sandbox-bazi-evidence-list article[data-tone="risk"] {
  border-color: rgba(219, 132, 120, 0.23);
}

.sandbox-bazi-evidence-list span,
.sandbox-bazi-evidence-list strong,
.sandbox-bazi-evidence-list p {
  display: block;
}

.sandbox-bazi-evidence-list span {
  color: rgba(255, 255, 255, 0.45);
  font-size: 9px;
  font-weight: 900;
}

.sandbox-bazi-evidence-list strong {
  margin-top: 4px;
  color: #fff;
  font-size: 11px;
  line-height: 1.45;
}

.sandbox-bazi-evidence-list p {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, 0.56);
  font-size: 9px;
  line-height: 1.55;
}

.sandbox-bazi-redflag {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 9px;
  padding: 9px 10px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(219, 132, 120, 0.1);
  font-size: 9px;
  line-height: 1.5;
}

.sandbox-bazi-redflag b {
  color: #e89a8e;
}

.sandbox-bazi-redflag span + span::before {
  content: "· ";
}

.sandbox-bazi-completeness {
  display: block;
  margin-top: 9px;
  color: rgba(255, 255, 255, 0.38);
  font-size: 8px;
  line-height: 1.5;
}

.sandbox-result-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 10px;
}

.sandbox-result-chart-panel {
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.038);
}

.sandbox-result-chart-panel > header span,
.sandbox-result-chart-panel > header strong {
  display: block;
}

.sandbox-result-chart-panel > header span {
  color: var(--sandbox-gold);
  font-size: 9px;
  font-weight: 900;
}

.sandbox-result-chart-panel > header strong {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
}

.sandbox-radar-chart,
.sandbox-timeline-chart {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.sandbox-radar-chart {
  max-height: 155px;
  margin-top: 2px;
}

.sandbox-radar-grid polygon,
.sandbox-radar-grid line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1;
}

.sandbox-radar-value {
  fill: rgba(240, 201, 107, 0.22);
  stroke: #f0c96b;
  stroke-width: 2;
}

.sandbox-radar-chart circle {
  fill: #f7dda0;
  stroke: #1a2527;
  stroke-width: 1.2;
}

.sandbox-radar-labels text,
.sandbox-timeline-labels text {
  fill: rgba(255, 255, 255, 0.62);
  font-size: 8px;
  font-weight: 800;
}

.sandbox-timeline-chart {
  margin-top: 7px;
}

.sandbox-timeline-grid line {
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 1;
}

.sandbox-timeline-chart polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.5;
}

.sandbox-timeline-chart polyline.coordination {
  stroke: #72d6a0;
}

.sandbox-timeline-chart polyline.pressure {
  stroke: #e49a8e;
  stroke-dasharray: 4 3;
}

.sandbox-timeline-chart circle.coordination {
  fill: #72d6a0;
}

.sandbox-timeline-chart circle.pressure {
  fill: #e49a8e;
}

.sandbox-timeline-labels .coordination {
  fill: #8ce0ae;
}

.sandbox-timeline-labels .pressure {
  fill: #f0aaa0;
}

.sandbox-chart-turns {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 3px;
}

.sandbox-chart-turns span {
  padding: 3px 6px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.06);
  font-size: 8px;
}

.sandbox-result-quicklook {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.sandbox-result-quicklook > span {
  min-width: 0;
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  color: rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.035);
  font-size: 9px;
  line-height: 1.45;
}

.sandbox-result-quicklook > span b {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #111918;
  background: #8ce0ae;
}

.sandbox-result-quicklook > span.risk b {
  background: #e89a8e;
}

.sandbox-result-details {
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.035);
}

.sandbox-result-details > summary {
  min-height: 60px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 13px;
  cursor: pointer;
  list-style: none;
}

.sandbox-result-details > summary::-webkit-details-marker {
  display: none;
}

.sandbox-result-details > summary span,
.sandbox-result-details > summary strong {
  display: block;
}

.sandbox-result-details > summary span {
  color: var(--sandbox-gold);
  font-size: 9px;
  font-weight: 900;
}

.sandbox-result-details > summary strong {
  margin-top: 2px;
  color: #fff;
  font-size: 13px;
}

.sandbox-result-details > summary em {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.07);
  font-size: 12px;
  font-style: normal;
  transition: transform 180ms ease;
}

.sandbox-result-details[open] > summary em {
  transform: rotate(45deg);
}

.sandbox-result-details-body {
  padding: 0 12px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.sandbox-result-details-body > .sandbox-bazi-method,
.sandbox-result-details-body > .sandbox-bazi-network-note {
  margin-top: 10px;
}

.sandbox-action-chart-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.sandbox-action-chart {
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.035);
}

.sandbox-action-chart > header {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.sandbox-action-chart > header img {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border: 2px solid var(--role-color);
  border-radius: 50%;
}

.sandbox-action-chart > header strong,
.sandbox-action-chart > header small {
  display: block;
}

.sandbox-action-chart > header strong {
  color: #fff;
  font-size: 12px;
}

.sandbox-action-chart > header small {
  margin-top: 2px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.44);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sandbox-action-chart > header > em {
  color: var(--role-color);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.sandbox-action-track {
  height: 8px;
  overflow: hidden;
  display: flex;
  gap: 2px;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.sandbox-action-track i {
  min-width: 3px;
  background: var(--action-color);
}

.sandbox-action-chips {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 9px;
}

.sandbox-action-chips > span {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  color: rgba(255, 255, 255, 0.65);
  font-size: 8px;
}

.sandbox-action-chips > span b {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #111817;
  background: var(--action-color, #8ca0a7);
  font-size: 8px;
}

.sandbox-action-chips > span em {
  color: rgba(255, 255, 255, 0.4);
  font-style: normal;
}

.sandbox-action-last {
  display: block;
  overflow: hidden;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.42);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sandbox-result-note {
  margin: 0 0 14px;
  padding: 11px 12px;
  border-left: 3px solid var(--sandbox-jade);
  color: rgba(255, 255, 255, 0.58);
  background: rgba(114, 214, 160, 0.07);
  font-size: 10px;
  line-height: 1.6;
}

.sandbox-result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.sandbox-secondary-button {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.17);
  background: rgba(255, 255, 255, 0.06);
}

@keyframes sandbox-agent-step {
  0%, 100% { transform: translateY(0) rotate(0); }
  40% { transform: translateY(-5px) rotate(-2deg); }
  70% { transform: translateY(-2px) rotate(2deg); }
}

@keyframes sandbox-line-flow {
  to { stroke-dashoffset: -10; }
}

@keyframes sandbox-world-pulse {
  0% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.6); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(8); }
}

@media (max-width: 520px) {
  .world-sandbox-page .sandbox-town-header {
    margin-bottom: 8px;
  }

  .world-sandbox-page .sandbox-builder-map {
    height: clamp(350px, calc(100dvh - 248px), 520px);
    min-height: 0;
  }

  .world-sandbox-page .sandbox-world-console {
    margin-top: -72px;
  }

  .world-sandbox-page .sandbox-builder-hint {
    bottom: 92px;
  }

  .home-float-menu {
    width: calc(100% - 20px);
    gap: 5px;
    padding: 8px;
  }

  .home-float-menu button {
    min-height: 55px;
    border-radius: 18px;
  }

  .home-float-menu button em {
    font-size: 10px;
    letter-spacing: 0;
  }

  .sandbox-lobby-hero {
    min-height: 150px;
    padding-right: 118px;
  }

  .sandbox-hero-constellation {
    right: 0;
    width: 196px;
    transform: scale(0.9);
    transform-origin: top right;
  }

  .sandbox-world {
    height: clamp(290px, 39dvh, 390px);
    border-radius: 18px;
  }

  .sandbox-agent {
    width: 68px;
  }

  .sandbox-agent-portrait {
    width: 52px;
    height: 52px;
  }

  .sandbox-agent-bubble {
    max-width: 112px;
  }

  .sandbox-result .sandbox-page-header h3 {
    font-size: 22px;
  }

  .sandbox-result-summary {
    font-size: 12px;
  }

  .sandbox-result-verdict {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 11px;
    padding: 13px;
  }

  .sandbox-simulation {
    padding-inline: 10px;
  }

  .sandbox-time-control {
    grid-template-columns: auto repeat(4, minmax(32px, 1fr));
    width: 100%;
  }

  .sandbox-moment-card {
    width: min(78%, 260px);
  }

  .sandbox-metric-strip,
  .sandbox-intervention-choices,
  .sandbox-result-dashboard,
  .sandbox-result-quicklook {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sandbox-result-verdict > strong {
    width: 58px;
    height: 58px;
    border-radius: 15px;
    font-size: 18px;
  }

  .sandbox-result-verdict h4 {
    font-size: 16px;
  }

  .sandbox-result-facts,
  .sandbox-story-beats,
  .sandbox-bazi-structures,
  .sandbox-bazi-evidence-list,
  .sandbox-result-moment-actions {
    grid-template-columns: 1fr;
  }

  .sandbox-result-facts article {
    min-height: 0;
  }

  .sandbox-story-beats article {
    padding: 11px;
  }

  .sandbox-bazi-pair > header {
    align-items: flex-start;
  }

  .sandbox-bazi-pair-people {
    flex-wrap: wrap;
  }

  .sandbox-role-card {
    grid-template-columns: 45px minmax(0, 1fr);
  }

  .sandbox-role-card > em {
    grid-column: 2;
    justify-self: start;
  }

  .sandbox-result-moment-list {
    gap: 9px;
  }

  .sandbox-result-moment {
    padding: 11px;
  }
}

@media (max-width: 380px) {
  .sandbox-result-dashboard,
  .sandbox-action-chart-list,
  .sandbox-metric-strip,
  .sandbox-intervention-choices,
  .sandbox-result-quicklook {
    grid-template-columns: 1fr;
  }

  .sandbox-radar-chart {
    max-height: 142px;
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes orb-breathe {
  from {
    opacity: 0.56;
    transform: translate3d(0, 0, 0) scale(0.96);
  }
  to {
    opacity: 0.82;
    transform: translate3d(10px, -12px, 0) scale(1.08);
  }
}

@keyframes tai-vision {
  from {
    opacity: 0.36;
    transform: translateX(-50%) translateY(0) scale(0.985);
    filter: drop-shadow(0 0 18px rgba(243, 208, 107, 0.12));
  }
  to {
    opacity: 0.52;
    transform: translateX(-50%) translateY(10px) scale(1.02);
    filter: drop-shadow(0 0 30px rgba(94, 208, 255, 0.16));
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .paid-card,
  .kline-card,
  .fuyao-pavilion-entry,
  .fuyao-pavilion-card,
  .skin-shop-entry,
  .source-license-entry,
  .oracle-tool-entry,
  .liuyao-entry,
  .paid-card::after,
  .kline-card::after,
  .fuyao-pavilion-entry::after,
  .fuyao-pavilion-card::after,
  .skin-shop-entry::after,
  .source-license-entry::after,
  .oracle-tool-entry::after,
  .liuyao-entry::after {
    transition-duration: 0.01ms;
  }

  .module-card-ripple {
    animation-duration: 0.01ms;
  }
}

body.web-performance-lite,
body.web-performance-lite .phone-shell {
  background:
    radial-gradient(circle at 50% 10%, rgba(243, 208, 107, 0.1), transparent 30%),
    linear-gradient(180deg, #080615 0%, #17102e 52%, #090614 100%);
}

body.web-performance-lite .phone-shell::after,
body.web-performance-lite .star-orb,
body.web-performance-lite .module-card-ripple {
  display: none;
}

body.web-performance-lite .screen.active {
  animation: none;
}

body.web-performance-lite .ring-line,
body.web-performance-lite .tai-svg {
  animation: none !important;
  filter: none !important;
}

body.web-performance-lite .drawer-backdrop {
  background: rgba(3, 2, 10, 0.48);
  backdrop-filter: none;
}

body.web-performance-lite .drawer,
body.web-performance-lite .pay-sheet,
body.web-performance-lite .daily-fortune-sheet,
body.web-performance-lite .spirit-sheet,
body.web-performance-lite .profile-tool-sheet,
body.web-performance-lite .home-float-menu,
body.web-performance-lite .bottom-tabbar,
body.web-performance-lite .icp-footer a {
  backdrop-filter: none !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

body.web-performance-lite .drawer-left:not(.open)::before,
body.web-performance-lite .drawer-left:not(.open) .profile-root-row,
body.web-performance-lite .drawer-left:not(.open) .profile-root-row::before,
body.web-performance-lite .drawer-left:not(.open) .profile-root-row::after,
body.web-performance-lite .drawer-left:not(.open) .profile-orb,
body.web-performance-lite .drawer-left:not(.open) .profile-orb::before,
body.web-performance-lite .drawer-left:not(.open) .profile-orb::after,
body.web-performance-lite .drawer-left:not(.open) .profile-orb span,
body.web-performance-lite .drawer-left:not(.open) .profile-orb span::before,
body.web-performance-lite .drawer-left:not(.open) .profile-orb span::after,
body.web-performance-lite .drawer-left:not(.open) .profile-five-card,
body.web-performance-lite .drawer-left:not(.open) .profile-five-card::before,
body.web-performance-lite .drawer-left:not(.open) .profile-five-card::after {
  animation: none !important;
}

body.web-performance-lite .drawer-left.open[data-day-element]::before,
body.web-performance-lite .drawer-left.open[data-day-element] .profile-root-row,
body.web-performance-lite .drawer-left.open[data-day-element] .profile-root-row::before,
body.web-performance-lite .drawer-left.open[data-day-element] .profile-root-row::after,
body.web-performance-lite .drawer-left.open[data-day-element] .profile-orb,
body.web-performance-lite .drawer-left.open[data-day-element] .profile-orb::before,
body.web-performance-lite .drawer-left.open[data-day-element] .profile-orb::after,
body.web-performance-lite .drawer-left.open[data-day-element] .profile-orb span::before,
body.web-performance-lite .drawer-left.open[data-day-element] .profile-orb span::after,
body.web-performance-lite .drawer-left.open[data-day-element] .profile-five-card,
body.web-performance-lite .drawer-left.open[data-day-element] .profile-five-card::before,
body.web-performance-lite .drawer-left.open[data-day-element] .profile-five-card::after,
body.web-performance-lite .drawer-left.open[data-day-master="丁"]::before,
body.web-performance-lite .drawer-left.open[data-day-master="丁"] .profile-root-row,
body.web-performance-lite .drawer-left.open[data-day-master="丁"] .profile-root-row::before,
body.web-performance-lite .drawer-left.open[data-day-master="丁"] .profile-root-row::after,
body.web-performance-lite .drawer-left.open[data-day-master="丁"] .profile-orb,
body.web-performance-lite .drawer-left.open[data-day-master="丁"] .profile-orb::before,
body.web-performance-lite .drawer-left.open[data-day-master="丁"] .profile-orb::after,
body.web-performance-lite .drawer-left.open[data-day-master="丁"] .profile-orb span::before,
body.web-performance-lite .drawer-left.open[data-day-master="丁"] .profile-orb span::after,
body.web-performance-lite .drawer-left.open[data-day-master="丁"] .profile-five-card::before,
body.web-performance-lite .drawer-left.open[data-day-master="丁"] .profile-name-avatar::after,
body.web-performance-lite .drawer-left.open[data-day-master="丁"] .archive-link-card {
  animation: none !important;
  filter: none !important;
}

body.web-performance-lite .drawer-left.open[data-day-element]::before,
body.web-performance-lite .drawer-left.open[data-day-element] .profile-root-row::before,
body.web-performance-lite .drawer-left.open[data-day-element] .profile-root-row::after,
body.web-performance-lite .drawer-left.open[data-day-element] .profile-orb::before,
body.web-performance-lite .drawer-left.open[data-day-element] .profile-orb::after,
body.web-performance-lite .drawer-left.open[data-day-element] .profile-orb span::before,
body.web-performance-lite .drawer-left.open[data-day-element] .profile-orb span::after,
body.web-performance-lite .drawer-left.open[data-day-element] .profile-five-card::before,
body.web-performance-lite .drawer-left.open[data-day-element] .profile-five-card::after,
body.web-performance-lite .drawer-left.open[data-day-master="丁"]::before,
body.web-performance-lite .drawer-left.open[data-day-master="丁"] .profile-root-row::before,
body.web-performance-lite .drawer-left.open[data-day-master="丁"] .profile-root-row::after,
body.web-performance-lite .drawer-left.open[data-day-master="丁"] .profile-orb::before,
body.web-performance-lite .drawer-left.open[data-day-master="丁"] .profile-orb::after,
body.web-performance-lite .drawer-left.open[data-day-master="丁"] .profile-orb span::before,
body.web-performance-lite .drawer-left.open[data-day-master="丁"] .profile-orb span::after,
body.web-performance-lite .drawer-left.open[data-day-master="丁"] .profile-five-card::before,
body.web-performance-lite .drawer-left.open[data-day-master="丁"] .profile-name-avatar::after {
  display: none !important;
}

body.web-performance-lite .drawer-left.open[data-day-element] .profile-root-row,
body.web-performance-lite .drawer-left.open[data-day-master="丁"] .profile-root-row {
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.14), 0 10px 24px rgba(0, 0, 0, 0.16) !important;
}

body.web-performance-lite .drawer-left.open[data-day-element] .profile-orb,
body.web-performance-lite .drawer-left.open[data-day-master="丁"] .profile-orb {
  box-shadow: 0 0 16px color-mix(in srgb, var(--profile-element-core, rgba(255, 98, 62, 0.64)) 24%, transparent), inset 0 1px rgba(255, 255, 255, 0.16) !important;
}

body.web-performance-lite .drawer-left.open[data-day-element] .profile-orb span,
body.web-performance-lite .drawer-left.open[data-day-master="丁"] .profile-orb span {
  animation: profileStemBreath 3.4s ease-in-out infinite !important;
  filter: none;
}

body.web-performance-lite .calendar-grid button.checked-in::before,
body.web-performance-lite .calendar-grid button.checked-in::after,
body.web-performance-lite .report-hero::after {
  opacity: 0.28;
  box-shadow: none;
}

body.web-performance-lite .daily-fortune-sheet {
  background:
    radial-gradient(circle at 18% 0, rgba(216, 200, 255, 0.1), transparent 32%),
    linear-gradient(155deg, rgba(70, 61, 100, 0.92), rgba(38, 31, 58, 0.96));
}

@media (min-width: 720px) {
  body {
    padding: 28px 0;
  }

  .phone-shell {
    min-height: 900px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 34px;
  }
}

body.web-build {
  width: 100%;
  max-width: 100%;
  min-height: 100svh;
  padding: 0;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 16% 10%, rgba(243, 208, 107, 0.16), transparent 28%),
    radial-gradient(circle at 82% 4%, rgba(94, 208, 255, 0.18), transparent 28%),
    radial-gradient(circle at 50% 88%, rgba(118, 68, 255, 0.18), transparent 32%),
    linear-gradient(180deg, #070511 0%, #17102e 48%, #090614 100%);
}

body.web-build .phone-shell {
  width: 100%;
  max-width: 100dvw;
  min-height: 100svh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body.web-build .screen {
  width: 100%;
  max-width: 100dvw;
  min-height: 100svh;
}

body.web-build .login-screen.active {
  min-height: 100svh;
  place-content: center;
  padding: clamp(42px, 7vh, 76px) 24px;
}

body.web-build .login-screen .eyebrow,
body.web-build .login-screen h1,
body.web-build .login-screen .lead {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

body.web-build .login-screen h1 {
  font-size: clamp(46px, 5vw, 78px);
}

body.web-build .login-screen .lead {
  font-size: 18px;
}

body.web-build .auth-card,
body.web-build .root-wizard,
body.web-build #baziPanel {
  width: min(760px, calc(100vw - 48px));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

body.web-build .setup-screen {
  padding: clamp(34px, 6vh, 70px) 24px 46px;
}

body.web-build .page-header {
  width: min(760px, calc(100vw - 48px));
  margin-left: auto;
  margin-right: auto;
}

body.web-build .daily-screen.active {
  height: 100svh;
  min-height: 100svh;
  background:
    linear-gradient(90deg, rgba(8, 5, 18, 0.5), transparent 22%, transparent 78%, rgba(8, 5, 18, 0.5)),
    linear-gradient(180deg, rgba(8, 5, 18, 0.08), rgba(8, 5, 18, 0.58)),
    var(--daily-spirit-bg) center 18% / cover no-repeat;
}

body.web-build .top-nav {
  top: max(22px, env(safe-area-inset-top));
  left: max(34px, calc((100vw - 1180px) / 2));
  right: max(34px, calc((100vw - 1180px) / 2));
}

body.web-build .top-nav-center h2 {
  font-size: clamp(24px, 2.4vw, 34px);
}

body.web-build .module-page.panel {
  width: min(1040px, calc(100vw - 80px));
  height: calc(100svh - 190px);
  margin-top: 92px;
  padding: 28px;
  border-radius: 30px;
}

body.web-build .daily-screen.wake-active #dailyWake,
body.web-build .daily-hero {
  height: 100%;
  min-height: 100%;
}

body.web-build .daily-hero {
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 255, 255, 0.08), transparent 28%),
    linear-gradient(90deg, rgba(9, 6, 21, 0.54), transparent 25%, transparent 76%, rgba(9, 6, 21, 0.54)),
    linear-gradient(180deg, rgba(8, 5, 18, 0.02) 0%, rgba(8, 5, 18, 0.1) 46%, rgba(8, 5, 18, 0.38) 100%),
    var(--daily-spirit-bg) center 18% / cover no-repeat;
}

body.web-build .phone-shell.skin-active {
  background:
    linear-gradient(90deg, rgba(8, 5, 18, 0.5), transparent 22%, transparent 78%, rgba(8, 5, 18, 0.5)),
    linear-gradient(180deg, rgba(8, 5, 18, 0.08), rgba(8, 5, 18, 0.58)),
    var(--skin-bg) center center / cover no-repeat;
}

body.web-build .daily-screen.active.skin-active {
  background:
    linear-gradient(90deg, rgba(8, 5, 18, 0.5), transparent 22%, transparent 78%, rgba(8, 5, 18, 0.5)),
    linear-gradient(180deg, rgba(8, 5, 18, 0.08), rgba(8, 5, 18, 0.58)),
    var(--skin-bg) center center / cover no-repeat;
}

body.web-build .daily-hero.skin-active {
  background:
    radial-gradient(circle at 50% 16%, color-mix(in srgb, var(--skin-accent) 12%, transparent), transparent 28%),
    linear-gradient(90deg, rgba(9, 6, 21, 0.54), transparent 25%, transparent 76%, rgba(9, 6, 21, 0.54)),
    linear-gradient(180deg, rgba(8, 5, 18, 0.02) 0%, rgba(8, 5, 18, 0.1) 46%, rgba(8, 5, 18, 0.38) 100%),
    var(--skin-bg) center center / cover no-repeat;
}

body.web-build .wake-side-panel {
  width: min(260px, 20vw);
  min-height: 164px;
  padding: 20px;
  border-radius: 28px;
}

body.web-build .wake-persona-panel {
  right: max(48px, calc((100vw - 1180px) / 2));
}

body.web-build .wake-side-panel strong {
  font-size: clamp(20px, 1.8vw, 28px);
}

body.web-build .wake-side-panel p {
  font-size: 14px;
}

body.web-build .home-float-menu {
  width: min(920px, calc(100vw - 96px));
  display: flex;
  flex-wrap: nowrap;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  bottom: max(24px, env(safe-area-inset-bottom));
  border-radius: 999px;
}

body.web-build .home-float-menu .web-only-nav {
  display: grid;
}

body.web-build .home-float-menu .mobile-only-nav {
  display: none;
}

body.web-build .home-float-menu button {
  flex: 1 1 0;
  min-height: 58px;
  grid-template-columns: 30px minmax(0, auto);
  place-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 999px;
  padding: 0 10px;
}

body.web-build .home-float-menu button span {
  width: 30px;
  height: 30px;
  font-size: 18px;
}

body.web-build .home-float-menu button em {
  min-width: 0;
  font-size: 13px;
  letter-spacing: 0;
  white-space: nowrap;
}

body.web-build .profile-root-row {
  grid-template-columns: minmax(0, 1fr) 64px;
}

body.web-build .profile-root-row .archive-link-card {
  display: none;
}

body.web-build .drawer {
  max-width: 420px;
}

body.web-build .calendar-drawer {
  width: min(520px, calc(100vw - 48px));
  max-width: none;
}

body.web-build .pay-sheet,
body.web-build .daily-fortune-sheet,
body.web-build .spirit-sheet,
body.web-build .profile-tool-sheet {
  width: min(620px, calc(100vw - 48px));
  max-width: none;
}

body.web-build .pay-sheet {
  max-height: min(76vh, 680px);
}

body.web-build .daily-fortune-sheet {
  height: min(88dvh, 820px);
  max-height: calc(100dvh - 44px);
}

body.web-build .spirit-sheet,
body.web-build .profile-tool-sheet {
  max-height: min(72vh, 680px);
}

body.web-build .login-screen {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 249, 253, 0.96)),
    repeating-linear-gradient(90deg, rgba(30, 44, 70, 0.04) 0 1px, transparent 1px 80px);
  color: #111827;
}

body.web-build .login-screen.active {
  display: block;
  min-height: 100svh;
  padding: 0;
  overflow-y: auto;
}

body.web-build .login-screen .star-orb {
  display: none;
}

body.web-build .web-home-shell {
  width: min(1200px, calc(100vw - 96px));
  min-height: 100svh;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 740px) 410px;
  align-items: start;
  gap: clamp(46px, 6vw, 76px);
  padding: clamp(52px, 7vh, 82px) 0 36px;
}

body.web-build .web-home-hero {
  min-width: 0;
}

body.web-build .web-home-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: clamp(54px, 9vh, 92px);
}

body.web-build .web-home-brand {
  color: #111827;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: 0.04em;
}

body.web-build .web-home-nav div {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.web-build .web-home-nav button {
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(17, 24, 39, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  color: rgba(17, 24, 39, 0.72);
  font-size: 14px;
  font-weight: 850;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.05);
}

body.web-build .web-home-kicker {
  display: block;
  width: fit-content;
  margin: 0 0 18px;
  padding: 7px 13px;
  border: 1px solid rgba(16, 185, 129, 0.18);
  border-radius: 999px;
  background: rgba(236, 253, 245, 0.82);
  color: #047857;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

body.web-build .login-screen h1 {
  max-width: 720px;
  margin: 0 0 18px;
  color: #0f172a;
  font-size: clamp(58px, 6.4vw, 104px);
  line-height: 0.98;
  text-align: left;
  letter-spacing: 0;
  text-shadow: none;
}

body.web-build .login-screen .lead {
  max-width: 620px;
  margin: 0 0 22px;
  color: rgba(31, 41, 55, 0.68);
  font-size: 20px;
  line-height: 1.75;
  text-align: left;
}

body.web-build .web-home-seo-copy {
  max-width: 620px;
  margin: 0 0 28px;
  color: rgba(31, 41, 55, 0.58);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.8;
  text-align: left;
}

body.web-build .web-home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

body.web-build .web-home-primary,
body.web-build .web-home-secondary {
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
}

body.web-build .web-home-primary {
  border: 0;
  color: #fff;
  background: #111827;
  box-shadow: 0 18px 36px rgba(17, 24, 39, 0.18);
}

body.web-build .web-home-secondary {
  border: 1px solid rgba(17, 24, 39, 0.12);
  color: #111827;
  background: rgba(255, 255, 255, 0.82);
}

body.web-build .web-home-inline-note {
  width: fit-content;
  margin: 0 0 22px;
  color: rgba(15, 118, 110, 0.84);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.45;
}

body.web-build .web-home-feature-grid {
  width: min(100%, 720px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

body.web-build .web-home-feature-card {
  --feature-tint: rgba(15, 118, 110, 0.1);
  --feature-ink: #0f766e;
  min-height: 154px;
  padding: 18px;
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 12px;
  border: 1px solid rgba(17, 24, 39, 0.09);
  border-radius: 8px;
  background:
    linear-gradient(180deg, var(--feature-tint), rgba(255, 255, 255, 0.7) 56%),
    rgba(255, 255, 255, 0.8);
  color: #111827;
  text-align: left;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.06);
}

body.web-build .web-home-feature-card:nth-child(2) {
  --feature-tint: rgba(37, 99, 235, 0.1);
  --feature-ink: #1d4ed8;
}

body.web-build .web-home-feature-card:nth-child(3) {
  --feature-tint: rgba(180, 83, 9, 0.12);
  --feature-ink: #92400e;
}

body.web-build .web-home-feature-card span {
  width: fit-content;
  min-height: 28px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--feature-ink);
  font-size: 13px;
  font-weight: 950;
}

body.web-build .web-home-feature-card strong {
  display: block;
  color: #0f172a;
  font-size: 19px;
  line-height: 1.2;
}

body.web-build .web-home-feature-card em {
  color: rgba(31, 41, 55, 0.62);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.65;
}

body.web-build .web-home-auth {
  min-width: 0;
  margin-top: 0;
  align-self: center;
}

body.web-build .web-home-auth-heading {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
  color: #111827;
}

body.web-build .web-home-auth-heading span {
  color: #0f766e;
  font-size: 13px;
  font-weight: 950;
}

body.web-build .web-home-auth-heading strong {
  display: none;
}

body.web-build .login-screen .auth-card {
  width: 100%;
  max-width: 430px;
  margin: 0;
  gap: 14px;
  padding: 0;
  border: 0;
  border-radius: 30px;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

body.web-build .login-screen .auth-card.single-auth-method.hidden {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

body.web-build .login-screen .auth-card::before {
  display: none;
}

body.web-build .login-screen .auth-method-tabs {
  border-color: rgba(17, 24, 39, 0.08);
  background: #f3f4f6;
}

body.web-build .login-screen .auth-method-tabs button {
  color: rgba(17, 24, 39, 0.6);
}

body.web-build .login-screen .auth-method-tabs button.active {
  color: #fff;
  background: #111827;
  box-shadow: none;
}

body.web-build .login-screen label,
body.web-build .login-screen .input-hint {
  color: rgba(31, 41, 55, 0.68);
}

body.web-build .login-screen input,
body.web-build .login-screen select {
  color: #111827;
  border-color: rgba(17, 24, 39, 0.12);
  background: #f8fafc;
  box-shadow: none;
}

body.web-build .login-screen input::placeholder {
  color: rgba(31, 41, 55, 0.42);
}

body.web-build .login-screen .human-check-row strong {
  color: #111827;
  background: #eef2ff;
}

body.web-build .login-screen .password-visibility-btn {
  color: #111827;
  border-color: rgba(17, 24, 39, 0.12);
  background: #eef2ff;
  box-shadow: none;
}

body.web-build .login-screen .password-visibility-btn[aria-pressed="true"] {
  color: #fff;
  background: #111827;
}

body.web-build .login-screen .primary-btn {
  color: #fff;
  background: #111827;
  box-shadow: 0 16px 32px rgba(17, 24, 39, 0.18);
}

body.web-build .login-screen .auth-card[data-auth-mode="register"],
body.web-build .login-screen .auth-card[data-auth-mode="reset"] {
  gap: 10px;
}

body.web-build .login-screen .auth-card[data-auth-mode="register"] input,
body.web-build .login-screen .auth-card[data-auth-mode="reset"] input {
  min-height: 42px;
}

body.web-build .login-screen .auth-card[data-auth-mode="register"] .primary-btn,
body.web-build .login-screen .auth-card[data-auth-mode="register"] .ghost-btn,
body.web-build .login-screen .auth-card[data-auth-mode="register"] .soft-btn,
body.web-build .login-screen .auth-card[data-auth-mode="reset"] .primary-btn,
body.web-build .login-screen .auth-card[data-auth-mode="reset"] .ghost-btn,
body.web-build .login-screen .auth-card[data-auth-mode="reset"] .soft-btn {
  min-height: 46px;
}

body.web-build .login-screen .ghost-btn,
body.web-build .login-screen .soft-btn,
body.web-build .login-screen .auth-secondary-actions button {
  border-color: rgba(17, 24, 39, 0.1);
  color: rgba(17, 24, 39, 0.7);
  background: #f8fafc;
}

body.web-build .login-screen .wechat-login-btn {
  min-height: 118px;
  border-color: rgba(188, 255, 183, 0.42);
  color: #f8fff4;
  background:
    radial-gradient(circle at 50% 0, rgba(210, 255, 183, 0.34), transparent 58%),
    linear-gradient(135deg, #0f7a4d, #064633 72%);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.24),
    0 28px 72px rgba(14, 116, 74, 0.26);
}

body.web-build .login-screen .wechat-login-btn small,
body.web-build .login-screen .wechat-qr-panel small {
  color: rgba(235, 255, 227, 0.76);
}

body.web-build .login-screen .wechat-qr-panel {
  border-color: rgba(22, 163, 74, 0.18);
  background: rgba(255, 255, 255, 0.76);
}

body.web-build .login-screen .wechat-qr-code {
  color: #166534;
  background: #ecfdf5;
  box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.12);
}

body.web-build .login-screen .wechat-login-panel {
  min-height: 336px;
  padding: 24px;
  border: 1px solid rgba(20, 83, 45, 0.16);
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 0, rgba(20, 184, 166, 0.18), transparent 38%),
    radial-gradient(circle at 90% 10%, rgba(34, 197, 94, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(7, 26, 34, 0.94), rgba(6, 38, 32, 0.92));
  box-shadow:
    0 40px 90px rgba(15, 23, 42, 0.18),
    inset 0 1px rgba(255, 255, 255, 0.1);
}

body.web-build .login-screen .wechat-gate-heading {
  margin-bottom: 4px;
}

body.web-build .login-screen .wechat-gate-heading span {
  color: rgba(167, 243, 208, 0.92);
}

body.web-build .login-screen .wechat-gate-heading strong {
  color: rgba(248, 255, 250, 0.94);
  font-size: 18px;
}

body.web-build .login-screen .input-hint {
  display: none;
}

body.web-build .login-screen .auth-card.single-auth-method > .input-hint,
body.web-build .login-screen .auth-card.single-auth-method > .email-auth-field,
body.web-build .login-screen .auth-card.single-auth-method > .email-code-field,
body.web-build .login-screen .auth-card.single-auth-method > .password-auth-field,
body.web-build .login-screen .auth-card.single-auth-method > .primary-btn,
body.web-build .login-screen .auth-card.single-auth-method > .ghost-btn,
body.web-build .login-screen .auth-card.single-auth-method > .auth-secondary-actions {
  display: none !important;
}

body.web-build .login-screen .auth-tip-card {
  border-color: rgba(17, 24, 39, 0.08);
  background: #f8fafc;
}

body.web-build .login-screen .auth-tip-card strong {
  color: #111827;
}

body.web-build .login-screen .auth-tip-card small {
  color: rgba(31, 41, 55, 0.6);
}

/* 手机版登录页：去掉旧品牌封面，直接显示微信入境入口 */
html.mobile-web-boot body:not(.web-build) .login-screen.active,
body.mobile-web-build .login-screen.active {
  min-height: 100dvh;
  height: 100dvh;
  display: grid;
  place-items: center;
  align-content: center;
  padding: max(22px, env(safe-area-inset-top)) 18px max(42px, env(safe-area-inset-bottom));
  overflow: hidden;
}

html.mobile-web-boot body:not(.web-build) .phone-shell:has(#loginScreen.active)::after,
body.mobile-web-build .phone-shell:has(#loginScreen.active)::after {
  content: none !important;
  display: none !important;
}

html.mobile-web-boot body:not(.web-build) .login-screen > .star-orb,
html.mobile-web-boot body:not(.web-build) .login-screen > h1,
html.mobile-web-boot body:not(.web-build) .login-screen > .lead,
body.mobile-web-build .login-screen > .star-orb,
body.mobile-web-build .login-screen > h1,
body.mobile-web-build .login-screen > .lead {
  display: none !important;
}

html.mobile-web-boot body:not(.web-build) #loginForm.auth-card,
html.mobile-web-boot body:not(.web-build) #loginForm.auth-card.hidden,
html.mobile-web-boot body:not(.web-build) #loginForm.auth-card.single-auth-method.hidden,
body.mobile-web-build #loginForm.auth-card,
body.mobile-web-build #loginForm.auth-card.hidden,
body.mobile-web-build #loginForm.auth-card.single-auth-method.hidden {
  width: min(360px, calc(100vw - 36px));
  max-width: min(360px, calc(100vw - 36px));
  min-height: min(430px, calc(100dvh - 96px));
  margin: 0 auto;
  display: grid !important;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 5;
}

html.mobile-web-boot body:not(.web-build) #loginForm.auth-card.single-auth-method > .input-hint,
html.mobile-web-boot body:not(.web-build) #loginForm.auth-card.single-auth-method > .email-auth-field,
html.mobile-web-boot body:not(.web-build) #loginForm.auth-card.single-auth-method > .email-code-field,
html.mobile-web-boot body:not(.web-build) #loginForm.auth-card.single-auth-method > .password-auth-field,
html.mobile-web-boot body:not(.web-build) #loginForm.auth-card.single-auth-method > .primary-btn,
html.mobile-web-boot body:not(.web-build) #loginForm.auth-card.single-auth-method > .ghost-btn,
html.mobile-web-boot body:not(.web-build) #loginForm.auth-card.single-auth-method > .auth-secondary-actions,
body.mobile-web-build #loginForm.auth-card.single-auth-method > .input-hint,
body.mobile-web-build #loginForm.auth-card.single-auth-method > .email-auth-field,
body.mobile-web-build #loginForm.auth-card.single-auth-method > .email-code-field,
body.mobile-web-build #loginForm.auth-card.single-auth-method > .password-auth-field,
body.mobile-web-build #loginForm.auth-card.single-auth-method > .primary-btn,
body.mobile-web-build #loginForm.auth-card.single-auth-method > .ghost-btn,
body.mobile-web-build #loginForm.auth-card.single-auth-method > .auth-secondary-actions {
  display: none !important;
}

html.mobile-web-boot body:not(.web-build) .login-screen .wechat-login-panel,
html.mobile-web-boot body:not(.web-build) .login-screen .wechat-login-panel.hidden,
body.mobile-web-build .login-screen .wechat-login-panel,
body.mobile-web-build .login-screen .wechat-login-panel.hidden {
  width: 100%;
  min-height: min(430px, calc(100dvh - 96px));
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 auto;
  z-index: 6;
}

/* 微信传送门入口：蓝白旋涡版 */
.wechat-login-panel {
  min-height: 380px;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 34px;
  isolation: isolate;
  background: transparent;
  box-shadow: none;
}

.login-screen .wechat-login-panel.hidden,
body.web-build .login-screen .wechat-login-panel.hidden,
body.mobile-web-build .login-screen .wechat-login-panel.hidden {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.wechat-login-panel::before {
  content: "";
  position: absolute;
  top: 22px;
  left: 50%;
  width: min(64vw, 228px);
  max-width: 228px;
  height: 274px;
  border: 2px solid rgba(245, 208, 254, 0.72);
  border-radius: 50% / 46%;
  pointer-events: none;
  transform: translateX(-50%) translateY(-4px);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(88, 28, 135, 0.18), rgba(126, 34, 206, 0.10) 48%, transparent 72%);
  box-shadow:
    0 0 18px rgba(250, 232, 255, 0.86),
    0 0 48px rgba(217, 70, 239, 0.66),
    0 0 122px rgba(126, 34, 206, 0.44),
    inset 0 0 44px rgba(250, 232, 255, 0.24);
  z-index: -1;
  animation: wechatPortalGlow 3.6s ease-in-out infinite;
}

.wechat-login-panel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 32px;
  width: min(58vw, 212px);
  max-width: 212px;
  height: 254px;
  transform: translateX(-50%);
  pointer-events: none;
  border-radius: 50% / 46%;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.24) 0 8%, rgba(233, 213, 255, 0.18) 18%, rgba(168, 85, 247, 0.14) 42%, transparent 72%),
    radial-gradient(ellipse at 50% 54%, rgba(22, 8, 45, 0.32) 0 30%, rgba(88, 28, 135, 0.18) 46%, transparent 74%);
  background-blend-mode: screen, normal;
  box-shadow:
    inset 0 0 34px rgba(255, 255, 255, 0.2),
    inset 0 0 78px rgba(168, 85, 247, 0.24),
    0 0 34px rgba(217, 70, 239, 0.42);
  opacity: 0.72;
  z-index: 0;
  animation: none;
}

.wechat-gate-heading {
  display: none;
}

.wechat-gate-heading span {
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.3em;
}

.wechat-gate-heading strong {
  display: none;
}

.wechat-login-btn {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 5;
  min-width: 116px;
  min-height: 42px;
  display: inline-grid;
  place-items: center;
  padding: 0 24px;
  border: 1px solid rgba(245, 208, 254, 0.5);
  border-radius: 999px;
  color: #fff;
  background:
    linear-gradient(135deg, rgba(168, 85, 247, 0.76), rgba(88, 28, 135, 0.76));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.28),
    0 18px 44px rgba(88, 28, 135, 0.34),
    0 0 24px rgba(217, 70, 239, 0.36);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
  transform: translateX(-50%);
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.wechat-login-btn::before,
.wechat-login-btn small {
  display: none;
}

.wechat-login-btn:hover {
  transform: translateX(-50%) translateY(-1px);
  filter: brightness(1.08) saturate(1.05);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.3),
    0 20px 50px rgba(88, 28, 135, 0.44),
    0 0 32px rgba(168, 85, 247, 0.4);
}

.wechat-login-btn span {
  color: #fff;
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.08em;
}

.wechat-login-hint {
  position: absolute;
  left: 50%;
  bottom: -8px;
  z-index: 6;
  width: min(270px, calc(100% - 40px));
  margin: 0;
  padding: 8px 12px;
  border: 1px solid rgba(233, 213, 255, 0.22);
  border-radius: 999px;
  color: rgba(248, 250, 252, 0.88);
  background: rgba(21, 12, 40, 0.66);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.26);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  text-align: center;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.36);
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(10px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.wechat-login-hint.active {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.wechat-qr-panel {
  position: absolute;
  left: 50%;
  bottom: 86px;
  z-index: 6;
  width: min(178px, calc(100% - 48px));
  padding: 10px;
  border: 1px solid rgba(233, 213, 255, 0.34);
  border-radius: 20px;
  background: rgba(18, 10, 36, 0.76);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.18),
    0 18px 48px rgba(15, 23, 42, 0.34);
  transform: translateX(-50%);
  backdrop-filter: blur(12px);
}

.wechat-qr-code {
  width: 138px;
  min-height: 138px;
  border-radius: 14px;
  color: rgba(248, 250, 252, 0.88);
  background: rgba(255, 255, 255, 0.09);
}

.wechat-qr-panel small {
  display: none;
}

body.web-build .login-screen .wechat-login-panel {
  min-height: 360px;
  padding: 0;
  border: 0;
  border-radius: 34px;
  background: transparent;
  box-shadow: none;
}

body.web-build .login-screen .wechat-login-panel::before {
  top: 18px;
  width: 220px;
  max-width: 220px;
  height: 272px;
}

body.web-build .login-screen .wechat-login-btn {
  min-height: 50px;
  border-color: rgba(245, 208, 254, 0.5);
  color: #fff;
  background:
    linear-gradient(135deg, rgba(168, 85, 247, 0.76), rgba(88, 28, 135, 0.76));
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.28),
    0 18px 44px rgba(88, 28, 135, 0.34),
    0 0 24px rgba(217, 70, 239, 0.36);
}

@media (max-width: 719px) {
  body.web-build .login-screen .wechat-login-panel {
    min-height: 390px;
  }

  body.web-build .login-screen .wechat-login-panel::before {
    top: 24px;
    width: 232px;
    max-width: min(70vw, 232px);
    height: 284px;
  }
}

@keyframes wechatPortalGlow {
  0%, 100% {
    filter: brightness(1);
    transform: translateX(-50%) translateY(-5px) scale(1);
  }
  50% {
    filter: brightness(1.18);
    transform: translateX(-50%) translateY(-7px) scale(1.025);
  }
}

/* 手机入口页：全屏传送门呼吸灯 */
html.mobile-web-boot body:not(.web-build),
body.mobile-web-build {
  background:
    radial-gradient(circle at 50% 48%, rgba(139, 92, 246, 0.28), transparent 36%),
    radial-gradient(circle at 50% 50%, rgba(217, 70, 239, 0.16), transparent 54%),
    linear-gradient(180deg, #090414 0%, #120824 48%, #080411 100%);
}

html.mobile-web-boot body:not(.web-build) .phone-shell:has(#loginScreen.active),
body.mobile-web-build .phone-shell:has(#loginScreen.active) {
  width: 100vw;
  max-width: 100vw;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% 48%, rgba(168, 85, 247, 0.24), transparent 34%),
    radial-gradient(ellipse at 50% 50%, rgba(88, 28, 135, 0.2), transparent 56%),
    linear-gradient(180deg, #080413 0%, #120725 50%, #080413 100%);
  box-shadow: none;
}

html.mobile-web-boot body:not(.web-build) .login-screen.active,
body.mobile-web-build .login-screen.active {
  width: 100vw;
  max-width: 100vw;
  min-height: 100dvh;
  height: 100dvh;
  padding: 0;
  background:
    radial-gradient(circle at 50% 14%, rgba(250, 232, 255, 0.1), transparent 20%),
    radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.2), transparent 43%),
    linear-gradient(180deg, rgba(10, 5, 24, 0.96), rgba(18, 7, 39, 0.98) 52%, rgba(8, 4, 19, 0.98));
}

html.mobile-web-boot body:not(.web-build) #loginForm.auth-card,
html.mobile-web-boot body:not(.web-build) #loginForm.auth-card.hidden,
html.mobile-web-boot body:not(.web-build) #loginForm.auth-card.single-auth-method.hidden,
body.mobile-web-build #loginForm.auth-card,
body.mobile-web-build #loginForm.auth-card.hidden,
body.mobile-web-build #loginForm.auth-card.single-auth-method.hidden {
  width: 100vw;
  max-width: 100vw;
  min-height: 100dvh;
  height: 100dvh;
  border-radius: 0;
}

html.mobile-web-boot body:not(.web-build) .login-screen .wechat-login-panel,
html.mobile-web-boot body:not(.web-build) .login-screen .wechat-login-panel.hidden,
body.mobile-web-build .login-screen .wechat-login-panel,
body.mobile-web-build .login-screen .wechat-login-panel.hidden {
  width: 100vw;
  max-width: 100vw;
  min-height: 100dvh;
  height: 100dvh;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05), transparent 14%),
    radial-gradient(ellipse at 50% 50%, rgba(168, 85, 247, 0.16), transparent 48%),
    radial-gradient(ellipse at 50% 18%, rgba(255, 255, 255, 0.06), transparent 28%);
}

html.mobile-web-boot body:not(.web-build) .login-screen .wechat-login-panel::before,
body.mobile-web-build .login-screen .wechat-login-panel::before {
  inset: auto auto auto 50%;
  top: 44%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: clamp(210px, 60vw, 276px);
  max-width: none;
  height: clamp(300px, 58dvh, 410px);
  border-width: 2px;
  border-color: rgba(245, 208, 254, 0.78);
  transform: translate(-50%, -50%) scale(1);
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.18) 0 10%, rgba(217, 70, 239, 0.13) 28%, rgba(88, 28, 135, 0.18) 56%, transparent 74%);
  box-shadow:
    0 0 18px rgba(250, 232, 255, 0.95),
    0 0 58px rgba(217, 70, 239, 0.68),
    0 0 128px rgba(126, 34, 206, 0.48),
    inset 0 0 52px rgba(250, 232, 255, 0.24),
    inset 0 0 118px rgba(126, 34, 206, 0.2);
  z-index: 1;
  animation: wechatPortalFullBreath 4.8s ease-in-out infinite;
}

html.mobile-web-boot body:not(.web-build) .login-screen .wechat-login-panel::after,
body.mobile-web-build .login-screen .wechat-login-panel::after {
  inset: auto auto auto 50%;
  top: 44%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: clamp(188px, 54vw, 246px);
  max-width: none;
  height: clamp(270px, 52dvh, 370px);
  transform: translate(-50%, -50%);
  opacity: 0.7;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.18) 0 5%, rgba(232, 213, 255, 0.12) 14%, transparent 28%),
    radial-gradient(ellipse at 50% 50%, rgba(24, 9, 48, 0.5) 0 36%, rgba(168, 85, 247, 0.18) 58%, transparent 78%);
  z-index: 2;
  animation: wechatPortalInnerBreath 5.6s ease-in-out infinite;
}

html.mobile-web-boot body:not(.web-build) .login-screen .wechat-login-btn,
body.mobile-web-build .login-screen .wechat-login-btn {
  position: fixed;
  left: 50%;
  right: auto;
  top: calc(44% + min(25dvh, 228px));
  bottom: auto;
  width: 154px;
  min-width: 154px;
  height: 48px;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  border-color: rgba(250, 232, 255, 0.58);
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 255, 255, 0.42), transparent 18%),
    linear-gradient(135deg, rgba(184, 104, 255, 0.96), rgba(86, 35, 160, 0.96));
  box-shadow:
    inset 0 1px 8px rgba(255, 255, 255, 0.34),
    0 0 26px rgba(250, 232, 255, 0.54),
    0 0 66px rgba(217, 70, 239, 0.62),
    0 0 128px rgba(126, 34, 206, 0.42);
  transform: translateX(-50%);
  z-index: 40000;
  animation: wechatEntryLightBreath 3.2s ease-in-out infinite;
}

html.mobile-web-boot body:not(.web-build) .login-screen .wechat-login-btn:hover,
body.mobile-web-build .login-screen .wechat-login-btn:hover {
  transform: translateX(-50%) scale(1.035);
}

html.mobile-web-boot body:not(.web-build) .login-screen .wechat-login-btn span,
body.mobile-web-build .login-screen .wechat-login-btn span {
  max-width: none;
  white-space: nowrap;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.1em;
}

html.mobile-web-boot body:not(.web-build) .login-screen .wechat-login-hint,
body.mobile-web-build .login-screen .wechat-login-hint {
  bottom: max(52px, calc(env(safe-area-inset-bottom) + 42px));
}

html.mobile-web-boot body:not(.web-build) .login-screen .wechat-qr-panel,
body.mobile-web-build .login-screen .wechat-qr-panel {
  bottom: max(102px, calc(env(safe-area-inset-bottom) + 96px));
}

@keyframes wechatPortalFullBreath {
  0%, 100% {
    filter: brightness(0.96) saturate(1);
    transform: translate(-50%, -50%) scale(0.985);
  }
  50% {
    filter: brightness(1.16) saturate(1.12);
    transform: translate(-50%, -50%) scale(1.025);
  }
}

@keyframes wechatPortalInnerBreath {
  0%, 100% {
    opacity: 0.54;
    filter: blur(0.2px) brightness(0.95);
  }
  50% {
    opacity: 0.82;
    filter: blur(0) brightness(1.12);
  }
}

@keyframes wechatEntryLightBreath {
  0%, 100% {
    filter: brightness(0.96) saturate(1);
    box-shadow:
      inset 0 1px 8px rgba(255, 255, 255, 0.3),
      0 0 22px rgba(250, 232, 255, 0.44),
      0 0 54px rgba(217, 70, 239, 0.52),
      0 0 104px rgba(126, 34, 206, 0.34);
  }
  50% {
    filter: brightness(1.18) saturate(1.16);
    box-shadow:
      inset 0 1px 10px rgba(255, 255, 255, 0.42),
      0 0 34px rgba(250, 232, 255, 0.66),
      0 0 86px rgba(217, 70, 239, 0.76),
      0 0 152px rgba(126, 34, 206, 0.5);
  }
}


@media (max-width: 1020px) {
  body.web-build .web-home-shell {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 34px;
    padding-top: 30px;
  }

  body.web-build .web-home-nav {
    margin-bottom: 52px;
  }

  body.web-build .web-home-auth {
    width: min(440px, 100%);
    margin-top: 0;
  }
}

@media (max-width: 719px) {
  body.web-build .web-home-shell {
    width: min(100%, calc(100vw - 32px));
    min-height: 100dvh;
    padding: 28px 0 36px;
  }

  body.web-build .web-home-nav {
    align-items: flex-start;
    margin-bottom: 38px;
  }

  body.web-build .web-home-nav div {
    display: none;
  }

  body.web-build .login-screen h1 {
    font-size: 48px;
  }

  body.web-build .login-screen .lead {
    font-size: 16px;
  }

  body.web-build .web-home-seo-copy {
    font-size: 14px;
  }

  body.web-build .web-home-feature-grid {
    grid-template-columns: 1fr;
  }
}

body:is(.mobile-preview, .web-build.mobile-preview) {
  position: fixed;
  inset: 0;
  width: 100dvw;
  max-width: 100dvw;
  height: 100dvh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0;
  background:
    radial-gradient(circle at 50% 8%, rgba(243, 208, 107, 0.12), transparent 30%),
    linear-gradient(180deg, #05040c 0%, #121020 100%);
  touch-action: pan-y;
}

body:is(.mobile-preview, .web-build.mobile-preview) .phone-shell {
  width: min(390px, 100dvw - 16px);
  max-width: calc(100dvw - 16px);
  height: min(844px, 100dvh - 16px);
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 34px;
  box-shadow: 0 24px 90px rgba(0, 0, 0, 0.52);
}

body:is(.mobile-preview, .web-build.mobile-preview) .screen,
body:is(.mobile-preview, .web-build.mobile-preview) .screen.active,
body:is(.mobile-preview, .web-build.mobile-preview) .daily-screen.active {
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body:is(.mobile-preview, .web-build.mobile-preview) .screen.active {
  overflow-y: auto;
}

body:is(.mobile-preview, .web-build.mobile-preview) .login-screen.active {
  min-height: 100%;
  place-content: center;
  padding: clamp(34px, 7vh, 62px) 22px;
}

body:is(.mobile-preview, .web-build.mobile-preview) .login-screen h1 {
  font-size: 44px;
}

body:is(.mobile-preview, .web-build.mobile-preview) .login-screen .lead {
  font-size: 15px;
}

body:is(.mobile-preview, .web-build.mobile-preview) .auth-card,
body:is(.mobile-preview, .web-build.mobile-preview) .root-wizard,
body:is(.mobile-preview, .web-build.mobile-preview) #baziPanel {
  width: min(100%, 360px);
  max-width: calc(100% - 24px);
}

body:is(.mobile-preview, .web-build.mobile-preview) .top-nav {
  top: max(14px, env(safe-area-inset-top));
  left: 12px;
  right: 12px;
}

body:is(.mobile-preview, .web-build.mobile-preview) .top-nav-center h2 {
  font-size: 18px;
}

body:is(.mobile-preview, .web-build.mobile-preview) .module-page.panel {
  width: calc(100% - 26px);
  height: calc(100% - 190px);
  margin: 82px auto 0;
  padding: 18px 14px;
  border-radius: 22px;
}

body:is(.mobile-preview, .web-build.mobile-preview) .home-float-menu {
  width: calc(100% - 20px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  bottom: max(18px, env(safe-area-inset-bottom));
  border-radius: 30px;
}

body:is(.mobile-preview, .web-build.mobile-preview) .home-float-menu .web-only-nav {
  display: none;
}

body:is(.mobile-preview, .web-build.mobile-preview) .home-float-menu .mobile-only-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body:is(.mobile-preview, .web-build.mobile-preview) .home-float-menu .mobile-hidden-nav {
  display: none;
}

body:is(.mobile-preview, .web-build.mobile-preview) .liuyao-panel .mobile-remove-liuyao-intro {
  display: none;
}

body:is(.mobile-preview, .web-build.mobile-preview) .liuyao-panel .liuyao-question {
  margin-top: 0;
}

body:is(.mobile-preview, .web-build.mobile-preview) .home-float-menu button {
  min-height: 55px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  padding: 0;
  border-radius: 18px;
}

body:is(.mobile-preview, .web-build.mobile-preview) .home-float-menu button span {
  width: 26px;
  height: 26px;
  font-size: 17px;
}

body:is(.mobile-preview, .web-build.mobile-preview) .home-float-menu button em {
  font-size: 10px;
}

body:is(.mobile-preview, .web-build.mobile-preview) .world-sandbox-page {
  height: 100%;
}

body:is(.mobile-preview, .web-build.mobile-preview) .pay-sheet,
body:is(.mobile-preview, .web-build.mobile-preview) .daily-fortune-sheet,
body:is(.mobile-preview, .web-build.mobile-preview) .spirit-sheet,
body:is(.mobile-preview, .web-build.mobile-preview) .profile-tool-sheet,
body:is(.mobile-preview, .web-build.mobile-preview) .calendar-drawer {
  width: calc(100% - 24px);
}

/* 电脑版：十神大皮肤抽卡。 */
body.web-build.desktop-spirit-draw-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.web-build .desktop-spirit-draw-overlay {
  position: fixed;
  inset: 0;
  z-index: 32000;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #f8efe0;
  background:
    linear-gradient(90deg, rgba(29, 112, 118, 0.22) 0 1px, transparent 1px 100%),
    linear-gradient(0deg, rgba(214, 171, 93, 0.12) 0 1px, transparent 1px 100%),
    linear-gradient(135deg, #060813 0%, #17243a 34%, #23152d 66%, #080810 100%);
  background-size: 92px 92px, 92px 92px, auto;
  isolation: isolate;
  opacity: 1;
  transition: opacity 0.38s ease, filter 0.38s ease;
}

body.web-build .desktop-spirit-draw-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(105deg, transparent 0 24%, rgba(246, 212, 139, 0.08) 25%, transparent 36% 100%),
    linear-gradient(245deg, transparent 0 51%, rgba(55, 177, 170, 0.1) 52%, transparent 66% 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 48%, rgba(0, 0, 0, 0.34));
  animation: desktop-draw-scan 16s linear infinite;
}

body.web-build .desktop-draw-rails {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

body.web-build .desktop-draw-rails i {
  position: absolute;
  top: -18%;
  left: calc(var(--rail-i) * 14% - 6%);
  width: 1px;
  height: 138%;
  background: linear-gradient(180deg, transparent, rgba(247, 218, 151, 0.24), transparent);
  transform: rotate(18deg);
  opacity: 0.36;
}

body.web-build .desktop-draw-shell {
  width: min(1220px, calc(100vw - 64px));
  min-height: min(760px, calc(100dvh - 64px));
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 34px;
  align-items: stretch;
  padding: 28px;
  border: 1px solid rgba(247, 218, 151, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 32%),
    rgba(6, 10, 19, 0.78);
  box-shadow: 0 32px 110px rgba(0, 0, 0, 0.54), inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
}

body.web-build .desktop-draw-copy {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 18px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 44%),
    rgba(255, 255, 255, 0.035);
}

body.web-build .desktop-draw-copy > span,
body.web-build .desktop-draw-date {
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid rgba(247, 218, 151, 0.24);
  border-radius: 8px;
  color: #f0cf8a;
  background: rgba(10, 14, 24, 0.62);
  font-size: 12px;
  font-weight: 850;
}

body.web-build .desktop-draw-copy h2 {
  margin: 0;
  color: #fff8e8;
  font-family: "Songti SC", "STSong", serif;
  font-size: 46px;
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: 0;
  text-shadow: 0 12px 36px rgba(0, 0, 0, 0.48);
}

body.web-build .desktop-draw-copy p {
  margin: 0;
  color: rgba(248, 239, 224, 0.72);
  font-size: 15px;
  line-height: 1.9;
}

body.web-build .desktop-draw-copy dl {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
}

body.web-build .desktop-draw-copy dl div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.web-build .desktop-draw-copy dt {
  color: rgba(248, 239, 224, 0.45);
  font-size: 12px;
  font-weight: 800;
}

body.web-build .desktop-draw-copy dd {
  min-width: 0;
  margin: 0;
  color: rgba(255, 248, 232, 0.82);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.55;
}

body.web-build .desktop-draw-stage-wrap {
  position: relative;
  min-width: 0;
  min-height: 610px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 18px;
}

body.web-build .desktop-draw-date {
  justify-self: end;
}

body.web-build .desktop-draw-stage {
  position: relative;
  min-height: 560px;
  display: grid;
  place-items: center;
  perspective: 1400px;
  overflow: visible;
}

body.web-build .desktop-draw-stage::before,
body.web-build .desktop-draw-stage::after {
  content: "";
  position: absolute;
  width: min(620px, 76%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(247, 218, 151, 0.42), transparent);
  opacity: 0.55;
}

body.web-build .desktop-draw-stage::before {
  transform: translateY(-160px);
}

body.web-build .desktop-draw-stage::after {
  transform: translateY(166px);
}

body.web-build .desktop-draw-deck-card {
  position: absolute;
  width: 178px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--desktop-card-accent), white 18%);
  border-radius: 8px;
  background: #10131b;
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.48), inset 0 0 0 3px rgba(255, 255, 255, 0.035);
  transform: translate3d(var(--desktop-card-x), var(--desktop-card-y), 0) rotate(var(--desktop-card-r));
  transform-origin: 50% 86%;
  z-index: var(--desktop-card-z);
  will-change: transform, opacity, filter;
}

body.web-build .desktop-draw-deck-card.is-portrait {
  width: 112px;
  aspect-ratio: 941 / 1672;
}

body.web-build .desktop-draw-deck-card::after,
body.web-build .desktop-draw-result-card::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 242, 204, 0.34);
  border-radius: 6px;
  pointer-events: none;
}

body.web-build .desktop-draw-deck-card img,
body.web-build .desktop-draw-result-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

body.web-build .desktop-draw-deck-card > span {
  position: absolute;
  top: 11px;
  left: 12px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 244, 218, 0.36);
  border-radius: 8px;
  color: #fff9ea;
  background: rgba(0, 0, 0, 0.42);
  font-family: "Songti SC", "STSong", serif;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

body.web-build .desktop-draw-deck-card strong,
body.web-build .desktop-draw-deck-card small {
  position: absolute;
  left: 14px;
  right: 14px;
  z-index: 2;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.95);
}

body.web-build .desktop-draw-deck-card strong {
  bottom: 27px;
  color: #fff9ea;
  font-family: "Songti SC", "STSong", serif;
  font-size: 19px;
  line-height: 1.1;
}

body.web-build .desktop-draw-deck-card small {
  bottom: 12px;
  color: rgba(255, 249, 234, 0.68);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.web-build .desktop-draw-result {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  justify-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(16px);
  transition: opacity 0.46s ease, transform 0.54s ease, visibility 0s linear 0.54s;
}

body.web-build .desktop-draw-result-card {
  position: relative;
  width: min(680px, 74vw);
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--desktop-draw-accent), white 18%);
  border-radius: 8px;
  background: #11141b;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.68), 0 0 70px color-mix(in srgb, var(--desktop-draw-accent), transparent 72%);
  opacity: 0;
  transform: rotateY(86deg) scale(0.74);
  transform-style: preserve-3d;
}

body.web-build .desktop-draw-result-card.is-portrait {
  width: min(340px, 48vh);
  aspect-ratio: 941 / 1672;
}

body.web-build .desktop-draw-result-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 7, 12, 0.04) 36%, rgba(4, 7, 12, 0.86) 100%);
}

body.web-build .desktop-draw-result-copy {
  position: absolute;
  z-index: 3;
  inset: auto 28px 30px;
  display: grid;
  justify-items: start;
  text-align: left;
  color: #fff8e8;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.92);
}

body.web-build .desktop-draw-result-copy small {
  color: #f0cf8a;
  font-size: 12px;
  font-weight: 850;
}

body.web-build .desktop-draw-result-copy b {
  margin-top: 8px;
  font-family: "Songti SC", "STSong", serif;
  font-size: 58px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0;
}

body.web-build .desktop-draw-result-copy em {
  margin-top: 6px;
  color: rgba(255, 248, 232, 0.72);
  font-size: 14px;
  font-style: normal;
  font-weight: 850;
}

body.web-build .desktop-draw-result p {
  margin: 14px 0 0;
  color: rgba(248, 239, 224, 0.58);
  font-size: 13px;
  font-weight: 850;
}

body.web-build .desktop-draw-actions {
  display: grid;
  justify-items: center;
}

body.web-build .desktop-draw-start {
  width: 220px;
  min-height: 66px;
  display: grid;
  place-items: center;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--desktop-draw-accent), white 20%);
  border-radius: 8px;
  color: #121111;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--desktop-draw-accent), white 32%), #f8e7b8),
    #f8e7b8;
  box-shadow: 0 18px 48px color-mix(in srgb, var(--desktop-draw-accent), transparent 70%), inset 0 1px rgba(255, 255, 255, 0.58);
  overflow: hidden;
}

body.web-build .desktop-draw-start::before {
  content: "";
  position: absolute;
  inset: -120% -30%;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.58) 50%, transparent 62%);
  transform: translateX(-78%) rotate(12deg);
  animation: desktop-draw-glint 2.7s ease-in-out infinite;
}

body.web-build .desktop-draw-start span,
body.web-build .desktop-draw-start small {
  position: relative;
  z-index: 1;
}

body.web-build .desktop-draw-start span {
  font-family: "Songti SC", "STSong", serif;
  font-size: 22px;
  font-weight: 750;
  letter-spacing: 0;
}

body.web-build .desktop-draw-start small {
  color: rgba(18, 17, 17, 0.62);
  font-size: 11px;
  font-weight: 850;
}

body.web-build .desktop-draw-start:disabled {
  cursor: progress;
  filter: saturate(0.86);
}

body.web-build .desktop-spirit-draw-overlay.is-shuffling .desktop-draw-copy {
  transform: translateX(-16px);
  opacity: 0.58;
  transition: opacity 0.36s ease, transform 0.46s ease;
}

body.web-build .desktop-spirit-draw-overlay.is-shuffling .desktop-draw-start {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.28s ease, transform 0.32s ease;
}

body.web-build .desktop-spirit-draw-overlay.is-shuffling .desktop-draw-deck-card {
  animation: desktop-draw-gallery 1.22s cubic-bezier(0.62, 0.02, 0.22, 1) forwards;
  animation-delay: calc(var(--desktop-card-i) * 38ms);
}

body.web-build .desktop-spirit-draw-overlay[data-draw-mode="monday-orbit"].is-shuffling .desktop-draw-deck-card { animation-name: desktop-draw-orbit; }
body.web-build .desktop-spirit-draw-overlay[data-draw-mode="tuesday-cascade"].is-shuffling .desktop-draw-deck-card { animation-name: desktop-draw-cascade; }
body.web-build .desktop-spirit-draw-overlay[data-draw-mode="wednesday-cross"].is-shuffling .desktop-draw-deck-card { animation-name: desktop-draw-cross; }
body.web-build .desktop-spirit-draw-overlay[data-draw-mode="thursday-pulse"].is-shuffling .desktop-draw-deck-card { animation-name: desktop-draw-pulse; }
body.web-build .desktop-spirit-draw-overlay[data-draw-mode="friday-split"].is-shuffling .desktop-draw-deck-card { animation-name: desktop-draw-split; }
body.web-build .desktop-spirit-draw-overlay[data-draw-mode="saturday-rise"].is-shuffling .desktop-draw-deck-card { animation-name: desktop-draw-rise; }

body.web-build .desktop-spirit-draw-overlay.is-revealing .desktop-draw-stage::before,
body.web-build .desktop-spirit-draw-overlay.is-revealing .desktop-draw-stage::after {
  opacity: 0;
}

body.web-build .desktop-spirit-draw-overlay.is-revealing .desktop-draw-deck-card {
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.42s ease, filter 0.42s ease;
}

body.web-build .desktop-spirit-draw-overlay.is-revealing .desktop-draw-result {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

body.web-build .desktop-spirit-draw-overlay.is-revealing .desktop-draw-result-card {
  animation: desktop-draw-result-reveal 0.78s 0.08s cubic-bezier(0.2, 0.78, 0.2, 1) forwards;
}

body.web-build .desktop-spirit-draw-overlay.is-leaving {
  opacity: 0;
  filter: blur(8px);
  pointer-events: none;
}

@keyframes desktop-draw-scan {
  to { background-position: 160px 0, -140px 0, 0 0; }
}

@keyframes desktop-draw-glint {
  0%, 28% { transform: translateX(-78%) rotate(12deg); }
  68%, 100% { transform: translateX(78%) rotate(12deg); }
}

@keyframes desktop-draw-gallery {
  0% { transform: translate3d(var(--desktop-card-x), var(--desktop-card-y), 0) rotate(var(--desktop-card-r)); filter: brightness(1); opacity: 1; }
  42% { transform: translate3d(0, -122px, 130px) rotateY(206deg) rotate(8deg) scale(0.88); filter: brightness(1.18); }
  100% { transform: translate3d(0, 14px, 0) rotate(0) scale(0.56); filter: brightness(0.66); opacity: 0.2; }
}

@keyframes desktop-draw-orbit {
  0% { transform: translate3d(var(--desktop-card-x), var(--desktop-card-y), 0) rotate(var(--desktop-card-r)); filter: brightness(1); opacity: 1; }
  40% { transform: translate3d(118px, -78px, 130px) rotateY(240deg) rotate(42deg) scale(0.82); filter: brightness(1.22); }
  72% { transform: translate3d(-82px, 64px, 80px) rotateY(-120deg) rotate(-28deg) scale(0.76); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(0.54); filter: brightness(0.62); opacity: 0.2; }
}

@keyframes desktop-draw-cascade {
  0% { transform: translate3d(var(--desktop-card-x), var(--desktop-card-y), 0) rotate(var(--desktop-card-r)); filter: brightness(1); opacity: 1; }
  36% { transform: translate3d(0, -178px, 100px) rotateX(58deg) rotate(16deg) scale(0.88); filter: brightness(1.2); }
  70% { transform: translate3d(0, 118px, 60px) rotateX(-38deg) rotate(-9deg) scale(0.72); }
  100% { transform: translate3d(0, 24px, 0) rotate(0) scale(0.56); filter: brightness(0.66); opacity: 0.2; }
}

@keyframes desktop-draw-cross {
  0% { transform: translate3d(var(--desktop-card-x), var(--desktop-card-y), 0) rotate(var(--desktop-card-r)); filter: brightness(1); opacity: 1; }
  44% { transform: translate3d(-128px, -70px, 130px) rotateY(-210deg) rotate(-18deg) scale(0.84); filter: brightness(1.2); }
  72% { transform: translate3d(120px, 66px, 70px) rotateY(120deg) rotate(18deg) scale(0.74); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(0.55); filter: brightness(0.64); opacity: 0.2; }
}

@keyframes desktop-draw-pulse {
  0% { transform: translate3d(var(--desktop-card-x), var(--desktop-card-y), 0) rotate(var(--desktop-card-r)); filter: brightness(1); opacity: 1; }
  32% { transform: translate3d(0, -28px, 160px) rotateY(180deg) scale(1.04); filter: brightness(1.26); }
  66% { transform: translate3d(0, 22px, 60px) rotateY(360deg) scale(0.7); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(0.54); filter: brightness(0.62); opacity: 0.2; }
}

@keyframes desktop-draw-split {
  0% { transform: translate3d(var(--desktop-card-x), var(--desktop-card-y), 0) rotate(var(--desktop-card-r)); filter: brightness(1); opacity: 1; }
  40% { transform: translate3d(0, -94px, 120px) rotateY(220deg) rotate(-8deg) scale(0.86); filter: brightness(1.18); }
  70% { transform: translate3d(0, 82px, 70px) rotateY(-90deg) rotate(10deg) scale(0.72); }
  100% { transform: translate3d(0, 8px, 0) rotate(0) scale(0.55); filter: brightness(0.64); opacity: 0.2; }
}

@keyframes desktop-draw-rise {
  0% { transform: translate3d(var(--desktop-card-x), var(--desktop-card-y), 0) rotate(var(--desktop-card-r)); filter: brightness(1); opacity: 1; }
  44% { transform: translate3d(0, 96px, 90px) rotateX(-54deg) rotate(12deg) scale(0.9); filter: brightness(1.16); }
  76% { transform: translate3d(0, -138px, 120px) rotateX(64deg) rotate(-12deg) scale(0.78); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(0.56); filter: brightness(0.66); opacity: 0.2; }
}

@keyframes desktop-draw-result-reveal {
  0% { opacity: 0; transform: rotateY(86deg) scale(0.74); }
  62% { opacity: 1; transform: rotateY(-7deg) scale(1.025); }
  100% { opacity: 1; transform: rotateY(0) scale(1); }
}

@media (max-width: 980px) {
  body.web-build .desktop-draw-shell {
    width: min(100vw - 28px, 760px);
    min-height: calc(100dvh - 28px);
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 14px;
  }

  body.web-build .desktop-draw-copy {
    align-content: start;
    gap: 10px;
    padding: 14px;
  }

  body.web-build .desktop-draw-copy h2 {
    font-size: 32px;
  }

  body.web-build .desktop-draw-copy p {
    font-size: 13px;
    line-height: 1.65;
  }

  body.web-build .desktop-draw-copy dl {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 2px;
  }

  body.web-build .desktop-draw-stage-wrap {
    min-height: 430px;
    gap: 10px;
  }

  body.web-build .desktop-draw-stage {
    min-height: 340px;
    transform: scale(0.74);
    transform-origin: center;
  }

  body.web-build .desktop-draw-date {
    justify-self: start;
  }

  body.web-build .desktop-draw-result-card {
    width: min(520px, 82vw);
  }

  body.web-build .desktop-draw-result-card.is-portrait {
    width: min(270px, 56vw);
  }
}

@media (max-width: 520px) {
  #monthlyFortunePage .report-hero,
  #yearlyFortunePage .report-hero {
    min-height: 138px;
    padding: 16px;
    border-radius: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.web-build .desktop-spirit-draw-overlay *,
  body.web-build .desktop-spirit-draw-overlay *::before,
  body.web-build .desktop-spirit-draw-overlay *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 719px) {
  body.web-build {
    position: fixed;
    inset: 0;
    width: 100dvw;
    max-width: 100dvw;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
    touch-action: pan-y;
  }

  body.web-build .phone-shell {
    width: 100dvw;
    max-width: 100dvw;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  body.web-build .screen,
  body.web-build .screen.active,
  body.web-build .daily-screen.active {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow-x: hidden;
  }

  body.web-build .screen.active {
    overflow-y: auto;
  }

  body.web-build .top-nav {
    top: max(14px, env(safe-area-inset-top));
    left: 12px;
    right: 12px;
  }

  body.web-build .top-nav-center h2 {
    font-size: 18px;
  }

  body.web-build .module-page.panel {
    width: calc(100% - 26px);
    height: calc(100% - 190px);
    margin: 82px auto 0;
    padding: 18px 14px;
    border-radius: 22px;
  }

  body.web-build .home-float-menu {
    width: calc(100% - 20px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
    bottom: max(18px, env(safe-area-inset-bottom));
    border-radius: 30px;
  }

  body.web-build .home-float-menu .web-only-nav {
    display: none;
  }

  body.web-build .home-float-menu .mobile-only-nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.web-build .home-float-menu button {
    min-height: 55px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 0;
    border-radius: 18px;
  }

  body.web-build .home-float-menu button span {
    width: 26px;
    height: 26px;
    font-size: 17px;
  }

  body.web-build .home-float-menu button em {
    font-size: 10px;
  }

  body.web-build .world-sandbox-page {
    height: 100%;
  }
}

@media (max-width: 380px) {
  .paid-grid {
    gap: 10px;
  }

  .paid-grid .premium-module-entry {
    min-height: 158px;
    padding: 14px 12px;
  }

  .paid-grid .premium-module-entry-mark {
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
  }

  .paid-grid .premium-module-entry strong {
    font-size: 16px;
  }

  .paid-grid .premium-module-entry small,
  .paid-grid .premium-module-entry b {
    font-size: 12px;
  }

  .premium-module-entry,
  .fuyao-pavilion-entry,
  .fuyao-pavilion-card,
  .skin-shop-entry,
  .source-license-entry,
  .oracle-tool-entry {
    grid-template-columns: 52px 1fr;
    min-height: 112px;
    gap: 12px;
    padding: 16px 14px;
  }

  .annual-panorama-gift {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    min-height: 142px;
    padding: 15px 12px;
  }

  .annual-panorama-gift-mark {
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 22px;
  }

  .annual-panorama-gift strong {
    font-size: 16px;
    line-height: 1.25;
    white-space: nowrap;
  }

  .annual-panorama-gift small {
    font-size: 12px;
  }

  .annual-panorama-gift b {
    grid-column: 2;
    justify-self: start;
    min-width: 0;
    margin-top: -4px;
  }

  .paid-panel .fuyao-pavilion-entry {
    grid-template-columns: 50px minmax(0, 1fr) auto;
    width: 100%;
    min-height: 84px;
    margin: 0 0 16px;
    padding: 13px;
  }

  .paid-panel .skin-shop-entry {
    grid-template-columns: 54px 1fr;
    width: 100%;
    min-height: 124px;
    margin: 6px 0 22px;
    padding: 16px 14px;
  }

  .paid-panel .source-license-entry {
    grid-template-columns: 54px 1fr;
    width: 100%;
    min-height: 136px;
    margin: 8px 0 0;
    padding: 17px 14px;
  }

  .paid-panel .skin-shop-entry::before {
    top: -12px;
    right: 12px;
    padding: 6px 10px;
    font-size: 11px;
  }

  .paid-panel .source-license-entry::before {
    top: -12px;
    right: 12px;
    padding: 6px 10px;
    font-size: 11px;
  }

  .paid-panel .fuyao-pavilion-entry-mark,
  .paid-panel .skin-shop-entry-mark,
  .paid-panel .source-license-entry-mark {
    width: 54px;
    height: 54px;
  }

  .paid-panel .fuyao-pavilion-entry-mark {
    width: 50px;
    height: 50px;
  }

  .paid-panel .fuyao-pavilion-entry strong,
  .paid-panel .skin-shop-entry strong,
  .paid-panel .source-license-entry strong {
    font-size: 17px;
  }

  .paid-panel .fuyao-pavilion-entry strong {
    font-size: 18px;
    white-space: nowrap;
  }

  .premium-module-entry-mark,
  .fuyao-pavilion-entry-mark,
  .fuyao-pavilion-card-mark,
  .skin-shop-entry-mark,
  .source-license-entry-mark,
  .oracle-tool-entry-mark {
    width: 52px;
    height: 52px;
  }

  .premium-module-entry b,
  .fuyao-pavilion-entry b,
  .fuyao-pavilion-card b,
  .skin-shop-entry b,
  .source-license-entry b,
  .oracle-tool-entry b {
    grid-column: 2;
  }

  .paid-panel .fuyao-pavilion-entry b {
    grid-column: auto;
  }

  .skin-card {
    grid-template-columns: 70px 1fr;
  }

  .skin-card-suite {
    grid-template-columns: 78px 1fr;
  }

  .skin-card-preview,
  .skin-card-preview img {
    width: 70px;
  }

  .skin-card-preview img {
    height: 70px;
  }

  .skin-card-suite .skin-card-preview,
  .skin-card-suite .skin-card-preview img {
    width: 78px;
  }

  .skin-card-suite .skin-card-preview img {
    height: 104px;
  }

  .skin-card-variant-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
  }

  .skin-card-variant-grid i {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }
}

/* Independent persistent world */
.world-page {
  --world-ink: #17251d;
  --world-paper: #eef0d8;
  --world-gold: #d4b268;
  --world-green: #66856a;
  min-height: 100%;
  padding: 0 0 calc(112px + env(safe-area-inset-bottom));
  color: #f5f1df;
  background: #101a18;
}

.world-topbar {
  position: sticky;
  z-index: 30;
  top: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px;
  border-bottom: 1px solid rgba(238, 232, 198, 0.14);
  background: rgba(12, 20, 18, 0.94);
  backdrop-filter: blur(18px);
}

.world-topbar > button {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(238, 232, 198, 0.18);
  border-radius: 50%;
  color: #f4edd2;
  background: rgba(255, 255, 255, 0.045);
  font-size: 20px;
}

.world-topbar > div {
  min-width: 0;
  text-align: center;
}

.world-topbar span,
.world-topbar strong,
.world-topbar small {
  display: block;
}

.world-topbar span {
  color: var(--world-gold);
  font-size: 10px;
  font-weight: 900;
}

.world-topbar strong {
  margin-top: 2px;
  font-family: "Songti SC", "STSong", serif;
  font-size: 21px;
  letter-spacing: 0;
}

.world-topbar small {
  margin-top: 1px;
  color: rgba(245, 241, 223, 0.52);
  font-size: 9px;
}

.world-stage {
  position: relative;
  height: clamp(500px, 67dvh, 660px);
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 83% 13%, rgba(247, 207, 105, 0.72) 0 6%, transparent 6.3%),
    linear-gradient(180deg, #c7d7b6 0 28%, #91ad8c 28% 100%);
  background-size: 32px 32px, 32px 32px, auto, auto;
}

.world-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 17% 4% 6%;
  clip-path: polygon(9% 18%, 29% 3%, 48% 10%, 64% 2%, 92% 21%, 97% 53%, 82% 82%, 51% 96%, 17% 84%, 2% 56%);
  background: rgba(103, 134, 90, 0.82);
  box-shadow: inset 0 0 0 1px rgba(38, 67, 42, 0.2);
}

.world-weather {
  position: absolute;
  z-index: 1;
  top: 16px;
  left: 14px;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(31, 60, 39, 0.22);
  border-radius: 50%;
  background: rgba(236, 240, 216, 0.42);
}

.world-weather i {
  position: absolute;
  left: 27px;
  top: 7px;
  width: 2px;
  height: 44px;
  background: #d85f4b;
  transform: rotate(24deg);
  transform-origin: 50% 88%;
}

.world-waterways {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.world-waterways path {
  fill: none;
  stroke: rgba(97, 180, 196, 0.72);
  stroke-width: 2.1;
  vector-effect: non-scaling-stroke;
}

.world-roads {
  position: absolute;
  z-index: 0;
  inset: 21% 12% 15%;
  background:
    linear-gradient(24deg, transparent 47%, rgba(230, 218, 176, 0.68) 48% 51%, transparent 52%),
    linear-gradient(116deg, transparent 47%, rgba(230, 218, 176, 0.68) 48% 51%, transparent 52%);
}

.world-building {
  position: absolute;
  z-index: 3;
  width: 64px;
  min-height: 62px;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 0;
  border: 0;
  color: #192219;
  background: transparent;
}

.world-building b {
  position: relative;
  width: 44px;
  height: 39px;
  display: grid;
  place-items: center;
  border: 2px solid #75523a;
  border-radius: 3px;
  background: #ead9aa;
  box-shadow: 0 8px 14px rgba(37, 50, 35, 0.2);
  font-family: "Songti SC", "STSong", serif;
  font-size: 17px;
}

.world-building b::before {
  content: "";
  position: absolute;
  left: -7px;
  top: -13px;
  width: 54px;
  height: 16px;
  clip-path: polygon(50% 0, 100% 74%, 91% 100%, 9% 100%, 0 74%);
  background: #82533d;
}

.world-building span {
  padding: 2px 6px;
  border-radius: 7px;
  color: #fff8de;
  background: rgba(19, 33, 24, 0.8);
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.world-building-hall { left: 42%; top: 22%; }
.world-building-market { right: 12%; top: 37%; }
.world-building-tea { left: 13%; top: 43%; }
.world-building-home { right: 25%; bottom: 15%; }
.world-building-station { left: 24%; bottom: 14%; }

.world-residents {
  position: absolute;
  z-index: 7;
  inset: 0;
  pointer-events: none;
}

.world-resident {
  --resident-color: #d4b268;
  position: absolute;
  left: var(--resident-x, 50%);
  top: var(--resident-y, 55%);
  width: 68px;
  display: grid;
  justify-items: center;
  padding: 0;
  border: 0;
  color: #fff;
  background: transparent;
  pointer-events: auto;
  transform: translate(-50%, -50%);
  transition: left 1.4s ease, top 1.4s ease;
}

.world-resident img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border: 3px solid var(--resident-color);
  border-radius: 50%;
  background: #1a2820;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--resident-color), transparent 78%), 0 9px 18px rgba(20, 35, 24, 0.3);
}

.world-resident b {
  position: absolute;
  right: 5px;
  top: 35px;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #152017;
  background: var(--resident-color);
  font-size: 9px;
}

.world-resident span {
  max-width: 68px;
  overflow: hidden;
  margin-top: 4px;
  padding: 2px 6px;
  border-radius: 7px;
  background: rgba(17, 31, 22, 0.82);
  font-size: 9px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.world-mind-panel {
  position: absolute;
  z-index: 20;
  right: 10px;
  bottom: 10px;
  width: min(294px, calc(100% - 20px));
  max-height: 76%;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid rgba(237, 218, 155, 0.36);
  border-radius: 8px;
  color: #f8f4e5;
  background: rgba(15, 26, 21, 0.94);
  box-shadow: 0 20px 42px rgba(18, 31, 22, 0.42);
}

.world-mind-panel > button {
  position: absolute;
  right: 9px;
  top: 9px;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.world-mind-panel header {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 9px;
  align-items: center;
  padding-right: 30px;
}

.world-mind-panel header img {
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: 50%;
}

.world-mind-panel header span,
.world-mind-panel header strong,
.world-mind-panel > div span {
  display: block;
}

.world-mind-panel header span {
  color: var(--world-gold);
  font-size: 9px;
}

.world-mind-panel header strong { margin-top: 3px; font-size: 15px; }

.world-mind-panel > div {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.world-mind-panel > div span { color: rgba(255, 255, 255, 0.48); font-size: 8px; font-weight: 900; }
.world-mind-panel > div p,
.world-mind-panel > div strong { margin: 3px 0 0; color: #fff; font-size: 10px; line-height: 1.5; }

.world-live-panel {
  padding: 14px 15px 12px;
  border-top: 1px solid rgba(237, 218, 155, 0.16);
  border-bottom: 1px solid rgba(237, 218, 155, 0.12);
  background: #111d1a;
}

.world-live-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.world-live-panel span,
.world-live-panel strong { display: block; }
.world-live-panel span { color: var(--world-gold); font-size: 9px; font-weight: 900; }
.world-live-panel strong { margin-top: 3px; color: #fff; font-size: 15px; }
.world-live-panel em { color: #9ad0a7; font-size: 10px; font-style: normal; }
.world-live-panel > p { margin: 7px 0 0; color: rgba(245, 241, 223, 0.62); font-size: 11px; line-height: 1.6; }

.world-event-log {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin-top: 10px;
  scrollbar-width: none;
}

.world-event-log::-webkit-scrollbar { display: none; }

.world-event-log span {
  flex: 0 0 auto;
  max-width: 230px;
  padding: 6px 8px;
  border-left: 2px solid var(--world-gold);
  color: rgba(245, 241, 223, 0.72);
  background: rgba(255, 255, 255, 0.04);
  font-size: 9px;
  line-height: 1.45;
}

.world-dock {
  position: fixed;
  z-index: 25;
  left: 50%;
  bottom: max(10px, env(safe-area-inset-bottom));
  width: min(410px, calc(100% - 20px));
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px 66px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(237, 218, 155, 0.22);
  border-radius: 8px;
  background: rgba(12, 21, 18, 0.94);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
  transform: translateX(-50%);
}

.world-speed {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
}

.world-speed button {
  min-width: 0;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.54);
  background: rgba(255, 255, 255, 0.04);
  font-size: 9px;
}

.world-speed button.active {
  border-color: rgba(212, 178, 104, 0.48);
  color: #1b241b;
  background: var(--world-gold);
}

.world-dock > button {
  min-width: 0;
  height: 46px;
  display: grid;
  place-items: center;
  gap: 1px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.world-dock > button span { font-size: 15px; font-weight: 900; }
.world-dock > button em { font-size: 8px; font-style: normal; }

.world-sheet {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 0;
  width: min(430px, 100%);
  max-height: min(72dvh, 620px);
  overflow-y: auto;
  padding: 16px 15px calc(20px + env(safe-area-inset-bottom));
  border: 1px solid rgba(237, 218, 155, 0.24);
  border-radius: 8px 8px 0 0;
  color: #f7f2df;
  background: #14211d;
  box-shadow: 0 -22px 54px rgba(0, 0, 0, 0.46);
  transform: translateX(-50%);
}

.world-sheet > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 13px;
}

.world-sheet > header span,
.world-sheet > header strong { display: block; }
.world-sheet > header span { color: var(--world-gold); font-size: 9px; }
.world-sheet > header strong { margin-top: 3px; font-size: 16px; }
.world-sheet > header button { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, 0.07); }

.world-resident-picker {
  display: grid;
  gap: 7px;
}

.world-resident-choice {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 54px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
  color: #fff;
  background: rgba(255, 255, 255, 0.035);
  text-align: left;
}

.world-resident-choice img { width: 42px; height: 42px; object-fit: cover; border-radius: 50%; }
.world-resident-choice strong,
.world-resident-choice small { display: block; }
.world-resident-choice small { margin-top: 2px; color: rgba(255, 255, 255, 0.5); font-size: 9px; }
.world-resident-choice em { color: rgba(255, 255, 255, 0.42); font-size: 10px; font-style: normal; }
.world-resident-choice.selected em { color: #9ad0a7; }

.world-sheet label {
  display: grid;
  gap: 6px;
  margin-top: 11px;
}

.world-sheet label > span { color: rgba(255, 255, 255, 0.58); font-size: 10px; font-weight: 900; }
.world-sheet select,
.world-sheet textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 6px;
  color: #fff;
  background: rgba(4, 10, 7, 0.46);
  font: inherit;
}
.world-sheet select { height: 42px; padding: 0 10px; }
.world-sheet textarea { padding: 10px; resize: none; line-height: 1.55; }
.world-sheet select option { color: #111; }

.world-create-event {
  width: 100%;
  height: 46px;
  margin-top: 14px;
  border: 0;
  border-radius: 6px;
  color: #172018;
  background: var(--world-gold);
  font-weight: 900;
}

@media (max-width: 370px) {
  .world-dock { grid-template-columns: minmax(0, 1fr) 52px 58px; }
  .world-building { transform: scale(0.9); }
}

/* Card theater interaction pass: five-element frames, flip cards and round feedback. */
.sandbox-floating-back {
  position: fixed;
  left: max(8px, env(safe-area-inset-left));
  top: 50dvh;
  width: 36px;
  height: 36px;
  min-height: 36px;
}

.sandbox-floating-back::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
}

.sandbox-floating-back span { font-size: 23px; }

.sandbox-card-scene {
  min-height: 224px;
  border-color: rgba(240, 201, 107, 0.42);
  background: var(--scenario-bg), rgba(7, 12, 13, 0.96);
  animation: sandboxCardDealIn 360ms cubic-bezier(0.2, 0.8, 0.22, 1) both;
}

@supports (color: color-mix(in srgb, white, black)) {
  .sandbox-card-scene {
    border-color: color-mix(in srgb, var(--card-color), #fff 18%);
    background:
      radial-gradient(circle at 78% 16%, color-mix(in srgb, var(--card-color), transparent 42%), transparent 34%),
      radial-gradient(circle at 25% 4%, rgba(255, 255, 255, 0.16), transparent 32%),
      var(--scenario-bg),
      rgba(7, 12, 13, 0.96);
  }
}

.sandbox-card-scene-art {
  position: absolute !important;
  z-index: 0 !important;
  top: 42px;
  right: 22px;
  width: 112px;
  height: 112px;
  display: grid;
  place-items: center;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.015) 62%, transparent 64%);
  box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.06);
}

.sandbox-card-scene-art > span {
  color: rgba(255, 249, 224, 0.9);
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 28px;
  font-weight: 950;
  text-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.sandbox-card-scene-art i {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--card-color, #f0c96b);
  box-shadow: 0 0 13px var(--card-color, #f0c96b);
}

.sandbox-card-scene-art i:nth-of-type(1) { left: 4px; top: 50%; }
.sandbox-card-scene-art i:nth-of-type(2) { right: 12px; top: 12px; }
.sandbox-card-scene-art i:nth-of-type(3) { right: 16px; bottom: 10px; }

.sandbox-card-scene-venue,
.sandbox-card-scene > strong,
.sandbox-card-scene-stats,
.sandbox-card-scene footer {
  max-width: calc(100% - 112px);
}

.sandbox-card-scene > strong {
  max-width: min(72%, 440px);
  padding-right: 0;
}

.sandbox-card-scene-stats {
  width: min(280px, calc(100% - 82px));
}

.sandbox-card-scenario-strip,
.sandbox-card-profile-deck {
  padding-top: 15px;
  padding-bottom: 22px;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.sandbox-card-scenario-strip button,
.sandbox-card-profile {
  scroll-snap-align: center;
}

.sandbox-card-profile {
  --element-glow: #7ee1c5;
  --element-deep: rgba(37, 95, 78, 0.9);
  display: block;
  min-height: 292px;
  padding: 0;
  border-color: rgba(126, 225, 197, 0.5);
  background:
    radial-gradient(circle at 50% 18%, rgba(126, 225, 197, 0.2), transparent 34%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025)),
    rgba(7, 12, 13, 0.92);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.16);
  perspective: 900px;
  transform: none;
}

.sandbox-card-element-wood { --element-glow: #78d694; --element-deep: rgba(35, 100, 65, 0.92); }
.sandbox-card-element-fire { --element-glow: #ef8c72; --element-deep: rgba(122, 48, 40, 0.92); }
.sandbox-card-element-earth { --element-glow: #d8ad67; --element-deep: rgba(105, 76, 37, 0.92); }
.sandbox-card-element-metal { --element-glow: #d9e4e8; --element-deep: rgba(70, 84, 91, 0.94); }
.sandbox-card-element-water { --element-glow: #72bde7; --element-deep: rgba(38, 75, 111, 0.94); }

.sandbox-card-profile.sandbox-card-element-wood,
.sandbox-card-profile.sandbox-card-element-fire,
.sandbox-card-profile.sandbox-card-element-earth,
.sandbox-card-profile.sandbox-card-element-metal,
.sandbox-card-profile.sandbox-card-element-water {
  border-color: var(--element-glow);
  background:
    radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--element-glow), transparent 68%), transparent 34%),
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.14), transparent 25%),
    linear-gradient(160deg, var(--element-deep), rgba(7, 12, 13, 0.96));
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.32),
    0 0 24px color-mix(in srgb, var(--element-glow), transparent 78%),
    inset 0 1px rgba(255, 255, 255, 0.18);
}

.sandbox-card-profile.selected,
.sandbox-card-profile.selected:hover {
  transform: translateY(-3px);
  border-color: var(--element-glow);
  box-shadow:
    0 20px 42px rgba(0, 0, 0, 0.34),
    0 0 0 3px color-mix(in srgb, var(--element-glow), transparent 80%),
    0 0 28px color-mix(in srgb, var(--element-glow), transparent 72%);
}

.sandbox-card-profile.selected::after { content: none; }

.sandbox-card-profile.just-added {
  animation: sandboxCardJoined 760ms cubic-bezier(0.2, 0.78, 0.2, 1);
}

@keyframes sandboxCardJoined {
  0% {
    opacity: 0.28;
    transform: translateY(14px) scale(0.94);
    filter: brightness(1.7);
  }
  58% {
    opacity: 1;
    transform: translateY(-5px) scale(1.02);
    filter: brightness(1.25);
  }
  100% {
    transform: translateY(-3px) scale(1);
    filter: brightness(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sandbox-card-profile.just-added { animation: none; }
}

.sandbox-card-profile > .sandbox-card-frame {
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), inset 0 0 30px rgba(255, 255, 255, 0.04);
}

.sandbox-card-profile > .sandbox-card-corner-mark {
  z-index: 8;
  color: #101814;
  background: radial-gradient(circle at 35% 22%, #fff, var(--element-glow) 62%, var(--element-deep));
}

.sandbox-card-profile > .sandbox-card-face {
  position: absolute;
  z-index: 3;
  inset: 14px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: opacity 360ms ease, transform 460ms cubic-bezier(0.2, 0.75, 0.2, 1);
}

.sandbox-card-face-front {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr auto;
  align-content: start;
  gap: 7px;
  opacity: 1;
  transform: rotateY(0deg);
}

.sandbox-card-face-back {
  display: grid;
  align-content: center;
  gap: 9px;
  padding: 22px 14px 12px;
  opacity: 0;
  transform: rotateY(180deg);
}

.sandbox-card-profile.revealed .sandbox-card-face-front {
  opacity: 0;
  pointer-events: none;
  transform: rotateY(-180deg);
}

.sandbox-card-profile.revealed .sandbox-card-face-back {
  opacity: 1;
  transform: rotateY(0deg);
}

.sandbox-card-face-front > img {
  width: 82px;
  height: 82px;
  justify-self: center;
  border-color: var(--element-glow);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.07), 0 0 22px var(--element-glow), 0 11px 20px rgba(0, 0, 0, 0.3);
}

.sandbox-card-face-front > strong,
.sandbox-card-face-front > small {
  display: block;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sandbox-card-face-front > strong {
  color: #fff;
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 20px;
}

.sandbox-card-face-front > small {
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  font-weight: 800;
}

.sandbox-card-profile .sandbox-card-stat-row {
  align-self: end;
}

.sandbox-card-profile .sandbox-card-stat-row span {
  padding: 7px 4px;
}

.sandbox-card-profile .sandbox-card-stat-row em {
  display: block;
  margin-top: 3px;
  padding: 0;
  border: 0;
  color: rgba(255, 255, 255, 0.52);
  font-size: 8px;
}

.sandbox-card-face-front > em {
  align-self: end;
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 7px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.58);
  font-size: 9px;
  font-style: normal;
}

.sandbox-card-face-front > em b {
  color: var(--element-glow);
}

.sandbox-card-face-back > small,
.sandbox-card-face-back > strong,
.sandbox-card-face-back > p,
.sandbox-card-face-back > em {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: left;
}

.sandbox-card-face-back > small {
  color: var(--element-glow);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: 0.1em;
}

.sandbox-card-face-back > strong {
  color: #fff;
  font-family: ui-serif, "Songti SC", "STSong", serif;
  font-size: 19px;
  line-height: 1.3;
}

.sandbox-card-face-back > p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
  line-height: 1.6;
}

.sandbox-card-face-back > em {
  color: rgba(255, 255, 255, 0.42);
  font-size: 9px;
  font-style: normal;
  line-height: 1.5;
}

.sandbox-card-back-rule {
  height: 1px;
  margin: 3px 0;
  background: linear-gradient(90deg, var(--element-glow), transparent);
}

.sandbox-card-remove {
  z-index: 12;
  width: 30px;
  height: 30px;
}

.sandbox-card-remove::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
}

.sandbox-card-profile-placeholder {
  min-height: 230px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 16px;
  border-color: rgba(240, 201, 107, 0.36);
  background: radial-gradient(circle at 50% 42%, rgba(240, 201, 107, 0.12), transparent 40%), rgba(255, 255, 255, 0.035);
  transform: none;
}

.sandbox-card-profile-placeholder:hover { transform: none; }

.sandbox-card-chemistry {
  display: grid;
  gap: 11px;
  padding: 13px;
  border: 1px solid rgba(126, 225, 197, 0.2);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(126, 225, 197, 0.08), rgba(255, 255, 255, 0.035));
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

.sandbox-card-chemistry.hidden { display: none; }

.sandbox-card-chemistry > header,
.sandbox-card-chemistry-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sandbox-card-chemistry > header span,
.sandbox-card-chemistry > header strong { display: block; }
.sandbox-card-chemistry > header span { color: #7ee1c5; font-size: 9px; font-weight: 900; }
.sandbox-card-chemistry > header strong { margin-top: 2px; color: #fff; font-size: 14px; }
.sandbox-card-chemistry > header em { padding: 5px 9px; border-radius: 999px; color: #142019; background: #8ce0ae; font-size: 10px; font-style: normal; font-weight: 950; }

.sandbox-card-chemistry-cast {
  min-width: 82px;
  display: flex;
  align-items: center;
  padding-left: 6px;
}

.sandbox-card-chemistry-cast img,
.sandbox-card-chemistry-cast b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  margin-left: -7px;
  object-fit: cover;
  border: 2px solid var(--chemistry-color, #f0c96b);
  border-radius: 50%;
  background: #17201e;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.26);
}

.sandbox-card-chemistry-cast b { color: #fff; font-size: 9px; }

.sandbox-card-chemistry-bars {
  min-width: 0;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
}

.sandbox-card-chemistry-bars > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(26px, 1fr) 22px;
  gap: 5px;
  align-items: center;
}

.sandbox-card-chemistry-bars em,
.sandbox-card-chemistry-bars strong { color: rgba(255, 255, 255, 0.62); font-size: 8px; font-style: normal; }
.sandbox-card-chemistry-bars strong { color: #fff; text-align: right; }
.sandbox-card-chemistry-bars i { height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.sandbox-card-chemistry-bars i b { display: block; width: var(--chemistry-value); height: 100%; border-radius: inherit; background: var(--chemistry-color); }

.sandbox-card-start-dock {
  position: relative;
  bottom: auto;
  margin-bottom: max(10px, calc(env(safe-area-inset-bottom) + 6px));
}

.world-sandbox-page.sandbox-profile-library-open { overflow: hidden; }
.sandbox-profile-library-list { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

.sandbox-launch-overlay {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
  pointer-events: none;
  opacity: 0;
  background: rgba(5, 8, 11, 0.94);
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--launch-color, #f0c96b), transparent 66%), transparent 44%), rgba(5, 8, 11, 0.92);
  backdrop-filter: blur(18px) saturate(1.08);
  transition: opacity 180ms ease;
}

.sandbox-launch-overlay.active { pointer-events: auto; opacity: 1; }

.sandbox-launch-table {
  width: min(330px, 88vw);
  min-height: 390px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  overflow: hidden;
  padding: 28px 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 28px;
  color: #fff;
  background: var(--launch-bg), rgba(8, 13, 16, 0.96);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.48), inset 0 1px rgba(255, 255, 255, 0.18);
  transform: scale(0.96);
  transition: transform 320ms ease;
}

.sandbox-launch-overlay.active .sandbox-launch-table { transform: scale(1); }

.sandbox-launch-scene {
  width: 72px;
  height: 92px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 2px solid var(--launch-color, #f0c96b);
  border-radius: 15px;
  background: rgba(7, 12, 14, 0.72);
  box-shadow: 0 0 24px rgba(240, 201, 107, 0.24);
  box-shadow: 0 0 28px color-mix(in srgb, var(--launch-color, #f0c96b), transparent 58%);
  animation: sandboxLaunchScene 760ms ease both;
}

.sandbox-launch-scene b { font-family: ui-serif, "Songti SC", serif; font-size: 25px; }
.sandbox-launch-scene em { max-width: 58px; overflow: hidden; color: rgba(255, 255, 255, 0.68); font-size: 8px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }

.sandbox-launch-hand {
  position: relative;
  width: 230px;
  height: 126px;
}

.sandbox-launch-hand > span {
  position: absolute;
  left: 50%;
  top: 8px;
  width: 72px;
  height: 104px;
  overflow: hidden;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 7px;
  padding: 8px;
  border: 2px solid var(--launch-card-color, #f0c96b);
  border-radius: 14px;
  background: #111a1b;
  box-shadow: 0 13px 28px rgba(0, 0, 0, 0.34);
  transform: translateX(-50%) rotate(var(--launch-rotate, 0deg)) translateY(var(--launch-shift, 0));
  transform-origin: 50% 120%;
  animation: sandboxLaunchCard 620ms cubic-bezier(0.2, 0.8, 0.22, 1) both;
  animation-delay: var(--launch-delay, 0ms);
}

.sandbox-launch-hand img { width: 48px; height: 48px; object-fit: cover; border: 2px solid var(--launch-card-color); border-radius: 50%; }
.sandbox-launch-hand b { max-width: 58px; overflow: hidden; color: #fff; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.sandbox-launch-table > strong { font-family: ui-serif, "Songti SC", serif; font-size: 22px; }
.sandbox-launch-table > small { color: rgba(255, 255, 255, 0.58); font-size: 10px; }

.sandbox-turn-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  max-width: 430px;
  margin: 0 auto 9px;
  padding: 0 5px;
}

.sandbox-turn-track::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 8%;
  right: 8%;
  top: 14px;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
}

.sandbox-turn-track > span {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 2px;
  color: rgba(255, 255, 255, 0.34);
}

.sandbox-turn-track b {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: #11191b;
  font-size: 9px;
}

.sandbox-turn-track em { font-size: 8px; font-style: normal; }
.sandbox-turn-track .done b { color: #142019; border-color: var(--turn-color); background: var(--turn-color); }
.sandbox-turn-track .done { color: rgba(255, 255, 255, 0.62); }
.sandbox-turn-track .current b { color: #fff; border-color: var(--turn-color); box-shadow: 0 0 0 4px color-mix(in srgb, var(--turn-color), transparent 78%), 0 0 18px color-mix(in srgb, var(--turn-color), transparent 48%); }
.sandbox-turn-track .current { color: var(--turn-color); }

.sandbox-moment-card {
  left: 50%;
  width: min(82%, 310px);
  padding: 11px 13px 12px;
  border: 1px solid color-mix(in srgb, var(--moment-accent, #f0c96b), white 16%);
  background: linear-gradient(145deg, color-mix(in srgb, var(--moment-accent, #f0c96b), transparent 86%), rgba(9, 14, 18, 0.82));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3), 0 0 22px color-mix(in srgb, var(--moment-accent, #f0c96b), transparent 82%);
  transform: translateX(-50%);
  transform-origin: 50% 0;
}

.sandbox-moment-card-head {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
}

.sandbox-moment-rune {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #11191a;
  background: var(--moment-accent, #f0c96b);
  font-family: ui-serif, "Songti SC", serif;
  font-size: 13px;
}

.sandbox-moment-pair { display: flex; padding-right: 3px; }
.sandbox-moment-pair img { width: 25px; height: 25px; margin-left: -7px; object-fit: cover; border: 2px solid var(--moment-accent, #f0c96b); border-radius: 50%; background: #17201e; }
.sandbox-moment-card.revealing { animation: sandboxMomentReveal 660ms cubic-bezier(0.2, 0.8, 0.22, 1) both; }

.sandbox-metric { position: relative; animation: sandboxMetricPop 300ms ease both; }
.sandbox-metric > em { position: absolute; top: 7px; right: 7px; padding: 2px 4px; border-radius: 999px; color: rgba(255, 255, 255, 0.48); background: rgba(255, 255, 255, 0.06); font-size: 8px; font-style: normal; font-weight: 900; }
.sandbox-metric[data-tone="better"] > em { color: #8ce0ae; background: rgba(114, 214, 160, 0.11); }
.sandbox-metric[data-tone="worse"] > em { color: #f0aaa0; background: rgba(219, 132, 120, 0.11); }

.sandbox-intervention-choice {
  min-height: 76px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 3px 7px;
  align-items: center;
  padding: 9px;
  text-align: left;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
}

.sandbox-intervention-choice > b {
  grid-row: 1 / 3;
  width: 28px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(240, 201, 107, 0.34);
  border-radius: 8px;
  color: #f0c96b;
  background: rgba(240, 201, 107, 0.08);
  font-family: ui-serif, "Songti SC", serif;
}

.sandbox-intervention-choice > span { color: #fff; font-size: 10px; line-height: 1.35; }
.sandbox-intervention-choice > em { color: rgba(255, 255, 255, 0.36); font-size: 8px; font-style: normal; }
.sandbox-intervention-choice.used > b { color: #142019; border-color: rgba(20, 32, 25, 0.2); background: rgba(255, 255, 255, 0.32); }

.sandbox-result.revealing .sandbox-result-verdict { animation: sandboxVerdictReveal 720ms cubic-bezier(0.2, 0.8, 0.22, 1) both; }
.sandbox-result.revealing .sandbox-result-dashboard { animation: sandboxCardDealIn 520ms 180ms ease both; }

@keyframes sandboxCardDealIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes sandboxLaunchScene {
  from { opacity: 0; transform: translateY(-20px) rotateY(70deg); }
  to { opacity: 1; transform: translateY(0) rotateY(0); }
}

@keyframes sandboxLaunchCard {
  from { opacity: 0; transform: translateX(-50%) translateY(70px) scale(0.7); }
}

@keyframes sandboxMomentReveal {
  0% { opacity: 0; transform: translateX(-50%) translateY(-10px) rotateY(78deg) scale(0.92); }
  66% { opacity: 1; transform: translateX(-50%) translateY(2px) rotateY(-5deg) scale(1.02); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) rotateY(0) scale(1); }
}

@keyframes sandboxMetricPop {
  from { opacity: 0.55; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes sandboxVerdictReveal {
  from { opacity: 0; transform: rotateX(62deg) translateY(-12px); }
  to { opacity: 1; transform: rotateX(0) translateY(0); }
}

@media (hover: hover) and (pointer: fine) {
  .sandbox-card-profile:not(.revealed):hover,
  .sandbox-card-profile:focus-visible { transform: translateY(-5px); }
}

@media (hover: none), (pointer: coarse) {
  .sandbox-card-profile:hover { transform: none; }
  .sandbox-card-profile.selected:hover { transform: translateY(-3px); }
}

@media (max-width: 430px) {
  .sandbox-lobby.card-layout .sandbox-lobby-hero {
    min-height: 118px;
    padding: 13px 112px 13px 14px;
  }

  .sandbox-lobby.card-layout .sandbox-lobby-copy h4 { font-size: 19px; }
  .sandbox-lobby.card-layout .sandbox-lobby-copy p { max-height: 34px; overflow: hidden; font-size: 10px; line-height: 1.55; }
  .sandbox-lobby.card-layout .sandbox-intro-tags { display: none; }
  .sandbox-lobby.card-layout .sandbox-lobby-visual { right: -8px; transform: scale(0.78); transform-origin: center right; }

  .sandbox-card-lobby { gap: 11px; margin-inline: 9px; padding-top: 7px; }
  .sandbox-card-theater-head div small { max-width: 240px; font-size: 9px; }
  .sandbox-card-theater-head strong { font-size: 19px; }

  .sandbox-card-scene {
    min-height: 210px;
    padding: 16px;
    border-radius: 23px;
  }

  .sandbox-card-scene-art { top: 48px; right: 14px; width: 92px; height: 92px; }
  .sandbox-card-scene-art > span { font-size: 22px; }
  .sandbox-card-scene > strong { max-width: calc(100% - 82px); font-size: 24px; }
  .sandbox-card-scene-venue { max-width: calc(100% - 82px); font-size: 14px !important; text-align: left; }
  .sandbox-card-scene-stats { width: calc(100% - 72px); }
  .sandbox-card-scene footer { max-width: 100%; }

  .sandbox-card-profile-deck { padding-top: 14px; padding-bottom: 18px; }
  .sandbox-card-profile { flex-basis: min(72vw, 246px); min-height: 284px; }
  .sandbox-card-profile-placeholder { flex-basis: min(52vw, 190px); min-height: 220px; }

  .sandbox-card-chemistry-body { align-items: flex-start; }
  .sandbox-card-chemistry-cast { min-width: 66px; padding-top: 3px; }
  .sandbox-card-chemistry-cast img,
  .sandbox-card-chemistry-cast b { width: 29px; height: 29px; }
  .sandbox-card-chemistry-bars { gap: 6px 7px; }
  .sandbox-card-chemistry-bars > span { grid-template-columns: 24px minmax(18px, 1fr) 18px; gap: 3px; }

  .sandbox-card-consent { padding: 10px 11px; font-size: 10px; }
  .sandbox-card-start-dock { grid-template-columns: minmax(0, 1fr) 116px; padding: 9px; }
  .sandbox-card-start-dock .sandbox-start-button { min-width: 0; padding-inline: 11px; }

  .sandbox-time-control { margin-bottom: 7px; }
  .sandbox-turn-track { gap: 3px; margin-bottom: 7px; }
  .sandbox-turn-track b { width: 26px; height: 26px; }
  .sandbox-turn-track::before { top: 12px; }
  .sandbox-turn-track em { font-size: 7px; }
  .sandbox-moment-card { top: 9px; width: min(86%, 298px); }
  .sandbox-intervention-choice { min-height: 68px; padding: 7px; }
  .sandbox-intervention-choice > b { width: 25px; height: 33px; }

  .sandbox-result-verdict {
    grid-template-columns: 74px minmax(0, 1fr);
    padding: 14px;
    border-radius: 22px;
  }

  .sandbox-result-verdict > strong {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    font-size: 19px;
  }
}

body:is(.mobile-preview, .web-build.mobile-preview) .sandbox-lobby.card-layout .sandbox-lobby-hero {
  min-height: 118px;
  padding: 13px 112px 13px 14px;
}

body:is(.mobile-preview, .web-build.mobile-preview) .sandbox-lobby.card-layout .sandbox-lobby-copy h4 { font-size: 19px; }
body:is(.mobile-preview, .web-build.mobile-preview) .sandbox-lobby.card-layout .sandbox-lobby-copy p { max-height: 34px; overflow: hidden; font-size: 10px; line-height: 1.55; }
body:is(.mobile-preview, .web-build.mobile-preview) .sandbox-lobby.card-layout .sandbox-intro-tags { display: none; }
body:is(.mobile-preview, .web-build.mobile-preview) .sandbox-lobby.card-layout .sandbox-lobby-visual { right: -8px; transform: scale(0.78); transform-origin: center right; }
body:is(.mobile-preview, .web-build.mobile-preview) .sandbox-card-lobby { gap: 11px; margin-inline: 9px; padding-top: 7px; }
body:is(.mobile-preview, .web-build.mobile-preview) .sandbox-card-theater-head div small { max-width: 240px; font-size: 9px; }
body:is(.mobile-preview, .web-build.mobile-preview) .sandbox-card-theater-head strong { font-size: 19px; }
body:is(.mobile-preview, .web-build.mobile-preview) .sandbox-card-scene { min-height: 210px; padding: 16px; border-radius: 23px; }
body:is(.mobile-preview, .web-build.mobile-preview) .sandbox-card-scene-art { top: 48px; right: 14px; width: 92px; height: 92px; }
body:is(.mobile-preview, .web-build.mobile-preview) .sandbox-card-scene-art > span { font-size: 22px; }
body:is(.mobile-preview, .web-build.mobile-preview) .sandbox-card-scene > strong { max-width: calc(100% - 82px); font-size: 24px; }
body:is(.mobile-preview, .web-build.mobile-preview) .sandbox-card-scene-venue { max-width: calc(100% - 82px); font-size: 14px !important; text-align: left; }
body:is(.mobile-preview, .web-build.mobile-preview) .sandbox-card-scene-stats { width: calc(100% - 72px); }
body:is(.mobile-preview, .web-build.mobile-preview) .sandbox-card-scene footer { max-width: 100%; }
body:is(.mobile-preview, .web-build.mobile-preview) .sandbox-card-profile-deck { padding-top: 14px; padding-bottom: 18px; }
body:is(.mobile-preview, .web-build.mobile-preview) .sandbox-card-profile { flex-basis: min(72vw, 246px); min-height: 284px; }
body:is(.mobile-preview, .web-build.mobile-preview) .sandbox-card-profile-placeholder { flex-basis: min(52vw, 190px); min-height: 220px; }
body:is(.mobile-preview, .web-build.mobile-preview) .sandbox-card-consent { padding: 10px 11px; font-size: 10px; }
body:is(.mobile-preview, .web-build.mobile-preview) .sandbox-card-start-dock { grid-template-columns: minmax(0, 1fr) 116px; padding: 9px; }
body:is(.mobile-preview, .web-build.mobile-preview) .sandbox-card-start-dock .sandbox-start-button { min-width: 0; padding-inline: 11px; }

body:is(.mobile-preview, .web-build.mobile-preview) .sandbox-launch-overlay,
body:is(.mobile-preview, .web-build.mobile-preview) .sandbox-profile-library-modal {
  inset: auto;
  left: 50%;
  top: 50%;
  width: min(390px, calc(100dvw - 16px));
  height: min(844px, calc(100dvh - 16px));
  overflow: hidden;
  border-radius: 34px;
  transform: translate(-50%, -50%);
}

@media (max-width: 370px) {
  .sandbox-card-chemistry-bars { grid-template-columns: 1fr; }
  .sandbox-intervention-choice { grid-template-columns: 24px minmax(0, 1fr); padding-inline: 5px; }
  .sandbox-intervention-choice > b { width: 23px; }
  .sandbox-intervention-choice > span { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .sandbox-card-scene,
  .sandbox-card-profile,
  .sandbox-card-profile > .sandbox-card-face,
  .sandbox-card-start-dock .sandbox-start-button,
  .sandbox-launch-scene,
  .sandbox-launch-hand > span,
  .sandbox-moment-card,
  .sandbox-metric,
  .sandbox-result-verdict,
  .sandbox-result-dashboard,
  .sandbox-agent,
  .sandbox-relation-line,
  .sandbox-world-pulse {
    animation: none !important;
    transition: none !important;
  }
}

/* 手机版：每日十神全屏抽卡。 */
body.mobile-web-build.daily-spirit-draw-open {
  overflow: hidden;
  overscroll-behavior: none;
}

body.mobile-web-build .daily-spirit-draw-overlay {
  position: fixed;
  inset: 0;
  z-index: 32000;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  overflow: hidden;
  color: #f9f1df;
  background:
    radial-gradient(circle at 50% 36%, rgba(191, 136, 73, 0.2), transparent 34%),
    radial-gradient(circle at 18% 82%, rgba(37, 128, 123, 0.2), transparent 38%),
    linear-gradient(155deg, #080d17 0%, #101a26 46%, #120d19 100%);
  opacity: 1;
  isolation: isolate;
  transition: opacity 0.48s ease, filter 0.48s ease;
}

body.mobile-web-build .daily-spirit-draw-overlay::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -2;
  background:
    repeating-radial-gradient(circle at 50% 46%, transparent 0 64px, rgba(228, 202, 143, 0.055) 65px 66px, transparent 67px 102px),
    conic-gradient(from 210deg at 50% 45%, transparent, rgba(205, 158, 87, 0.08), transparent 28%, rgba(42, 135, 133, 0.1), transparent 67%);
  animation: daily-draw-cosmos 24s linear infinite;
}

body.mobile-web-build .daily-draw-aurora {
  position: absolute;
  inset: -35% -45%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 36% 40%, rgba(212, 171, 101, 0.16), transparent 31%),
    radial-gradient(ellipse at 68% 62%, rgba(36, 141, 137, 0.16), transparent 36%);
  filter: blur(34px);
  animation: daily-draw-breathe 8s ease-in-out infinite alternate;
}

body.mobile-web-build .daily-draw-stars,
body.mobile-web-build .daily-draw-stars i {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

body.mobile-web-build .daily-draw-stars i {
  inset: auto;
  width: var(--star-size);
  height: var(--star-size);
  border-radius: 50%;
  background: #f7ddaa;
  box-shadow: 0 0 10px rgba(247, 221, 170, 0.85);
  opacity: 0.24;
  animation: daily-draw-star 2.8s var(--star-delay) ease-in-out infinite;
}

body.mobile-web-build .daily-draw-ritual {
  position: relative;
  width: min(100%, 520px);
  height: 100dvh;
  min-height: 650px;
  padding: calc(max(24px, env(safe-area-inset-top)) + 8px) 22px calc(max(18px, env(safe-area-inset-bottom)) + 8px);
  display: grid;
  grid-template-rows: auto minmax(280px, 1fr) auto auto;
  align-items: center;
  text-align: center;
}

body.mobile-web-build .daily-draw-heading {
  position: relative;
  z-index: 6;
  transition: opacity 0.38s ease, transform 0.55s ease;
}

body.mobile-web-build .daily-draw-heading > span,
body.mobile-web-build .daily-draw-result-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid rgba(229, 196, 129, 0.32);
  border-radius: 999px;
  color: #e4c987;
  background: rgba(15, 19, 27, 0.52);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  font-size: 11px;
  letter-spacing: 0.18em;
}

body.mobile-web-build .daily-draw-heading h2 {
  margin: 16px 0 8px;
  font-family: "Songti SC", "STSong", serif;
  font-size: clamp(27px, 7.6vw, 38px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-shadow: 0 8px 30px rgba(0, 0, 0, 0.52);
}

body.mobile-web-build .daily-draw-heading p {
  width: min(82%, 330px);
  margin: 0 auto;
  color: rgba(240, 233, 219, 0.68);
  font-size: 13px;
  line-height: 1.72;
  text-align: center;
  text-wrap: balance;
  word-break: keep-all;
}

body.mobile-web-build .daily-draw-stage {
  position: relative;
  z-index: 4;
  width: 100%;
  min-height: 300px;
  display: grid;
  place-items: center;
  perspective: 1100px;
  transition: opacity 0.4s ease, transform 0.55s ease;
}

body.mobile-web-build .daily-draw-deck-card {
  position: absolute;
  width: min(39vw, 178px);
  aspect-ratio: 0.59;
  overflow: hidden;
  border: 1px solid rgba(237, 210, 151, 0.5);
  border-radius: 18px;
  background: #14131a;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.55), inset 0 0 0 3px rgba(255, 255, 255, 0.035);
  transform: translate3d(var(--card-x), var(--card-y), 0) rotate(var(--card-r));
  transform-origin: 50% 82%;
  z-index: var(--card-z);
  will-change: transform, filter, opacity;
}

body.mobile-web-build .daily-draw-deck-card::after,
body.mobile-web-build .daily-draw-result-card::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 232, 178, 0.36);
  border-radius: 13px;
  pointer-events: none;
}

body.mobile-web-build .daily-draw-deck-card img,
body.mobile-web-build .daily-draw-result-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

body.mobile-web-build .daily-draw-deck-card > span,
body.mobile-web-build .daily-draw-deck-card > small {
  position: absolute;
  left: 14px;
  z-index: 2;
  text-shadow: 0 2px 12px #000;
}

body.mobile-web-build .daily-draw-deck-card > span {
  bottom: 31px;
  font-family: "Songti SC", "STSong", serif;
  font-size: 18px;
  letter-spacing: 0.18em;
}

body.mobile-web-build .daily-draw-deck-card > small {
  bottom: 15px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 9px;
  letter-spacing: 0.12em;
}

body.mobile-web-build .daily-draw-orbit {
  position: absolute;
  width: min(74vw, 340px);
  aspect-ratio: 1;
  border: 1px solid rgba(222, 192, 127, 0.12);
  border-radius: 50%;
  pointer-events: none;
  animation: daily-draw-orbit 12s linear infinite;
}

body.mobile-web-build .daily-draw-orbit::before,
body.mobile-web-build .daily-draw-orbit::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d9b66e;
  box-shadow: 0 0 14px #d9b66e;
}

body.mobile-web-build .daily-draw-orbit::before { top: 8%; left: 22%; }
body.mobile-web-build .daily-draw-orbit::after { right: 5%; bottom: 31%; }
body.mobile-web-build .daily-draw-orbit.orbit-two {
  width: min(57vw, 260px);
  border-color: rgba(78, 168, 161, 0.17);
  animation-direction: reverse;
  animation-duration: 9s;
}

body.mobile-web-build .daily-draw-invitation {
  position: relative;
  z-index: 8;
  margin-top: -8px;
  transition: opacity 0.32s ease, transform 0.46s ease;
}

body.mobile-web-build .daily-draw-start {
  position: relative;
  width: 168px;
  height: 68px;
  border: 1px solid rgba(237, 207, 142, 0.58);
  border-radius: 999px;
  color: #fff8e8;
  background: linear-gradient(135deg, rgba(188, 137, 66, 0.86), rgba(95, 65, 38, 0.88));
  box-shadow: 0 12px 38px rgba(184, 126, 57, 0.28), inset 0 1px rgba(255, 255, 255, 0.34);
  overflow: hidden;
}

body.mobile-web-build .daily-draw-start::before {
  content: "";
  position: absolute;
  inset: -80% -20%;
  background: linear-gradient(100deg, transparent 34%, rgba(255, 255, 255, 0.48) 50%, transparent 66%);
  transform: translateX(-70%) rotate(12deg);
  animation: daily-draw-glint 2.8s ease-in-out infinite;
}

body.mobile-web-build .daily-draw-start span,
body.mobile-web-build .daily-draw-start small {
  position: relative;
  z-index: 1;
  display: block;
}

body.mobile-web-build .daily-draw-start span {
  font-family: "Songti SC", "STSong", serif;
  font-size: 19px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

body.mobile-web-build .daily-draw-start small {
  margin-top: 4px;
  color: rgba(255, 248, 232, 0.65);
  font-size: 9px;
  letter-spacing: 0.12em;
}

body.mobile-web-build .daily-draw-invitation > p,
body.mobile-web-build .daily-draw-result > p {
  max-width: 320px;
  margin: 12px 0 0;
  margin-inline: auto;
  color: rgba(236, 226, 205, 0.48);
  font-size: 10px;
  letter-spacing: 0.13em;
  line-height: 1.7;
  text-align: center;
  text-wrap: balance;
  word-break: keep-all;
}

body.mobile-web-build .daily-draw-result {
  position: absolute;
  z-index: 10;
  inset: max(72px, calc(env(safe-area-inset-top) + 46px)) 20px max(58px, calc(env(safe-area-inset-bottom) + 34px));
  display: grid;
  place-content: center;
  justify-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.65s ease, visibility 0s linear 0.65s;
}

body.mobile-web-build .daily-draw-result-card {
  position: relative;
  width: min(67vw, 312px);
  aspect-ratio: 0.59;
  margin-top: 18px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(242, 211, 143, 0.68);
  border-radius: 24px;
  background: #11141b;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.7), 0 0 52px rgba(205, 157, 80, 0.16);
  opacity: 0;
  transform: rotateY(92deg) scale(0.74);
  transform-style: preserve-3d;
}

body.mobile-web-build .daily-draw-card-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 10, 15, 0.06) 30%, rgba(6, 9, 14, 0.86) 100%);
}

body.mobile-web-build .daily-draw-card-copy {
  position: absolute;
  z-index: 3;
  inset: auto 24px 28px;
  display: grid;
  justify-items: start;
  text-align: left;
  color: #fff8e9;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.88);
}

body.mobile-web-build .daily-draw-card-copy small {
  color: #e2c47d;
  font-size: 10px;
  letter-spacing: 0.2em;
}

body.mobile-web-build .daily-draw-card-copy strong {
  margin-top: 7px;
  font-family: "Songti SC", "STSong", serif;
  font-size: clamp(42px, 13vw, 62px);
  font-weight: 600;
  letter-spacing: 0.12em;
}

body.mobile-web-build .daily-draw-card-copy em {
  margin-top: 3px;
  color: rgba(255, 248, 233, 0.7);
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.18em;
}

body.mobile-web-build .daily-draw-ritual > footer {
  position: relative;
  z-index: 12;
  align-self: end;
  color: rgba(236, 227, 209, 0.37);
  font-size: 9px;
  letter-spacing: 0.1em;
  transition: opacity 0.35s ease;
}

body.mobile-web-build .daily-spirit-draw-overlay.is-shuffling .daily-draw-heading,
body.mobile-web-build .daily-spirit-draw-overlay.is-shuffling .daily-draw-invitation {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-14px) scale(0.97);
}

body.mobile-web-build .daily-spirit-draw-overlay.is-shuffling .daily-draw-deck-card {
  animation: daily-draw-mode-spiral 1.4s cubic-bezier(0.62, 0.02, 0.22, 1) forwards;
  animation-delay: calc(var(--card-i) * 42ms);
}

body.mobile-web-build .daily-spirit-draw-overlay[data-draw-mode="monday-orbit"].is-shuffling .daily-draw-deck-card { animation-name: daily-draw-mode-orbit; }
body.mobile-web-build .daily-spirit-draw-overlay[data-draw-mode="tuesday-cascade"].is-shuffling .daily-draw-deck-card { animation-name: daily-draw-mode-cascade; }
body.mobile-web-build .daily-spirit-draw-overlay[data-draw-mode="wednesday-cross"].is-shuffling .daily-draw-deck-card { animation-name: daily-draw-mode-cross; }
body.mobile-web-build .daily-spirit-draw-overlay[data-draw-mode="thursday-pulse"].is-shuffling .daily-draw-deck-card { animation-name: daily-draw-mode-pulse; }
body.mobile-web-build .daily-spirit-draw-overlay[data-draw-mode="friday-split"].is-shuffling .daily-draw-deck-card { animation-name: daily-draw-mode-split; }
body.mobile-web-build .daily-spirit-draw-overlay[data-draw-mode="saturday-rise"].is-shuffling .daily-draw-deck-card { animation-name: daily-draw-mode-rise; }

body.mobile-web-build .daily-spirit-draw-overlay.is-shuffling .daily-draw-orbit {
  animation-duration: 1.25s;
}

body.mobile-web-build .daily-spirit-draw-overlay.is-revealing .daily-draw-stage {
  opacity: 0;
  transform: scale(0.56);
}

body.mobile-web-build .daily-spirit-draw-overlay.is-revealing .daily-draw-result {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

body.mobile-web-build .daily-spirit-draw-overlay.is-revealing .daily-draw-result-card {
  animation: daily-draw-reveal 0.9s 0.12s cubic-bezier(0.2, 0.78, 0.2, 1) forwards;
}

body.mobile-web-build .daily-spirit-draw-overlay.is-leaving {
  opacity: 0;
  filter: blur(8px);
  pointer-events: none;
}

@keyframes daily-draw-cosmos {
  to { transform: rotate(360deg) scale(1.05); }
}

@keyframes daily-draw-breathe {
  to { transform: translate3d(6%, -4%, 0) scale(1.08); opacity: 0.72; }
}

@keyframes daily-draw-star {
  0%, 100% { opacity: 0.16; transform: scale(0.72); }
  50% { opacity: 0.86; transform: scale(1.34); }
}

@keyframes daily-draw-orbit {
  to { transform: rotate(360deg); }
}

@keyframes daily-draw-glint {
  0%, 22% { transform: translateX(-74%) rotate(12deg); }
  62%, 100% { transform: translateX(74%) rotate(12deg); }
}

@keyframes daily-draw-mode-spiral {
  0% { transform: translate3d(var(--card-x), var(--card-y), 0) rotate(var(--card-r)); filter: brightness(1); }
  34% { transform: translate3d(var(--card-swing), -22px, 90px) rotate(var(--card-turn)) scale(0.94); filter: brightness(1.18); }
  68% { transform: translate3d(calc(var(--card-swing) * -0.36), 18px, 40px) rotate(calc(var(--card-turn) * -0.55)) scale(0.88); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(0.76); filter: brightness(0.7); }
}

@keyframes daily-draw-mode-orbit {
  0% { transform: translate3d(var(--card-x), var(--card-y), 0) rotate(var(--card-r)); filter: brightness(1); opacity: 1; }
  38% { transform: translate3d(calc(var(--card-swing) * 0.62), -82px, 120px) rotateY(210deg) rotate(34deg) scale(0.88); filter: brightness(1.2); }
  72% { transform: translate3d(calc(var(--card-swing) * -0.4), 62px, 56px) rotateY(-130deg) rotate(-26deg) scale(0.82); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(0.74); filter: brightness(0.68); opacity: 0.92; }
}

@keyframes daily-draw-mode-cascade {
  0% { transform: translate3d(var(--card-x), var(--card-y), 0) rotate(var(--card-r)); filter: brightness(1); opacity: 1; }
  32% { transform: translate3d(0, -138px, 96px) rotateX(54deg) rotate(14deg) scale(0.92); filter: brightness(1.22); }
  66% { transform: translate3d(0, 112px, 42px) rotateX(-42deg) rotate(-10deg) scale(0.8); }
  100% { transform: translate3d(0, 18px, 0) rotate(0) scale(0.74); filter: brightness(0.68); opacity: 0.9; }
}

@keyframes daily-draw-mode-cross {
  0% { transform: translate3d(var(--card-x), var(--card-y), 0) rotate(var(--card-r)); filter: brightness(1); opacity: 1; }
  42% { transform: translate3d(calc(var(--card-swing) * -0.78), -58px, 105px) rotateY(-206deg) rotate(-18deg) scale(0.86); filter: brightness(1.2); }
  72% { transform: translate3d(calc(var(--card-swing) * 0.64), 56px, 60px) rotateY(128deg) rotate(18deg) scale(0.78); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(0.74); filter: brightness(0.66); opacity: 0.9; }
}

@keyframes daily-draw-mode-pulse {
  0% { transform: translate3d(var(--card-x), var(--card-y), 0) rotate(var(--card-r)); filter: brightness(1); opacity: 1; }
  30% { transform: translate3d(0, -16px, 150px) rotateY(180deg) scale(1.03); filter: brightness(1.28); }
  62% { transform: translate3d(0, 18px, 62px) rotateY(360deg) scale(0.78); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(0.72); filter: brightness(0.66); opacity: 0.9; }
}

@keyframes daily-draw-mode-split {
  0% { transform: translate3d(var(--card-x), var(--card-y), 0) rotate(var(--card-r)); filter: brightness(1); opacity: 1; }
  40% { transform: translate3d(var(--card-swing), -76px, 116px) rotateY(218deg) rotate(-10deg) scale(0.86); filter: brightness(1.2); }
  70% { transform: translate3d(calc(var(--card-swing) * -0.5), 72px, 54px) rotateY(-94deg) rotate(10deg) scale(0.78); }
  100% { transform: translate3d(0, 6px, 0) rotate(0) scale(0.74); filter: brightness(0.66); opacity: 0.9; }
}

@keyframes daily-draw-mode-rise {
  0% { transform: translate3d(var(--card-x), var(--card-y), 0) rotate(var(--card-r)); filter: brightness(1); opacity: 1; }
  38% { transform: translate3d(calc(var(--card-swing) * 0.28), 92px, 82px) rotateX(-54deg) rotate(12deg) scale(0.92); filter: brightness(1.16); }
  74% { transform: translate3d(calc(var(--card-swing) * -0.32), -132px, 118px) rotateX(64deg) rotate(-12deg) scale(0.78); }
  100% { transform: translate3d(0, 0, 0) rotate(0) scale(0.74); filter: brightness(0.66); opacity: 0.9; }
}

@keyframes daily-draw-reveal {
  0% { opacity: 0; transform: rotateY(92deg) scale(0.74); }
  62% { opacity: 1; transform: rotateY(-8deg) scale(1.035); }
  100% { opacity: 1; transform: rotateY(0) scale(1); }
}

@media (max-height: 720px) {
  body.mobile-web-build .daily-draw-ritual {
    min-height: 600px;
    padding-top: max(18px, env(safe-area-inset-top));
    grid-template-rows: auto minmax(246px, 1fr) auto auto;
  }

  body.mobile-web-build .daily-draw-heading h2 { margin-top: 10px; font-size: 26px; }
  body.mobile-web-build .daily-draw-heading p { line-height: 1.55; }
  body.mobile-web-build .daily-draw-stage { min-height: 250px; }
  body.mobile-web-build .daily-draw-deck-card { width: min(34vw, 155px); }
  body.mobile-web-build .daily-draw-result-card { width: min(55vw, 256px); }
}

@media (prefers-reduced-motion: reduce) {
  body.mobile-web-build .daily-spirit-draw-overlay *,
  body.mobile-web-build .daily-spirit-draw-overlay *::before,
  body.mobile-web-build .daily-spirit-draw-overlay *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}