/* AppColors */
:root {
  --jade-900: #0f4a3c;
  --jade-700: #176b57;
  --jade-500: #2c8a70;
  --jade-200: #c9dfd7;
  --gold: #d7b46b;
  --gold-soft: rgba(205, 178, 112, 0.32);
  --gold-light: rgba(221, 198, 140, 0.22);
  --gold-line: rgba(191, 157, 88, 0.38);
  --gold-edge: rgba(218, 190, 120, 0.42);
  --gold-edge-soft: rgba(255, 255, 255, 0.16);
  --silver: #d7dce0;
  --ink: #1f2d2b;
  --muted: #687873;
  --text-body: #3f4d49;
  --text-body-soft: #526760;
  --icon-active: #0f6b55;
  --icon-muted: #8fa59b;
  --icon-bg: #e5f1ea;
  --glass: rgba(255, 255, 255, 0.68);
  --glass-strong: rgba(255, 255, 255, 0.86);
  --shadow: 0 18px 42px rgba(34, 67, 61, 0.13);
  --z-nav: 20;
  --z-modal-root: 50;
  --z-overlay: 200;
  --app-bg-image: url("../assets/images/backgrounds/unified_ink_landscape_bg.png");
  --app-bg-overlay: rgba(255, 255, 255, 0.72);
  --today-main-card-bg-image: url("../assets/images/backgrounds/today-main-card-bg-v1.png");

  /* AppSpacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --radius-card: 8px;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: "Noto Serif SC", "Songti SC", "Microsoft YaHei", serif;
  background:
    radial-gradient(circle at 50% 8%, rgba(215, 180, 107, 0.18), transparent 30%),
    radial-gradient(circle at 18% 82%, rgba(44, 138, 112, 0.2), transparent 34%),
    linear-gradient(140deg, #f8f8f5 0%, #edf2f0 48%, #fdfdfb 100%);
}

button {
  color: inherit;
  font: inherit;
}

.phone-shell {
  width: min(100vw, 460px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px 14px;
}

.app-surface {
  position: relative;
  min-height: calc(100vh - 36px);
  overflow: hidden;
  border: 1px solid rgba(174, 180, 178, 0.65);
  border-radius: 34px;
  background:
    radial-gradient(circle at 52% 22%, rgba(215, 180, 107, 0.13), transparent 20%),
    linear-gradient(180deg, #fbfbf8, #eef4f2 58%, #f9faf8);
  box-shadow: 0 20px 62px rgba(33, 57, 54, 0.2), inset 0 0 0 7px rgba(255, 255, 255, 0.45);
}

.app-surface::before,
.app-surface::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.app-surface::before {
  inset: 72px -70px auto;
  height: 300px;
  border: 1px solid rgba(215, 180, 107, 0.2);
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 8deg, rgba(215, 180, 107, 0.18) 0 1deg, transparent 1deg 15deg),
    radial-gradient(circle, transparent 54%, rgba(23, 107, 87, 0.08) 55%, transparent 57%);
  opacity: 0.72;
}

.app-surface::after {
  right: -42px;
  bottom: 72px;
  width: 260px;
  height: 150px;
  background:
    radial-gradient(ellipse at 30% 80%, rgba(44, 138, 112, 0.22), transparent 58%),
    radial-gradient(ellipse at 62% 76%, rgba(23, 107, 87, 0.13), transparent 52%),
    linear-gradient(165deg, transparent 40%, rgba(215, 180, 107, 0.22) 41% 42%, transparent 43%);
  clip-path: polygon(0 100%, 16% 44%, 31% 80%, 47% 22%, 64% 72%, 80% 34%, 100% 100%);
  opacity: 0.58;
}

.status-bar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  padding: 17px 28px 8px;
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.android-webview body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

.android-webview .phone-shell {
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
}

.android-webview .app-surface {
  min-height: 100vh;
  min-height: 100dvh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.android-webview .status-bar {
  display: none;
}

.android-webview .screen {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding-top: max(28px, calc(env(safe-area-inset-top) + 16px));
}

/* AppTypography */
.signal {
  font-size: 11px;
  letter-spacing: 0;
}

.screen {
  position: relative;
  z-index: 2;
  isolation: isolate;
  height: calc(100vh - 166px);
  min-height: 660px;
  overflow-y: auto;
  padding: 0 20px calc(108px + env(safe-area-inset-bottom));
  background: transparent;
  scrollbar-width: none;
}

.screen::before {
  display: none;
  position: absolute;
  inset: 0 -20px;
  z-index: -1;
  pointer-events: none;
  content: "";
}

.screen.page-today {
  padding-bottom: calc(140px + env(safe-area-inset-bottom));
}

.screen.page-history {
  padding-bottom: calc(150px + env(safe-area-inset-bottom));
}

.page-with-ink-bg {
  background-color: #f8f7f1;
  overflow: hidden auto;
}

.page-with-ink-bg::before,
.page-with-ink-bg::after {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
}

.page-with-ink-bg::before {
  background: var(--app-bg-image) center top / cover no-repeat;
}

.page-with-ink-bg::after {
  background: var(--app-bg-overlay);
}

.page-with-ink-bg > * {
  position: relative;
  z-index: 1;
}

.app-footer-signature {
  margin: 28px auto 18px;
  padding-bottom: 8px;
  text-align: center;
  color: rgba(7, 88, 70, 0.42);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  user-select: none;
}

.app-surface:has(.sheet-overlay) .screen {
  z-index: var(--z-modal-root);
}

.has-modal .screen {
  z-index: var(--z-modal-root);
}

.app-surface:has(.sheet-overlay) .bottom-nav {
  pointer-events: none;
}

.has-modal .bottom-nav {
  pointer-events: none;
}

.screen::-webkit-scrollbar {
  display: none;
}

.page-header {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  min-height: 58px;
  padding: 12px 0 20px;
  text-align: center;
}

.page-header > div {
  position: relative;
}

.page-header > div::after {
  display: block;
  width: min(96px, 44%);
  height: 1px;
  margin: 9px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
  content: "";
}

.page-header h1 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0;
}

.page-header p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
  white-space: nowrap;
}

.page-header:has(> .page-back-button) {
  grid-template-columns: 48px minmax(0, 1fr) 48px;
}

.page-baguaBasic > .page-header,
.page-movingLinesMethod > .page-header,
.page-najiaLiuyao > .page-header,
.page-library .page-header {
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  gap: 4px;
  min-height: 52px;
  padding: 4px 0 10px;
}

.page-baguaBasic > .page-header h1,
.page-movingLinesMethod > .page-header h1,
.page-najiaLiuyao > .page-header h1,
.page-library .page-header h1 {
  font-size: 24px;
  line-height: 1.24;
}

.page-baguaBasic > .page-header p,
.page-movingLinesMethod > .page-header p,
.page-najiaLiuyao > .page-header p,
.page-library .page-header p {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.45;
}

.page-baguaBasic > .page-header > div::after,
.page-movingLinesMethod > .page-header > div::after,
.page-najiaLiuyao > .page-header > div::after,
.page-library .page-header > div::after {
  width: min(72px, 38%);
  margin-top: 6px;
}

.page-library .library-page-shell {
  gap: 14px;
}

.page-today > .page-header,
.page-history > .page-header,
.page-profile > .page-header {
  min-height: 48px;
  margin-top: 10px;
  padding: 0 0 14px;
}

.page-today > .page-header p {
  margin-top: 6px;
}

.android-webview .page-today > .page-header,
.android-webview .page-history > .page-header,
.android-webview .page-profile > .page-header {
  margin-top: -8px;
}

.icon-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  padding: 0;
  border: 1px solid rgba(215, 180, 107, 0.55);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.62);
  color: var(--jade-900);
  font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 20px rgba(21, 76, 62, 0.08);
  cursor: pointer;
}

.icon-button:empty {
  visibility: hidden;
  pointer-events: none;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.header-action-spacer {
  display: block;
  width: 44px;
  height: 44px;
  pointer-events: none;
}

.page-header:has(> .page-back-button) > .header-action-spacer {
  width: 48px;
  height: 48px;
}

.icon-button > svg,
.icon-button > img,
.icon-button .button-icon {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  color: currentColor;
}

.icon-button .button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

.page-back-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--jade-700);
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms ease;
}

.page-back-button::before {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(215, 180, 107, 0.38);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(255, 255, 252, 0.96), rgba(241, 248, 243, 0.9));
  box-shadow: 0 3px 9px rgba(35, 91, 72, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  content: "";
  transition: background 140ms ease, box-shadow 140ms ease;
}

.page-back-button svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 11px;
  height: 11px;
  transform: translateX(-0.5px);
}

.page-back-button path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.page-back-button:active {
  transform: scale(0.94);
}

.page-back-button:active::before {
  background: rgba(229, 242, 234, 0.96);
  box-shadow: 0 1px 4px rgba(35, 91, 72, 0.08);
}

.page-back-button:focus-visible {
  outline: 2px solid rgba(23, 100, 81, 0.28);
  outline-offset: 3px;
}

@media (hover: hover) {
  .page-back-button:hover::before {
    background: linear-gradient(145deg, rgba(255, 255, 252, 0.99), rgba(235, 246, 240, 0.94));
    box-shadow: 0 4px 10px rgba(35, 91, 72, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-back-button {
    transition: none;
  }
}

.tiny {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  font-size: 14px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

/* AppCardStyle / GlassCard */
.app-card,
.glass-card {
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-card);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), var(--glass));
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(215, 220, 224, 0.45);
  backdrop-filter: blur(18px);
}

.daily-card {
  position: relative;
  overflow: hidden;
  padding: 21px 22px 22px;
  border: 1px solid rgba(196, 168, 105, 0.25);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(248, 252, 250, 0.86));
  box-shadow: 0 18px 42px rgba(21, 76, 62, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.daily-card::before {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -18px;
  left: -18px;
  height: 84%;
  pointer-events: none;
  opacity: 0.62;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(248, 252, 250, 0.1) 42%, rgba(255, 255, 255, 0.2) 100%),
    url("../assets/images/daily/daily_card_landscape_fine.png") right bottom / cover no-repeat;
  filter: saturate(0.98) contrast(1.02);
  transform: translateY(8px);
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.78) 34%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.78) 34%, #000 100%);
}

.daily-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 28%, rgba(255, 255, 255, 0.74), transparent 30%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.26) 58%, rgba(255, 255, 255, 0.08));
  z-index: 0;
}

.result-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(248, 252, 250, 0.88));
}

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

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

.today-hero {
  position: relative;
  display: flex;
  min-height: 360px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  place-items: center;
  padding: 34px 16px 26px;
  margin-bottom: 18px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.46);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(215, 180, 107, 0.3);
}

.today-main-card-with-bg {
  background:
    linear-gradient(rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.46)) padding-box,
    linear-gradient(135deg, var(--gold-edge), var(--gold-edge-soft), rgba(180, 145, 75, 0.25)) border-box;
}

.today-main-card-with-bg::before,
.today-main-card-with-bg::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
}

.today-main-card-with-bg::before {
  background: var(--today-main-card-bg-image) center bottom / cover no-repeat;
}

.today-main-card-with-bg::after {
  background: rgba(255, 255, 255, 0.48);
}

.today-main-card-with-bg > * {
  position: relative;
  z-index: 1;
}

.bagua-orbit {
  display: none;
}

.coin-hero-img {
  position: relative;
  z-index: 1;
  width: min(78%, 282px);
  height: auto;
  max-height: 122px;
  object-fit: contain;
  margin-top: 6px;
  filter: saturate(1.04) contrast(1.02) drop-shadow(0 10px 14px rgba(97, 73, 30, 0.11));
}

/* JadeButton */
.jade-button {
  position: relative;
  z-index: 2;
  min-width: 170px;
  margin-top: 12px;
  padding: 12px 24px;
  border: 1px solid rgba(215, 180, 107, 0.65);
  border-radius: 999px;
  color: #f6f1df;
  font-size: 18px;
  font-weight: 700;
  background:
    linear-gradient(135deg, rgba(10, 56, 45, 0.9), rgba(39, 138, 110, 0.84) 52%, rgba(13, 76, 63, 0.9)),
    url("../assets/images/textures/jade_button_texture.png") center / cover no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 24px rgba(16, 86, 70, 0.25);
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0, 34, 24, 0.28);
}

.compact {
  min-width: 116px;
  margin-top: 8px;
  padding: 9px 16px;
  font-size: 14px;
}

.quiet-copy {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 4px;
  margin-top: 12px;
  text-align: center;
}

.quiet-copy strong {
  color: var(--jade-900);
  font-size: 20px;
}

.quiet-copy span {
  color: var(--muted);
  font-size: 13px;
}

.hero-cast-options {
  position: relative;
  z-index: 3;
  display: grid;
  width: min(100%, 300px);
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}

.cast-entry {
  position: relative;
  display: grid;
  gap: 5px;
  padding: 13px 22px;
  border: 1px solid rgba(215, 180, 107, 0.36);
  border-radius: 8px;
  overflow: hidden;
  text-align: left;
  color: var(--jade-900);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 22px rgba(21, 76, 62, 0.09);
  backdrop-filter: blur(14px);
  cursor: pointer;
}

.cast-entry.is-primary {
  border-color: transparent;
  border-radius: 16px;
  color: #ffffff;
  background-color: transparent;
  background: url("../assets/images/today/cast_entry_jade_plaque_v1.png") center / 100% 100% no-repeat;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  text-shadow: 0 1px 3px rgba(0, 34, 24, 0.3);
}

.hero-cast-options .cast-entry:not(.is-primary) {
  border-color: transparent;
  border-radius: 16px;
  background-color: transparent;
  background: url("../assets/images/today/cast_entry_ivory_plaque_generated_v3.png") center / 100% 100% no-repeat;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.cast-entry > * {
  position: relative;
  z-index: 1;
}

.cast-entry strong {
  font-size: 16px;
}

.cast-entry span {
  color: inherit;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.78;
}

.daily-reminder-strip {
  position: relative;
  z-index: 3;
  display: grid;
  width: min(94%, 280px);
  gap: 4px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--jade-900);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.24)),
    url("../assets/images/daily/daily_reminder_card_pending_bg_v1.png") center / 100% 100% no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86), 0 10px 22px rgba(21, 76, 62, 0.08);
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(14px);
}

.daily-reminder-strip.is-drawn {
  background-image:
    linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.24)),
    url("../assets/images/daily/daily_reminder_card_drawn_bg_v1.png");
}

.daily-reminder-main {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.daily-reminder-main span {
  color: var(--jade-700);
  font-size: 13px;
  font-weight: 700;
}

.daily-reminder-main small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-reminder-main strong {
  overflow: hidden;
  color: var(--jade-900);
  font-size: 14px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.daily-reminder-status,
.daily-reminder-save {
  justify-self: start;
  margin-top: 2px;
  padding: 4px 9px;
  border: 1px solid rgba(215, 180, 107, 0.26);
  border-radius: 999px;
  color: var(--jade-700);
  background: rgba(239, 248, 244, 0.72);
  font-size: 12px;
}

.daily-reminder-save {
  cursor: pointer;
}

.recent-record-card {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.recent-record-card::before {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -22px;
  left: -18px;
  height: 92%;
  pointer-events: none;
  opacity: 0.42;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.1) 44%, rgba(255, 255, 255, 0.18) 100%),
    url("../assets/images/daily/daily_card_landscape_fine.png") right bottom / cover no-repeat;
  filter: saturate(0.96) contrast(1.02);
  transform: translateY(10px);
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.58) 32%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.58) 32%, #000 100%);
}

.recent-record-main {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.recent-record-main .hexagram-line-view {
  transform: scale(0.86);
  transform-origin: center;
}

.recent-record-main strong {
  display: block;
  overflow: hidden;
  color: var(--jade-900);
  font-size: 17px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-record-main span,
.recent-empty {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.recent-empty {
  margin: 0;
}

.recent-record-link {
  justify-self: start;
}

.recent-record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}

.recent-record-save {
  min-width: 64px;
}

.section-title,
.record-top,
.record-footer,
.course-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-title {
  margin-bottom: 14px;
  font-weight: 700;
}

.section-title::after {
  flex: 0 0 36px;
  width: 36px;
  height: 1px;
  margin-left: auto;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-line), transparent);
  content: "";
}

.section-title small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

.result-card,
.course-card,
.record-card,
.user-card,
.action-list {
  margin-bottom: 16px;
  padding: 18px;
}

.daily-layout {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 16px;
  align-items: center;
}

.daily-back-layout {
  grid-template-columns: minmax(104px, 30%) 1fr;
  gap: 20px;
  min-height: 214px;
}

.daily-summary-layout {
  grid-template-columns: minmax(104px, 30%) 1fr;
  gap: 20px;
  min-height: 214px;
}

.daily-card-back,
.daily-card-face {
  position: relative;
  display: grid;
  min-height: 180px;
  place-items: center;
  gap: 12px;
  align-content: center;
  padding: 18px 9px 16px;
  overflow: hidden;
  border: 1px solid rgba(196, 168, 105, 0.42);
  border-radius: 18px;
  color: var(--jade-900);
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.96), rgba(228, 241, 235, 0.7) 66%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(224, 240, 234, 0.62));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.78), 0 12px 20px rgba(21, 76, 62, 0.07);
}

.daily-card-face {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.98), rgba(226, 240, 234, 0.7) 63%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.84), rgba(220, 237, 230, 0.62));
}

.daily-card-back::before,
.daily-card-back::after,
.daily-card-face::before,
.daily-card-face::after {
  content: "";
  position: absolute;
  width: 62px;
  height: 62px;
  pointer-events: none;
  opacity: 0.42;
  background:
    radial-gradient(circle at 100% 100%, transparent 0 38%, rgba(196, 168, 105, 0.2) 39% 42%, transparent 43%),
    radial-gradient(circle at 72% 72%, transparent 0 48%, rgba(23, 107, 87, 0.11) 49% 52%, transparent 53%);
}

.daily-card-back::before {
  top: 10px;
  right: 8px;
}

.daily-card-face::before {
  top: 10px;
  right: 8px;
}

.daily-card-back::after,
.daily-card-face::after {
  bottom: 8px;
  left: 8px;
  transform: rotate(180deg);
}

.daily-card-back span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 1px solid rgba(196, 168, 105, 0.58);
  border-radius: 50%;
  color: var(--jade-900);
  font-size: 34px;
  font-weight: 700;
  background: radial-gradient(circle at 38% 26%, rgba(255, 255, 255, 0.98), rgba(239, 247, 243, 0.78));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.82), 0 8px 16px rgba(21, 76, 62, 0.06);
}

.daily-card-back small,
.daily-energy,
.daily-card-state {
  color: var(--muted);
  font-size: 13px;
}

.daily-card-back small {
  position: relative;
  z-index: 1;
  color: rgba(44, 68, 62, 0.72);
  font-size: 14px;
}

.daily-card-symbol {
  position: relative;
  z-index: 1;
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  border: 1px solid rgba(196, 168, 105, 0.54);
  border-radius: 50%;
  color: var(--jade-900);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  background: radial-gradient(circle at 38% 26%, rgba(255, 255, 255, 0.98), rgba(239, 247, 243, 0.78));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.82), 0 8px 16px rgba(21, 76, 62, 0.06);
}

.daily-card-face small {
  position: relative;
  z-index: 1;
  color: rgba(15, 107, 85, 0.74);
  font-size: 14px;
  font-weight: 600;
}

.daily-card-copy {
  display: grid;
  align-content: center;
  gap: 10px;
}

.daily-card-copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0;
}

.daily-card-copy p {
  max-width: 360px;
  margin: 0;
  color: rgba(76, 92, 87, 0.82);
  font-size: 16px;
  line-height: 1.85;
}

.daily-drawn-copy h2 {
  color: var(--jade-900);
}

.daily-drawn-copy p {
  font-weight: 500;
}

.daily-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.daily-card-tags span {
  padding: 5px 11px;
  border-radius: 999px;
  color: var(--jade-900);
  font-size: 13px;
  font-weight: 600;
  background: rgba(228, 241, 235, 0.78);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.daily-back-layout .jade-button {
  width: fit-content;
  min-width: 184px;
  margin-top: 3px;
  padding: 11px 23px;
  border-color: rgba(196, 168, 105, 0.72);
  border-radius: 999px;
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 10px 20px rgba(16, 86, 70, 0.18);
}

.daily-card-hint {
  display: block;
  margin-top: -2px;
  color: rgba(76, 92, 87, 0.52);
  font-size: 13px;
  line-height: 1.5;
}

.daily-card-state {
  margin: 7px 0 0;
  line-height: 1.55;
}

.daily-review-button {
  width: fit-content;
  min-width: 154px;
  margin-top: 3px;
  padding: 10px 20px;
  border-color: rgba(196, 168, 105, 0.72);
  border-radius: 999px;
  font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 10px 20px rgba(16, 86, 70, 0.16);
}

.daily-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.daily-save-button {
  min-height: 38px;
  padding: 8px 14px;
}

.daily-save-button.is-saved {
  color: var(--jade-700);
  background: rgba(235, 246, 241, 0.72);
}

.daily-modal-overlay {
  align-items: center;
  padding: 22px;
}

.ritual-overlay {
  align-items: center;
  padding: 22px;
}

.ritual-modal {
  display: grid;
  width: min(100%, 390px);
  gap: 18px;
  padding: 24px 22px;
  border: 1px solid rgba(215, 180, 107, 0.34);
  border-radius: 24px;
  text-align: center;
  background-color: rgba(248, 252, 248, 0.88);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(247, 252, 249, 0.58) 48%, rgba(247, 252, 249, 0.78)),
    url("../assets/images/ritual/ritual_modal_bg_v1.jpg");
  background-position: center, center;
  background-size: cover, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  box-shadow: 0 28px 70px rgba(13, 53, 43, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(18px);
  animation: ritual-modal-breathe 1.4s ease-in-out infinite alternate;
}

.ritual-modal.phase-gather {
  animation: ritual-gather-dim 0.24s ease-in-out both;
}

.ritual-coins {
  position: relative;
  display: grid;
  width: min(100%, 300px);
  min-height: 174px;
  margin: 0 auto;
  perspective: 900px;
}

.ritual-coins::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 245px;
  height: 42px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) scale(0.72);
  background: radial-gradient(ellipse, rgba(216, 185, 106, 0.42), rgba(216, 185, 106, 0.16) 42%, transparent 72%);
}

.ritual-coins.settle::after {
  animation: ritual-ground-ripple 0.24s ease-out both;
}

.ritual-coin {
  position: relative;
  display: block;
  width: 106px;
  height: 106px;
  grid-area: 1 / 1;
  place-self: center;
  transform-style: preserve-3d;
  --tilt: -8deg;
  --jitter-x: 1px;
  --jitter-y: -1px;
  --rest-x: 0px;
  --rest-y: 0px;
  --rise: -48px;
  --z-depth: 0px;
  --arc-x: 0px;
  --dur-shift: 0ms;
  --small-shift: 0ms;
  --coin-delay: 0ms;
  --depth-scale: 1;
  --coin-z: 2;
  z-index: var(--coin-z);
  filter: drop-shadow(0 16px 18px rgba(29, 65, 53, 0.18));
}

.ritual-coin::after {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(216, 185, 106, 0.42), rgba(216, 185, 106, 0.16) 34%, transparent 68%);
  transform: scale(0.62);
}

.coin-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  backface-visibility: hidden;
  border-radius: 50%;
}

.coin-back {
  transform: rotateY(180deg);
}

.ritual-coin.is-back .coin-front {
  transform: rotateY(180deg);
}

.ritual-coin.is-back .coin-back {
  transform: rotateY(0deg);
}

.ritual-coin.is-unrevealed .coin-face {
  opacity: 1;
  filter: saturate(0.96) contrast(1.02);
}

.ritual-coin.is-unrevealed .coin-back {
  transform: rotateY(180deg);
  opacity: 0;
}

.ritual-line-result {
  min-height: 18px;
  margin: -6px 0 0;
  color: var(--jade-900);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  animation: ritual-line-result-in 0.18s ease-out both;
}

.ritual-coins.gather .ritual-coin {
  animation: ritual-coin-gather calc(0.28s + var(--small-shift)) ease-in-out both;
  animation-delay: var(--coin-delay);
}

.ritual-coins.float .ritual-coin {
  animation: ritual-coin-throw calc(0.38s + var(--small-shift)) ease-out both;
  animation-delay: var(--coin-delay);
}

.ritual-coins.flip .ritual-coin {
  animation: ritual-coin-throw-flip calc(0.58s + var(--dur-shift)) cubic-bezier(0.2, 0.68, 0.2, 1) both;
  animation-delay: var(--coin-delay);
}

.ritual-coins.fall .ritual-coin {
  animation: ritual-coin-fall calc(0.54s + var(--dur-shift)) cubic-bezier(0.16, 0.72, 0.18, 1) both;
  animation-delay: var(--coin-delay);
}

.ritual-coins.settle .ritual-coin {
  animation: ritual-coin-impact calc(0.32s + var(--small-shift)) cubic-bezier(0.12, 0.78, 0.18, 1) both;
  animation-delay: var(--settle-delay);
}

.ritual-coins.settle .ritual-coin::after {
  animation: ritual-coin-glow 0.24s ease-out both;
  animation-delay: var(--settle-delay);
}

.ritual-coins .coin-1 {
  --tilt: -9deg;
  --jitter-x: -1px;
  --jitter-y: 1px;
  --rest-x: -76px;
  --rest-y: 24px;
  --rise: -46px;
  --z-depth: -12px;
  --depth-scale: 0.88;
  --coin-z: 1;
}

.ritual-coins .coin-2 {
  --tilt: 6deg;
  --jitter-x: 2px;
  --jitter-y: -1px;
  --rest-x: 0px;
  --rest-y: -26px;
  --rise: -58px;
  --z-depth: 18px;
  --depth-scale: 0.98;
  --coin-z: 2;
}

.ritual-coins .coin-3 {
  --tilt: -3deg;
  --jitter-x: -2px;
  --jitter-y: 1px;
  --rest-x: 76px;
  --rest-y: 22px;
  --rise: -42px;
  --z-depth: 42px;
  --depth-scale: 1.08;
  --coin-z: 3;
}

.ritual-progress {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 118px;
  margin: 0 auto;
}

.ritual-progress span {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 22px;
  height: 7px;
  background: none;
  box-shadow: none;
}

.ritual-progress span i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: rgba(143, 165, 155, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58);
}

.ritual-progress span.is-yin {
  grid-template-columns: 1fr 1fr;
}

.ritual-progress span.is-lit i {
  animation: ritual-line-lit 0.15s ease-out both;
}

.ritual-progress span.is-lit.is-yang i {
  background: linear-gradient(90deg, rgba(15, 107, 85, 0.48), var(--jade-900), rgba(15, 107, 85, 0.48));
}

.ritual-progress span.is-lit.is-yin i {
  background: linear-gradient(90deg, rgba(15, 107, 85, 0.5), var(--jade-900), rgba(15, 107, 85, 0.5));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.46);
}

.ritual-progress span.is-moving:not(.is-current)::after {
  content: "";
  position: absolute;
  right: -13px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  opacity: 0.78;
  transform: translateY(-50%);
  background: rgba(216, 185, 106, 0.86);
  box-shadow: 0 0 8px rgba(216, 185, 106, 0.42);
}

.ritual-progress span.is-current::after {
  content: "";
  position: absolute;
  right: -13px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0.86;
  transform: translateY(-50%);
  background: rgba(216, 185, 106, 0.9);
  box-shadow: 0 0 9px rgba(216, 185, 106, 0.48);
}

.ritual-progress span.is-current::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(216, 185, 106, 0.62), transparent);
  animation: ritual-line-sheen 0.22s ease-out both;
}

.ritual-step {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.daily-draw-modal {
  position: relative;
  isolation: isolate;
  display: grid;
  width: min(100%, 380px);
  gap: 16px;
  padding: 22px;
  border: 1px solid rgba(215, 180, 107, 0.34);
  border-radius: 24px;
  overflow: hidden;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(244, 250, 247, 0.78)),
    radial-gradient(circle at 50% 0%, rgba(206, 229, 221, 0.66), transparent 44%);
  box-shadow: 0 28px 70px rgba(13, 53, 43, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(18px);
  animation: daily-modal-in 180ms ease-out both;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.daily-draw-modal::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.daily-draw-modal::before,
.daily-draw-modal::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.daily-draw-modal::before {
  inset: 0;
  opacity: 0.4;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.32)),
    url("../assets/images/daily/daily_reveal_modal_bg_v1.jpg") center bottom / cover no-repeat;
}

.daily-draw-modal::after {
  inset: auto -34px -28px;
  height: 34%;
  opacity: 0.18;
  background: url("../assets/images/daily/daily_card_landscape.png") center bottom / cover no-repeat;
}

.daily-draw-modal > * {
  position: relative;
  z-index: 1;
}

.daily-draw-modal:has(.daily-reveal-card) {
  width: min(100%, 398px);
  max-height: calc(100vh - 44px);
  gap: 18px;
  padding: 26px 24px 24px;
  border-color: rgba(218, 190, 120, 0.54);
  border-radius: 30px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background:
    radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.92), transparent 28%),
    radial-gradient(circle at 82% 22%, rgba(211, 229, 222, 0.48), transparent 34%),
    linear-gradient(145deg, rgba(255, 253, 247, 0.96), rgba(246, 250, 247, 0.9));
  box-shadow:
    0 28px 72px rgba(13, 53, 43, 0.24),
    0 0 0 1px rgba(255, 255, 255, 0.86) inset,
    0 0 0 2px rgba(218, 190, 120, 0.18) inset;
}

.daily-draw-modal:has(.daily-reveal-card)::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.daily-draw-modal:has(.daily-reveal-card)::before,
.daily-draw-modal:has(.daily-reveal-card)::after {
  content: "";
}

.daily-draw-modal:has(.daily-reveal-card)::before {
  inset: 0;
  opacity: 0.5;
  background: linear-gradient(120deg, transparent 0 58%, rgba(214, 228, 221, 0.3) 70%, transparent 88%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.58) 46%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.58) 46%, transparent 100%);
}

.daily-draw-modal:has(.daily-reveal-card)::after {
  right: -40px;
  bottom: -22px;
  left: -40px;
  height: 42%;
  opacity: 0.2;
  background: url("../assets/images/daily/daily_reveal_modal_bg_v1.jpg") right bottom / cover no-repeat;
}

.daily-draw-modal:has(.daily-reveal-card) > * {
  position: relative;
  z-index: 1;
}

.daily-draw-modal:has(.daily-reveal-card) .sheet-title {
  gap: 8px;
  margin-bottom: 0;
}

.daily-draw-modal:has(.daily-reveal-card) .sheet-title h2 {
  color: var(--jade-900);
  font-size: 26px;
  line-height: 1.25;
}

.daily-draw-modal:has(.daily-reveal-card) .sheet-title p {
  color: rgba(44, 68, 62, 0.7);
  font-size: 14px;
}

.daily-ritual-card,
.daily-reveal-card {
  justify-self: center;
  width: min(100%, 242px);
  min-height: 306px;
  border: 1px solid rgba(215, 180, 107, 0.36);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.94), rgba(222, 239, 233, 0.78)),
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(211, 232, 224, 0.72));
  box-shadow: 0 18px 42px rgba(21, 76, 62, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.76);
}

.daily-ritual-card {
  position: relative;
  display: grid;
  width: min(100%, 310px);
  min-height: 338px;
  place-items: center;
  align-content: center;
  gap: 12px;
  overflow: hidden;
  border-color: rgba(218, 190, 120, 0.42);
  border-radius: 22px;
  color: var(--jade-900);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(250, 252, 249, 0.7) 54%, rgba(239, 247, 243, 0.86)),
    url("../assets/images/daily/daily_reveal_modal_bg_v1.jpg") center / 100% 100% no-repeat;
  transform-style: preserve-3d;
}

.daily-ritual-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.42;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.18));
}

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

.daily-ritual-card span {
  display: grid;
  width: 86px;
  height: 86px;
  place-items: center;
  border: 1px solid rgba(215, 180, 107, 0.42);
  border-radius: 50%;
  font-size: 40px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.58);
}

.daily-ritual-card small {
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0;
}

.daily-ritual-card.is-drawing {
  animation: daily-card-ritual 1s cubic-bezier(0.22, 0.88, 0.32, 1) both;
}

.daily-reveal-card {
  position: relative;
  display: grid;
  width: min(100%, 310px);
  min-height: 338px;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding: 30px 20px 26px;
  overflow: hidden;
  border-color: rgba(218, 190, 120, 0.42);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(250, 252, 249, 0.74) 54%, rgba(244, 249, 246, 0.86)),
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.96), rgba(228, 241, 235, 0.56) 60%, transparent 72%);
  box-shadow:
    0 18px 42px rgba(21, 76, 62, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.82),
    inset 0 0 0 2px rgba(218, 190, 120, 0.1);
  transform-origin: center;
  animation: daily-card-reveal 300ms cubic-bezier(0.2, 0.88, 0.28, 1) both;
}

.daily-reveal-card::before,
.daily-reveal-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.daily-reveal-card::before {
  inset: 0;
  opacity: 0.58;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.58) 48%, rgba(255, 255, 255, 0.16) 100%),
    url("../assets/images/daily/daily_reveal_modal_bg_v1.jpg") center / 100% 100% no-repeat;
}

.daily-reveal-card::after {
  top: 14px;
  left: 18px;
  width: 82px;
  height: 38px;
  opacity: 0.24;
  border-top: 1px solid rgba(218, 190, 120, 0.48);
  border-radius: 50%;
  transform: rotate(-6deg);
}

.daily-reveal-card > * {
  position: relative;
  z-index: 1;
  transform: translateY(-8px);
}

.daily-reveal-card .hex-symbol {
  width: 92px;
  height: 92px;
  overflow: visible;
  border: 0;
  color: var(--jade-900);
  font-size: 42px;
  background: url("../assets/images/daily/daily_hex_ring_v3.png") center / contain no-repeat;
  box-shadow: none;
}

.daily-reveal-card h3 {
  margin: 0;
  color: var(--jade-900);
  font-size: 31px;
  line-height: 1.2;
}

.daily-reveal-card .chips {
  justify-content: center;
  gap: 9px;
  margin: 2px 0 0;
}

.daily-reveal-card .chips span {
  min-width: 64px;
  padding: 6px 13px;
  border-color: rgba(23, 107, 87, 0.14);
  color: var(--jade-900);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.daily-modal-message {
  width: 100%;
  margin: 4px 0 0;
  padding-top: 17px;
  border-top: 1px solid rgba(218, 190, 120, 0.26);
  color: rgba(31, 45, 43, 0.92);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
}

.daily-draw-modal:has(.daily-reveal-card) .sheet-actions {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 2px;
}

.daily-draw-modal:has(.daily-reveal-card) .sheet-actions .jade-button,
.daily-draw-modal:has(.daily-reveal-card) .sheet-actions .outline-button {
  min-width: 0;
  min-height: 46px;
  margin-top: 0;
  border-radius: 999px;
  font-size: 16px;
}

.daily-draw-modal:has(.daily-reveal-card) .sheet-actions .jade-button {
  border-color: rgba(218, 190, 120, 0.76);
  background:
    linear-gradient(135deg, rgba(16, 82, 68, 0.92), rgba(42, 119, 98, 0.84)),
    url("../assets/images/textures/jade_button_texture.png") center / cover no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 12px 24px rgba(16, 86, 70, 0.18);
}

.daily-draw-modal:has(.daily-reveal-card) .sheet-actions .outline-button {
  border-color: rgba(23, 107, 87, 0.34);
  color: var(--jade-900);
  background: rgba(255, 255, 255, 0.5);
}

@keyframes daily-modal-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes daily-card-ritual {
  0% {
    box-shadow: 0 18px 42px rgba(21, 76, 62, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.76);
    transform: translateY(0) rotateY(0deg) scale(1);
  }
  30% {
    box-shadow: 0 20px 46px rgba(21, 76, 62, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.8);
    transform: translateY(-4px) rotateY(3deg) scale(1.012);
  }
  80% {
    box-shadow: 0 24px 54px rgba(21, 76, 62, 0.2), 0 0 28px rgba(215, 180, 107, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.84);
    transform: translateY(-9px) rotateY(9deg) scale(1.035);
  }
  100% {
    box-shadow: 0 18px 42px rgba(21, 76, 62, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.76);
    transform: translateY(0) rotateY(0deg) scale(1);
  }
}

@keyframes daily-card-reveal {
  from {
    opacity: 0;
    transform: rotateY(78deg) scale(0.96);
  }
  to {
    opacity: 1;
    transform: rotateY(0deg) scale(1);
  }
}

@keyframes cast-charge-coin-breathe {
  from {
    transform: translateY(2px) scale(0.985);
  }
  to {
    transform: translateY(-4px) scale(1.015);
  }
}

@keyframes cast-charge-launch {
  0% {
    opacity: 1;
    transform: translate(-50%, var(--cast-lift-y)) scale(1);
  }
  58% {
    opacity: 1;
    transform: translate(-50%, calc(var(--cast-lift-y) - 150px)) scale(0.88) rotateX(28deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(var(--cast-lift-y) - 280px)) scale(0.68) rotateX(72deg);
  }
}

@keyframes cast-charge-path-sheen {
  from {
    stroke-dashoffset: 38;
  }
  to {
    stroke-dashoffset: -38;
  }
}

@keyframes cast-nav-hold-progress {
  from {
    stroke-dashoffset: 75.4;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes cast-nav-demo-press {
  0%, 100% {
    transform: scale(1);
  }
  18% {
    transform: translateY(1px) scale(0.9);
  }
  52% {
    transform: scale(1.02);
  }
}

@keyframes cast-nav-demo-coin {
  0% {
    opacity: 0;
    transform: translate(-50%, 3px) rotate(-8deg) scale(0.78);
  }
  24% {
    opacity: 0.82;
  }
  62% {
    opacity: 0.72;
    transform: translate(calc(-50% + 8px), -11px) rotate(18deg) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + 5px), -5px) rotate(10deg) scale(0.9);
  }
}

@keyframes ritual-modal-breathe {
  from {
    transform: scale(0.995);
  }
  to {
    transform: scale(1.01);
  }
}

@keyframes ritual-gather-dim {
  0% {
    opacity: 1;
    transform: scale(0.995);
  }
  50% {
    opacity: 0.88;
    transform: scale(0.99);
  }
  100% {
    opacity: 0.96;
    transform: scale(1);
  }
}

@keyframes ritual-coin-gather {
  0% {
    transform: translate(var(--rest-x), var(--rest-y)) rotateZ(0deg) scale(1) scale(var(--depth-scale));
    filter: drop-shadow(0 14px 14px rgba(29, 65, 53, 0.15));
  }
  50% {
    transform: translate(calc(var(--rest-x) * 0.82), calc(var(--rest-y) * 0.82 - 4px)) rotateZ(calc(var(--tilt) * 0.16)) scale(0.98) scale(var(--depth-scale));
    opacity: 0.92;
  }
  100% {
    transform: translate(calc(var(--rest-x) * 0.72), calc(var(--rest-y) * 0.72)) rotateZ(0deg) scale(1.02) scale(var(--depth-scale));
    filter: drop-shadow(0 16px 18px rgba(29, 65, 53, 0.18));
  }
}

@keyframes ritual-coin-throw {
  0% {
    transform: translate(calc(var(--rest-x) * 0.72), calc(var(--rest-y) * 0.72)) rotateZ(0deg) rotateY(0deg) scale(1.02) scale(var(--depth-scale));
    opacity: 0.88;
    filter: drop-shadow(0 14px 12px rgba(29, 65, 53, 0.16));
  }
  38% {
    transform: translate(calc(var(--rest-x) * 0.42 + var(--arc-x) * 0.25), calc(var(--rest-y) * 0.42 - 12px)) rotateZ(calc(var(--tilt) * -0.3)) rotateY(70deg) scaleX(0.92) scale(1.06) scale(var(--depth-scale));
    opacity: 0.96;
  }
  100% {
    transform: translate(calc(var(--rest-x) + var(--arc-x) * 0.58 + var(--jitter-x) * -3), calc(var(--rest-y) + var(--rise) * 0.42)) translateZ(var(--z-depth)) rotateZ(var(--tilt)) rotateY(260deg) rotateX(8deg) scaleX(0.82) scale(1.08) scale(var(--depth-scale));
    opacity: 0.82;
    filter: drop-shadow(0 28px 22px rgba(29, 65, 53, 0.2));
  }
}

@keyframes ritual-coin-throw-flip {
  0% {
    transform: translate(calc(var(--rest-x) + var(--arc-x) * 0.58 + var(--jitter-x) * -3), calc(var(--rest-y) + var(--rise) * 0.42)) translateZ(var(--z-depth)) rotateZ(var(--tilt)) rotateY(260deg) rotateX(8deg) scaleX(0.82) scale(1.08) scale(var(--depth-scale));
    opacity: 0.84;
    filter: drop-shadow(0 28px 22px rgba(29, 65, 53, 0.22));
  }
  28% {
    transform: translate(calc(var(--rest-x) + var(--arc-x) + var(--jitter-x) * 4), calc(var(--rest-y) + var(--rise) * 0.82)) translateZ(calc(var(--z-depth) + 14px)) rotateZ(calc(var(--tilt) * -1.2)) rotateY(590deg) rotateX(-10deg) scaleX(1.08) scale(1.12) scale(var(--depth-scale));
    opacity: 0.92;
  }
  62% {
    transform: translate(calc(var(--rest-x) + var(--arc-x) * 0.75 + var(--jitter-x) * -5), calc(var(--rest-y) + var(--rise) * 1.05)) translateZ(calc(var(--z-depth) + 22px)) rotateZ(calc(var(--tilt) * 1.4)) rotateY(910deg) rotateX(7deg) scaleX(0.9) scale(1.14) scale(var(--depth-scale));
    opacity: 1;
  }
  100% {
    transform: translate(calc(var(--rest-x) + var(--arc-x) * 0.42 + var(--jitter-x) * 2), calc(var(--rest-y) + var(--rise) * 0.68)) translateZ(var(--z-depth)) rotateZ(calc(var(--tilt) * 0.55)) rotateY(920deg) rotateX(4deg) scaleX(1) scale(1.05) scale(var(--depth-scale));
    opacity: 0.92;
    filter: drop-shadow(0 26px 24px rgba(29, 65, 53, 0.2));
  }
}

@keyframes ritual-coin-fall {
  0% {
    transform: translate(calc(var(--rest-x) + var(--arc-x) * 0.42 + var(--jitter-x) * 2), calc(var(--rest-y) + var(--rise) * 0.68)) translateZ(var(--z-depth)) rotateZ(calc(var(--tilt) * 0.55)) rotateY(1180deg) rotateX(4deg) scale(1.05) scale(var(--depth-scale));
    filter: drop-shadow(0 24px 24px rgba(29, 65, 53, 0.18));
    opacity: 0.9;
  }
  36% {
    transform: translate(calc(var(--rest-x) + var(--arc-x) * 0.2 + var(--jitter-x) * -2), calc(var(--rest-y) + var(--rise) * 0.36)) translateZ(calc(var(--z-depth) * 0.7)) rotateZ(calc(var(--tilt) * -0.4)) rotateY(1010deg) rotateX(-5deg) scale(1.025) scale(var(--depth-scale));
    filter: drop-shadow(0 18px 18px rgba(29, 65, 53, 0.2));
  }
  74% {
    transform: translate(calc(var(--rest-x) + var(--jitter-x)), calc(var(--rest-y) + 8px)) translateZ(0) rotateZ(calc(var(--tilt) * 0.25)) rotateY(1090deg) rotateX(2deg) scale(1) scale(var(--depth-scale));
    filter: drop-shadow(0 10px 10px rgba(29, 65, 53, 0.24));
  }
  100% {
    transform: translate(var(--rest-x), calc(var(--rest-y) + 14px)) rotateZ(0deg) rotateY(1100deg) rotateX(0deg) scale(0.96) scale(var(--depth-scale));
    filter: drop-shadow(0 4px 4px rgba(29, 65, 53, 0.32));
    opacity: 1;
  }
}

@keyframes ritual-coin-impact {
  0% {
    transform: translate(var(--rest-x), calc(var(--rest-y) + 14px)) rotateZ(0deg) rotateY(1100deg) scale(1) scale(var(--depth-scale));
    filter: drop-shadow(0 7px 6px rgba(29, 65, 53, 0.2));
  }
  28% {
    transform: translate(calc(var(--rest-x) + var(--jitter-x)), calc(var(--rest-y) + 15px)) rotateZ(1deg) scale(0.94) scale(var(--depth-scale));
    filter: drop-shadow(0 4px 4px rgba(29, 65, 53, 0.34));
  }
  48% {
    transform: translate(calc(var(--rest-x) - var(--jitter-x)), calc(var(--rest-y) + 10px)) rotateZ(-1deg) scale(1.025) scale(var(--depth-scale));
    filter: drop-shadow(0 18px 16px rgba(29, 65, 53, 0.28));
  }
  72% {
    transform: translate(calc(var(--rest-x) + var(--jitter-x)), calc(var(--rest-y) + 12px)) rotateZ(0.5deg) scale(0.985) scale(var(--depth-scale));
  }
  82%,
  100% {
    transform: translate(var(--rest-x), calc(var(--rest-y) + 10px)) rotateZ(0deg) scale(1) scale(var(--depth-scale));
    filter: drop-shadow(0 12px 12px rgba(29, 65, 53, 0.18));
  }
}

@keyframes ritual-coin-glow {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  34% {
    opacity: 0.9;
    transform: scale(0.9);
  }
  100% {
    opacity: 0;
    transform: scale(1.26);
  }
}

@keyframes ritual-ground-ripple {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.55);
  }
  32% {
    opacity: 0.88;
    transform: translateX(-50%) scale(0.9);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scale(1.26);
  }
}

@keyframes ritual-line-lit {
  0% {
    opacity: 0.45;
    transform: scaleX(0.72);
    background: linear-gradient(90deg, rgba(143, 165, 155, 0.34), rgba(15, 107, 85, 0.52), rgba(143, 165, 155, 0.34));
  }
  45% {
    opacity: 0.74;
    transform: scaleX(0.9);
    background: linear-gradient(90deg, rgba(15, 107, 85, 0.34), rgba(216, 185, 106, 0.58), rgba(15, 107, 85, 0.34));
  }
  70% {
    box-shadow: 0 0 0 1px rgba(216, 185, 106, 0.44), 0 0 12px rgba(216, 185, 106, 0.22);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
    background: linear-gradient(90deg, rgba(15, 107, 85, 0.48), var(--jade-900), rgba(15, 107, 85, 0.48));
    box-shadow: none;
  }
}

@keyframes ritual-line-sheen {
  from {
    opacity: 0;
    transform: translateX(-26%) scaleX(0.45);
  }
  45% {
    opacity: 0.82;
  }
  to {
    opacity: 0;
    transform: translateX(26%) scaleX(0.72);
  }
}

@keyframes ritual-line-result-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hex-symbol {
  display: grid;
  height: 70px;
  place-items: center;
  border: 1px solid rgba(215, 180, 107, 0.32);
  border-radius: 50%;
  color: var(--jade-900);
  font-size: 42px;
  background: radial-gradient(circle, #ffffff, #dceae5);
}

h2,
p {
  margin-top: 0;
}

.daily-layout h2,
.course-card h2,
.record-card h2,
.user-card h2 {
  margin-bottom: 8px;
  font-size: 21px;
}

.daily-layout p,
.record-note,
.user-card p,
.course-card p {
  color: var(--muted);
  line-height: 1.65;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.chips span {
  padding: 5px 13px;
  border: 1px solid rgba(23, 107, 87, 0.12);
  border-radius: 999px;
  color: var(--jade-900);
  background: rgba(201, 223, 215, 0.65);
  font-size: 13px;
}

.text-button {
  border: 0;
  color: var(--jade-700);
  background: transparent;
  font-size: 14px;
  font-weight: 700;
}

.result-grid {
  display: grid;
  grid-template-columns: 1fr 20px 1fr 76px;
  gap: 8px;
  align-items: center;
}

.compact-result-grid {
  grid-template-columns: 1fr 28px 1fr;
  gap: 12px;
  align-items: center;
  max-width: 340px;
  margin: 6px auto 0;
}

.result-block,
.moving-line {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 10px 6px;
  border-right: 1px solid rgba(215, 220, 224, 0.55);
}

.compact-result-grid .result-block {
  border-right: 0;
  gap: 7px;
  padding: 8px 4px;
}

.compact-result-grid .hexagram-line-view {
  width: 64px;
  gap: 6px;
}

.compact-result-grid .hexagram-line-view span {
  height: 5px;
}

.compact-result-grid .result-block strong {
  color: var(--jade-900);
  font-size: 18px;
  line-height: 1.25;
}

.compact-result-grid .result-block small {
  font-size: 13px;
}

.result-link {
  width: 100%;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  color: inherit;
  font: inherit;
  background: transparent;
  cursor: pointer;
}

.result-link:hover,
.library-card:hover,
.course-card[data-action="open-library"]:hover {
  border-color: rgba(23, 107, 87, 0.24);
  box-shadow: 0 16px 34px rgba(46, 72, 65, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.moving-line {
  border-right: 0;
}

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

.result-block small,
.moving-line span,
.record-hex-item small {
  color: var(--muted);
  font-size: 12px;
}

/* HexagramLineView */
.hexagram-line-view,
.mini-lines {
  display: grid;
  width: 42px;
  gap: 4px;
}

.hexagram-line-view span,
.mini-lines span {
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(15, 74, 60, 0.45), var(--jade-900), rgba(15, 74, 60, 0.45));
}

.hexagram-line-view .broken,
.mini-lines .broken {
  background: linear-gradient(90deg, var(--jade-900) 0 39%, transparent 40% 60%, var(--jade-900) 61%);
}

.hexagram-line-view .moving {
  box-shadow: 0 0 0 1px rgba(215, 180, 107, 0.7), 0 0 10px rgba(215, 180, 107, 0.5);
}

.arrow {
  color: var(--muted);
  font-size: 34px;
  text-align: center;
}

.moving-summary,
.result-keyword-line {
  margin: 12px 0 0;
  color: var(--muted);
  text-align: center;
  line-height: 1.6;
}

.moving-summary {
  color: var(--jade-700);
  font-weight: 700;
}

.result-keyword-line {
  font-size: 14px;
}

.direction {
  margin: 14px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

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

.outline-button,
.line-toggle {
  border: 1px solid rgba(23, 107, 87, 0.22);
  border-radius: 999px;
  color: var(--jade-700);
  background: rgba(255, 255, 255, 0.58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  cursor: pointer;
}

.outline-button {
  min-height: 38px;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 700;
}

.outline-button:disabled,
.jade-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.line-empty {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.line-results {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(215, 220, 224, 0.62);
}

.line-toggle {
  justify-self: start;
  padding: 7px 13px;
  font-size: 13px;
}

.line-results-title {
  color: var(--jade-900);
  font-size: 14px;
  font-weight: 700;
}

.line-results-help {
  margin: -2px 0 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.line-result {
  display: grid;
  grid-template-columns: 42px 54px 72px 28px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid rgba(215, 220, 224, 0.45);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.48);
}

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

.line-result strong {
  color: var(--jade-900);
  font-size: 14px;
}

.line-result small {
  color: var(--muted);
  font-size: 12px;
}

.line-result b {
  color: var(--jade-900);
  font-size: 14px;
}

.line-result em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.line-result.is-moving {
  border-color: rgba(215, 180, 107, 0.72);
  background: rgba(255, 251, 241, 0.7);
}

.line-result.is-moving > em {
  color: #947334;
  font-weight: 700;
}

.save-form,
.detail-panel {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(215, 220, 224, 0.62);
}

.save-form label {
  display: grid;
  gap: 6px;
  color: var(--jade-900);
  font-size: 13px;
  font-weight: 700;
}

.save-form input,
.save-form textarea,
.save-form select {
  width: 100%;
  border: 1px solid rgba(174, 180, 178, 0.42);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  font: inherit;
  outline: none;
}

.save-form textarea {
  resize: vertical;
}

.switch-row {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.form-note,
.form-error,
.form-success,
.detail-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.form-success {
  color: var(--jade-700);
  font-weight: 700;
}

.form-error {
  color: #a2672a;
  font-weight: 700;
}

.save-toast {
  position: fixed;
  z-index: var(--z-overlay);
  top: max(22px, calc(env(safe-area-inset-top) + 14px));
  left: 50%;
  width: min(320px, calc(100vw - 48px));
  margin: 0;
  padding: 10px 14px;
  transform: translateX(-50%);
  border: 1px solid rgba(23, 107, 87, 0.16);
  border-radius: 999px;
  color: var(--jade-700);
  background: rgba(246, 252, 249, 0.94);
  box-shadow: 0 14px 34px rgba(21, 76, 62, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  white-space: pre-line;
  pointer-events: none;
  backdrop-filter: blur(16px);
}

.sheet-overlay {
  position: fixed;
  z-index: var(--z-overlay);
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom));
  background: rgba(21, 43, 37, 0.24);
  backdrop-filter: blur(8px);
}

.save-sheet {
  width: min(100%, 420px);
  max-height: min(82vh, 620px);
  overflow-y: auto;
  margin: 0;
  padding: 20px;
  border: 1px solid rgba(215, 180, 107, 0.28);
  border-radius: 24px 24px 18px 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(242, 249, 246, 0.76)),
    radial-gradient(circle at 20% 0%, rgba(207, 227, 220, 0.6), transparent 42%);
  box-shadow: 0 -18px 48px rgba(30, 55, 48, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.sheet-handle {
  justify-self: center;
  width: 46px;
  height: 4px;
  border-radius: 999px;
  background: rgba(130, 145, 140, 0.38);
}

.sheet-title {
  display: grid;
  gap: 6px;
  margin-bottom: 2px;
}

.sheet-title h2 {
  margin: 0;
  color: var(--jade-900);
  font-size: 22px;
}

.sheet-title p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

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

.sheet-actions.single {
  grid-template-columns: 1fr;
}

.result-guide {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(215, 180, 107, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.54);
}

.result-guide summary {
  color: var(--jade-900);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.result-guide ol {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding-left: 20px;
}

.result-guide li {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.result-guide strong {
  margin-right: 6px;
  color: var(--jade-900);
}

.result-detail-sections {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.result-detail-section {
  padding: 13px 14px;
  border: 1px solid rgba(215, 180, 107, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.56);
}

.result-detail-section summary {
  cursor: pointer;
  color: var(--jade-900);
  font-weight: 750;
}

.result-detail-section p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.result-detail-section strong {
  color: var(--jade-900);
}

.result-hex-explanation + .result-hex-explanation {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(215, 180, 107, 0.18);
}

.reading-steps-mini {
  display: grid;
  gap: 5px;
  padding: 11px 13px;
  border: 1px solid rgba(215, 180, 107, 0.22);
  border-radius: 12px;
  color: rgba(41, 58, 53, 0.74);
  background: rgba(250, 247, 238, 0.62);
}

.reading-steps-mini strong {
  color: var(--jade-900);
  font-size: 14px;
}

.reading-steps-mini span,
.reading-steps-mini small {
  line-height: 1.55;
}

.reading-steps-mini span {
  font-size: 13px;
  font-weight: 700;
}

.reading-steps-mini small {
  color: var(--muted);
  font-size: 12px;
}

.reading-steps-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(215, 180, 107, 0.22);
  border-radius: 12px;
  background: rgba(250, 247, 238, 0.58);
}

.reading-formula {
  margin: 0;
  color: var(--jade-900);
  font-weight: 800;
  line-height: 1.65;
}

.reading-step-list {
  display: grid;
  gap: 8px;
}

.reading-step-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}

.reading-step-item > span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  color: var(--jade-700);
  background: rgba(223, 240, 232, 0.82);
  font-size: 12px;
  font-weight: 800;
}

.reading-step-item strong {
  color: var(--jade-900);
  font-size: 14px;
}

.reading-step-item p,
.reading-rule-note,
.reading-summary-note,
.reading-position-list {
  margin: 0;
  color: rgba(41, 58, 53, 0.74);
  font-size: 13px;
  line-height: 1.65;
}

.reading-rule-note {
  padding: 10px 12px;
  border-left: 3px solid rgba(215, 180, 107, 0.58);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.54);
}

.reading-position-list {
  display: grid;
  gap: 6px;
  padding-left: 18px;
}

.reading-summary-note {
  color: var(--jade-900);
  font-weight: 700;
}

.result-sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: min(92vh, 760px);
  overflow: hidden;
  animation: result-sheet-arrive 0.42s cubic-bezier(0.18, 0.86, 0.22, 1) both;
}

.result-reveal-sheet {
  width: min(100%, 430px);
  padding: 18px 20px 16px;
  border-color: rgba(218, 181, 108, 0.46);
  border-radius: 30px 30px 22px 22px;
  background-color: rgba(248, 252, 248, 0.86);
  background-image:
    linear-gradient(180deg, rgba(255, 253, 247, 0.42), rgba(246, 251, 248, 0.58) 52%, rgba(248, 252, 248, 0.84) 82%, rgba(248, 252, 248, 0.92)),
    url("../assets/images/result/result_reveal_sheet_bg_v2.jpg");
  background-position: center, center;
  background-size: cover, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  box-shadow:
    0 -24px 58px rgba(20, 48, 42, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset,
    0 1px 0 rgba(255, 255, 255, 0.86) inset;
}

.result-sheet-head,
.result-sheet-body,
.result-sheet-actions {
  position: relative;
  z-index: 1;
}

.result-sheet-head {
  display: grid;
  flex-shrink: 0;
  gap: 18px;
  margin-bottom: 14px;
  padding: 0 38px 0 4px;
}

.result-reveal-sheet .sheet-handle {
  width: 52px;
  height: 5px;
  background: rgba(102, 125, 117, 0.34);
}

.result-reveal-sheet .sheet-title {
  gap: 7px;
}

.result-reveal-sheet .sheet-title h2 {
  position: relative;
  width: fit-content;
  color: var(--jade-900);
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: 0;
}

.result-reveal-sheet .sheet-title p {
  color: rgba(68, 81, 77, 0.72);
  font-size: 16px;
  line-height: 1.55;
}

.result-sheet-body {
  display: grid;
  flex: 1;
  min-height: 0;
  gap: 12px;
  overflow-y: auto;
  padding: 2px 2px 10px;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.result-sheet-body > * {
  min-height: 0;
  flex-shrink: 0;
}

.result-reveal-overlay {
  animation: result-overlay-settle 0.36s ease-out both;
}

.result-reveal-sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.9;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 8%, rgba(216, 185, 106, 0.18), transparent 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 24%, rgba(244, 250, 247, 0.38) 68%, rgba(248, 252, 248, 0.68));
  animation: result-aura-bloom 0.72s ease-out both;
}

.result-sheet-close {
  position: absolute;
  z-index: 2;
  top: 22px;
  right: 20px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(208, 176, 113, 0.48);
  border-radius: 50%;
  color: rgba(67, 83, 77, 0.72);
  background:
    linear-gradient(145deg, rgba(255, 252, 244, 0.94), rgba(240, 248, 244, 0.82));
  box-shadow:
    0 8px 20px rgba(44, 65, 58, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
  font-size: 0;
  line-height: 0;
}

.result-sheet-close::before,
.result-sheet-close::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 2px;
  border-radius: 999px;
  background: rgba(67, 83, 77, 0.7);
  transform-origin: center;
}

.result-sheet-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.result-sheet-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.result-sheet-focus {
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: max-content;
  flex-shrink: 0;
  height: auto;
  padding: 18px 16px 22px;
  border: 1px solid rgba(215, 180, 107, 0.34);
  border-radius: 20px;
  background-color: rgba(249, 252, 248, 0.82);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(247, 252, 249, 0.42)),
    url("../assets/images/result/result_reveal_focus_bg_v2.jpg");
  background-position: center, center;
  background-size: cover, 100% 100%;
  background-repeat: no-repeat, no-repeat;
  box-shadow:
    0 14px 24px rgba(37, 61, 54, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
  animation: result-focus-settle 0.5s cubic-bezier(0.16, 0.84, 0.24, 1) both;
}

.result-orbit {
  position: absolute;
  inset: 40px 54px 32px;
  border: 1px solid rgba(216, 185, 106, 0.16);
  border-radius: 50%;
  opacity: 0.42;
  pointer-events: none;
  animation: result-orbit-appear 0.8s ease-out both;
}

.result-orbit::before,
.result-orbit::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(23, 107, 87, 0.09);
  border-radius: 50%;
}

.result-orbit::after {
  inset: 22px;
  border-color: rgba(216, 185, 106, 0.14);
}

.result-seal {
  position: relative;
  z-index: 1;
  padding: 5px 18px;
  border: 1px solid rgba(199, 156, 85, 0.48);
  border-radius: 14px;
  color: var(--jade-900);
  background:
    linear-gradient(180deg, rgba(255, 253, 248, 0.92), rgba(246, 250, 247, 0.84));
  box-shadow:
    0 4px 10px rgba(45, 65, 58, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: 800;
  animation: result-seal-pop 0.34s ease-out 0.16s both;
}

.result-sheet-focus h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 4px;
  color: var(--jade-900);
  font-size: 36px;
  line-height: 1.15;
  animation: result-title-rise 0.36s ease-out 0.24s both;
}

.result-hexagram-visual {
  position: relative;
  z-index: 1;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 142px;
  min-height: 114px;
  padding: 6px 0 8px;
  overflow: visible;
}

.result-sheet-focus .hexagram-line-view {
  position: relative;
  z-index: 1;
  width: 118px;
  gap: 8px;
  min-height: 96px;
  padding: 0;
  overflow: visible;
  flex-shrink: 0;
  animation: result-hex-settle 0.5s cubic-bezier(0.16, 0.84, 0.24, 1) 0.1s both;
}

.result-sheet-focus .hexagram-line-view span {
  height: 7px;
  border-radius: 999px;
  box-shadow: 0 2px 5px rgba(17, 70, 57, 0.14);
  transform-origin: center;
  animation: result-line-reveal 0.32s ease-out both;
}

.result-sheet-focus .hexagram-line-view span:nth-child(1) {
  animation-delay: 0.48s;
}

.result-sheet-focus .hexagram-line-view span:nth-child(2) {
  animation-delay: 0.42s;
}

.result-sheet-focus .hexagram-line-view span:nth-child(3) {
  animation-delay: 0.36s;
}

.result-sheet-focus .hexagram-line-view span:nth-child(4) {
  animation-delay: 0.3s;
}

.result-sheet-focus .hexagram-line-view span:nth-child(5) {
  animation-delay: 0.24s;
}

.result-sheet-focus .hexagram-line-view span:nth-child(6) {
  animation-delay: 0.18s;
}

.result-sheet-change {
  position: static;
  z-index: 1;
  margin: 2px 0 0;
  color: rgba(43, 58, 53, 0.9);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.82);
  animation: result-title-rise 0.34s ease-out 0.58s both;
}

.result-sheet-keywords {
  position: static;
  justify-content: center;
  gap: 10px;
  margin-top: 2px;
}

.result-sheet-keywords span {
  display: inline-flex;
  align-items: center;
  min-width: 64px;
  justify-content: center;
  border-color: rgba(198, 161, 96, 0.28);
  color: var(--jade-900);
  background:
    linear-gradient(180deg, rgba(238, 249, 244, 0.82), rgba(225, 242, 236, 0.68));
  box-shadow: 0 5px 12px rgba(29, 70, 58, 0.08);
}

.no-change-mark {
  display: grid;
  width: 58px;
  min-height: 52px;
  place-items: center;
  color: var(--muted);
  font-weight: 700;
}

.result-sheet-direction {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: auto;
  margin: 0;
  padding: 16px 18px;
  border: 1px solid rgba(215, 180, 107, 0.26);
  border-radius: 16px;
  color: rgba(31, 45, 41, 0.92);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.78), rgba(248, 252, 249, 0.72)),
    radial-gradient(circle at 8% 100%, rgba(132, 169, 155, 0.16), transparent 42%);
  box-shadow:
    0 10px 22px rgba(42, 64, 56, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  font-weight: 650;
  line-height: 1.72;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.result-sheet-meta {
  display: grid;
  gap: 6px;
  justify-self: center;
  width: 100%;
  max-width: 100%;
  padding: 0;
  color: rgba(57, 70, 65, 0.78);
  font-size: 14px;
  line-height: 1.38;
  text-align: center;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.72);
}

.result-sheet-meta span {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 22px;
}

.result-sheet-meta span::before,
.result-sheet-meta span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(198, 161, 96, 0.42);
  transform: translateY(-50%) rotate(45deg);
}

.result-sheet-meta span::before {
  left: 6px;
}

.result-sheet-meta span::after {
  right: 6px;
}

.modal-guide {
  margin-top: 0;
}

.result-sheet-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  width: 100%;
  position: static !important;
  flex-shrink: 0;
  margin-top: 4px;
  padding: 4px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  transform: none !important;
  background: transparent;
}

.result-sheet-actions button {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding-right: 14px;
  padding-left: 14px;
  border-radius: 16px;
  font-size: 17px;
  font-weight: 800;
  white-space: nowrap;
}

.result-sheet-actions .jade-button {
  border: 1px solid rgba(202, 166, 99, 0.64);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(23, 125, 98, 0.96), rgba(7, 103, 81, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.result-sheet-actions .outline-button {
  border: 1px solid rgba(198, 161, 96, 0.38);
  color: var(--jade-900);
  background:
    linear-gradient(180deg, rgba(255, 252, 246, 0.86), rgba(247, 251, 248, 0.78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

@media (max-width: 520px) {
  .result-sheet-body {
    gap: 11px;
    padding-bottom: 12px;
  }

  .result-sheet-focus {
    gap: 9px;
    min-height: auto;
    padding: 16px 14px 21px;
  }

  .result-reveal-sheet {
    width: min(100%, 430px);
    max-height: min(91vh, 760px);
    padding: 18px 18px 14px;
    border-radius: 28px 28px 22px 22px;
  }

  .result-reveal-sheet .sheet-title h2 {
    font-size: 28px;
  }

  .result-reveal-sheet .sheet-title p {
    font-size: 15px;
  }

  .result-hexagram-visual {
    width: 136px;
    min-height: 106px;
    padding: 6px 0 8px;
  }

  .result-sheet-focus .hexagram-line-view {
    width: 108px;
    min-height: 88px;
    gap: 7px;
    transform: none !important;
    animation: none !important;
  }

  .result-sheet-focus h3,
  .result-sheet-change,
  .result-sheet-keywords,
  .result-sheet-direction {
    position: static !important;
    transform: none !important;
    animation: none !important;
  }

  .result-sheet-change {
    margin-top: 4px;
    font-size: 15px;
    line-height: 1.45;
  }

  .result-sheet-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 3px;
    z-index: auto;
  }

  .result-sheet-direction {
    margin-top: 2px;
  }

  .result-sheet-actions {
    position: static !important;
    transform: none !important;
    margin-top: 2px;
  }
}

@media (max-width: 340px) {
  .result-sheet-actions {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }

  .result-sheet-actions button {
    padding-right: 8px;
    padding-left: 8px;
    font-size: 13px;
  }
}

@keyframes sheet-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes result-overlay-settle {
  from {
    background: rgba(7, 24, 20, 0.16);
    backdrop-filter: blur(4px);
  }
  to {
    background: rgba(7, 24, 20, 0.28);
    backdrop-filter: blur(10px);
  }
}

@keyframes result-sheet-arrive {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.982);
  }
  62% {
    opacity: 1;
    transform: translateY(-3px) scale(1.006);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes result-aura-bloom {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55);
  }
  48% {
    opacity: 0.42;
  }
  to {
    opacity: 0.22;
    transform: translate(-50%, -50%) scale(1.12);
  }
}

@keyframes result-focus-settle {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes result-orbit-appear {
  from {
    opacity: 0;
    transform: scale(0.78) rotate(-8deg);
  }
  to {
    opacity: 0.58;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes result-seal-pop {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.9);
  }
  70% {
    opacity: 1;
    transform: translateY(1px) scale(1.04);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes result-title-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes result-hex-settle {
  from {
    filter: drop-shadow(0 0 0 rgba(216, 185, 106, 0));
    transform: translateY(7px) scale(0.94);
  }
  56% {
    filter: drop-shadow(0 0 14px rgba(216, 185, 106, 0.28));
    transform: translateY(-1px) scale(1.025);
  }
  to {
    filter: drop-shadow(0 8px 14px rgba(21, 76, 62, 0.12));
    transform: translateY(0) scale(1);
  }
}

@keyframes result-line-reveal {
  from {
    opacity: 0;
    transform: scaleX(0.46);
    background: rgba(216, 185, 106, 0.52);
  }
  58% {
    opacity: 1;
    transform: scaleX(1.08);
    box-shadow: 0 0 10px rgba(216, 185, 106, 0.24);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

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

.detail-grid div {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(215, 220, 224, 0.48);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.54);
}

.detail-grid button {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid rgba(23, 107, 87, 0.18);
  border-radius: 8px;
  color: inherit;
  text-align: left;
  background: rgba(255, 255, 255, 0.58);
  cursor: pointer;
}

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

.detail-grid strong {
  color: var(--jade-900);
}

.detail-link-hint {
  color: var(--jade-700);
  font-size: 12px;
  font-weight: 700;
}

.mist-mountain {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 150px;
  height: 86px;
  background: linear-gradient(160deg, rgba(44, 138, 112, 0.22), transparent 60%);
  clip-path: polygon(0 100%, 24% 62%, 38% 82%, 58% 25%, 78% 76%, 100% 42%, 100% 100%);
}

.course-card {
  display: grid;
  grid-template-columns: 76px 1fr 34px;
  gap: 14px;
  align-items: center;
}

.learning-page {
  display: grid;
  gap: 18px;
}

.learning-section {
  display: grid;
  gap: 12px;
}

.learning-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--jade-900);
  font-size: 18px;
  font-weight: 800;
}

.learning-section-title::before {
  width: 5px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--jade-500), var(--jade-900));
  content: "";
}

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

.learning-tool-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 74px;
  padding: 13px 14px;
  border: 1px solid rgba(23, 107, 87, 0.1);
  border-radius: 16px;
  color: inherit;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 8px 22px rgba(21, 76, 62, 0.045), inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  text-align: left;
  cursor: pointer;
}

.learning-tool-card strong {
  display: block;
  margin-bottom: 4px;
  color: var(--jade-900);
  font-size: 15px;
}

.learning-tool-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.learning-tool-card em {
  color: var(--jade-700);
  font-size: 18px;
  font-style: normal;
  font-weight: 800;
}

.learning-main-list {
  display: grid;
  gap: 14px;
}

.learning-main-card {
  position: relative;
  grid-template-columns: 82px minmax(0, 1fr) 32px;
  gap: 15px;
  margin-bottom: 0;
  padding: 18px;
  border-color: rgba(215, 180, 107, 0.2);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.93), rgba(248, 252, 250, 0.86));
  box-shadow: 0 16px 34px rgba(21, 76, 62, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.learning-main-card .course-main {
  min-width: 0;
}

.learning-main-card h2 {
  margin-bottom: 6px;
  color: var(--jade-900);
  font-size: 20px;
}

.learning-main-card p {
  margin-bottom: 12px;
  color: rgba(41, 58, 53, 0.68);
  font-size: 14px;
  line-height: 1.55;
}

.learning-main-card .course-meta {
  justify-content: flex-start;
  gap: 8px;
  margin-top: 0;
}

.learning-main-card .course-meta span {
  color: var(--muted);
  font-size: 12px;
}

.learning-main-card .course-meta strong {
  color: var(--jade-700);
  font-size: 13px;
}

.learning-main-card--locked {
  opacity: 0.76;
  filter: saturate(0.72);
}

.learning-main-card--locked .course-meta strong,
.learning-main-card--locked .course-status {
  color: var(--muted);
}

.study-page {
  display: grid;
  gap: 24px;
  padding-bottom: 12px;
}

.study-hero {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 0 0 4px;
  overflow: hidden;
}

.android-webview .page-study .study-hero {
  margin-top: -8px;
}

.study-hero::after {
  display: none;
}

.study-hero h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--ink);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0;
}

.study-divider {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(54px, 1fr) auto minmax(54px, 1fr);
  gap: 10px;
  align-items: center;
  width: min(230px, 72%);
  color: rgba(196, 168, 105, 0.58);
}

.study-divider span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196, 168, 105, 0.5));
}

.study-divider span:last-child {
  background: linear-gradient(90deg, rgba(196, 168, 105, 0.5), transparent);
}

.study-divider i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: rgba(23, 107, 87, 0.68);
  background: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-style: normal;
  line-height: 20px;
  text-align: center;
  transform: rotate(180deg);
}

.study-section {
  display: grid;
  gap: 12px;
}

.study-section-heading {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 8px;
  align-items: center;
  color: var(--jade-900);
}

.study-section-marker {
  width: 5px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--jade-500), var(--jade-900));
}

.study-section-text {
  font-size: 19px;
  font-weight: 800;
}

.study-section-underline {
  align-self: end;
  width: 42px;
  height: 2px;
  margin-bottom: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-line), transparent);
}

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

.study-path-card {
  display: grid;
  position: relative;
  min-height: 148px;
  grid-template-rows: auto 1fr;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(23, 107, 87, 0.1);
  border-radius: 18px;
  color: inherit;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.32), transparent 48%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(250, 252, 249, 0.88));
  box-shadow: 0 12px 26px rgba(21, 76, 62, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.74);
  cursor: pointer;
}

.study-path-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.24;
  pointer-events: none;
  z-index: 0;
}

.study-path-card--spring::before {
  background-image: url("../assets/images/study_card_bg/bg_spring_bagua_square_v2.webp");
}

.study-path-card--summer::before {
  background-image: url("../assets/images/study_card_bg/bg_summer_64gua_square_v2.webp");
}

.study-path-card--autumn::before {
  background-image: url("../assets/images/study_card_bg/bg_autumn_dongyao_square_v2.webp");
}

.study-path-card--winter::before {
  background-image: url("../assets/images/study_card_bg/bg_winter_najia_square_v2.webp");
}

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

.study-card-icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(215, 180, 107, 0.24);
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 45% 34%, rgba(255, 255, 255, 0.96), rgba(233, 242, 238, 0.78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 16px rgba(21, 76, 62, 0.055);
}

.study-card-icon img {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: contain;
}

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

.study-card-copy h2 {
  display: flex;
  gap: 5px;
  align-items: center;
  margin: 0 0 5px;
  color: var(--jade-900);
  font-size: 18px;
  line-height: 1.25;
}

.study-card-arrow {
  flex: 0 0 auto;
  color: var(--jade-600);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}

.study-card-copy p {
  margin: 0;
  color: rgba(41, 58, 53, 0.66);
  font-size: 13px;
  line-height: 1.55;
  white-space: nowrap;
}

.study-card-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  color: var(--jade-700);
  font-size: 13px;
  font-weight: 800;
}

.study-card-status em {
  color: var(--jade-700);
  font-style: normal;
}

.study-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jade-500);
}

.study-lock {
  color: rgba(76, 100, 93, 0.56);
  font-size: 13px;
}

.study-path-card--locked {
  opacity: 0.78;
  filter: saturate(0.72);
}

.study-path-card--locked .study-card-status,
.study-path-card--locked .study-card-status em,
.study-path-card--locked .study-card-copy h2 {
  color: rgba(41, 58, 53, 0.66);
}

.study-tool-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  column-gap: 8px;
  align-items: center;
  min-height: 82px;
  padding: 13px 14px;
  border: 1px solid rgba(23, 107, 87, 0.09);
  border-radius: 16px;
  color: inherit;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 8px 18px rgba(21, 76, 62, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.68);
  text-align: left;
  cursor: pointer;
}

.study-tool-body {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.study-tool-card strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--jade-900);
  font-size: 15px;
  line-height: 1.22;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.study-tool-card small {
  min-width: 0;
  margin-top: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.study-tool-card em,
.study-classic-card em {
  align-self: center;
  color: rgba(76, 100, 93, 0.58);
  font-style: normal;
  font-weight: 800;
}

.study-tool-card em {
  justify-self: end;
}

.study-classic-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  min-height: 82px;
  padding: 13px 14px;
  border: 1px solid rgba(23, 107, 87, 0.1);
  border-radius: 18px;
  color: inherit;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(250, 252, 249, 0.78));
  box-shadow: 0 10px 22px rgba(21, 76, 62, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.72);
  text-align: left;
  cursor: pointer;
}

.study-classic-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(215, 180, 107, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
}

.study-classic-icon img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.study-classic-card strong {
  display: block;
  margin-bottom: 4px;
  color: var(--jade-900);
  font-size: 16px;
}

.study-classic-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.study-classic-action {
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--jade-700);
  background: rgba(239, 248, 244, 0.86);
  font-size: 13px;
  font-weight: 800;
}

.course-card.is-open,
.course-card[data-action="open-library"] {
  cursor: pointer;
}

.study-toast {
  margin-bottom: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(215, 180, 107, 0.28);
  border-radius: 999px;
  color: var(--jade-900);
  background: rgba(239, 248, 244, 0.82);
  box-shadow: 0 8px 18px rgba(21, 76, 62, 0.07);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.moving-method-page {
  display: grid;
  gap: 12px;
}

.method-formula-card {
  position: relative;
  display: grid;
  gap: 11px;
  padding: 17px 16px;
  border-color: rgba(215, 180, 107, 0.34);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(239, 248, 244, 0.72)) padding-box,
    linear-gradient(135deg, rgba(218, 190, 120, 0.36), rgba(255, 255, 255, 0.18), rgba(23, 107, 87, 0.14)) border-box;
  box-shadow: 0 14px 30px rgba(31, 74, 64, 0.09);
}

.method-formula-card > span {
  justify-self: start;
  padding: 4px 9px;
  border: 1px solid rgba(23, 107, 87, 0.1);
  border-radius: 999px;
  color: var(--jade-700);
  background: rgba(239, 248, 244, 0.82);
  font-size: 12px;
  font-weight: 800;
}

.method-formula-card h2 {
  margin: 0;
  color: var(--jade-900);
  font-size: 21px;
  line-height: 1.42;
  font-weight: 900;
}

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

.method-formula-grid div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid rgba(23, 107, 87, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.54);
}

.method-formula-grid strong {
  color: var(--jade-900);
  font-size: 14px;
}

.method-formula-grid small {
  color: var(--muted);
  font-size: 12px;
}

.method-step-list {
  display: grid;
  gap: 10px;
}

.method-step-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid rgba(215, 180, 107, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
}

.method-step-card > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  color: var(--jade-700);
  background: rgba(223, 240, 232, 0.82);
  font-size: 12px;
  font-weight: 900;
}

.method-step-card h2 {
  margin: 0 0 4px;
  color: var(--jade-900);
  font-size: 16px;
}

.method-step-card p {
  margin: 0;
  color: rgba(41, 58, 53, 0.74);
  font-size: 13px;
  line-height: 1.65;
}

.moving-line-rule-card {
  display: grid;
  gap: 12px;
  padding: 15px;
}

.method-principle-card,
.method-path-card {
  display: grid;
  gap: 11px;
  padding: 14px 15px;
}

.method-principle-grid {
  display: grid;
  gap: 10px;
}

.method-principle-grid div {
  padding: 12px;
  border: 1px solid rgba(215, 180, 107, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.58);
}

.method-principle-grid strong,
.method-path-node span,
.method-count-table strong,
.method-stage-list strong {
  color: var(--jade-900);
  font-size: 14px;
  font-weight: 800;
}

.method-principle-grid p,
.method-path-node small,
.method-count-table p,
.method-stage-list p {
  margin: 0;
  color: rgba(41, 58, 53, 0.74);
  font-size: 13px;
  line-height: 1.65;
}

.method-principle-grid strong {
  display: block;
  margin-bottom: 5px;
}

.method-path-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  counter-reset: method-path-step;
}

.method-path-node {
  position: relative;
  display: grid;
  flex: 1 1 98px;
  gap: 3px;
  min-width: 0;
  padding: 9px 8px 9px 24px;
  border: 1px solid rgba(23, 107, 87, 0.1);
  border-radius: 12px;
  background: rgba(239, 248, 244, 0.76);
  text-align: left;
}

.method-path-node::before {
  counter-increment: method-path-step;
  content: counter(method-path-step);
  position: absolute;
  top: 9px;
  left: 8px;
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(23, 107, 87, 0.7);
  font-size: 9px;
  font-weight: 900;
}

.method-path-flow i {
  display: grid;
  place-items: center;
  color: rgba(160, 124, 58, 0.78);
  font-style: normal;
  font-weight: 900;
}

.method-count-table {
  display: grid;
  gap: 8px;
}

.method-count-table div,
.method-stage-list div {
  display: grid;
  gap: 5px;
  padding: 10px 11px;
  border: 1px solid rgba(23, 107, 87, 0.08);
  border-radius: 12px;
  background: rgba(250, 247, 238, 0.52);
}

.method-count-table strong {
  color: #7d6b44;
}

.method-caution-note {
  margin: 2px 0 0;
  padding: 9px 11px;
  border: 1px solid rgba(215, 180, 107, 0.22);
  border-left: 3px solid rgba(191, 157, 88, 0.38);
  border-radius: 10px;
  background: rgba(255, 252, 242, 0.58);
  color: rgba(41, 58, 53, 0.72);
  font-size: 12px;
  line-height: 1.65;
}

.method-gold-note {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid rgba(215, 180, 107, 0.3);
  border-radius: 10px;
  background: rgba(255, 249, 230, 0.68);
  color: rgba(97, 78, 36, 0.84);
  font-size: 12px;
  line-height: 1.65;
}

.dayan-section-card {
  display: grid;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid rgba(23, 107, 87, 0.09);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
}

.dayan-section-card h3 {
  margin: 0;
  color: var(--jade-900);
  font-size: 14px;
  line-height: 1.35;
}

.dayan-section-card p {
  margin: 0;
  color: rgba(41, 58, 53, 0.74);
  font-size: 13px;
  line-height: 1.7;
}

.dayan-flow-list,
.dayan-rule-list {
  display: grid;
  gap: 7px;
}

.dayan-flow-list div,
.dayan-rule-list div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 9px;
  row-gap: 2px;
  align-items: start;
  padding: 8px 9px;
  border: 1px solid rgba(23, 107, 87, 0.08);
  border-radius: 10px;
  background: rgba(239, 248, 244, 0.5);
}

.dayan-flow-list span,
.dayan-rule-list strong {
  grid-row: span 2;
  display: grid;
  min-width: 26px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: rgba(23, 107, 87, 0.11);
  color: var(--jade-800);
  font-size: 12px;
  font-weight: 900;
}

.dayan-flow-list strong {
  color: var(--jade-900);
  font-size: 13px;
}

.dayan-flow-list p,
.dayan-rule-list p {
  font-size: 12px;
  line-height: 1.55;
}

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

.dayan-number-grid div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid rgba(23, 107, 87, 0.1);
  border-radius: 12px;
  background: rgba(239, 248, 244, 0.55);
}

.dayan-number-grid div.is-moving {
  border-color: rgba(215, 180, 107, 0.34);
  background: rgba(255, 250, 235, 0.72);
}

.dayan-number-grid strong {
  color: #7d6b44;
  font-size: 18px;
  line-height: 1;
}

.dayan-number-grid b {
  color: var(--jade-900);
  font-size: 13px;
}

.dayan-number-grid span,
.dayan-number-grid small {
  color: rgba(41, 58, 53, 0.7);
  font-size: 12px;
  line-height: 1.45;
}

.method-stage-list {
  display: grid;
  gap: 8px;
}

.method-rule-list {
  display: grid;
  gap: 8px;
}

.method-rule-list.compact {
  gap: 7px;
}

.method-rule-list div {
  display: grid;
  gap: 4px;
  padding: 10px 11px;
  border: 1px solid rgba(23, 107, 87, 0.08);
  border-radius: 12px;
  background: rgba(250, 247, 238, 0.5);
}

.method-rule-list strong {
  color: var(--jade-900);
  font-size: 13px;
}

.method-rule-list p,
.method-note-list,
.method-example-summary {
  margin: 0;
  color: rgba(41, 58, 53, 0.74);
  font-size: 13px;
  line-height: 1.65;
}

.method-note-list {
  display: grid;
  gap: 7px;
  padding-left: 18px;
}

.method-example-card {
  display: grid;
  gap: 12px;
  padding: 15px;
}

.method-example-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.method-example-flow span,
.method-example-flow em {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.method-example-flow span {
  color: var(--jade-900);
  background: rgba(223, 240, 232, 0.82);
}

.method-example-flow em {
  color: #7d6b44;
  background: rgba(240, 232, 214, 0.72);
}

.method-example-flow-full span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 9px;
  border: 1px solid rgba(23, 107, 87, 0.12);
  border-radius: 999px;
  background: rgba(239, 248, 244, 0.78);
  color: var(--jade-900);
  font-size: 12px;
  line-height: 1.3;
  box-shadow: none;
}

.method-example-flow-full span b {
  color: rgba(31, 74, 64, 0.64);
  font-size: 12px;
  font-weight: 800;
}

.method-example-flow-full span b::after {
  content: "：";
}

.method-example-summary {
  padding: 11px 12px;
  border-left: 3px solid rgba(215, 180, 107, 0.58);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--jade-900);
  font-weight: 700;
}

@media (min-width: 560px) {
  .method-principle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .method-count-table,
  .method-stage-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.najia-lesson-page {
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.najia-relative-grid,
.najia-yingshi-grid,
.najia-focus-grid {
  display: grid;
  gap: 8px;
}

.najia-relative-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.najia-relative-grid div,
.najia-yingshi-grid div,
.najia-focus-grid div {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid rgba(23, 107, 87, 0.1);
  border-radius: 12px;
  background: rgba(239, 248, 244, 0.68);
}

.najia-relative-grid div {
  background: rgba(239, 248, 244, 0.76);
}

.najia-yingshi-grid div {
  border-color: rgba(215, 180, 107, 0.2);
  background: rgba(255, 252, 242, 0.58);
}

.najia-relative-grid strong,
.najia-yingshi-grid strong,
.najia-focus-grid strong,
.najia-layer-list b {
  color: var(--jade-900);
  font-size: 13px;
}

.najia-relative-grid p,
.najia-yingshi-grid p,
.najia-focus-grid span,
.najia-layer-list p {
  margin: 0;
  color: rgba(41, 58, 53, 0.74);
  font-size: 12px;
  line-height: 1.55;
}

.najia-layer-list {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(215, 180, 107, 0.18);
  border-radius: 12px;
  background: rgba(255, 252, 242, 0.52);
}

.najia-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.najia-chip-list span {
  padding: 5px 9px;
  border: 1px solid rgba(23, 107, 87, 0.12);
  border-radius: 999px;
  background: rgba(239, 248, 244, 0.78);
  color: var(--jade-900);
  font-size: 12px;
  font-weight: 800;
}

.najia-classroom-cases {
  display: grid;
  gap: 10px;
}

.najia-classroom-case {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(215, 180, 107, 0.24);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 8px 18px rgba(31, 74, 64, 0.05);
}

.najia-classroom-case h3 {
  margin: 0;
  color: var(--jade-900);
  font-size: 14px;
  line-height: 1.35;
}

.najia-classroom-case p,
.najia-classroom-case ul {
  margin: 0;
  color: rgba(41, 58, 53, 0.74);
  font-size: 12px;
  line-height: 1.6;
}

.najia-classroom-case b {
  color: var(--jade-900);
}

.najia-classroom-case ul {
  display: grid;
  gap: 4px;
  padding-left: 18px;
}

.najia-case-takeaway {
  padding: 9px 10px;
  border-left: 3px solid rgba(23, 107, 87, 0.42);
  border-radius: 10px;
  background: rgba(239, 248, 244, 0.74);
}

@media (min-width: 560px) {
  .najia-yingshi-grid,
  .najia-focus-grid,
  .method-guide-list,
  .method-compare-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 360px) {
  .najia-relative-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .method-path-flow {
    display: grid;
    grid-template-columns: 1fr;
  }

  .method-path-flow i {
    transform: rotate(90deg);
  }
}

.moving-method-page-mobile {
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.learning-light-page {
  gap: 14px;
}

.learning-light-page .section-title {
  position: relative;
  align-items: center;
  padding-left: 16px;
}

.learning-light-page .section-title::before {
  position: absolute;
  left: 1px;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(197, 154, 73, 0.58);
  border-radius: 50%;
  background: rgba(255, 252, 242, 0.92);
  box-shadow: 0 0 0 3px rgba(215, 180, 107, 0.12);
  content: "";
  transform: translateY(-50%);
}

.learning-light-page .section-title::after {
  flex: 1;
  min-width: 42px;
  height: 1px;
  margin-left: 8px;
  background: linear-gradient(90deg, rgba(215, 180, 107, 0.42), rgba(215, 180, 107, 0));
  content: "";
}

.learning-core-strip {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid rgba(215, 180, 107, 0.24);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 252, 242, 0.82), rgba(239, 248, 244, 0.72));
  color: #1a6557;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.learning-core-strip span {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  color: #7d6b44;
  background: rgba(255, 252, 242, 0.76);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.learning-core-strip strong {
  min-width: 0;
  color: var(--jade-900);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.learning-mind-card {
  position: relative;
  gap: 8px;
  min-height: 150px;
  padding: 22px 20px;
  border: 1px solid rgba(215, 180, 107, 0.58);
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 0 0 1px rgba(239, 248, 244, 0.82),
    0 16px 32px rgba(31, 74, 64, 0.12);
}

.learning-mind-card > span {
  display: inline-grid;
  width: max-content;
  padding: 5px 10px;
  border: 1px solid rgba(215, 180, 107, 0.42);
  border-radius: 999px;
  color: #7d6b44;
  background: rgba(255, 252, 242, 0.72);
  box-shadow: 0 4px 10px rgba(31, 74, 64, 0.055);
  font-size: 12px;
  font-weight: 800;
}

.learning-mind-card h2 {
  font-size: 20px;
  line-height: 1.45;
}

.learning-flow-card,
.moving-rule-picker-card,
.najia-key-card,
.najia-atlas-card,
.najia-position-card {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 14px 15px;
  border-color: rgba(23, 107, 87, 0.16);
  border-radius: 17px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 10px 22px rgba(31, 74, 64, 0.075);
}

.learning-mind-card::before,
.learning-mind-card::after,
.learning-flow-card::before,
.moving-rule-picker-card::before,
.najia-key-card::before,
.najia-atlas-card::before,
.najia-position-card::before,
.learning-flow-card::after,
.moving-rule-picker-card::after,
.najia-key-card::after,
.najia-atlas-card::after,
.najia-position-card::after,
.learning-advanced-entry .method-collapse-summary::after {
  position: absolute;
  content: "";
  pointer-events: none;
  z-index: 0;
}

.learning-mind-card::before {
  inset: 0;
  background: url("../assets/images/learning_polish/learning_core_card_bg.png") center / cover no-repeat;
  opacity: 0.86;
}

.learning-mind-card::after {
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.12)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(239, 248, 244, 0.18));
}

.learning-flow-card::before,
.moving-rule-picker-card::before,
.najia-key-card::before,
.najia-atlas-card::before,
.najia-position-card::before {
  inset: 0;
  background: url("../assets/images/learning_polish/learning_section_card_bg.png") center bottom / 112% auto no-repeat;
  opacity: 0.54;
}

.learning-flow-card::after,
.moving-rule-picker-card::after,
.najia-key-card::after,
.najia-atlas-card::after,
.najia-position-card::after {
  display: none;
}

.learning-mind-card > *,
.learning-flow-card > *,
.moving-rule-picker-card > *,
.najia-key-card > *,
.najia-atlas-card > *,
.najia-position-card > *,
.learning-advanced-entry > * {
  position: relative;
  z-index: 1;
}

.learning-flow-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr) 18px minmax(0, 1fr);
  align-items: stretch;
  gap: 7px;
}

.learning-flow-steps div {
  position: relative;
  display: grid;
  align-content: center;
  gap: 6px;
  min-height: 116px;
  padding: 42px 8px 13px;
  border: 1px solid rgba(215, 180, 107, 0.3);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(239, 248, 244, 0.74)),
    url("../assets/images/learning_polish/learning_section_card_bg.png") center bottom / cover no-repeat;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 6px 14px rgba(31, 74, 64, 0.045);
}

.learning-flow-steps div::after {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 11px;
  content: "";
  pointer-events: none;
}

.learning-flow-steps div::before {
  position: absolute;
  top: 11px;
  left: 50%;
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid rgba(23, 107, 87, 0.16);
  border-radius: 11px;
  color: var(--jade-900);
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.96), rgba(223, 240, 232, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 5px 10px rgba(31, 74, 64, 0.08);
  font-size: 17px;
  font-weight: 900;
  content: "";
  transform: translateX(-50%);
}

.learning-flow-steps div:nth-child(1)::before {
  content: "本";
}

.learning-flow-steps div:nth-child(3)::before {
  content: "动";
}

.learning-flow-steps div:nth-child(5)::before {
  content: "变";
}

.learning-flow-steps strong,
.moving-rule-result strong,
.najia-key-grid strong,
.najia-atlas-grid strong,
.najia-position-compare strong {
  color: var(--jade-900);
  font-size: 15px;
  font-weight: 900;
}

.learning-flow-steps p,
.moving-rule-result p,
.najia-key-grid p,
.najia-atlas-grid p,
.najia-position-compare span {
  margin: 0;
  color: rgba(41, 58, 53, 0.72);
  font-size: 13px;
  line-height: 1.55;
}

.learning-flow-steps i,
.najia-position-compare i {
  color: rgba(160, 124, 58, 0.78);
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.learning-flow-steps i {
  align-self: center;
  font-size: 0;
}

.learning-flow-steps i::before {
  color: rgba(176, 132, 50, 0.78);
  font-size: 18px;
  content: "→";
}

.moving-rule-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.moving-rule-tabs button {
  padding: 6px 10px;
  border: 1px solid rgba(23, 107, 87, 0.12);
  border-radius: 999px;
  color: var(--jade-800);
  background: rgba(239, 248, 244, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.moving-rule-tabs button.is-active {
  border-color: rgba(215, 180, 107, 0.42);
  color: #fff;
  background: linear-gradient(135deg, rgba(15, 102, 88, 0.92), rgba(36, 138, 111, 0.84));
  box-shadow: 0 8px 16px rgba(23, 107, 87, 0.2);
}

.moving-rule-result {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-height: 82px;
  padding: 13px 14px;
  border: 1px solid rgba(215, 180, 107, 0.36);
  border-radius: 13px;
  background:
    linear-gradient(90deg, rgba(255, 252, 242, 0.86), rgba(255, 255, 255, 0.72)),
    url("../assets/images/learning_polish/learning_section_card_bg.png") right bottom / 88% auto no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.moving-rule-result strong {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(215, 180, 107, 0.42);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.94), rgba(223, 240, 232, 0.86));
  box-shadow: 0 6px 14px rgba(31, 74, 64, 0.08);
  font-size: 13px;
}

.moving-rule-result p {
  grid-column: 2;
}

.learning-advanced-entry {
  position: relative;
  margin-top: 2px;
  display: grid;
  gap: 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.learning-advanced-entry .method-collapse-summary {
  position: relative;
  min-height: 76px;
  padding: 17px 18px;
  border: 1px solid rgba(215, 180, 107, 0.54);
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(255, 252, 242, 0.72), rgba(239, 248, 244, 0.58));
  box-shadow: 0 12px 26px rgba(31, 74, 64, 0.09);
  overflow: hidden;
  isolation: isolate;
}

.learning-advanced-entry .method-collapse-summary::before {
  display: none;
}

.learning-advanced-entry .method-collapse-summary::after {
  display: none;
}

.learning-advanced-entry .method-collapse-summary > * {
  position: relative;
  z-index: 1;
}

.learning-advanced-entry .method-collapse-title b {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--jade-900);
  font-size: 17px;
}

.learning-advanced-entry .method-collapse-title b::before {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(215, 180, 107, 0.42);
  border-radius: 10px;
  color: #7d6b44;
  background: rgba(255, 252, 242, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
  font-size: 14px;
  content: "册";
}

.learning-advanced-entry .method-collapse-action {
  border-color: rgba(23, 107, 87, 0.16);
  background: rgba(239, 248, 244, 0.72);
}

.learning-advanced-body {
  position: relative;
  display: grid;
  gap: 12px;
  margin-top: 0;
  padding: 16px 15px 17px;
  border: 1px solid rgba(23, 107, 87, 0.075);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(247, 252, 249, 0.7)),
    url("../assets/images/learning_polish/learning_section_card_bg.png") right bottom / 145% auto no-repeat;
  box-shadow: 0 8px 18px rgba(31, 74, 64, 0.035);
  overflow: hidden;
}

.learning-advanced-body .dayan-section-card {
  padding: 12px 13px;
  border-color: rgba(23, 107, 87, 0.065);
  background: rgba(255, 255, 255, 0.58);
  box-shadow: none;
}

.learning-number-grid div {
  min-height: 0;
}

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

.najia-key-grid div,
.najia-atlas-grid div,
.najia-position-compare div {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid rgba(23, 107, 87, 0.14);
  border-radius: 13px;
  background: rgba(246, 252, 248, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 6px 14px rgba(31, 74, 64, 0.04);
}

.najia-key-grid div {
  min-height: 92px;
  align-content: end;
  padding: 36px 7px 9px;
  text-align: center;
}

.najia-key-grid div::before,
.najia-atlas-grid div::before {
  position: absolute;
  top: 12px;
  left: 50%;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid rgba(215, 180, 107, 0.42);
  border-radius: 50%;
  color: var(--jade-900);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.96), rgba(224, 240, 232, 0.9));
  box-shadow: 0 6px 13px rgba(31, 74, 64, 0.08);
  font-size: 13px;
  font-weight: 900;
  transform: translateX(-50%);
}

.najia-key-grid div:nth-child(1)::before {
  content: "亲";
}

.najia-key-grid div:nth-child(2)::before {
  content: "应";
}

.najia-key-grid div:nth-child(3)::before {
  content: "动";
}

.najia-key-grid span {
  color: #7d6b44;
  font-size: 11px;
  font-weight: 800;
}

.najia-key-grid strong {
  font-size: 14px;
  line-height: 1.2;
}

.najia-key-grid p {
  overflow: hidden;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

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

.najia-atlas-grid div {
  min-height: 82px;
  align-content: end;
  padding: 34px 9px 10px;
  background: rgba(255, 255, 255, 0.76);
  text-align: center;
}

.najia-atlas-grid div:nth-child(1)::before {
  content: "父";
}

.najia-atlas-grid div:nth-child(2)::before {
  content: "兄";
}

.najia-atlas-grid div:nth-child(3)::before {
  content: "子";
}

.najia-atlas-grid div:nth-child(4)::before {
  content: "财";
}

.najia-atlas-grid div:nth-child(5)::before {
  content: "官";
}

.najia-atlas-grid strong {
  display: inline-grid;
  justify-self: center;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  line-height: 1.25;
}

.najia-atlas-grid p {
  line-height: 1.35;
}

.najia-key-grid div {
  min-height: 88px;
  align-content: start;
  padding: 10px 7px 9px;
}

.najia-key-grid strong,
.najia-key-grid span,
.najia-key-grid p {
  display: block;
}

.najia-key-grid span {
  line-height: 1.35;
}

.najia-key-grid p {
  margin-top: 4px;
}

.najia-atlas-grid div {
  min-height: 66px;
  padding: 10px 9px;
}

.najia-key-grid div::before,
.najia-atlas-grid div::before {
  display: none;
}

.najia-position-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 7px;
  align-items: center;
}

.najia-position-compare div {
  min-height: 62px;
  border-color: rgba(215, 180, 107, 0.28);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(239, 248, 244, 0.78)),
    url("../assets/images/learning_polish/learning_section_card_bg.png") center bottom / cover no-repeat;
  text-align: center;
  place-items: center;
}

.najia-position-compare strong {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 1px solid rgba(215, 180, 107, 0.42);
  border-radius: 50%;
  background: rgba(255, 252, 242, 0.74);
  font-size: 15px;
}

.najia-position-compare span {
  line-height: 1.35;
}

.najia-position-card .method-caution-note {
  position: relative;
  margin: 0;
  padding: 9px 10px 9px 14px;
  border: 1px solid rgba(215, 180, 107, 0.22);
  border-radius: 12px;
  color: rgba(41, 58, 53, 0.72);
  background: rgba(255, 252, 242, 0.58);
}

.najia-position-card .method-caution-note::before {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 7px;
  width: 3px;
  border-radius: 999px;
  background: rgba(215, 180, 107, 0.5);
  content: "";
}

.najia-position-card .outline-button.compact {
  width: 100%;
  justify-content: center;
  border-color: rgba(23, 107, 87, 0.22);
  border-radius: 999px;
  background: rgba(239, 248, 244, 0.76);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.najia-position-card .outline-button.compact::after {
  margin-left: 7px;
  color: rgba(160, 124, 58, 0.86);
  content: "›";
}

@media (min-width: 560px) {
  .learning-flow-steps {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
  }

  .learning-flow-steps i {
    align-self: center;
    transform: none;
  }
}

@media (max-width: 360px) {
  .najia-key-grid {
    gap: 6px;
  }

  .najia-key-grid div {
    padding-inline: 5px;
  }

  .najia-atlas-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .najia-position-compare i {
    transform: none;
  }
}

.method-memory-card {
  display: grid;
  gap: 10px;
  padding: 14px 15px;
  border-color: rgba(23, 107, 87, 0.08);
  background: rgba(255, 255, 255, 0.62);
}

.method-guide-card {
  display: grid;
  gap: 10px;
  padding: 13px 15px;
  border-color: rgba(23, 107, 87, 0.12);
  background: linear-gradient(145deg, rgba(239, 248, 244, 0.8), rgba(255, 255, 255, 0.7));
}

.method-guide-list,
.method-compare-grid {
  display: grid;
  gap: 8px;
}

.method-guide-list div,
.method-compare-grid div {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 9px 10px 9px 28px;
  border: 1px solid rgba(23, 107, 87, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.58);
}

.method-guide-list div::before {
  content: "✓";
  position: absolute;
  top: 10px;
  left: 10px;
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(23, 107, 87, 0.72);
  font-size: 9px;
  font-weight: 900;
}

.method-guide-list strong,
.method-compare-grid strong,
.method-mini-flow strong,
.method-practice-card b {
  color: var(--jade-900);
  font-size: 13px;
}

.method-guide-list p,
.method-compare-grid p,
.method-mini-flow p,
.method-practice-card p,
.method-quiz-list p {
  margin: 0;
  color: rgba(41, 58, 53, 0.74);
  font-size: 12px;
  line-height: 1.55;
}

.method-memory-list {
  display: grid;
  gap: 6px;
}

.method-memory-list p,
.method-body-text,
.method-case-block p {
  margin: 0;
  color: rgba(41, 58, 53, 0.74);
  font-size: 13px;
  line-height: 1.65;
}

.method-memory-list p {
  position: relative;
  padding-left: 14px;
}

.method-memory-list p::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(23, 107, 87, 0.55);
}

.method-memory-list b,
.method-body-text b,
.method-case-block b {
  color: var(--jade-900);
}

.method-collapse-list {
  display: grid;
  gap: 9px;
}

.method-collapse-card {
  padding: 0;
  border: 1px solid rgba(215, 180, 107, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 10px 24px rgba(31, 74, 64, 0.07);
  overflow: hidden;
}

.method-collapse-summary {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 56px;
  padding: 10px 13px;
  cursor: pointer;
  list-style: none;
  background: linear-gradient(90deg, rgba(239, 248, 244, 0.48), rgba(255, 255, 255, 0.2));
}

.method-collapse-summary::-webkit-details-marker {
  display: none;
}

.method-collapse-summary::before {
  content: "▶";
  position: absolute;
  top: 14px;
  left: 13px;
  color: rgba(23, 107, 87, 0.86);
  font-size: 12px;
  line-height: 1;
}

.method-collapse-card[open] .method-collapse-summary::before {
  content: "▼";
}

.method-collapse-title {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding-left: 18px;
}

.method-collapse-title b {
  color: var(--jade-900);
  font-size: 15px;
  line-height: 1.3;
}

.method-collapse-title small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.method-collapse-action {
  color: var(--jade-700);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.method-collapse-action em {
  font-style: normal;
}

.method-collapse-card .is-open,
.method-collapse-card[open] .is-closed {
  display: none;
}

.method-collapse-card[open] .is-open {
  display: inline;
}

.method-collapse-body {
  display: grid;
  gap: 11px;
  padding: 0 13px 13px;
}

.method-mini-flow {
  display: grid;
  gap: 8px;
}

.method-mini-flow div {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 9px;
  row-gap: 2px;
  align-items: start;
  padding: 9px 10px;
  border: 1px solid rgba(23, 107, 87, 0.09);
  border-radius: 12px;
  background: rgba(239, 248, 244, 0.58);
}

.method-mini-flow span {
  grid-row: span 2;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: rgba(23, 107, 87, 0.12);
  color: var(--jade-800);
  font-size: 12px;
  font-weight: 900;
}

.method-pitfall-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  color: rgba(41, 58, 53, 0.74);
  font-size: 13px;
  line-height: 1.6;
}

.method-practice-card {
  display: grid;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(215, 180, 107, 0.22);
  border-radius: 12px;
  background: rgba(255, 252, 242, 0.58);
}

.method-quiz-list {
  display: grid;
  gap: 8px;
}

.method-quiz-list details {
  border: 1px solid rgba(23, 107, 87, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.58);
  overflow: hidden;
}

.method-quiz-list summary {
  padding: 10px 11px;
  color: var(--jade-900);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.method-quiz-list p {
  padding: 0 11px 11px;
}

.method-count-table-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.method-count-table-compact div {
  gap: 3px;
  padding: 9px;
}

.method-count-table-compact b {
  color: var(--jade-900);
  font-size: 13px;
}

.method-count-table-compact p {
  font-size: 12px;
  line-height: 1.5;
}

.method-stage-timeline {
  display: grid;
  gap: 0;
  padding-left: 10px;
}

.method-stage-timeline div {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 8px;
  padding: 7px 0 7px 13px;
  border-left: 1px solid rgba(23, 107, 87, 0.16);
}

.method-stage-timeline div::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 15px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(23, 107, 87, 0.72);
  box-shadow: 0 0 0 4px rgba(223, 240, 232, 0.75);
}

.method-stage-timeline strong {
  color: var(--jade-900);
  font-size: 13px;
}

.method-stage-timeline p {
  margin: 0;
  color: rgba(41, 58, 53, 0.74);
  font-size: 12px;
  line-height: 1.55;
}

.method-case-block {
  display: grid;
  gap: 10px;
}

.method-example-flow-full span b::after {
  content: "：";
}

@media (max-width: 430px) {
  .method-path-card-compact .method-path-flow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow-x: visible;
    padding-bottom: 0;
  }

  .method-path-card-compact .method-path-node {
    flex: 1 1 calc(50% - 8px);
    padding: 7px 6px 7px 22px;
  }

  .method-path-card-compact .method-path-node span {
    font-size: 12px;
  }

  .method-path-card-compact .method-path-node small {
    font-size: 11px;
    line-height: 1.35;
  }

  .method-path-card-compact .method-path-flow i {
    display: none;
  }
}

@media (max-width: 360px) {
  .method-formula-card h2 {
    font-size: 19px;
  }

  .method-count-table-compact,
  .najia-relative-grid {
    grid-template-columns: 1fr;
  }

  .method-guide-list div,
  .method-compare-grid div {
    padding-right: 9px;
  }
}

.trigram-disc {
  position: relative;
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: var(--icon-active);
}

.trigram-disc::after {
  display: none;
}

.course-glyph {
  display: block;
  width: 68px;
  height: 68px;
  object-fit: contain;
}

.course-card.locked {
  opacity: 0.72;
  cursor: pointer;
  filter: saturate(0.7);
}

.course-status {
  color: var(--jade-700);
}

.course-card.active .course-status {
  color: var(--gold);
}

.course-card.locked .course-status {
  color: var(--muted);
}

.benyi-entry-card {
  padding: 0;
}

.benyi-entry {
  display: grid;
  width: 100%;
  gap: 6px;
  padding: 18px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.benyi-entry span {
  width: fit-content;
  padding: 5px 11px;
  border-radius: 999px;
  color: white;
  background: linear-gradient(135deg, var(--jade-900), var(--jade-500));
  font-size: 13px;
  font-weight: 700;
}

.benyi-entry strong {
  color: var(--jade-900);
  font-size: 18px;
}

.benyi-entry small {
  color: var(--muted);
  font-size: 13px;
}

.benyi-entry em {
  width: fit-content;
  margin-top: 4px;
  padding: 0;
  border: 0;
  color: var(--jade-700);
  background: transparent;
  box-shadow: none;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

.bagua-basic-grid {
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: 0;
  column-gap: 0;
  overflow-x: auto;
  overflow-y: visible;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 16px;
  box-sizing: border-box;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.bagua-basic-grid::-webkit-scrollbar {
  display: none;
}

.bagua-quick-jump {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(215, 180, 107, 0.14);
  border-bottom: 1px solid rgba(215, 180, 107, 0.14);
}

.bagua-quick-jump > span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.bagua-quick-jump-scroll {
  display: flex;
  flex: 1 1 auto;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  padding: 1px 2px 3px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.bagua-quick-jump-scroll::-webkit-scrollbar {
  display: none;
}

.bagua-quick-jump button {
  flex: 0 0 auto;
  min-width: 40px;
  min-height: 36px;
  padding: 5px 10px;
  border: 1px solid rgba(23, 107, 87, 0.12);
  border-radius: 999px;
  color: var(--text-body-soft);
  background: rgba(255, 255, 255, 0.56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.bagua-quick-jump button:active,
.bagua-quick-jump button.active {
  border-color: rgba(215, 180, 107, 0.42);
  color: white;
  background: linear-gradient(135deg, var(--jade-900), var(--jade-500));
  box-shadow: 0 7px 15px rgba(23, 107, 87, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  transform: none;
}

.bagua-page {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 10px;
  box-sizing: border-box;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow-x: hidden;
  overflow-y: visible;
}

.bagua-basic-card {
  display: grid;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0 auto;
  gap: 14px;
  padding: 16px;
  border-color: rgba(215, 180, 107, 0.28);
  box-sizing: border-box;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(252, 253, 249, 0.84) 64%, rgba(247, 251, 247, 0.68) 100%),
    url("../assets/images/library/library_card_frame_v4.jpg") center bottom / 100% auto no-repeat;
  box-shadow: 0 16px 32px rgba(29, 64, 54, 0.08);
}

.bagua-basic-card *,
.bagua-page,
.bagua-qimen-section,
.bagua-qimen-more,
.bagua-qimen-common,
.bagua-qimen-more-grid,
.bagua-qimen-list,
.bagua-qimen-compact {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.bagua-basic-head {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 2px;
}

.bagua-title-block {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.bagua-basic-head > div,
.bagua-title-block {
  min-width: 0;
}

.bagua-symbol {
  display: grid;
  flex: 0 0 76px;
  width: 76px;
  height: 88px;
  padding: 14px 12px;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: var(--jade-900);
  background: url("../assets/images/library/library_hex_plaque_solid_v1.png") center / 100% 100% no-repeat;
  box-shadow: none;
}

.trigram-line-view {
  display: grid;
  width: 48px;
  gap: 5px;
}

.trigram-line {
  display: block;
  height: 5px;
  border-radius: 999px;
}

.trigram-line.yang,
.trigram-line.yin i {
  background: linear-gradient(90deg, rgba(15, 74, 60, 0.45), var(--jade-900), rgba(15, 74, 60, 0.45));
}

.trigram-line.yin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.trigram-line.yin i {
  display: block;
  border-radius: 999px;
}

.bagua-basic-head h2 {
  margin: 0;
  color: var(--jade-900);
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: 0.03em;
}

.bagua-basic-head small {
  color: var(--text-body-soft);
  font-size: 12.5px;
  line-height: 1.4;
}

.bagua-study-tip {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.bagua-basic-meta,
.bagua-basic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-width: 100%;
  min-width: 0;
}

.bagua-basic-tags {
  gap: 8px 14px;
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid rgba(215, 180, 107, 0.16);
}

.bagua-title-block .bagua-basic-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
  margin-top: 2px;
}

.bagua-basic-meta span {
  min-width: 0;
  padding: 0;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  white-space: normal;
  overflow-wrap: break-word;
}

.bagua-title-block .bagua-basic-meta span {
  padding: 0;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  line-height: 1.25;
}

.bagua-basic-tags span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  color: var(--jade-700);
  background: transparent;
  font-size: 12px;
}

.bagua-basic-tags span::before {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: rgba(44, 138, 112, 0.68);
  content: "";
}

.bagua-basic-card p,
.bagua-basic-card li,
.bagua-basic-card div,
.bagua-basic-card small {
  overflow-wrap: break-word;
  word-break: break-word;
}

.bagua-basic-card p {
  margin: 0;
  color: var(--jade-900);
  font-size: 14px;
  line-height: 1.7;
}

.bagua-basic-card .bagua-core-meaning {
  padding: 11px 13px;
  border: 1px solid rgba(215, 180, 107, 0.24);
  border-radius: 8px;
  color: var(--text-body);
  background: rgba(255, 252, 244, 0.72);
  font-size: 14px;
  line-height: 1.65;
}

.bagua-study-tip {
  display: block;
  padding: 7px 0 7px 12px;
  border-top: 0;
  border-left: 3px solid rgba(215, 180, 107, 0.52);
  color: var(--text-body-soft);
  background: linear-gradient(90deg, rgba(255, 249, 235, 0.5), transparent 72%);
}

.bagua-qimen-section {
  display: grid;
  gap: 10px;
  margin-top: 0;
  padding: 13px;
  border: 1px solid rgba(23, 107, 87, 0.1);
  border-radius: 8px;
  background: rgba(248, 252, 249, 0.66);
}

.bagua-qimen-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.bagua-qimen-head span {
  color: var(--jade-900);
  font-size: 15px;
  font-weight: 800;
}

.bagua-qimen-head small,
.bagua-qimen-health small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.bagua-qimen-summary {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(215, 180, 107, 0.18);
  border-radius: 12px;
  color: var(--text-body);
  background: rgba(255, 252, 244, 0.66);
  font-size: 13px;
  line-height: 1.65;
}

.bagua-qimen-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
}

.bagua-qimen-keywords span {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  padding: 4px 9px;
  border: 1px solid rgba(23, 107, 87, 0.12);
  border-radius: 999px;
  color: var(--jade-800);
  background: rgba(239, 248, 244, 0.78);
  font-size: 12px;
  white-space: normal;
  overflow-wrap: break-word;
}

.bagua-qimen-common,
.bagua-qimen-more-grid {
  display: grid;
  gap: 8px;
}

.bagua-qimen-list,
.bagua-qimen-compact {
  display: grid;
  gap: 5px;
}

.bagua-qimen-list strong,
.bagua-qimen-compact strong {
  color: var(--jade-800);
  font-size: 13px;
}

.bagua-qimen-list ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.62;
}

.bagua-qimen-compact p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.62;
}

.bagua-qimen-more {
  border: 1px solid rgba(23, 107, 87, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.56);
}

.bagua-qimen-more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 11px;
  color: var(--jade-800);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.bagua-qimen-more summary::-webkit-details-marker {
  display: none;
}

.bagua-qimen-more summary::after {
  color: var(--jade-500);
  content: "›";
  transition: transform 160ms ease;
}

.bagua-qimen-more[open] summary::after {
  transform: rotate(90deg);
}

.bagua-qimen-more-grid {
  gap: 12px;
  padding: 2px 11px 12px;
  overflow-x: hidden;
}

.bagua-qimen-health {
  padding: 9px 10px;
  border-left: 3px solid rgba(215, 180, 107, 0.48);
  border-radius: 10px;
  background: rgba(255, 252, 244, 0.62);
}

.quick-check-entry-card {
  display: grid;
  width: 100%;
  gap: 6px;
  padding: 14px 16px;
  border-color: rgba(215, 180, 107, 0.28);
  color: inherit;
  background: rgba(255, 255, 255, 0.68);
  text-align: left;
  cursor: pointer;
}

.quick-check-entry-card span {
  width: fit-content;
  padding: 4px 10px;
  border: 1px solid rgba(215, 180, 107, 0.36);
  border-radius: 999px;
  color: var(--jade-700);
  background: rgba(239, 248, 244, 0.78);
  font-size: 13px;
  font-weight: 700;
}

.quick-check-entry-card strong {
  color: var(--jade-900);
  font-size: 16px;
}

.quick-check-entry-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.quick-check-list,
.quick-line-stack,
.quick-info-list,
.quick-relation-grid {
  display: grid;
  gap: 12px;
  padding-bottom: 14px;
}

.quick-check-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 13px;
  align-items: center;
  width: 100%;
  padding: 15px;
  border-color: rgba(215, 180, 107, 0.25);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.quick-card-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(215, 180, 107, 0.38);
  border-radius: 50%;
  color: var(--jade-700);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(229, 241, 234, 0.78));
  font-weight: 800;
}

.quick-check-card strong,
.quick-info-card strong,
.quick-note-card strong,
.quick-relation-card strong {
  color: var(--jade-900);
  font-size: 16px;
}

.quick-check-card p,
.quick-info-card p,
.quick-note-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}

.quick-line-card {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 13px 14px;
  border-color: rgba(215, 220, 224, 0.54);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.quick-line-card span {
  display: grid;
  min-height: 38px;
  place-items: center;
  border: 1px solid rgba(23, 107, 87, 0.16);
  border-radius: 999px;
  color: var(--jade-700);
  background: rgba(239, 248, 244, 0.74);
  font-size: 13px;
  font-weight: 700;
}

.quick-line-card small,
.quick-note-card small,
.quick-relation-card small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.quick-line-card.is-active {
  border-color: rgba(215, 180, 107, 0.58);
  background: rgba(255, 251, 241, 0.72);
}

.quick-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

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

.quick-tabs button {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(23, 107, 87, 0.14);
  border-radius: 999px;
  color: var(--icon-muted);
  background: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  font-weight: 700;
}

.quick-tabs button.is-active {
  border-color: rgba(215, 180, 107, 0.45);
  color: white;
  background: linear-gradient(135deg, var(--jade-900), var(--jade-500));
}

.quick-info-card {
  padding: 15px;
}

.quick-relation-picker {
  margin-bottom: 12px;
  padding: 14px;
}

.quick-relation-picker label {
  display: grid;
  gap: 8px;
  color: var(--jade-900);
  font-size: 13px;
  font-weight: 700;
}

.quick-relation-picker select {
  width: 100%;
  border: 1px solid rgba(174, 180, 178, 0.42);
  border-radius: 999px;
  padding: 10px 12px;
  color: var(--jade-900);
  background: rgba(255, 255, 255, 0.76);
  font: inherit;
}

.quick-relation-card {
  display: grid;
  gap: 8px;
  justify-items: center;
  width: 100%;
  padding: 15px;
  border-color: rgba(215, 180, 107, 0.24);
  color: inherit;
  text-align: center;
  cursor: pointer;
}

.quick-relation-card > span {
  color: var(--jade-700);
  font-size: 13px;
  font-weight: 800;
}

.quick-relation-card .hexagram-line-view {
  width: 72px;
  gap: 5px;
  margin: 2px 0;
}

.quick-relation-card .hexagram-line-view span {
  height: 7px;
}

.najia-lookup-note {
  margin-bottom: 12px;
  padding: 13px 14px;
  border-color: rgba(215, 180, 107, 0.24);
}

.najia-lookup-note p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.72;
}

.najia-tools {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.najia-filter-wrap {
  position: relative;
  overflow: hidden;
}

.najia-filter-wrap::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 34px;
  pointer-events: none;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(248, 250, 247, 0.92));
}

.najia-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 34px 2px 0;
  scrollbar-width: none;
}

.najia-filters::-webkit-scrollbar {
  display: none;
}

.najia-filters button {
  flex: 0 0 auto;
  padding: 8px 12px;
  border: 1px solid rgba(23, 107, 87, 0.14);
  border-radius: 999px;
  color: var(--icon-muted);
  background: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 700;
}

.najia-filters button.is-active {
  border-color: rgba(215, 180, 107, 0.48);
  color: white;
  background: linear-gradient(135deg, var(--jade-900), var(--jade-500));
}

.najia-result-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 0 10px;
  color: var(--muted);
  font-size: 12px;
}

.najia-result-meta span {
  color: var(--jade-700);
  font-weight: 800;
}

.najia-card-list {
  display: grid;
  gap: 12px;
  padding-bottom: 16px;
}

.najia-card {
  padding: 0;
  overflow: hidden;
  border-color: rgba(215, 180, 107, 0.22);
}

.najia-card-head {
  display: grid;
  grid-template-columns: 1fr 88px;
  gap: 12px;
  align-items: center;
  width: 100%;
  border: 0;
  padding: 15px;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.najia-card-head small,
.najia-card-head span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.najia-card-head strong {
  display: block;
  margin: 3px 0;
  color: var(--jade-900);
  font-size: 17px;
}

.najia-card-figure {
  display: grid;
  justify-items: center;
  gap: 5px;
}

.najia-card-figure .hexagram-line-view {
  width: 62px;
  gap: 4px;
}

.najia-card-figure .hexagram-line-view span {
  height: 6px;
}

.najia-card-figure em {
  color: var(--jade-700);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.najia-card-summary {
  margin: 0;
  padding: 0 15px 15px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.najia-shiying-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 8px;
  margin: 0 15px 10px;
  padding: 9px 10px;
  border: 1px solid rgba(215, 180, 107, 0.28);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 252, 242, 0.58));
}

.najia-shiying-meta div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(23, 107, 87, 0.06);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.48);
}

.najia-shiying-meta span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.najia-shiying-meta strong {
  color: var(--jade-900);
  font-size: 13px;
  font-weight: 850;
}

.najia-shiying-meta p {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 7px;
  border-top: 1px solid rgba(23, 107, 87, 0.08);
  color: rgba(41, 58, 53, 0.62);
  font-size: 11px;
  line-height: 1.5;
}

.najia-shiying-meta.is-missing {
  grid-template-columns: 1fr;
}

.najia-lines {
  display: grid;
  gap: 8px;
  padding: 0 15px 14px;
}

.najia-line-row {
  display: grid;
  grid-template-columns: 46px 64px 70px 1fr;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(23, 107, 87, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.52);
}

.najia-line-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.najia-line-row strong {
  color: var(--jade-900);
  font-size: 13px;
}

.najia-line-row small {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
}

.najia-shiying-badge {
  flex: 0 0 auto;
  display: inline-grid;
  min-width: 20px;
  height: 18px;
  place-items: center;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.najia-shiying-badge.is-shi {
  color: #fff;
  background: rgba(23, 107, 87, 0.86);
}

.najia-shiying-badge.is-ying {
  color: var(--jade-800);
  border: 1px solid rgba(23, 107, 87, 0.14);
  background: rgba(223, 240, 232, 0.86);
}

.najia-yao {
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  width: 58px;
}

.najia-yao b {
  display: block;
  width: 42px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(15, 74, 60, 0.55), var(--jade-700), rgba(15, 74, 60, 0.55));
}

.najia-yao.is-yin b {
  width: 20px;
}

.najia-detail-link {
  display: flex;
  align-items: center;
  width: calc(100% - 30px);
  min-height: 42px;
  margin: 0 15px 15px;
  justify-content: center;
  border: 1px solid rgba(215, 180, 107, 0.34);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(239, 248, 244, 0.94), rgba(255, 255, 255, 0.78));
  box-shadow: 0 8px 18px rgba(31, 74, 64, 0.07);
  color: var(--jade-800);
  font-size: 14px;
  font-weight: 850;
  line-height: 1;
}

.najia-detail-link:active {
  transform: translateY(1px);
  background: linear-gradient(145deg, rgba(226, 241, 234, 0.96), rgba(255, 252, 242, 0.82));
}

.najia-empty {
  padding: 16px;
  text-align: center;
}

.najia-empty strong {
  color: var(--jade-900);
}

.najia-empty p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.benyi-list,
.benyi-detail {
  display: grid;
  gap: 14px;
  padding-bottom: 14px;
}

.benyi-reader-intro {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}

.benyi-reader-intro strong,
.benyi-list-heading h2 {
  color: var(--jade-900);
}

.benyi-reader-intro strong {
  display: block;
  margin-bottom: 5px;
  font-size: 18px;
}

.benyi-reader-intro p,
.benyi-list-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.benyi-reader-intro span {
  flex: 0 0 auto;
  padding: 6px 10px;
  border: 1px solid rgba(23, 107, 87, 0.12);
  border-radius: 999px;
  color: rgba(23, 107, 87, 0.62);
  background: rgba(237, 247, 242, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.classic-epub-page {
  display: grid;
  gap: 14px;
  padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px));
}

.classic-epub-source-card,
.classic-epub-reader-card {
  display: grid;
  gap: 12px;
}

.classic-epub-source-card strong,
.classic-epub-book-head h2 {
  color: var(--jade-900);
}

.classic-epub-source-card strong {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
}

.classic-epub-source-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.classic-epub-book-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.classic-epub-book-head span,
.classic-epub-book-head small {
  color: rgba(38, 62, 58, 0.62);
  font-size: 12px;
}

.classic-epub-book-head h2 {
  margin: 4px 0 0;
  font-size: 21px;
  line-height: 1.25;
}

.classic-epub-book-head small {
  flex: 0 0 auto;
  max-width: 45%;
  padding: 5px 9px;
  border: 1px solid rgba(126, 190, 170, 0.2);
  border-radius: 999px;
  background: rgba(239, 248, 244, 0.76);
  text-align: right;
}

.classic-epub-viewer {
  min-height: 420px;
  max-height: min(62vh, 620px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 18px 16px;
  border: 1px solid rgba(213, 190, 126, 0.32);
  border-radius: 18px;
  color: #203b35;
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.94), rgba(249, 252, 248, 0.9)),
    radial-gradient(circle at 10% 0%, rgba(225, 238, 231, 0.45), transparent 36%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  font-size: 16px;
  line-height: 1.85;
  -webkit-overflow-scrolling: touch;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
}

.classic-epub-viewer,
.classic-epub-viewer * {
  max-width: 100% !important;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-break: break-word;
  position: static !important;
  float: none !important;
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
}

.classic-epub-document {
  max-width: 100%;
  overflow-x: hidden;
}

.classic-epub-viewer,
.classic-epub-viewer p,
.classic-epub-viewer li,
.classic-epub-viewer span,
.classic-epub-viewer div,
.classic-epub-viewer font,
.classic-epub-viewer big {
  font-size: 16px;
}

.classic-epub-document h1,
.classic-epub-document h2,
.classic-epub-document h3 {
  margin: 1em 0 0.65em;
  color: #075846;
  line-height: 1.5;
}

.classic-epub-document h1 {
  font-size: 22px !important;
}

.classic-epub-document h2 {
  font-size: 20px !important;
}

.classic-epub-document h3 {
  font-size: 18px !important;
}

.classic-epub-document p,
.classic-epub-document div {
  max-width: 100%;
}

.classic-epub-document p {
  margin: 0 0 0.9em;
}

.classic-epub-document ul,
.classic-epub-document ol {
  margin: 0 0 1em 1.2em;
  padding-left: 1.2em;
}

.classic-epub-document li {
  display: list-item;
  margin: 0.35em 0;
  line-height: 1.7;
}

.classic-epub-document a {
  color: #1c6b91;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.classic-epub-document img {
  max-width: 100%;
  height: auto;
}

.classic-epub-document table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.classic-epub-document td,
.classic-epub-document th {
  word-break: break-word;
  overflow-wrap: anywhere;
}

.classic-epub-error {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(196, 93, 76, 0.18);
  border-radius: 14px;
  color: #8a3f35;
  background: rgba(255, 246, 241, 0.82);
  font-size: 13px;
  line-height: 1.6;
}

.classic-epub-empty {
  margin: 0;
  color: var(--muted);
}

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

.classic-epub-nav-button {
  min-width: 0;
  min-height: 42px;
  border: 1px solid rgba(126, 190, 170, 0.28);
  border-radius: 999px;
  color: var(--jade-800);
  background: linear-gradient(180deg, rgba(245, 252, 248, 0.96), rgba(233, 247, 241, 0.88));
  box-shadow: 0 8px 18px rgba(21, 76, 62, 0.06);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

.classic-epub-nav-button:disabled {
  color: rgba(76, 100, 93, 0.42);
  background: rgba(239, 242, 238, 0.7);
  box-shadow: none;
}

.benyi-list-heading {
  display: grid;
  gap: 4px;
  margin-top: 2px;
}

.benyi-list-heading h2 {
  margin: 0;
  font-size: 18px;
}

.benyi-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 16px;
  border: 1px solid rgba(215, 220, 224, 0.55);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.benyi-symbol {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(215, 180, 107, 0.28);
  border-radius: 50%;
  color: var(--jade-900);
  background: radial-gradient(circle, #ffffff, #dceae5);
  font-size: 34px;
}

.benyi-card strong {
  display: block;
  margin-bottom: 4px;
  color: var(--jade-900);
  font-size: 20px;
}

.benyi-card small {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
}

.benyi-hero-card,
.benyi-section-card {
  padding: 20px;
}

.benyi-hero {
  display: flex;
  align-items: center;
  gap: 16px;
}

.benyi-hero > span {
  display: grid;
  width: 70px;
  height: 70px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(215, 180, 107, 0.28);
  border-radius: 50%;
  color: var(--jade-900);
  background: radial-gradient(circle, #ffffff, #dceae5);
  font-size: 42px;
}

.benyi-hero h2 {
  margin: 0 0 6px;
  color: var(--jade-900);
  font-size: 28px;
}

.benyi-hero p,
.benyi-section-card p,
.benyi-original {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.benyi-original {
  display: grid;
  gap: 8px;
}

.benyi-original div {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(215, 180, 107, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.54);
}

.benyi-original strong {
  color: var(--jade-900);
  font-size: 14px;
}

.benyi-plain-intro {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(215, 180, 107, 0.18);
  color: var(--jade-700);
  font-size: 15px;
  line-height: 1.75;
}

.benyi-layer {
  display: grid;
  gap: 12px;
}

.benyi-layer .detail-subblock {
  padding: 12px;
  border: 1px solid rgba(215, 180, 107, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.52);
}

.benyi-classic-text p,
.benyi-line-classic-row p {
  color: #33413e;
  font-size: 15px;
  line-height: 1.85;
}

.benyi-note-text,
.benyi-line-note-row {
  background: rgba(246, 250, 247, 0.66);
}

.benyi-note-text p,
.benyi-line-note-row p {
  color: #667872;
  font-size: 14px;
  line-height: 1.78;
}

.benyi-modern-text p,
.benyi-layer-modern p {
  color: var(--muted);
  line-height: 1.78;
}

.benyi-classic-mini {
  margin-bottom: 6px !important;
  color: var(--jade-900) !important;
  font-size: 13px !important;
}

.benyi-action-grid,
.benyi-mapping-grid {
  display: grid;
  gap: 10px;
}

.benyi-action-grid div,
.benyi-mapping-grid div {
  display: grid;
  gap: 7px;
  padding: 13px;
  border: 1px solid rgba(215, 180, 107, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
}

.benyi-action-grid strong,
.benyi-mapping-grid strong {
  color: var(--jade-900);
  font-size: 15px;
}

.benyi-mapping-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

.benyi-tag-list span {
  padding: 6px 12px;
  border: 1px solid rgba(196, 168, 105, 0.22);
  border-radius: 999px;
  background: rgba(232, 242, 237, 0.72);
  color: var(--jade-700);
  font-size: 13px;
}

.benyi-line-list {
  display: grid;
  gap: 8px;
}

.benyi-line-hint {
  margin: 2px 0 8px;
  color: rgba(91, 111, 104, 0.72);
  font-size: 12px;
  letter-spacing: 0;
}

.benyi-line-row {
  display: grid;
  grid-template-columns: minmax(48px, auto) 1fr;
  align-items: start;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(215, 180, 107, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
}

.benyi-line-row span {
  width: fit-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(232, 242, 237, 0.78);
  color: var(--jade-800);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.benyi-line-row p {
  margin: 0;
}

.track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(164, 174, 171, 0.22);
}

.track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--jade-900), var(--jade-500));
}

.page-library {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.58), rgba(248, 250, 246, 0.74)),
    url("../assets/images/library/library_page_bg_v1.jpg") center top / cover no-repeat;
}

.library-page-shell {
  display: grid;
  gap: 18px;
  padding-bottom: 12px;
}

.hexagram-library {
  display: grid;
  gap: 20px;
  padding-bottom: 12px;
}

.library-tools {
  display: grid;
  gap: 14px;
  margin-bottom: 0;
}

.library-search {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 12px 20px;
  border: 1px solid rgba(122, 161, 151, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    0 12px 24px rgba(34, 62, 54, 0.07),
    inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
}

.library-search span {
  color: var(--jade-700);
  text-align: center;
}

.library-search input {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
}

.library-filter-wrap {
  position: relative;
  overflow: hidden;
}

.library-filter-wrap::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 2px;
  width: 32px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(246, 250, 248, 0.92));
  content: "";
  pointer-events: none;
}

.library-filters {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 0 36px 2px 0;
  scrollbar-width: none;
}

.library-filters::-webkit-scrollbar {
  display: none;
}

.library-filters button {
  flex: 0 0 auto;
  min-height: 42px;
  border: 1px solid rgba(215, 180, 107, 0.28);
  border-radius: 14px;
  padding: 8px 18px;
  color: var(--jade-900);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(244, 249, 246, 0.76));
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  box-shadow:
    0 8px 18px rgba(26, 56, 48, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.library-filters .is-active {
  border-color: rgba(218, 190, 120, 0.48);
  color: white;
  background:
    linear-gradient(135deg, rgba(10, 95, 77, 0.98), rgba(24, 116, 93, 0.92)),
    url("../assets/images/textures/jade_button_texture.png") center / cover no-repeat;
  box-shadow:
    0 12px 24px rgba(10, 95, 77, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.library-group-note {
  margin: 0;
  padding: 9px 12px;
  border: 1px solid rgba(215, 180, 107, 0.2);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.52);
  font-size: 13px;
  line-height: 1.6;
}

.library-lower-group {
  display: grid;
  gap: 13px;
}

.library-group-heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--jade-900);
}

.library-group-heading::before {
  width: min(78px, 20%);
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(191, 157, 88, 0.62));
  content: "";
}

.library-group-heading::after {
  width: min(78px, 20%);
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(191, 157, 88, 0.62), transparent);
  content: "";
}

.library-group-heading strong {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
}

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

.library-card {
  position: relative;
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 118px;
  padding: 15px 12px;
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.42)),
    url("../assets/images/library/library_card_frame_v4.jpg") center / cover no-repeat;
  box-shadow: 0 14px 28px rgba(28, 57, 49, 0.08);
}

.library-card-order {
  color: rgba(82, 103, 96, 0.72);
  font-size: 10px;
  line-height: 1.25;
}

.library-compact-symbol {
  position: relative;
  align-self: center;
  display: grid;
  place-items: center;
  width: 62px;
  height: 82px;
  padding: 10px;
  border: 0;
  border-radius: 12px;
  color: var(--jade-900);
  overflow: hidden;
  background: url("../assets/images/library/library_hex_plaque_solid_v1.png") center / 100% 100% no-repeat;
  box-shadow: none;
}

.library-compact-symbol .hexagram-line-view {
  position: relative;
  z-index: 1;
  width: 40px;
  gap: 4px;
}

.library-compact-symbol .hexagram-line-view span {
  height: 4px;
}

.library-main {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.library-title {
  display: block;
  min-width: 0;
}

.library-title strong {
  display: block;
  color: var(--jade-900);
  font-size: 17px;
  line-height: 1.24;
  white-space: normal;
  word-break: keep-all;
}

.library-title span,
.library-main p {
  margin: 0;
  color: var(--text-body);
  font-size: 12px;
}

.library-trigrams {
  line-height: 1.35;
  white-space: nowrap;
}

.library-card .chips {
  gap: 4px;
  max-height: 22px;
  margin: 0;
  overflow: hidden;
}

.library-card .chips span {
  padding: 3px 7px;
  border-color: rgba(23, 107, 87, 0.12);
  background: rgba(229, 241, 235, 0.72);
  font-size: 10px;
  line-height: 1.25;
}

.library-empty {
  padding: 20px;
  text-align: center;
}

.library-empty h2 {
  margin: 0 0 8px;
  color: var(--jade-900);
  font-size: 18px;
}

.library-empty p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.hexagram-detail {
  display: grid;
  gap: 20px;
  padding-bottom: 22px;
}

.detail-nav-card,
.detail-overview-card,
.action-quadrant-card,
.detail-section {
  padding: 22px;
}

.detail-overview-card,
.action-quadrant-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(248, 252, 250, 0.86));
}

.detail-overview-card {
  border-color: transparent;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(244, 250, 247, 0.32)) padding-box,
    url("../assets/images/record/record_summary_bg_v1.jpg") center / cover no-repeat padding-box,
    linear-gradient(135deg, var(--gold-edge), var(--gold-edge-soft), rgba(180, 145, 75, 0.2)) border-box;
}

.detail-overview-head {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 20px;
  align-items: center;
}

.overview-figure {
  box-sizing: border-box;
  display: grid;
  justify-items: center;
  padding: 18px 12px;
  border: 1px solid rgba(215, 180, 107, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.56);
}

.overview-figure .hexagram-line-view {
  width: 82px;
  gap: 9px;
}

.overview-figure .hexagram-line-view span {
  height: 8px;
}

.overview-name {
  min-width: 0;
}

.overview-name h2 {
  margin: 0 0 8px;
  color: var(--jade-900);
  font-size: 31px;
  line-height: 1.15;
}

.overview-name p,
.overview-guiding,
.quadrant-item p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.overview-inline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 12px;
}

.hexagram-chip-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.overview-keyword-chips {
  margin-top: 14px;
}

.overview-inline-meta span,
.overview-keyword-chips span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid rgba(23, 107, 87, 0.12);
  border-radius: 999px;
  color: var(--jade-900);
  background: rgba(235, 246, 241, 0.72);
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}

.overview-guiding {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(215, 220, 224, 0.46);
  font-size: 15.5px;
}

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

.quadrant-item {
  display: grid;
  gap: 9px;
  min-height: 0;
  padding: 16px 17px;
  border: 1px solid rgba(215, 180, 107, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
}

.quadrant-item strong {
  color: var(--jade-900);
  font-size: 16px;
}

.quadrant-item p {
  font-size: 14.5px;
}

.hexagram-guidance-section {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(246, 251, 248, 0.88));
}

.guidance-content {
  display: grid;
  gap: 14px;
}

.guidance-lead {
  padding: 14px 16px;
  border: 1px solid rgba(215, 180, 107, 0.26);
  border-radius: 8px;
  color: var(--jade-900) !important;
  background: rgba(250, 248, 240, 0.54);
  font-weight: 700;
}

.guidance-block {
  display: grid;
  gap: 7px;
}

.guidance-action-block {
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgba(215, 180, 107, 0.34);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(252, 249, 238, 0.88), rgba(255, 255, 255, 0.72));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

.guidance-risk-block {
  padding: 13px 15px;
  border-left: 3px solid rgba(215, 180, 107, 0.72);
  border-radius: 8px;
  background: rgba(250, 248, 240, 0.56);
}

.guidance-block > strong {
  color: var(--jade-900);
  font-size: 15px;
  line-height: 1.32;
}

.guidance-block-subtitle {
  margin-top: -2px;
  color: rgba(94, 113, 108, 0.78);
  font-size: 12.5px;
  line-height: 1.35;
}

.guidance-block ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: rgba(48, 73, 68, 0.84);
  font-size: 14.5px;
  line-height: 1.68;
}

.guidance-block > p {
  line-height: 1.72;
}

.guidance-action-block > p {
  line-height: 1.68;
}

.guidance-application-panel {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(23, 107, 87, 0.1);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(246, 251, 248, 0.9), rgba(255, 255, 255, 0.66));
}

.guidance-application-head {
  display: grid;
  gap: 3px;
}

.guidance-application-head strong {
  color: var(--jade-900);
  font-size: 15px;
}

.guidance-application-head small {
  color: rgba(94, 113, 108, 0.84);
  font-size: 12.5px;
}

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

.guidance-application-card {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(215, 180, 107, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
}

.guidance-application-card:nth-child(3) {
  grid-column: 1 / -1;
}

.guidance-application-card-title {
  color: var(--jade-900);
  font-size: 14px;
  line-height: 1.28;
}

.guidance-application-card p,
.guidance-application-card-list {
  font-size: 14.5px;
  line-height: 1.62;
  color: rgba(48, 73, 68, 0.86);
}

.guidance-application-card-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 16px;
}

.guidance-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 2px;
}

.guidance-keywords span {
  padding: 6px 10px;
  border: 1px solid rgba(23, 107, 87, 0.12);
  border-radius: 999px;
  color: rgba(15, 107, 85, 0.9);
  background: rgba(235, 246, 241, 0.78);
  font-size: 12.5px;
}

.detail-lite-content {
  display: grid;
  gap: 14px;
}

.mind-practice-section {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.91), rgba(248, 252, 250, 0.86));
}

.compact-quote {
  margin-top: 0;
}

.detail-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.91), rgba(248, 252, 250, 0.86));
}

.detail-section > * {
  position: relative;
  z-index: 1;
}

.detail-section p {
  margin: 0;
  color: rgba(48, 73, 68, 0.84);
  font-size: 15.5px;
  line-height: 1.82;
}

.hexagram-classic-card {
  display: grid;
  gap: 14px;
}

.hexagram-classic-block,
.hexagram-classic-line {
  display: grid;
  gap: 8px;
  padding: 12px 13px;
  border: 1px solid rgba(215, 180, 107, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
}

.hexagram-classic-block strong,
.hexagram-classic-lines > strong {
  color: var(--jade-900);
  font-size: 14.5px;
  line-height: 1.35;
}

.hexagram-classic-line-list {
  display: grid;
  gap: 10px;
  margin-top: 9px;
}

.hexagram-classic-line-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hexagram-classic-line-head span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border: 1px solid rgba(23, 107, 87, 0.12);
  border-radius: 999px;
  color: var(--jade-900);
  background: rgba(235, 246, 241, 0.76);
  font-size: 13px;
  font-weight: 800;
}

.hexagram-classic-line p {
  display: grid;
  gap: 4px;
}

.hexagram-classic-line p b {
  color: rgba(15, 107, 85, 0.88);
  font-size: 12.5px;
  line-height: 1.35;
}

.hexagram-classic-explanation {
  padding: 9px 11px;
  border-left: 3px solid var(--gold-line);
  border-radius: 8px;
  background: rgba(250, 248, 240, 0.56);
  color: rgba(48, 73, 68, 0.78) !important;
  white-space: pre-line;
}

.hexagram-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
}

.detail-nav-card {
  padding-top: 12px;
  padding-bottom: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(248, 252, 250, 0.7));
}

.detail-nav-card .text-button {
  color: rgba(15, 107, 85, 0.78);
  font-size: 13px;
  min-width: 0;
  white-space: normal;
  line-height: 1.45;
}

.hexagram-neighbor-prev {
  justify-self: start;
  text-align: left;
}

.hexagram-neighbor-next {
  justify-self: end;
  text-align: right;
}

.detail-section h2 {
  margin: 0;
  color: var(--jade-900);
  font-size: 19px;
}

.collapsible-section {
  overflow: hidden;
}

.collapsible-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
}

.collapsible-section summary::-webkit-details-marker {
  display: none;
}

.module-title {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  min-width: 0;
  gap: 3px 8px;
}

.module-title.has-icon {
  grid-template-columns: auto 1fr;
}

.module-title h2 {
  min-width: 0;
}

.module-title.has-icon h2 {
  grid-column: 2;
}

.module-title small {
  grid-column: 1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
}

.module-title.has-icon small {
  grid-column: 2;
}

.module-title-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  object-fit: contain;
  opacity: 0.7;
}

.collapsible-section summary > span:last-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0;
}

.collapsible-section summary > span:last-child::after {
  content: "展开";
  font-size: 12px;
}

.collapsible-section summary > span:last-child::before {
  content: "›";
  color: var(--gold);
  font-size: 18px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.collapsible-section[open] summary > span:last-child::after {
  content: "收起";
}

.collapsible-section[open] summary > span:last-child::before {
  transform: rotate(90deg);
}

.collapsible-content {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  animation: detail-reveal 0.18s ease;
}

@keyframes detail-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.detail-subblock {
  display: grid;
  gap: 10px;
  padding: 2px 0;
}

.detail-subblock strong {
  width: fit-content;
  color: var(--jade-900);
  font-size: 15px;
}

.detail-section p + p {
  margin-top: 0;
}

.detail-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 18px;
  color: rgba(48, 73, 68, 0.84);
  line-height: 1.75;
}

.teacher-notes ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: rgba(48, 73, 68, 0.84);
  line-height: 1.65;
}

.classroom-supplement .collapsible-content {
  gap: 18px;
}

.classroom-supplement-block {
  display: grid;
  gap: 12px;
}

.classroom-supplement-block + .classroom-supplement-block {
  padding-top: 16px;
  border-top: 1px solid rgba(215, 180, 107, 0.22);
}

.classroom-supplement-block h3 {
  margin: 0;
  color: var(--jade-900);
  font-size: 17px;
}

.teacher-quotes {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.teacher-quotes p {
  margin: 0;
  min-height: 42px;
  padding: 11px 14px;
  border-left: 2px solid rgba(215, 180, 107, 0.66);
  border-radius: 8px;
  color: var(--jade-900);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.86), rgba(255, 251, 241, 0.58)),
    url("../assets/images/ui/decorations/quote_bar_bg.png") center / cover no-repeat;
}

.teacher-notes small {
  display: block;
  margin-top: 12px;
  color: var(--muted);
  line-height: 1.6;
}

.tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(215, 220, 224, 0.72);
}

.tabs button {
  position: relative;
  padding: 14px 6px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 16px;
}

.tabs .is-active {
  color: var(--jade-700);
  font-weight: 700;
}

.tabs .is-active::after {
  position: absolute;
  right: 18px;
  bottom: -1px;
  left: 18px;
  height: 2px;
  content: "";
  background: var(--jade-700);
}

.history-tools {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.history-toast {
  position: fixed;
  z-index: calc(var(--z-modal-root) + 6);
  top: max(24px, calc(env(safe-area-inset-top) + 18px));
  left: 50%;
  width: min(360px, calc(100vw - 40px));
  margin: 0;
  padding: 10px 13px;
  border: 1px solid rgba(215, 180, 107, 0.28);
  border-radius: 12px;
  color: var(--jade-900);
  background: rgba(246, 252, 248, 0.94);
  box-shadow: 0 12px 30px rgba(21, 76, 62, 0.16);
  font-size: 13px;
  line-height: 1.55;
  pointer-events: none;
  transform: translateX(-50%);
  white-space: pre-line;
}

.history-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

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

.history-tabs button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 7px 13px;
  border: 1px solid rgba(23, 107, 87, 0.16);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.56);
  font: inherit;
  font-size: 13px;
  scroll-snap-align: start;
}

.history-tabs .is-active {
  border-color: rgba(23, 107, 87, 0.3);
  color: white;
  background: linear-gradient(135deg, var(--jade-900), var(--jade-500));
}

.history-month-list {
  display: grid;
  gap: 6px;
}

.history-month-group {
  display: grid;
  gap: 6px;
}

.history-month-header {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  width: calc(100% - 8px);
  min-height: 42px;
  margin-inline: 4px;
  padding: 7px 3px 7px 11px;
  border: 0;
  border-bottom: 1px solid rgba(215, 180, 107, 0.28);
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  font: inherit;
  text-align: left;
}

.history-month-header::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: var(--jade-600);
}

.history-month-header span {
  display: flex;
  overflow: hidden;
  min-width: 0;
  gap: 8px;
  align-items: baseline;
}

.history-month-header strong {
  flex: 0 0 auto;
  color: var(--jade-900);
  font-size: 15px;
  line-height: 1.3;
}

.history-month-header small {
  flex: 1 1 auto;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-month-header em {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 5px;
  align-items: center;
  padding: 0 2px;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  font-style: normal;
  line-height: 1;
}

.history-month-header em::after {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
}

.history-month-header[aria-expanded="true"] em::after {
  transform: rotate(225deg) translate(-1px, -1px);
}

.history-month-records {
  display: grid;
  gap: 4px;
}

.record-top {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  color: #8b9692;
  font-size: 14px;
}

.record-top em {
  padding: 4px 9px;
  border: 1px solid rgba(23, 107, 87, 0.14);
  border-radius: 999px;
  color: var(--jade-700);
  background: rgba(235, 246, 241, 0.68);
  font-size: 12px;
  font-style: normal;
}

.record-tools {
  display: flex;
  gap: 4px;
}

.record-hex {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 14px 0;
}

.record-hex-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.record-hex-item strong {
  display: block;
  margin-top: 3px;
}

.record-note {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.record-detail .record-note {
  display: block;
  overflow: visible;
}

.review-done,
.review-pending {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
}

.review-done {
  color: var(--jade-900);
  background: rgba(214, 235, 226, 0.82);
}

.review-pending {
  color: #947334;
  background: rgba(255, 247, 222, 0.76);
}

.empty-history {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding: 22px;
}

.empty-history h2,
.record-detail-head h2,
.delete-confirm h2 {
  margin: 0;
  color: var(--jade-900);
}

.empty-history p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.record-detail {
  display: grid;
  gap: 14px;
  margin-bottom: 24px;
  padding: 18px;
}

.record-detail-head {
  display: grid;
  gap: 6px;
}

.record-detail-head span {
  color: var(--muted);
  font-size: 13px;
}

.record-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.review-panel {
  display: grid;
  gap: 11px;
  padding: 15px;
  border: 1px solid rgba(215, 180, 107, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.54);
}

.review-content {
  display: grid;
  gap: 10px;
}

.review-content div {
  display: grid;
  gap: 6px;
}

.review-content strong {
  color: var(--jade-900);
  font-size: 14px;
}

.review-content p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.review-summary-panel {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(239, 248, 244, 0.5));
}

.review-summary-list {
  display: grid;
  gap: 10px;
}

.review-summary-item {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(23, 107, 87, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.56);
}

.review-summary-item strong {
  color: var(--jade-900);
  font-size: 14px;
}

.review-summary-item p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.review-empty-note {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.single-action {
  grid-template-columns: 1fr;
  margin-top: 2px;
}

.detail-lines {
  border-top: 0;
  padding-top: 0;
}

.record-card {
  display: grid;
  gap: 6px;
  padding: 11px 12px 10px;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.record-swipe-shell {
  position: relative;
  min-width: 0;
  overflow: hidden;
  margin-bottom: 16px;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow);
  isolation: isolate;
}

.record-swipe-surface {
  position: relative;
  z-index: 1;
  min-width: 0;
  transform: translate3d(var(--history-swipe-x, 0), 0, 0);
  transition: transform 0.2s ease-out;
  touch-action: pan-y;
}

.record-swipe-shell.is-open .record-swipe-surface {
  --history-swipe-x: -72px;
}

.record-swipe-surface.is-tracking {
  transition: none;
  user-select: none;
}

.record-swipe-shell .record-card {
  margin-bottom: 0;
  box-shadow: inset 0 0 0 1px rgba(215, 220, 224, 0.45);
}

.record-swipe-delete {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 72px;
  padding: 0;
  border: 0;
  color: #8c5147;
  background-color: #fff;
  background: linear-gradient(
    270deg,
    #ead4cf 0%,
    #f0dfdb 10%,
    #f7eeec 22%,
    #fcf9f8 38%,
    #ffffff 62%,
    #ffffff 100%
  );
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.08s ease-out;
}

.record-swipe-shell.is-swiping .record-swipe-delete,
.record-swipe-shell.is-open .record-swipe-delete {
  opacity: 1;
}

.record-swipe-shell.is-open .record-swipe-delete {
  pointer-events: auto;
}

.record-swipe-delete:focus-visible {
  outline: 2px solid rgba(140, 90, 80, 0.82);
  outline-offset: -4px;
}

.record-card:active {
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .record-swipe-surface {
    transition: none;
  }
}

.daily-record-card {
  gap: 6px;
  border-color: rgba(196, 168, 105, 0.2);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(240, 248, 244, 0.6)),
    radial-gradient(circle at 92% 18%, rgba(215, 180, 107, 0.13), transparent 26%);
}

.record-top-main,
.daily-record-top {
  display: flex;
  min-width: 0;
  gap: 8px;
  align-items: center;
}

.record-top-main {
  flex-wrap: wrap;
  gap: 4px 6px;
}

.daily-record-top {
  align-items: flex-start;
  justify-content: space-between;
}

.daily-record-date {
  display: grid;
  gap: 3px;
}

.daily-record-date strong {
  color: var(--jade-900);
  font-size: 21px;
  line-height: 1.2;
}

.daily-record-date span {
  color: var(--muted);
  font-size: 13px;
}

.daily-record-body {
  display: grid;
  gap: 5px;
}

.daily-record-body p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.daily-record-body p strong {
  color: var(--jade-700);
}

.daily-record-message {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.daily-record-hex,
.daily-detail-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.daily-record-hex {
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
}

.daily-record-hex > div {
  display: grid;
  align-content: center;
  min-height: 38px;
}

.daily-record-hex .hexagram-line-view {
  transform: scale(0.76);
  transform-origin: center;
}

.daily-record-hex small,
.daily-detail-card small {
  color: var(--muted);
  font-size: 12px;
}

.daily-record-hex h2 {
  margin: 0;
  color: var(--jade-900);
  font-size: 18px;
  line-height: 1.25;
}

.daily-detail-card h2 {
  margin: 3px 0 0;
  color: var(--jade-900);
  font-size: 20px;
}

.record-question {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--jade-900);
  font-size: 17px;
  line-height: 1.42;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.record-hex-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.record-hex-summary.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.record-hex-compact {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: inherit;
}

.record-hex-compact .hexagram-line-view {
  transform: scale(0.64);
  transform-origin: center;
}

.record-hex-compact strong {
  overflow: hidden;
  color: var(--jade-900);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-arrow {
  color: rgba(23, 107, 87, 0.64);
  font-size: 20px;
  text-align: center;
}

.moving-mini {
  grid-column: 1 / -1;
  margin-top: -1px;
  color: var(--muted);
  font-size: 12px;
}

.record-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
}

.record-actions {
  justify-content: flex-end;
  padding-top: 0;
}

.record-top {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: space-between;
}

.record-top-main span {
  color: var(--muted);
  font-size: 12px;
}

.record-top-main em {
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-style: normal;
  line-height: 1.45;
}

.record-top-main em::before {
  margin-right: 6px;
  color: rgba(104, 120, 115, 0.72);
  content: "·";
}

.record-tools {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
  align-items: flex-start;
  padding-top: 0;
}

.record-tools .icon-button.tiny {
  width: 20px;
  height: 18px;
  flex-basis: 20px;
  align-items: flex-start;
  color: rgba(15, 74, 60, 0.68);
  font-size: 14px;
  line-height: 18px;
}

.record-detail-note {
  padding-top: 2px;
  font-size: 14px;
}

.compact-action {
  min-height: 32px;
  padding: 6px 12px;
  font-size: 13px;
}

.record-actions .compact-action {
  min-height: 30px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.56);
}

.review-status {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

.record-card .record-top .review-status,
.record-card .daily-record-top .review-status {
  padding: 2px 7px;
  border: 1px solid rgba(196, 168, 105, 0.14);
  font-size: 10.5px;
  line-height: 1.2;
}

.review-status-pending {
  color: #947334;
  background: rgba(255, 247, 222, 0.76);
}

.review-status-reviewing,
.review-status-unknown {
  color: var(--jade-700);
  background: rgba(235, 246, 241, 0.78);
}

.review-status-reviewed,
.review-status-happened {
  color: var(--jade-900);
  background: rgba(214, 235, 226, 0.84);
}

.review-status-not_happened {
  color: #7d6b44;
  background: rgba(240, 232, 214, 0.72);
}

.record-card .record-top .review-status-pending,
.record-card .daily-record-top .review-status-pending {
  color: rgba(125, 107, 68, 0.7);
  background: rgba(255, 247, 222, 0.28);
}

.record-card .record-top .review-status-reviewing,
.record-card .record-top .review-status-unknown,
.record-card .daily-record-top .review-status-reviewing,
.record-card .daily-record-top .review-status-unknown {
  color: rgba(23, 107, 87, 0.68);
  background: rgba(235, 246, 241, 0.34);
}

.record-card .record-top .review-status-reviewed,
.record-card .record-top .review-status-happened,
.record-card .daily-record-top .review-status-reviewed,
.record-card .daily-record-top .review-status-happened {
  color: rgba(15, 74, 60, 0.7);
  background: rgba(214, 235, 226, 0.36);
}

.record-card .record-top .review-status-not_happened,
.record-card .daily-record-top .review-status-not_happened {
  color: rgba(125, 107, 68, 0.68);
  background: rgba(240, 232, 214, 0.3);
}

.record-overview-card,
.record-detail-section {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid rgba(215, 180, 107, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.58);
}

.record-detail-section .section-title,
.review-panel .section-title {
  margin-bottom: 2px;
}

.record-overview-card {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(238, 247, 243, 0.56));
}

.record-overview-card:has(.record-summary-title),
.daily-detail-overview {
  border-color: transparent;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(244, 250, 247, 0.28)) padding-box,
    url("../assets/images/record/record_summary_bg_v1.jpg") padding-box,
    linear-gradient(135deg, var(--gold-edge), var(--gold-edge-soft), rgba(180, 145, 75, 0.22)) border-box;
  background-position: center, center, center;
  background-repeat: no-repeat;
  background-size: 100% 100%, cover, 100% 100%;
}

.record-summary-title {
  margin-bottom: -2px;
}

.record-overview-insight {
  display: grid;
  gap: 10px;
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid rgba(215, 180, 107, 0.2);
}

.record-interpretation-card {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(215, 180, 107, 0.22);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(250, 247, 238, 0.54));
}

.record-interpretation-flow {
  margin-top: -2px;
}

.record-insight-points {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  color: rgba(41, 58, 53, 0.74);
  font-size: 13px;
  line-height: 1.65;
}

.record-insight-points li::marker {
  color: var(--jade-700);
}

.record-interpretation-summary {
  margin: 0;
}

.record-overview-card:has(.record-summary-title) .record-interpretation-summary {
  padding: 10px 12px;
  border-left: 3px solid var(--gold-line);
  border-radius: 10px;
  background: rgba(255, 251, 241, 0.62);
}

.record-judgement-light-guide {
  margin: -1px 0 0;
  padding-left: 18px;
  color: rgba(41, 58, 53, 0.58);
  font-size: 12px;
  line-height: 1.6;
}

.record-judgement-card .record-overview-insight {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.record-judgement-grid {
  display: grid;
  gap: 8px;
}

.record-judgement-item {
  display: grid;
  gap: 6px;
  padding: 11px 12px;
  border: 1px solid rgba(123, 177, 157, 0.22);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(239, 248, 244, 0.48));
}

.record-judgement-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.record-judgement-item-head span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid rgba(191, 157, 88, 0.28);
  border-radius: 999px;
  background: rgba(255, 251, 239, 0.7);
  color: var(--jade-800);
  font-size: 12px;
  font-weight: 700;
}

.record-judgement-item-head small {
  color: rgba(82, 103, 96, 0.66);
  font-size: 12px;
  white-space: nowrap;
}

.record-judgement-item strong {
  color: var(--jade-900);
  font-size: 16px;
  line-height: 1.35;
}

.record-judgement-item p {
  margin: 0;
  color: rgba(41, 58, 53, 0.66);
  font-size: 13px;
  line-height: 1.56;
}

.record-najia-clue-card {
  border-color: rgba(215, 180, 107, 0.26);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(239, 248, 244, 0.54));
}

.record-najia-clue-card > .section-title {
  display: none;
}

.record-najia-intro,
.record-najia-footer {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(215, 180, 107, 0.22);
  border-left: 2px solid rgba(191, 157, 88, 0.3);
  border-radius: 10px;
  background: rgba(255, 252, 242, 0.46);
  color: rgba(41, 58, 53, 0.62);
  font-size: 12px;
  line-height: 1.55;
}

.record-najia-grid {
  display: grid;
  gap: 8px;
}

.record-najia-mini-card {
  display: grid;
  gap: 6px;
  padding: 10px 11px;
  border: 1px solid rgba(23, 107, 87, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
}

.record-najia-mini-card strong {
  color: var(--jade-900);
  font-size: 13px;
}

.record-najia-mini-card p,
.record-najia-mini-card li,
.record-najia-mini-card small {
  margin: 0;
  color: rgba(41, 58, 53, 0.7);
  font-size: 12px;
  line-height: 1.55;
}

.record-najia-mini-card p b {
  color: var(--jade-900);
}

.record-najia-mini-card ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
}

.record-najia-badge,
.record-najia-tags span {
  display: inline-grid;
  place-items: center;
  width: fit-content;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.record-najia-badge {
  min-width: 20px;
  height: 18px;
  margin-right: 5px;
  padding: 0 5px;
}

.record-najia-badge.is-shi {
  color: #fff;
  background: rgba(23, 107, 87, 0.86);
}

.record-najia-badge.is-ying {
  color: var(--jade-800);
  border: 1px solid rgba(23, 107, 87, 0.14);
  background: rgba(223, 240, 232, 0.86);
}

.record-najia-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.record-najia-tags span {
  padding: 5px 9px;
  border: 1px solid rgba(23, 107, 87, 0.12);
  background: rgba(239, 248, 244, 0.78);
  color: var(--jade-900);
}

.record-sixline-results {
  gap: 7px;
}

.record-sixline-item {
  border: 1px solid rgba(23, 107, 87, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
  overflow: hidden;
}

.record-sixline-item.is-moving {
  border-color: rgba(198, 160, 74, 0.34);
  background: linear-gradient(135deg, rgba(255, 251, 238, 0.86), rgba(255, 255, 255, 0.56));
}

.record-sixline-item > summary {
  list-style: none;
}

.record-sixline-item > summary::-webkit-details-marker {
  display: none;
}

.record-sixline-row {
  grid-template-columns: 42px minmax(42px, 0.85fr) 34px minmax(96px, 1.35fr) 28px;
  gap: 8px;
  padding: 9px 10px;
  cursor: pointer;
}

.record-sixline-position {
  white-space: nowrap;
}

.record-sixline-relative {
  min-width: 0;
}

.record-sixline-marker {
  min-height: 18px;
}

.record-sixline-state {
  justify-self: end;
  text-align: right;
}

.record-sixline-expand {
  justify-self: end;
  color: rgba(23, 107, 87, 0.74);
  font-size: 12px;
  font-weight: 800;
}

.record-sixline-expand::before {
  content: "▶";
}

.record-sixline-item[open] .record-sixline-expand::before {
  content: "▼";
}

.record-sixline-detail {
  display: grid;
  gap: 8px;
  padding: 0 10px 11px;
  border-top: 1px solid rgba(23, 107, 87, 0.08);
}

.record-sixline-hint {
  margin: 10px 0 0;
  padding: 8px 9px;
  border-radius: 9px;
  font-size: 12px;
  line-height: 1.55;
}

.record-sixline-hint.is-moving {
  border: 1px solid rgba(198, 160, 74, 0.24);
  background: rgba(255, 249, 231, 0.82);
  color: rgba(93, 72, 30, 0.86);
}

.record-sixline-hint.is-static {
  border: 1px solid rgba(23, 107, 87, 0.1);
  background: rgba(239, 248, 244, 0.72);
  color: rgba(53, 82, 74, 0.82);
}

.record-sixline-hint strong,
.record-sixline-hint span {
  display: block;
}

.record-sixline-hint strong {
  margin-bottom: 2px;
}

.record-sixline-reading {
  display: grid;
  gap: 4px;
  padding: 8px 9px;
  border: 1px solid rgba(23, 107, 87, 0.08);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.58);
}

.record-sixline-reading strong {
  color: var(--jade-900);
  font-size: 12px;
}

.record-sixline-reading p {
  margin: 0;
  color: rgba(34, 54, 48, 0.82);
  font-size: 13px;
  line-height: 1.65;
  white-space: pre-line;
}

.record-sixline-note {
  margin: 2px 0 0;
  color: rgba(82, 103, 96, 0.62);
  font-size: 11px;
  line-height: 1.55;
}

@media (min-width: 560px) {
  .record-najia-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .record-sixline-row {
    grid-template-columns: 42px minmax(36px, 0.7fr) 28px minmax(78px, 1.28fr) 20px !important;
    gap: 6px;
  }

  .record-sixline-row .record-sixline-state {
    grid-column: 4 !important;
    font-size: 11px;
  }

  .record-sixline-expand {
    font-size: 11px;
  }
}

.daily-detail-overview {
  gap: 14px;
}

.daily-record-date.is-detail strong {
  font-size: 28px;
}

.daily-detail-card {
  grid-template-columns: 58px minmax(0, 1fr);
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(23, 107, 87, 0.1);
  border-radius: 12px;
  color: inherit;
  background: rgba(255, 255, 255, 0.52);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.daily-detail-card .hexagram-line-view {
  transform: scale(1.05);
}

.daily-review-panel {
  border-radius: 12px;
}

.record-overview-hex {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

.record-overview-hex button,
.record-overview-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
}

.record-overview-hex button,
.daily-detail-card {
  transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

.record-overview-hex button:active,
.daily-detail-card:active {
  transform: translateY(1px);
}

.record-overview-hex button:focus-visible,
.daily-detail-card:focus-visible {
  outline: 2px solid rgba(23, 107, 87, 0.28);
  outline-offset: 2px;
}

.record-overview-hex small,
.record-overview-empty small {
  color: var(--muted);
  font-size: 12px;
}

.record-overview-hex strong,
.record-overview-empty strong {
  color: var(--jade-900);
  font-size: 16px;
}

.overview-direction {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.record-overview-hint {
  margin: -2px 0 0;
  color: rgba(78, 113, 101, 0.72);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.record-overview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
}

.record-collapse-card {
  padding: 0;
}

.record-collapse-card summary::-webkit-details-marker {
  display: none;
}

.record-collapse-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 13px 15px;
  list-style: none;
  cursor: pointer;
}

.record-collapse-main {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.record-collapse-title {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
  color: var(--jade-900);
  font-weight: 700;
}

.record-collapse-title::before {
  color: rgba(15, 107, 85, 0.78);
  content: "▶";
  font-size: 11px;
  line-height: 1;
}

.record-collapse-card[open] .record-collapse-title::before {
  content: "▼";
}

.record-collapse-title strong {
  overflow: hidden;
  font-size: 15px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record-collapse-meta {
  color: rgba(82, 103, 96, 0.72);
  font-size: 12px;
  line-height: 1.35;
}

.record-collapse-toggle {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.record-collapse-close,
.record-collapse-card[open] .record-collapse-open {
  display: none;
}

.record-collapse-card[open] .record-collapse-close {
  display: inline;
}

.record-collapse-card[open] {
  padding: 0 15px 15px;
}

.record-collapse-card[open] .record-collapse-header {
  margin: 0 -15px 2px;
}

.moving-line-text-card {
  border-color: rgba(205, 178, 112, 0.24);
  background: rgba(255, 255, 255, 0.56);
}

.moving-line-text-list {
  display: grid;
  gap: 9px;
}

.moving-line-text-item {
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid rgba(205, 178, 112, 0.22);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.moving-line-text-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.moving-line-text-title strong {
  color: var(--jade-900);
  font-size: 15px;
}

.moving-line-text-title span {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  color: #8c6f35;
  background: rgba(255, 248, 229, 0.78);
  font-size: 12px;
  font-weight: 700;
}

.moving-line-text-body {
  display: grid;
  gap: 3px;
}

.moving-line-text-body strong {
  color: var(--jade-700);
  font-size: 13px;
}

.moving-line-text-body p {
  margin: 0;
  color: #5b6f68;
  font-size: 14px;
  line-height: 1.65;
}

.moving-line-text-body:not(.moving-line-text-explanation) p {
  color: #334d45;
  font-weight: 600;
}

.moving-line-text-explanation p {
  color: rgba(70, 92, 85, 0.76);
  font-weight: 500;
  white-space: pre-line;
}

.review-status-select {
  appearance: none;
  width: fit-content;
  min-width: 116px;
  min-height: 34px;
  padding: 6px 30px 6px 12px;
  border-color: rgba(23, 107, 87, 0.16);
  border-radius: 999px;
  color: var(--jade-900);
  background:
    linear-gradient(45deg, transparent 50%, var(--jade-700) 50%) calc(100% - 16px) 14px / 6px 6px no-repeat,
    linear-gradient(135deg, var(--jade-700) 50%, transparent 50%) calc(100% - 12px) 14px / 6px 6px no-repeat,
    rgba(239, 248, 244, 0.76);
  font-size: 13px;
  font-weight: 700;
}

.record-management .result-actions {
  grid-template-columns: 1fr;
  margin-top: 0;
}

.record-analysis-actions,
.record-management-actions,
.review-form-actions,
.delete-confirm-actions {
  margin-top: 4px;
}

.record-analysis-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.record-analysis-actions .outline-button,
.record-management-actions .outline-button {
  min-height: 34px;
}

.record-management {
  margin-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  border-color: rgba(23, 107, 87, 0.12);
  background: rgba(255, 255, 255, 0.42);
}

.record-management-actions {
  gap: 8px;
}

.review-form-actions {
  grid-template-columns: 1fr;
  gap: 7px;
  align-items: stretch;
  margin-top: 2px;
}

.review-form-actions .jade-button {
  width: 100%;
}

.review-clear-button {
  justify-self: center;
  min-height: 28px;
  padding: 4px 10px;
  color: #8c6d65;
  font-size: 12px;
  font-weight: 650;
}

.review-clear-button:active {
  color: #994836;
}

.review-form {
  gap: 10px;
}

.review-form label {
  gap: 6px;
}

.review-form textarea {
  min-height: 82px;
  line-height: 1.58;
}

.review-deep-fields {
  display: grid;
  gap: 8px;
}

.review-deep-fields summary {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  color: var(--jade-700);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.review-deep-fields summary::-webkit-details-marker {
  display: none;
}

.review-deep-fields summary::before {
  content: "›";
  display: inline-block;
  color: rgba(23, 107, 87, 0.72);
  font-size: 16px;
  line-height: 1;
  transform: translateY(-1px);
  transition: transform 0.16s ease;
}

.review-deep-fields[open] summary::before {
  transform: rotate(90deg) translateX(-1px);
}

.review-toggle-open {
  display: none;
}

.review-deep-fields[open] .review-toggle-closed {
  display: none;
}

.review-deep-fields[open] .review-toggle-open {
  display: inline;
}

.review-deep-content {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}

.back-button {
  width: 100%;
  height: 100%;
  border: 0;
  color: var(--jade-900);
  background: transparent;
  font-size: 30px;
  line-height: 1;
}

.danger {
  border-color: rgba(153, 72, 54, 0.28);
  color: #994836;
}

.subtle-danger {
  border-color: rgba(153, 72, 54, 0.2);
  color: #8c4d3f;
  background: rgba(255, 255, 255, 0.48);
}

.delete-confirm {
  display: grid;
  gap: 12px;
  width: min(100%, 360px);
  padding: 18px;
  border: 1px solid rgba(153, 72, 54, 0.22);
  border-radius: 16px;
  background: rgba(255, 250, 247, 0.94);
  box-shadow: 0 20px 44px rgba(22, 49, 41, 0.18);
}

.delete-confirm p {
  margin: 0;
  color: var(--muted);
}

.delete-confirm-overlay {
  align-items: center;
  padding: 22px;
}

.delete-confirm-actions {
  grid-template-columns: 1fr 1fr;
}

.daily-type {
  padding: 6px 12px;
  border: 1px solid rgba(23, 107, 87, 0.16);
  border-radius: 999px;
  color: var(--jade-700);
  background: rgba(255, 255, 255, 0.46);
  font-size: 13px;
  line-height: 1.45;
}

.user-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  overflow: hidden;
  border-color: transparent;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.44), rgba(247, 252, 249, 0.2)) padding-box,
    url("../assets/images/record/record_summary_bg_v1.jpg") 78% 52% / 118% auto no-repeat padding-box,
    linear-gradient(135deg, var(--gold-edge), var(--gold-edge-soft), rgba(180, 145, 75, 0.18)) border-box;
}

.user-card-body {
  display: grid;
  min-width: 0;
  gap: 7px;
  padding-top: 4px;
}

.user-card-body h2 {
  margin-bottom: 0;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.user-card-body p {
  margin-bottom: 0;
}

.profile-name-edit {
  width: fit-content;
  padding: 5px 12px;
  border: 1px solid rgba(23, 107, 87, 0.16);
  border-radius: 999px;
  color: var(--jade-700);
  background: rgba(239, 248, 244, 0.72);
  font-size: 12px;
  line-height: 1.35;
}

.profile-name-field {
  display: grid;
  gap: 8px;
}

.profile-name-field span {
  color: var(--jade-900);
  font-size: 13px;
  font-weight: 800;
}

.profile-name-field input {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid rgba(23, 107, 87, 0.16);
  border-radius: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.76);
  font-size: 16px;
  outline: 0;
}

.profile-name-field input:focus {
  border-color: rgba(23, 107, 87, 0.36);
  box-shadow: 0 0 0 3px rgba(23, 107, 87, 0.08);
}

.avatar {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #f6f1df;
  font-size: 28px;
  font-weight: 700;
  background: url("../assets/images/profile/profile_avatar_jade_disc_v3.png") center / contain no-repeat;
  box-shadow: 0 12px 26px rgba(15, 74, 60, 0.18);
  text-shadow:
    0 1px 2px rgba(0, 35, 25, 0.34),
    0 0 8px rgba(255, 248, 220, 0.18);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.stat-card {
  display: grid;
  gap: 6px;
  padding: 17px 12px;
  text-align: center;
}

.stat-card strong {
  color: var(--jade-900);
  font-size: 24px;
}

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

.profile-message {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(23, 107, 87, 0.12);
  border-radius: 12px;
  color: var(--jade-700);
  background: rgba(239, 248, 244, 0.72);
  font-size: 13px;
  line-height: 1.55;
}

.action-list {
  padding: 8px 16px;
}

.profile-action-group {
  margin-bottom: 14px;
}

.profile-group-title {
  padding: 7px 0 2px;
  color: var(--jade-900);
  font-size: 14px;
  font-weight: 800;
}

.profile-script-group {
  padding: 8px 16px 14px;
}

.script-toggle-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0 2px;
}

.script-toggle-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.script-toggle-copy strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.3;
}

.script-toggle-copy span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.script-segmented {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(46px, 1fr));
  min-width: 104px;
  padding: 3px;
  border: 1px solid rgba(23, 107, 87, 0.14);
  border-radius: 999px;
  background: rgba(239, 248, 244, 0.72);
}

.script-segmented button {
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  color: var(--jade-700);
  background: transparent;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.script-segmented button.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--jade-700), var(--jade-900));
  box-shadow: 0 8px 16px rgba(15, 74, 60, 0.16);
}

.action-list button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 17px 0;
  border: 0;
  border-bottom: 1px solid rgba(215, 220, 224, 0.55);
  background: transparent;
}

.action-list button.is-danger {
  color: #8c4d3f;
}

.action-list button:last-child {
  border-bottom: 0;
}

.profile-dialog {
  display: grid;
  gap: 12px;
}

.profile-dialog-message {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid rgba(23, 107, 87, 0.12);
  border-radius: 10px;
  color: var(--jade-700);
  background: rgba(239, 248, 244, 0.72);
  font-size: 13px;
  line-height: 1.55;
}

.profile-data-textarea {
  width: 100%;
  min-height: 170px;
  resize: vertical;
  padding: 12px;
  border: 1px solid rgba(23, 107, 87, 0.14);
  border-radius: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  font-family: "Microsoft YaHei", sans-serif;
  font-size: 12px;
  line-height: 1.6;
}

.profile-file-import {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px dashed rgba(23, 107, 87, 0.18);
  border-radius: 12px;
  color: var(--jade-700);
  background: rgba(239, 248, 244, 0.44);
  font-size: 13px;
}

.profile-file-import input {
  max-width: 100%;
  font-size: 12px;
}

.profile-confirm-card h3 {
  margin: 0;
  color: var(--jade-900);
  font-size: 18px;
}

.profile-info-content {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(23, 107, 87, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.58);
}

.profile-info-content p {
  margin: 0;
  color: rgba(34, 54, 48, 0.82);
  font-size: 13px;
  line-height: 1.7;
}

/* BottomNavBar */
.bottom-nav {
  position: absolute;
  z-index: var(--z-nav);
  right: 14px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  left: 14px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  min-height: 70px;
  padding: 9px 12px 10px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 28px rgba(42, 67, 64, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
}

.cast-charge-overlay {
  position: absolute;
  z-index: var(--z-overlay);
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  background: rgba(244, 248, 246, 0.82);
  backdrop-filter: blur(12px);
  --cast-lift-y: 0px;
  --cast-trail-opacity: 0.08;
  --cast-trail-scale: 0.45;
  transition: opacity 0.2s ease-out, visibility 0s linear 0.2s;
}

.cast-charge-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.cast-charge-content {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-rows: auto minmax(260px, 1fr) auto;
  gap: 16px;
  padding: max(74px, calc(env(safe-area-inset-top) + 48px)) 24px calc(112px + env(safe-area-inset-bottom));
  text-align: center;
}

.cast-charge-copy {
  display: grid;
  gap: 8px;
  align-self: start;
}

.cast-charge-copy h2,
.cast-charge-copy p {
  margin: 0;
}

.cast-charge-copy h2 {
  color: var(--jade-900);
  font-size: 26px;
  line-height: 1.35;
}

.cast-charge-copy p {
  color: var(--muted);
  font-size: 15px;
  transition: color 0.16s ease, transform 0.16s ease;
}

.cast-charge-stage {
  position: relative;
  min-height: 260px;
  overflow: hidden;
}

.cast-charge-trail {
  position: absolute;
  bottom: 16px;
  left: 50%;
  display: block;
  width: min(92%, 300px);
  height: 230px;
  overflow: visible;
  opacity: var(--cast-trail-opacity);
  pointer-events: none;
  transform: translateX(-50%) scaleY(var(--cast-trail-scale));
  transform-origin: 50% 100%;
}

.cast-charge-trail path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.cast-flight-base path {
  stroke-width: 1.15;
}

.cast-flight-base .is-side {
  opacity: 0.66;
}

.cast-flight-base .is-center {
  opacity: 0.86;
}

.cast-flight-sheen path {
  stroke: rgba(255, 248, 221, 0.76);
  stroke-width: 0.72;
  stroke-dasharray: 4 34;
  filter: drop-shadow(0 0 3px rgba(196, 168, 105, 0.24));
}

.cast-charge-overlay.is-open .cast-flight-sheen path {
  animation: cast-charge-path-sheen 1.15s linear infinite;
}

.cast-charge-overlay.is-open .cast-flight-sheen path:nth-child(2) {
  animation-delay: -0.38s;
}

.cast-charge-overlay.is-open .cast-flight-sheen path:nth-child(3) {
  animation-delay: -0.76s;
}

.cast-charge-coins {
  position: absolute;
  bottom: 26px;
  left: 50%;
  width: 250px;
  height: 150px;
  transform: translate(-50%, var(--cast-lift-y));
  transition: transform 0.06s linear, filter 0.16s ease;
}

.cast-charge-coin {
  position: absolute;
  bottom: 10px;
  left: 50%;
  display: block;
  width: 92px;
  height: 92px;
  transform-origin: 50% 70%;
}

.cast-charge-coin img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 13px 15px rgba(29, 65, 53, 0.2));
  animation: cast-charge-coin-breathe 1.2s ease-in-out infinite alternate;
}

.cast-charge-coin.coin-1 {
  margin-left: -100px;
  transform: rotate(-8deg) scale(0.92);
}

.cast-charge-coin.coin-1 img {
  animation-delay: -0.25s;
}

.cast-charge-coin.coin-2 {
  bottom: 30px;
  z-index: 2;
  margin-left: -46px;
  transform: scale(1.04);
}

.cast-charge-coin.coin-3 {
  margin-left: 8px;
  transform: rotate(8deg) scale(0.92);
}

.cast-charge-coin.coin-3 img {
  animation-delay: -0.5s;
}

.cast-charge-overlay.is-ready .cast-charge-copy p {
  color: var(--jade-700);
  font-weight: 700;
  transform: translateY(-2px);
}

.cast-charge-overlay.is-ready .cast-charge-coins {
  filter: drop-shadow(0 16px 22px rgba(196, 168, 105, 0.2));
}

.cast-charge-overlay.is-launching .cast-charge-coins {
  animation: cast-charge-launch 0.34s cubic-bezier(0.2, 0.72, 0.18, 1) both;
}

.cast-charge-overlay.is-cancelling .cast-charge-coins {
  transition: transform 0.2s ease-out;
  transform: translate(-50%, 0);
}

.cast-charge-cancel {
  align-self: end;
  color: rgba(82, 103, 96, 0.72);
  font-size: 12px;
}

.nav-action.is-long-pressing .yin-yang-icon {
  transform: scale(0.92);
}

.nav-action.is-long-pressing .cast-nav-charge-ring {
  opacity: 1;
}

.nav-action.is-long-pressing .cast-nav-charge-ring circle {
  animation: cast-nav-hold-progress 380ms linear both;
}

.nav-action.is-demoing .yin-yang-icon {
  animation: cast-nav-demo-press 1.2s ease-out both;
}

.nav-action.is-demoing .cast-nav-demo-coin {
  animation: cast-nav-demo-coin 1.2s ease-out both;
}

.nav-item,
.nav-action {
  display: flex;
  min-width: 0;
  height: 52px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--icon-muted);
  font-size: 12px;
  line-height: 1.2;
}

.nav-icon,
.yin-yang {
  position: relative;
  display: flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

.nav-icon img {
  position: absolute;
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: none;
  transform: none;
}

.nav-state-icon {
  transition: opacity 0.16s ease, filter 0.16s ease;
}

.nav-state-icon.is-outline {
  opacity: 0.86;
}

.nav-state-icon.is-filled {
  opacity: 0;
}

.nav-item.is-active {
  color: var(--icon-active);
  font-weight: 700;
}

.nav-item.is-active .nav-state-icon.is-outline {
  opacity: 0;
}

.nav-item.is-active .nav-state-icon.is-filled {
  opacity: 1;
}

.nav-item {
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.nav-action {
  color: var(--icon-muted);
  font-weight: 400;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.nav-item > *,
.nav-action > * {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.yin-yang {
  width: 30px;
  height: 30px;
  border: 0;
  color: #0f6b55;
  background: transparent;
  box-shadow: none;
}

.cast-nav-charge-ring {
  position: absolute;
  inset: 0;
  display: block;
  width: 30px;
  height: 30px;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transform: rotate(-90deg);
}

.cast-nav-charge-ring circle {
  fill: none;
  stroke: rgba(196, 168, 105, 0.78);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-dasharray: 75.4;
  stroke-dashoffset: 75.4;
}

.cast-nav-demo-coin {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(180, 147, 79, 0.9);
  border-radius: 50%;
  background: rgba(255, 252, 242, 0.94);
  box-shadow: 0 2px 4px rgba(61, 83, 74, 0.14);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 3px) rotate(-8deg) scale(0.78);
}

.cast-nav-demo-coin::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 2px;
  height: 2px;
  border: 1px solid rgba(180, 147, 79, 0.9);
  content: "";
}

.yin-yang-icon {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform 0.16s ease;
}

.yin-yang-icon img {
  position: absolute;
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: none;
  transform: none;
}

.nav-action.is-long-pressing {
  color: var(--icon-active);
  font-weight: 700;
}

.nav-action.is-long-pressing .nav-state-icon.is-outline {
  opacity: 0;
}

.nav-action.is-long-pressing .nav-state-icon.is-filled {
  opacity: 1;
  filter: drop-shadow(0 4px 8px rgba(15, 107, 85, 0.18));
}

@media (max-width: 360px) {
  .cast-charge-content {
    grid-template-rows: auto minmax(220px, 1fr) auto;
    padding-right: 18px;
    padding-left: 18px;
  }

  .cast-charge-copy h2 {
    font-size: 23px;
  }

  .cast-charge-coin {
    width: 84px;
    height: 84px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cast-charge-overlay,
  .cast-charge-coins,
  .cast-charge-coin,
  .cast-flight-sheen path,
  .cast-nav-charge-ring circle,
  .cast-nav-demo-coin,
  .yin-yang-icon,
  .yin-yang-icon img {
    transition: none;
    animation: none;
  }
}

@media (max-width: 390px) {
  .library-group-heading {
    gap: 8px;
  }

  .library-group-heading::before,
  .library-group-heading::after {
    flex: 1 1 18px;
    width: auto;
    min-width: 18px;
    max-width: 50px;
  }

  .library-group-heading strong {
    flex: 0 0 auto;
    font-size: 18px;
    white-space: nowrap;
  }

  .library-compact-grid {
    gap: 8px;
  }

  .library-card {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 6px;
    min-height: 112px;
    padding: 12px 8px;
  }

  .library-compact-symbol {
    width: 56px;
    height: 76px;
    padding: 9px;
  }

  .library-compact-symbol .hexagram-line-view {
    width: 36px;
    gap: 3px;
  }

  .library-title strong {
    font-size: 16px;
    white-space: nowrap;
    word-break: normal;
  }

  .library-title span,
  .library-main p {
    font-size: 11px;
  }

  .library-card .chips span {
    padding: 2px 6px;
    font-size: 9px;
  }

  .bagua-page {
    padding: 0 8px;
  }

  .bagua-basic-card {
    gap: 12px;
    padding: 14px;
  }

  .bagua-quick-jump {
    gap: 8px;
  }

  .bagua-quick-jump > span {
    font-size: 11.5px;
  }

  .bagua-basic-head {
    gap: 10px;
    margin-bottom: 0;
  }

  .bagua-symbol {
    flex-basis: 68px;
    width: 68px;
    height: 78px;
    padding: 12px 10px;
    border-radius: 0;
  }

  .bagua-symbol .trigram-line-view {
    width: 42px;
    gap: 4px;
  }

  .bagua-symbol .trigram-line {
    height: 5px;
  }

  .bagua-basic-head h2 {
    font-size: 27px;
  }

  .bagua-basic-head small {
    font-size: 12px;
    line-height: 1.35;
  }

  .bagua-title-block {
    gap: 5px;
  }

  .bagua-basic-tags {
    margin: 0;
    padding-top: 8px;
  }

  .bagua-basic-meta span,
  .bagua-basic-tags span {
    padding: 0;
    font-size: 11.5px;
  }

  .bagua-title-block .bagua-basic-meta span {
    padding: 0;
    font-size: 11.5px;
  }

  .bagua-qimen-head {
    display: grid;
    justify-content: stretch;
    gap: 2px;
  }

  .bagua-qimen-section {
    padding: 11px;
  }

  .detail-overview-head {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
  }

  .guidance-application-grid {
    grid-template-columns: 1fr;
  }

  .guidance-application-card:nth-child(3) {
    grid-column: auto;
  }

  .overview-figure {
    width: 100%;
    padding: 14px 9px;
  }

  .overview-figure .hexagram-line-view {
    width: 74px;
    gap: 8px;
  }

  .overview-name h2 {
    font-size: 26px;
  }

  .overview-inline-meta,
  .overview-keyword-chips {
    gap: 7px 8px;
  }

  .overview-inline-meta span,
  .overview-keyword-chips span {
    min-height: 26px;
    padding: 4px 10px;
    font-size: 12.5px;
  }

}

@media (max-width: 340px) {
  .library-compact-grid {
    gap: 6px;
  }

  .library-card {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 5px;
    min-height: 106px;
    padding: 10px 7px;
  }

  .library-compact-symbol {
    width: 50px;
    height: 70px;
    padding: 8px;
  }

  .library-compact-symbol .hexagram-line-view {
    width: 34px;
  }

  .library-title strong {
    font-size: 15px;
  }

  .library-title span,
  .library-main p {
    font-size: 10px;
  }

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

  .overview-figure {
    justify-self: center;
    width: 118px;
  }
}

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.72; }
  50% { transform: scale(1.04); opacity: 0.9; }
}

@media (max-width: 420px) {
  .phone-shell {
    padding: 0;
  }

  .app-surface {
    min-height: 100vh;
    border-radius: 0;
  }

  .screen {
    height: calc(100vh - 130px);
    min-height: 0;
    padding: 0 16px calc(104px + env(safe-area-inset-bottom));
  }

  .result-grid {
    grid-template-columns: 1fr 18px 1fr;
  }

  .result-actions,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .line-result {
    grid-template-columns: 42px 54px 1fr;
  }

  .line-result b,
  .line-result em {
    grid-column: 3;
  }

  .moving-line {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(215, 220, 224, 0.55);
    border-right: 0;
  }

  .course-card {
    grid-template-columns: 62px 1fr 28px;
  }

  .learning-main-card {
    grid-template-columns: 66px minmax(0, 1fr) 28px;
    padding: 16px;
  }

  .learning-tools-grid {
    grid-template-columns: 1fr;
  }

  .trigram-disc {
    width: 58px;
    height: 58px;
  }

  .course-glyph {
    width: 58px;
    height: 58px;
  }

  .daily-card {
    padding: 18px 17px 19px;
  }

  .daily-back-layout,
  .daily-summary-layout {
    grid-template-columns: 96px 1fr;
    gap: 15px;
    min-height: 190px;
  }

  .daily-card-back,
  .daily-card-face {
    min-height: 162px;
    border-radius: 16px;
  }

  .daily-card-back span {
    width: 58px;
    height: 58px;
    font-size: 30px;
  }

  .daily-card-symbol {
    width: 62px;
    height: 62px;
    font-size: 36px;
  }

  .daily-card-copy h2 {
    font-size: 24px;
  }

  .daily-card-copy p {
    font-size: 14px;
    line-height: 1.72;
  }

  .daily-card-tags {
    gap: 6px;
  }

  .daily-card-tags span {
    padding: 4px 9px;
    font-size: 12px;
  }

  .daily-back-layout .jade-button {
    min-width: 160px;
    padding: 10px 18px;
    font-size: 15px;
  }

  .daily-modal-overlay {
    padding: 16px;
  }

  .daily-draw-modal:has(.daily-reveal-card) {
    max-height: calc(100vh - 32px);
    gap: 12px;
    padding: 18px 16px 18px;
    border-radius: 26px;
  }

  .daily-draw-modal:has(.daily-reveal-card) .sheet-title h2 {
    font-size: 22px;
  }

  .daily-draw-modal:has(.daily-reveal-card) .sheet-title p {
    font-size: 13px;
    line-height: 1.55;
  }

  .daily-reveal-card {
    width: 100%;
    min-height: 326px;
    gap: 11px;
    padding: 22px 14px 20px;
  }

  .daily-reveal-card h3 {
    font-size: 25px;
  }

  .daily-reveal-card .hex-symbol {
    width: 78px;
    height: 78px;
    font-size: 35px;
  }

  .daily-reveal-card .chips {
    gap: 7px;
  }

  .daily-reveal-card .chips span {
    min-width: 58px;
    padding: 5px 10px;
    font-size: 12px;
  }

  .daily-modal-message {
    margin-top: 0;
    padding-top: 13px;
    font-size: 15px;
    line-height: 1.55;
  }

  .daily-draw-modal:has(.daily-reveal-card) .sheet-actions {
    gap: 9px;
  }

  .daily-draw-modal:has(.daily-reveal-card) .sheet-actions .jade-button,
  .daily-draw-modal:has(.daily-reveal-card) .sheet-actions .outline-button {
    min-height: 40px;
    padding: 8px 10px;
    font-size: 14px;
  }

  .najia-card-head {
    grid-template-columns: 1fr 74px;
    padding: 13px;
  }

  .najia-lines {
    padding: 0 13px 13px;
  }

  .najia-line-row {
    grid-template-columns: 42px 56px minmax(54px, auto) 1fr;
    gap: 6px;
    padding: 8px;
  }

  .najia-yao {
    width: 52px;
  }

  .najia-yao b {
    width: 38px;
  }

  .najia-yao.is-yin b {
    width: 18px;
  }
}

.record-analysis-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.delete-confirm-actions {
  grid-template-columns: 1fr 1fr;
}

/* Reading text hierarchy: body copy stays stronger than meta/helper text. */
.daily-card-copy p,
.course-card p,
.user-card-body p,
.detail-panel p,
.result-detail-section p,
.result-guide li,
.reading-steps-mini,
.study-card-copy p,
.method-memory-list p,
.method-body-text,
.method-case-block p,
.method-example-summary,
.najia-card-summary,
.najia-empty p,
.benyi-section-card p,
.benyi-modern-text p,
.benyi-layer-modern p,
.detail-section p,
.detail-list,
.guidance-block ul,
.guidance-block > p,
.guidance-action-block > p,
.guidance-application-card p,
.record-note,
.review-content p,
.review-summary-item p,
.record-interpretation-summary,
.record-insight-points,
.record-judgement-item p,
.record-najia-mini-card p,
.record-najia-mini-card li,
.record-sixline-reading p,
.overview-direction,
.daily-record-body p,
.profile-info-content p,
.profile-dialog-message {
  color: var(--text-body);
}

.benyi-note-text p,
.benyi-line-note-row p,
.record-najia-mini-card small,
.record-sixline-hint span {
  color: var(--text-body-soft);
}

@media (max-width: 340px) {
  .record-analysis-actions,
  .delete-confirm-actions {
    grid-template-columns: 1fr;
  }
}

/* Multi-screen adaptation v1: layout safeguards only. */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.phone-shell,
.app-surface,
.screen,
.screen > *,
.result-card,
.daily-card,
.save-sheet,
.daily-draw-modal,
.ritual-modal,
.result-sheet,
.result-reveal-sheet,
.classic-epub-viewer,
.classic-epub-document,
.history-tabs,
.chips {
  max-width: 100%;
  min-width: 0;
}

.screen {
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

.screen img,
.classic-epub-document img,
.classic-epub-document table {
  max-width: 100%;
}

.chips,
.history-tabs,
.najia-filters,
.library-filters,
.moving-rule-tabs {
  min-width: 0;
}

.history-tabs {
  max-width: 100%;
  margin-right: -4px;
  margin-left: -4px;
  padding: 0 4px 4px;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.history-tabs button {
  min-height: 40px;
  touch-action: manipulation;
}

.moving-rule-tabs {
  gap: 8px;
}

.moving-rule-tabs button {
  min-height: 40px;
  padding: 8px 12px;
  touch-action: manipulation;
}

.profile-name-edit {
  min-height: 40px;
  padding: 9px 14px;
  touch-action: manipulation;
}

.script-segmented button {
  min-height: 38px;
  padding: 0 12px;
  touch-action: manipulation;
}

.sheet-overlay,
.daily-modal-overlay,
.ritual-overlay {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}

.save-sheet,
.daily-draw-modal,
.ritual-modal,
.result-sheet {
  max-height: calc(100vh - 44px - env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - 44px - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ritual-overlay,
.ritual-modal {
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

.save-sheet,
.daily-draw-modal,
.ritual-modal {
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}

.daily-draw-modal:has(.daily-reveal-card) {
  max-height: calc(100vh - 44px - env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - 44px - env(safe-area-inset-bottom, 0px));
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.sheet-actions {
  padding-bottom: max(2px, env(safe-area-inset-bottom, 0px));
}

.sheet-actions button,
.sheet-actions .jade-button,
.sheet-actions .outline-button {
  min-height: 44px;
  touch-action: manipulation;
}

@media (max-width: 420px) {
  .screen {
    padding-bottom: calc(116px + env(safe-area-inset-bottom, 0px));
  }

  .screen.page-today,
  .screen.page-history {
    padding-bottom: calc(136px + env(safe-area-inset-bottom, 0px));
  }

  .sheet-overlay,
  .daily-modal-overlay,
  .ritual-overlay {
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .history-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-right: -4px;
    margin-left: -4px;
    padding: 0 4px 4px;
  }

  .daily-draw-modal:has(.daily-reveal-card) {
    max-height: calc(100vh - 32px - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 32px - env(safe-area-inset-bottom, 0px));
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-height: 480px) and (orientation: landscape) {
  .phone-shell {
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 0;
  }

  .app-surface {
    min-height: 100vh;
    min-height: 100dvh;
    border-radius: 0;
  }

  .status-bar {
    padding: max(8px, calc(env(safe-area-inset-top, 0px) + 6px)) 20px 4px;
  }

  .screen {
    height: calc(100vh - 92px);
    height: calc(100dvh - 92px);
    min-height: 0;
    padding: 0 16px calc(112px + env(safe-area-inset-bottom, 0px));
  }

  .android-webview .screen {
    height: 100vh;
    height: 100dvh;
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px));
  }

  .screen.page-today,
  .screen.page-history {
    padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px));
  }

  .bottom-nav {
    right: 12px;
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    left: 12px;
    min-height: 60px;
    padding: 6px 10px 7px;
    border-radius: 22px;
  }

  .nav-item,
  .nav-action {
    height: 48px;
    gap: 3px;
    font-size: 11px;
  }

  .nav-icon,
  .yin-yang {
    width: 26px;
    height: 26px;
  }

  .nav-icon img {
    width: 22px;
    height: 22px;
  }

  .yin-yang-icon img {
    width: 22px;
    height: 22px;
  }

  .sheet-overlay,
  .daily-modal-overlay,
  .ritual-overlay {
    align-items: flex-end;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .save-sheet,
  .daily-draw-modal,
  .ritual-modal,
  .result-sheet {
    max-height: calc(100vh - 24px - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 24px - env(safe-area-inset-bottom, 0px));
  }

  .save-sheet,
  .daily-draw-modal,
  .ritual-modal {
    gap: 12px;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .daily-draw-modal:has(.daily-reveal-card) {
    max-height: calc(100vh - 24px - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 24px - env(safe-area-inset-bottom, 0px));
    gap: 10px;
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .daily-reveal-card {
    min-height: 286px;
    padding: 20px 14px 18px;
  }

  .daily-modal-message {
    font-size: 15px;
    line-height: 1.55;
  }

  .result-reveal-sheet {
    max-height: calc(100vh - 24px - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 24px - env(safe-area-inset-bottom, 0px));
  }

  .history-tools {
    gap: 8px;
    margin-bottom: 10px;
  }
}
  .bagua-quick-jump > span {
    display: none;
  }

  .bagua-page {
    padding: 0 6px;
  }

  .bagua-basic-card {
    padding: 12px;
  }

  .bagua-basic-head {
    gap: 8px;
  }

  .bagua-symbol {
    flex-basis: 62px;
    width: 62px;
    height: 72px;
    padding: 11px 9px;
  }

  .bagua-symbol .trigram-line-view {
    width: 38px;
  }

  .bagua-basic-head h2 {
    font-size: 25px;
  }

  .bagua-basic-head small,
  .bagua-basic-meta span,
  .bagua-basic-tags span,
  .bagua-title-block .bagua-basic-meta span {
    font-size: 11px;
  }