:root {
  --bg: #f5f6f3;
  --paper: #fffefd;
  --soft: #f8f8f5;
  --line: #ebe7df;
  --ink: #151b18;
  --muted: #7f8783;
  --muted-2: #a4aaa7;
  --jade: #176f52;
  --jade-deep: #0f6648;
  --jade-soft: #edf7f0;
  --amber: #9b6428;
  --amber-soft: #fff8ed;
  --danger: #d65a52;
  --shadow: 0 18px 50px rgba(31, 37, 34, 0.1);
  --card-shadow: 0 10px 28px rgba(34, 40, 37, 0.045);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%; /* font-unify-20260726-fix21 */
  text-size-adjust: 100%;          /* font-unify-20260726-fix21 */
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif; /* font-unify-20260726-fix21 */
  font-size: 14px;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 4%, rgba(31, 118, 87, 0.09), transparent 30%),
    radial-gradient(circle at 88% 92%, rgba(154, 100, 40, 0.08), transparent 32%),
    var(--bg);
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

.stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 18px;
}

.phone {
  width: min(430px, 100vw);
  height: min(930px, calc(100vh - 24px));
  min-height: 760px;
  border: 1px solid rgba(215, 208, 198, 0.9);
  border-radius: 22px;
  background: var(--paper);
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-rows: 1fr 72px;
  box-shadow: var(--shadow);
  isolation: isolate;
}

.phone.chart-detail-mode {
  grid-template-rows: 1fr;
}

.phone.chart-detail-mode .tabbar {
  display: none;
}

.phone.chart-detail-mode .mine-float-btn {
  display: none;
}

.phone.chart-detail-mode .chart-detail-back {
  display: none;
}

.mine-float-btn {
  position: absolute;
  top: calc(max(env(safe-area-inset-top, 0px), 24px) + 8px);
  left: 10px;
  z-index: 120;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #C9A15C;
  border-radius: 50%;
  background: rgba(20, 38, 31, 0.92);
  color: #F3EAD8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mine-float-btn span {
  font-family: "Noto Serif SC", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif; /* font-unify-20260726-fix21 */
  font-size: 17px;
  line-height: 1;
  font-weight: 600;
  color: #F3EAD8;
}

.mfb-ava {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: url('./assets/avatars/tiangan-v1/256/avatar_tiangan_bing_male_256.jpg') center/cover no-repeat;
}

.mine-float-btn.is-hidden {
  display: none;
}

.screen {
  display: none;
  overflow: auto;
  padding: 16px 20px 18px;
  scrollbar-width: none;
  min-width: 0;
  min-height: 0;
  background: var(--paper);
}

.screen::-webkit-scrollbar,
.chat-log::-webkit-scrollbar,
.reply-row::-webkit-scrollbar,
.fortune-row::-webkit-scrollbar {
  display: none;
}

.screen.active,
.screen.screen-leaving {
  display: block;
  grid-row: 1;
  grid-column: 1;
  width: 100%;
  height: 100%;
  /* 2026-07-20 fix3：进场/离场动画走 transform/opacity，提前声明 will-change 减少首帧合成开销。 */
  will-change: transform, opacity;
}

#screen-chat.active,
#screen-chat.screen-leaving {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  padding: 0;
  overflow: hidden;
}

.chart-detail-screen {
  padding: 0;
  overflow: hidden;
  position: relative;
  background: #f5f6f3;
}

.chart-detail-screen.active,
.chart-detail-screen.screen-leaving {
  display: block;
}

.phone.is-transitioning .screen.active,
.phone.is-transitioning .screen.screen-leaving {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.screen.screen-leaving {
  pointer-events: none;
  z-index: 1;
}

.screen.page-tab-forward-enter,
.screen.page-tab-back-enter,
.screen.page-push-in-enter,
.screen.page-pop-out-enter,
.screen.page-fade-enter {
  z-index: 2;
}

.screen.page-tab-forward-enter {
  animation: appPageInRight 260ms cubic-bezier(0.2, 0.82, 0.18, 1) both;
}

.screen.page-tab-forward-leave {
  animation: appPageOutLeft 230ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.screen.page-tab-back-enter {
  animation: appPageInLeft 260ms cubic-bezier(0.2, 0.82, 0.18, 1) both;
}

.screen.page-tab-back-leave {
  animation: appPageOutRight 230ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.screen.page-push-in-enter {
  animation: appPagePushIn 280ms cubic-bezier(0.18, 0.9, 0.2, 1) both;
  box-shadow: -18px 0 36px rgba(31, 37, 34, 0.08);
}

.screen.page-push-in-leave {
  animation: appPageHoldBack 280ms cubic-bezier(0.18, 0.9, 0.2, 1) both;
}

.screen.page-pop-out-enter {
  animation: appPageReturnIn 260ms cubic-bezier(0.2, 0.82, 0.18, 1) both;
}

.screen.page-pop-out-leave {
  animation: appPagePopOut 260ms cubic-bezier(0.4, 0, 0.2, 1) both;
  z-index: 3;
  box-shadow: -18px 0 36px rgba(31, 37, 34, 0.08);
}

.screen.page-fade-enter {
  animation: appPageFadeIn 200ms ease-out both;
}

.screen.page-fade-leave {
  animation: appPageFadeOut 180ms ease-in both;
}

.chart-detail-screen iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #fffefd;
}

.chart-detail-back {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(217, 225, 218, 0.9);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font-size: 24px;
  font-weight: 620;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(45, 64, 50, 0.08);
  backdrop-filter: blur(10px);
}

.page-top,
.chart-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.page-top.compact {
  align-items: center;
}

.page-top h1,
.chart-page-head h1 {
  margin: 0;
  font-size: 21px;
  line-height: 1.22;
  font-weight: 760;
  letter-spacing: 0;
}

.page-top p,
.chart-page-head p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 12px;
}

.icon-btn,
.text-btn,
.privacy-chip {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  border-radius: 999px;
  min-width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-weight: 750;
  box-shadow: 0 4px 14px rgba(28, 32, 29, 0.035);
}

.text-btn,
.privacy-chip {
  padding: 0 12px;
  color: var(--jade);
  font-size: 13px;
  font-weight: 760;
}

.icon-btn[aria-label*="返回"],
.chat-top > .icon-btn:first-child {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border: 1px solid rgba(217, 225, 218, 0.9);
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font-size: 24px;
  font-weight: 620;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(45, 64, 50, 0.08);
}

.primary {
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #208260, var(--jade-deep));
  color: white;
  min-height: 48px;
  font-weight: 760;
  box-shadow: 0 10px 22px rgba(23, 111, 82, 0.18);
}

.wide {
  width: 100%;
}

.chart-home {
  min-height: 100%;
  display: block;
  padding-bottom: 18px;
}

.chart-home-top {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 34px;
}

.chart-home-top > div {
  display: flex;
  gap: 7px;
}

.home-icon-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 780;
  box-shadow: 0 4px 14px rgba(28, 32, 29, 0.035);
}

.home-teacher-card {
  margin-top: 12px;
  min-height: 142px;
  border: 1px solid rgba(177, 213, 224, 0.75);
  border-radius: 22px;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.96), transparent 38%),
    linear-gradient(135deg, #eef8ff 0%, #f7fbfb 58%, #fff8ef 100%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(91, 135, 146, 0.12);
}

.home-teacher-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42px;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.68), transparent);
  pointer-events: none;
}

.home-teacher-portrait {
  position: absolute;
  left: -17px;
  bottom: -20px;
  width: 138px;
  height: 160px;
  overflow: hidden;
}

.home-teacher-portrait img {
  width: 166px;
  height: auto;
  transform: translate(-4px, -8px);
  display: block;
}

.home-teacher-info {
  position: relative;
  z-index: 1;
  margin-left: 119px;
  min-height: 142px;
  padding: 20px 16px 14px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.home-teacher-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 820;
}

.home-teacher-title span {
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(111, 188, 108, 0.16);
  color: #2c9951;
  font-size: 10px;
  font-weight: 760;
}

.home-teacher-info p {
  margin: 7px 0 0;
  color: #586660;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 650;
}

.home-teacher-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 9px;
}

.home-teacher-actions button:first-child {
  height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 0 18px;
  color: #fff;
  background: linear-gradient(135deg, #ff8d72, #fa654f);
  font-size: 13px;
  font-weight: 820;
  box-shadow: 0 10px 18px rgba(250, 101, 79, 0.2);
}

.home-teacher-actions button:last-child {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #68bd58;
  color: #fff;
  font-size: 15px;
  font-weight: 820;
  box-shadow: 0 8px 16px rgba(104, 189, 88, 0.2);
}

.home-feature-carousel {
  margin-top: 12px;
  min-height: 166px;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(210, 184, 126, 0.6);
  background: #f5f2e8;
  box-shadow: 0 18px 42px rgba(46, 57, 47, 0.16);
}

.feature-track {
  width: 300%;
  height: 166px;
  display: flex;
  animation: featureCarousel 13.5s ease-in-out infinite;
}

.home-feature-carousel:focus-within .feature-track {
  animation-play-state: paused;
}

.feature-slide {
  width: 33.3333%;
  min-width: 0;
  height: 166px;
  padding: 18px 18px 17px;
  position: relative;
  overflow: hidden;
  display: block;
  background-image: url("./assets/scenes/home-banner-premium.png");
  background-repeat: no-repeat;
  background-size: cover;
}

.feature-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 249, 0.93) 0%, rgba(255, 255, 249, 0.76) 48%, rgba(255, 255, 249, 0.2) 72%, rgba(255, 255, 249, 0.03) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(246, 235, 205, 0.22));
}

.feature-slide-trinity {
  background-position: 58% 50%;
}

.feature-slide-trinity::before {
  background:
    linear-gradient(90deg, rgba(255, 255, 249, 0.94) 0%, rgba(255, 255, 249, 0.75) 47%, rgba(255, 255, 249, 0.18) 72%, rgba(255, 255, 249, 0.02) 100%),
    linear-gradient(180deg, rgba(255, 250, 235, 0.18), rgba(230, 244, 236, 0.2));
}

.feature-slide-chat {
  background-position: 70% 50%;
}

.feature-slide-chat::before {
  background:
    linear-gradient(90deg, rgba(248, 255, 252, 0.94) 0%, rgba(248, 255, 252, 0.73) 48%, rgba(248, 255, 252, 0.16) 72%, rgba(248, 255, 252, 0) 100%),
    linear-gradient(180deg, rgba(234, 251, 246, 0.18), rgba(255, 247, 228, 0.18));
}

.feature-slide-card {
  background-position: 82% 50%;
}

.feature-slide-card::before {
  background:
    linear-gradient(90deg, rgba(255, 251, 241, 0.94) 0%, rgba(255, 251, 241, 0.74) 47%, rgba(255, 251, 241, 0.18) 72%, rgba(255, 251, 241, 0.02) 100%),
    linear-gradient(180deg, rgba(255, 244, 220, 0.18), rgba(232, 246, 236, 0.18));
}

.feature-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  max-width: 220px;
}

.feature-copy span {
  display: inline-flex;
  min-height: 21px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(202, 158, 80, 0.38);
  background: rgba(255, 255, 250, 0.78);
  color: #8a5a15;
  font-size: 10.5px;
  font-weight: 820;
  box-shadow: 0 5px 14px rgba(110, 92, 46, 0.08);
  backdrop-filter: blur(8px);
}

.feature-copy h2 {
  margin: 10px 0 0;
  color: #17362c;
  font-size: 21px;
  line-height: 1.12;
  font-weight: 940;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

.feature-copy p {
  margin: 8px 0 0;
  color: #4a5a52;
  font-size: 11px;
  line-height: 1.32;
  font-weight: 650;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62);
}

.feature-copy button {
  margin-top: 12px;
  min-height: 27px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #248764, #116b4d);
  color: #fff;
  padding: 0 13px;
  font-size: 11px;
  font-weight: 850;
  box-shadow: 0 10px 18px rgba(17, 107, 77, 0.22);
}

.trinity-visual {
  position: relative;
  z-index: 1;
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
}

.trinity-visual::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 1px solid rgba(155, 100, 40, 0.22);
  background: rgba(255, 255, 255, 0.38);
  box-shadow: inset 0 0 24px rgba(255, 210, 125, 0.2);
}

.trinity-visual b {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  box-shadow: 0 10px 20px rgba(45, 37, 26, 0.16);
}

.trinity-visual b:nth-child(1) {
  left: 5px;
  top: 12px;
  background: linear-gradient(160deg, #278966, #136c4d);
}

.trinity-visual b:nth-child(2) {
  right: 6px;
  top: 32px;
  background: linear-gradient(160deg, #2c83a8, #1b668b);
}

.trinity-visual b:nth-child(3) {
  left: 32px;
  bottom: 5px;
  background: linear-gradient(160deg, #b2782c, #8e5e22);
}

.feature-teacher {
  position: absolute;
  z-index: 1;
  right: 4px;
  bottom: 0;
  width: auto;
  height: 146px;
  filter: drop-shadow(0 12px 18px rgba(67, 84, 77, 0.12));
}

.feature-card-preview {
  position: relative;
  z-index: 1;
  width: 106px;
  min-height: 100px;
  border: 1px solid rgba(215, 170, 91, 0.48);
  border-radius: 18px;
  padding: 13px 12px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 205, 111, 0.36), transparent 40%),
    rgba(255, 255, 255, 0.74);
  box-shadow: 0 16px 26px rgba(125, 81, 27, 0.14);
}

.feature-card-preview strong,
.feature-card-preview em,
.feature-card-preview small {
  display: block;
}

.feature-card-preview strong {
  color: var(--amber);
  font-size: 22px;
  line-height: 1.08;
  font-weight: 940;
}

.feature-card-preview em {
  margin-top: 8px;
  color: #b77520;
  font-size: 13px;
  font-style: normal;
  font-weight: 880;
}

.feature-card-preview small {
  margin-top: 9px;
  color: #5d685f;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 700;
}

.feature-dots {
  position: absolute;
  left: 16px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  gap: 5px;
}

.feature-dots i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(23, 111, 82, 0.22);
}

.feature-dots i:nth-child(1) {
  animation: featureDotOne 13.5s ease-in-out infinite;
}

.feature-dots i:nth-child(2) {
  animation: featureDotTwo 13.5s ease-in-out infinite;
}

.feature-dots i:nth-child(3) {
  animation: featureDotThree 13.5s ease-in-out infinite;
}

.home-birth-card {
  margin-top: 14px;
  border: 1px solid rgba(23, 111, 82, 0.24);
  border-radius: 20px;
  background:
    radial-gradient(circle at 16% 4%, rgba(237, 247, 240, 0.95), transparent 42%),
    linear-gradient(135deg, #fbfffb, #fffdf8);
  box-shadow: 0 16px 36px rgba(23, 111, 82, 0.11);
  overflow: hidden;
}

.home-birth-head {
  padding: 17px 15px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.home-birth-head div {
  min-width: 0;
}

.home-birth-head strong {
  display: block;
  color: var(--ink);
  font-size: 20px;
  font-weight: 820;
  line-height: 1.25;
}

.home-birth-head span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.home-name-field {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  max-width: 216px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(23, 111, 82, 0.13);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
}

.home-name-field span {
  margin: 0;
  color: rgba(23, 111, 82, 0.78);
  font-size: 12px;
  font-weight: 780;
  line-height: 1;
}

.home-name-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
}

.home-name-field input::placeholder {
  color: var(--muted-2);
}

.home-birth-head button {
  flex: 0 0 auto;
  height: 38px;
  border: 0;
  border-radius: 999px;
  padding: 0 14px;
  background: var(--jade);
  color: #fff;
  font-size: 12px;
  font-weight: 780;
}

.home-birth-form {
  margin: 0 12px;
  border: 1px solid rgba(23, 111, 82, 0.12);
  border-radius: 14px;
  display: grid;
  grid-template-columns: 88px 1fr 74px;
  gap: 0;
  background: rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.home-birth-form label {
  min-height: 46px;
  border-right: 1px solid var(--line);
  display: grid;
  align-content: center;
  padding: 6px 10px;
}

.home-birth-form label:last-child {
  border-right: 0;
}

.home-birth-form span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 680;
  line-height: 1.2;
}

.home-birth-form span em {
  margin-left: 3px;
  color: rgba(23, 111, 82, 0.72);
  font-style: normal;
  font-weight: 760;
}

.home-birth-form input,
.home-birth-form select {
  width: 100%;
  margin-top: 2px;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
}

.gender-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 4px;
}

.gender-toggle button {
  min-height: 25px;
  border: 1px solid rgba(23, 111, 82, 0.18);
  border-radius: 999px;
  background: #fff;
  color: #5f6b65;
  font-size: 12px;
  font-weight: 820;
}

.gender-toggle button.active {
  border-color: var(--jade);
  background: var(--jade);
  color: #fff;
  box-shadow: 0 6px 14px rgba(23, 111, 82, 0.16);
}

.home-birth-form input[readonly] {
  cursor: pointer;
}

.home-birth-actions {
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
  align-items: center;
}

.home-birth-actions button {
  min-height: 42px;
  border: 0;
  border-radius: 14px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 820;
  white-space: nowrap;
}

.home-main-action {
  color: #fff;
  background: linear-gradient(180deg, #208260, var(--jade-deep));
  box-shadow: 0 10px 22px rgba(23, 111, 82, 0.18);
}

.home-sub-action {
  border: 1px solid rgba(23, 111, 82, 0.16) !important;
  color: var(--jade);
  background: rgba(255, 255, 255, 0.82);
}

.qimen-question-screen {
  background: linear-gradient(180deg, #fffefd 0%, #f8fbf7 100%);
}

.qimen-question-top {
  grid-template-columns: 42px 1fr 52px;
}

.qimen-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  width: 100%;
  max-width: 560px;
  margin: 10px auto 0;
  padding: 5px;
  border: 1px solid rgba(23, 111, 82, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 10px 24px rgba(25, 65, 47, 0.06);
}

.qimen-mode-switch button {
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #6a746e;
  font-size: 14px;
  font-weight: 780;
}

.qimen-mode-switch button.active {
  background: linear-gradient(180deg, #208260, var(--jade-deep));
  color: #fff;
  box-shadow: 0 8px 18px rgba(23, 111, 82, 0.18);
}

.text-link-btn {
  border: 0;
  background: transparent;
  color: var(--jade);
  font-size: 13px;
  font-weight: 780;
}

.qimen-question-hero {
  margin-top: 12px;
  padding: 18px;
  border: 1px solid rgba(23, 111, 82, 0.18);
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 205, 119, 0.32), transparent 34%),
    linear-gradient(135deg, #f1fbf5 0%, #fffaf0 100%);
  box-shadow: var(--card-shadow);
}

.qimen-question-hero span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--amber);
  font-size: 12px;
  font-weight: 820;
}

.qimen-question-hero h2 {
  margin: 10px 0 0;
  font-size: 22px;
  line-height: 1.25;
}

.qimen-question-hero p {
  margin: 8px 0 0;
  color: #5d6963;
  font-size: 13px;
  line-height: 1.55;
}

.qimen-question-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: var(--card-shadow);
}

.qimen-question-form label {
  display: grid;
  gap: 7px;
}

.qimen-question-form[data-qimen-mode="life"] .qimen-question-only,
.qimen-question-form[data-qimen-mode="question"] .qimen-life-only {
  display: none !important;
}

.qimen-question-form label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.qimen-question-form textarea,
.qimen-question-form input,
.qimen-question-form select {
  width: 100%;
  border: 1px solid rgba(23, 111, 82, 0.13);
  border-radius: 14px;
  outline: 0;
  background: #fffdf8;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}

.qimen-question-form textarea {
  min-height: 114px;
  resize: none;
  padding: 12px;
  line-height: 1.5;
}

.qimen-question-form input,
.qimen-question-form select {
  height: 44px;
  padding: 0 12px;
}

.qimen-question-form input[data-qimen-question-input] {
  height: 40px;
  border-color: rgba(23, 111, 82, 0.1);
  background: rgba(255, 253, 248, 0.68);
  color: rgba(18, 36, 29, 0.78);
  font-size: 13px;
  font-weight: 500;
}

.qimen-question-form input[data-qimen-question-input]::placeholder {
  color: rgba(84, 96, 90, 0.52);
}

.qimen-question-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(28, 39, 34, 0.55) 50%),
    linear-gradient(135deg, rgba(28, 39, 34, 0.55) 50%, transparent 50%);
  background-position: calc(100% - 17px) 19px, calc(100% - 12px) 19px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.qimen-place-selects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.qimen-life-place-row[hidden] {
  display: none !important;
}

.qimen-form-row {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  border-bottom: 1px solid rgba(23, 111, 82, 0.08);
}

.qimen-form-row > span {
  color: #5c6660;
  font-size: 13px;
  font-weight: 820;
}

.qimen-inline-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.qimen-inline-options button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border: 0;
  background: transparent;
  color: #1f2f29;
  padding: 0 2px;
  font-size: 14px;
  font-weight: 720;
}

.qimen-inline-options button::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid rgba(28, 39, 34, 0.42);
  border-radius: 50%;
  box-sizing: border-box;
  background: transparent;
}

.qimen-inline-options button.active::before {
  border-color: var(--jade);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.3 8.2 6.4 11.3 12.8 4.7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 13px 13px no-repeat,
    var(--jade);
}

.qimen-question-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
}

.qimen-question-actions button {
  min-height: 42px;
  border: 1px solid rgba(23, 111, 82, 0.16);
  border-radius: 14px;
  background: #fff;
  color: var(--jade);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 820;
}

.qimen-question-actions .primary {
  border: 0;
  background: linear-gradient(180deg, #208260, var(--jade-deep));
  color: #fff;
  box-shadow: 0 10px 22px rgba(23, 111, 82, 0.18);
}

.home-section-head {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.home-section-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 820;
}

.home-section-head button {
  border: 0;
  background: transparent;
  color: var(--jade);
  font-size: 12px;
  font-weight: 760;
}

.home-tool-grid {
  margin-top: 9px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.home-tool-grid button {
  min-height: 76px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--paper);
  color: var(--ink);
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 7px;
  box-shadow: var(--card-shadow);
}

.home-tool-grid b {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 850;
  color: var(--jade);
  background: var(--jade-soft);
}

.home-tool-grid button:nth-child(2) b,
.home-tool-grid button:nth-child(5) b {
  color: var(--amber);
  background: var(--amber-soft);
}

.home-tool-grid button:nth-child(3) b,
.home-tool-grid button:nth-child(7) b {
  color: #315f87;
  background: #eef4f8;
}

.home-tool-grid span {
  font-size: 11px;
  line-height: 1.2;
  font-weight: 760;
}

.home-tool-grid button:disabled {
  cursor: default;
  opacity: 0.55;
}

.home-consult-card {
  margin-top: 14px;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(21, 27, 24, 0.94), rgba(28, 79, 61, 0.94)),
    var(--jade);
  color: #fff;
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  box-shadow: 0 14px 30px rgba(23, 111, 82, 0.18);
}

.home-consult-card strong {
  display: block;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 820;
}

.home-consult-card p {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.4;
}

.home-consult-card button {
  height: 36px;
  border: 0;
  border-radius: 999px;
  padding: 0 13px;
  background: #fff;
  color: var(--jade);
  font-size: 12px;
  font-weight: 820;
  white-space: nowrap;
}

.birth-empty {
  min-height: 650px;
  display: grid;
  align-content: center;
  gap: 18px;
  text-align: center;
}

.empty-mark {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin: 0 auto;
  display: grid;
  place-items: center;
  font-size: 34px;
  font-weight: 900;
  color: var(--jade);
  background: radial-gradient(circle at 58% 40%, #ffffff 0 35%, transparent 36%), #edf6f1;
  border: 0;
}

.birth-empty h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 760;
}

.birth-empty p {
  width: min(288px, 100%);
  margin: 0 auto;
  color: var(--muted);
  line-height: 1.6;
  font-size: 13px;
}

.need-list {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  padding: 14px 18px;
  display: grid;
  gap: 10px;
  text-align: left;
  box-shadow: var(--card-shadow);
}

.need-list span::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 9px;
  background: var(--jade);
}

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

.soft-actions button,
.panel-head button,
.dual-actions button:last-child {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--jade);
  font-size: 12px;
  font-weight: 560;
}

.chart-board {
  display: grid;
  gap: 12px;
}

.profile-card,
.panel,
.mine-card,
.vip-card,
.thread,
.small-section {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: var(--card-shadow);
}

.profile-card {
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #f1f8f2, #fffdf8);
}

.profile-card h2 {
  margin: 8px 0 4px;
  font-size: 18px;
  font-weight: 760;
}

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

.profile-card button,
.panel-head button,
.dual-actions button {
  border: 0;
  border-radius: 12px;
  min-height: 34px;
  padding: 0 12px;
  color: white;
  background: var(--jade);
  font-weight: 760;
}

.online-pill {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--jade);
  background: var(--jade-soft);
  font-size: 12px;
  font-weight: 760;
}

.method-tabs,
.segmented,
.depth-tabs,
.level-control {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.method-tabs button,
.segmented button,
.depth-tabs button,
.level-control button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--muted);
  min-height: 36px;
  font-weight: 650;
  font-size: 13px;
}

.method-tabs .active,
.segmented .active,
.depth-tabs .active,
.level-control .active {
  color: white;
  background: var(--jade);
  border-color: var(--jade);
}

.panel {
  padding: 14px;
  display: grid;
  gap: 12px;
}

.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.panel-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 760;
}

.panel-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.bazi-table {
  display: grid;
  grid-template-columns: 44px repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fffefa;
}

.bazi-table > * {
  min-height: 42px;
  border-right: 1px solid rgba(232, 224, 213, 0.85);
  border-bottom: 1px solid rgba(232, 224, 213, 0.85);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 5px 3px;
  line-height: 1.25;
  font-size: 12px;
  font-style: normal;
}

.bazi-table > :nth-child(5n) {
  border-right: 0;
}

.bazi-table > :nth-last-child(-n + 5) {
  border-bottom: 0;
}

.bazi-table b,
.bazi-table span {
  background: #f6f4ef;
  color: var(--muted);
  font-weight: 850;
}

.bazi-table b em {
  display: block;
  font-size: 10px;
  color: var(--muted);
  font-style: normal;
  font-weight: 500;
}

.bazi-table .wood,
.bazi-table .water,
.bazi-table .fire,
.bazi-table .metal,
.bazi-table .earth {
  font-size: 19px;
  font-weight: 760;
}

.wood { color: #109008 !important; }
.water { color: #0048E0 !important; }
.fire { color: #F00808 !important; }
.metal { color: #F8B808 !important; }
.earth { color: #986000 !important; }

.hint-card {
  border-radius: 12px;
  background: var(--jade-soft);
  padding: 10px 12px;
}

.hint-card strong {
  color: var(--jade);
  font-size: 13px;
}

.hint-card p {
  margin: 4px 0 0;
  line-height: 1.45;
  font-size: 13px;
}

.fortune-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 104px;
  gap: 8px;
  overflow-x: auto;
}

.fortune-row article,
.summary-grid div {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fffaf2;
  padding: 10px;
}

.fortune-row .current {
  border-color: rgba(31, 118, 87, 0.25);
  background: var(--jade-soft);
}

.fortune-row span,
.fortune-row em {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.fortune-row strong {
  display: block;
  margin: 5px 0;
  font-size: 20px;
}

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

.summary-grid strong {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.summary-grid span {
  display: block;
  margin-top: 5px;
  line-height: 1.35;
  font-size: 13px;
  font-weight: 750;
}

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

.next-step-card {
  border: 1px solid rgba(23, 111, 82, 0.2);
  border-radius: 16px;
  background: linear-gradient(135deg, #f4fbf5, #fffdf8);
  padding: 14px;
  display: grid;
  gap: 12px;
  box-shadow: var(--card-shadow);
}

.next-step-card strong {
  display: block;
  color: var(--jade);
  font-size: 16px;
  font-weight: 760;
}

.next-step-card p {
  margin: 5px 0 0;
  color: #65716a;
  font-size: 13px;
  line-height: 1.55;
}

.next-step-card button {
  min-height: 42px;
  border: 0;
  border-radius: 14px;
  background: var(--jade);
  color: #fff;
  font-weight: 760;
}

.chat-top {
  min-height: calc(78px + var(--h5-safe-top));
  display: grid;
  grid-template-columns: 34px 1fr auto 34px;
  align-items: center;
  gap: 8px;
  padding: max(9px, var(--h5-safe-top)) 16px 10px;
  background: rgba(255, 254, 253, 0.96);
  border-bottom: 1px solid var(--line);
}

.teacher-title {
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
}

.teacher-title img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: #eef3ee;
}

.teacher-title strong,
.teacher-title em {
  display: block;
}

.teacher-title em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.teacher-hero {
  height: 218px;
  position: relative;
  overflow: hidden;
  transition: height 220ms ease;
  background:
    linear-gradient(180deg, rgba(255, 254, 253, 0) 64%, var(--paper) 100%),
    radial-gradient(circle at 50% 58%, rgba(255, 255, 255, 0.82), transparent 31%),
    linear-gradient(135deg, #f5efe7 0%, #fbf8f1 48%, #eef5ee 100%);
}

.teacher-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 92px;
  background: linear-gradient(180deg, rgba(255, 254, 253, 0), rgba(255, 254, 253, 0.96));
  pointer-events: none;
  z-index: 1;
}

.hero-bg,
.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-bg {
  display: none;
}

.hero-glow {
  width: 210px;
  height: 176px;
  inset: auto auto -70px 50%;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.68), rgba(237, 247, 240, 0.22) 54%, transparent 72%);
}

.teacher-hero img {
  width: 212px;
  height: 270px;
  object-fit: contain;
  position: absolute;
  left: 50%;
  bottom: -46px;
  transform: translateX(-50%);
  filter:
    drop-shadow(0 18px 22px rgba(48, 54, 49, 0.16))
    drop-shadow(0 4px 0 rgba(255, 255, 255, 0.22));
  animation: teacherBreath 5.8s ease-in-out infinite;
  transform-origin: center bottom;
}

.hero-status {
  position: absolute;
  top: 16px;
  left: 18px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.78);
  color: #59635d;
  padding: 0 11px;
  font-size: 12px;
  box-shadow: 0 8px 24px rgba(31, 33, 28, 0.08);
  backdrop-filter: blur(14px);
  z-index: 2;
}

.hero-status span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--jade);
  box-shadow: 0 0 0 5px rgba(23, 111, 82, 0.12);
  animation: onlinePulse 1.8s ease-in-out infinite;
}

.teacher-hero .hero-collapse {
  position: absolute;
  right: 16px;
  bottom: 18px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.78);
  color: var(--jade);
  font-size: 18px;
  font-weight: 760;
  box-shadow: 0 10px 26px rgba(31, 33, 28, 0.11);
  backdrop-filter: blur(16px);
  z-index: 2;
}

.teacher-hero.collapsed {
  height: 40px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 254, 253, 0.96);
}

.teacher-hero.collapsed .hero-glow,
.teacher-hero.collapsed img,
.teacher-hero.collapsed .hero-status {
  opacity: 0;
  pointer-events: none;
}

.teacher-hero.collapsed::after {
  display: none;
}

.teacher-hero.collapsed .hero-collapse {
  top: 3px;
  right: 16px;
  bottom: auto;
  transform: rotate(180deg);
  background: rgba(255, 255, 255, 0.92);
}

.teacher-hero[data-teacher-scene="xuance"] {
  background:
    linear-gradient(180deg, rgba(255, 254, 253, 0) 70%, var(--paper) 100%),
    linear-gradient(135deg, #e9eef0 0%, #f7f7f3 48%, #edf3f4 100%);
}

.teacher-hero[data-teacher-scene="xuance"] .hero-bg {
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.74), transparent 45%, rgba(230, 236, 239, 0.56)),
    radial-gradient(circle at 18% 76%, rgba(64, 105, 122, 0.14), transparent 18%),
    radial-gradient(circle at 82% 30%, rgba(23, 111, 82, 0.1), transparent 20%);
}

.teacher-hero[data-teacher-scene="guanlan"] {
  background:
    linear-gradient(180deg, rgba(255, 254, 253, 0) 70%, var(--paper) 100%),
    linear-gradient(135deg, #f2ede6 0%, #f8f6ef 50%, #eef1e9 100%);
}

.teacher-hero[data-teacher-scene="guanlan"] .hero-bg {
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.72), transparent 44%, rgba(231, 218, 201, 0.46)),
    radial-gradient(circle at 18% 72%, rgba(155, 100, 40, 0.13), transparent 19%),
    radial-gradient(circle at 80% 34%, rgba(44, 58, 50, 0.08), transparent 18%);
}

.teacher-hero[data-teacher-scene="wantang"] {
  background:
    linear-gradient(180deg, rgba(255, 254, 253, 0) 70%, var(--paper) 100%),
    linear-gradient(135deg, #f5eae4 0%, #faf6f0 48%, #eef4ed 100%);
}

.teacher-hero[data-teacher-scene="wantang"] .hero-bg {
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.78), transparent 42%, rgba(246, 225, 214, 0.46)),
    radial-gradient(circle at 18% 74%, rgba(188, 124, 103, 0.14), transparent 18%),
    radial-gradient(circle at 78% 34%, rgba(23, 111, 82, 0.09), transparent 18%);
}

@keyframes teacherBreath {
  0%,
  100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
  50% {
    transform: translateX(-50%) translateY(-5px) scale(1.018);
  }
}

@keyframes onlinePulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.58;
    transform: scale(0.82);
  }
}

.chat-log {
  overflow: auto;
  padding: 10px 16px 92px;
  display: grid;
  gap: 8px;
  background: #fffefd;
  scroll-padding-bottom: 96px;
}

.bubble {
  display: flex;
  gap: 7px;
  align-items: flex-start;
}

.bubble img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}

.bubble div {
  max-width: 284px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  padding: 9px 11px;
  box-shadow: 0 5px 14px rgba(28, 33, 30, 0.03);
}

.bubble p {
  margin: 0;
  line-height: 1.45;
  font-size: 15px;
}

.bubble p + p {
  margin-top: 4px;
}

.bubble.user {
  justify-content: flex-end;
}

.bubble.user div {
  background: #e4eedf;
  border-color: transparent;
}

.typing-bubble div {
  width: 58px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
}

.system-notice {
  justify-self: center;
  max-width: 300px;
  border: 1px solid rgba(176, 130, 83, 0.2);
  border-radius: 999px;
  background: #fff8ed;
  color: #9a6b39;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.typing-dots {
  gap: 5px;
}

.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #9aa49e;
  opacity: 0.38;
  animation: typingDot 1.15s ease-in-out infinite;
}

.typing-dots span:nth-child(2) {
  animation-delay: 0.16s;
}

.typing-dots span:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes typingDot {
  0%,
  80%,
  100% {
    opacity: 0.32;
    transform: translateY(0);
  }
  40% {
    opacity: 0.9;
    transform: translateY(-3px);
  }
}

.result-card-message {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  margin: 13px 0 8px;
}

.result-card-time {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 0 0 7px;
  color: #8f8f8f;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.result-card-avatar {
  width: 34px;
  height: 34px;
  margin-top: 3px;
  border: 1px solid rgba(138, 115, 86, 0.2);
  border-radius: 50%;
  background: #fffaf3;
  object-fit: cover;
  box-shadow: 0 5px 12px rgba(89, 64, 34, 0.09);
}

.result-card-stack {
  min-width: 0;
}

.result-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #e3b563;
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgba(255, 253, 247, 0.97), rgba(255, 250, 241, 0.96)),
    linear-gradient(135deg, #fff8e8 0%, #fffdfa 44%, #fff1cf 100%);
  padding: 20px 10px 9px;
  box-shadow:
    0 13px 28px rgba(150, 105, 45, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
  color: #231f19;
}

.result-card::before {
  content: "";
  position: absolute;
  top: 32px;
  left: -9px;
  width: 16px;
  height: 16px;
  border-left: 1px solid #e3b563;
  border-bottom: 1px solid #e3b563;
  background: #fffaf0;
  transform: rotate(45deg);
}

.result-card-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(128deg, rgba(255, 255, 255, 0.68) 0%, transparent 18%),
    linear-gradient(150deg, transparent 0 55%, rgba(255, 221, 150, 0.23) 58%, transparent 78%);
}

.starter-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fffdf8;
  padding: 14px;
  box-shadow: 0 8px 20px rgba(31, 37, 34, 0.04);
}

.starter-card strong {
  display: block;
  font-size: 15px;
  font-weight: 760;
}

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

.starter-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.starter-card button {
  border: 1px solid rgba(23, 111, 82, 0.18);
  border-radius: 999px;
  background: var(--jade-soft);
  color: var(--jade);
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 650;
}

.result-card-live {
  width: min(316px, 100%);
  overflow: visible;
}

.result-card > *:not(.result-card-shine) {
  position: relative;
  z-index: 1;
}

.result-main {
  display: block;
  min-height: 91px;
}

.result-copy {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.result-stamp {
  width: 22px;
  height: 22px;
  border: 1px solid #e0a745;
  border-radius: 5px;
  display: inline-grid;
  place-items: center;
  background: rgba(255, 248, 231, 0.78);
  color: #a76513;
  font-size: 14px;
  font-weight: 880;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.result-question {
  margin: 0;
  display: grid;
  grid-template-columns: 23px 35px minmax(0, 1fr);
  align-items: center;
  column-gap: 6px;
  padding-right: 64px;
  color: #141414;
  font-size: 12px;
  line-height: 1.25;
  font-weight: 760;
}

.result-question b,
.result-conclusion b {
  color: #16110b;
  font-size: 14px;
  font-weight: 780;
  white-space: nowrap;
}

.result-question span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-conclusion {
  display: grid;
  grid-template-columns: 23px 35px minmax(0, 1fr);
  align-items: start;
  column-gap: 6px;
  padding-right: 66px;
}

.result-conclusion strong {
  grid-column: 3;
  color: #9d5d12;
  font-family: "STKaiti", "KaiTi", "SimSun", "Noto Serif CJK SC", "Source Han Serif SC", serif; /* font-unify-20260726-fix21 */
  font-size: 17px;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: pre-line;
  text-shadow: 0 1px 0 rgba(255, 244, 219, 0.8);
  transform: translateY(-2px);
}

.result-confidence {
  position: absolute;
  top: 48px;
  right: 10px;
  width: 66px;
  min-height: 44px;
  border: 1px solid #f2b84e;
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(255, 255, 252, 0.96), rgba(255, 245, 224, 0.9));
  display: grid;
  grid-template-columns: 18px 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 3px;
  padding: 5px;
  color: #b56b12;
  box-shadow:
    0 0 0 3px rgba(255, 198, 78, 0.1),
    0 7px 15px rgba(219, 150, 33, 0.16);
}

.result-confidence i {
  grid-row: 1 / 3;
  width: 18px;
  height: 22px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #f5ba42, #bc7411);
  color: #fff;
  clip-path: polygon(50% 0, 92% 18%, 82% 78%, 50% 100%, 18% 78%, 8% 18%);
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.result-confidence span {
  font-size: 9px;
  font-weight: 760;
  line-height: 1.05;
}

.result-confidence strong {
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
}

.result-evidence {
  margin-top: 7px;
  border: 1px solid rgba(221, 185, 119, 0.75);
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.7);
  padding: 6px 8px;
}

.result-evidence-row {
  min-height: 34px;
  display: grid;
  grid-template-columns: 24px 43px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  color: #181511;
  font-size: 11px;
  line-height: 1.45;
}

.result-evidence-row + .result-evidence-row {
  border-top: 1px dashed rgba(220, 184, 118, 0.62);
}

.result-evidence-row i {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(107, 151, 83, 0.22);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #f0f8eb, #e7f2e2);
  color: #157844;
  font-style: normal;
}

.result-evidence-row i::before {
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.result-evidence-row i[data-icon="status"]::before {
  content: "●";
}

.result-evidence-row i[data-icon="future"]::before {
  content: "↗";
}

.result-evidence-row i[data-icon="warning"]::before {
  content: "!";
}

.result-evidence-row b {
  color: #352814;
  font-size: 13px;
  font-weight: 850;
  white-space: nowrap;
}

.result-evidence-row span {
  min-width: 0;
  color: #201d18;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  color: #5c3604;
  font-size: 12px;
  font-weight: 820;
}

.tag-row b {
  margin-right: 1px;
  font-size: 13px;
  font-weight: 850;
}

.tag-row span {
  border-radius: 999px;
  border: 1px solid rgba(118, 148, 87, 0.28);
  background: #edf3e5;
  color: #23361c;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 760;
  box-shadow: inset 0 -1px 0 rgba(89, 112, 70, 0.08);
}

.card-actions {
  display: flex;
  gap: 0;
  margin-top: 9px;
  border: 1px solid rgba(224, 168, 72, 0.72);
  border-radius: 12px;
  background: rgba(255, 253, 247, 0.76);
  overflow: hidden;
}

.card-actions button {
  flex: 1;
  min-height: 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #7b530e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  font-size: 13px;
  font-weight: 760;
}

.card-actions button[data-sheet="evidence"] {
  color: #744706;
  background: linear-gradient(180deg, rgba(255, 248, 232, 0.94), rgba(255, 238, 198, 0.74));
  font-weight: 850;
}

.card-actions button + button {
  border-left: 1px solid rgba(225, 177, 91, 0.44);
}

.card-actions i,
.card-actions em {
  position: relative;
  width: 15px;
  height: 15px;
  display: inline-block;
  font-style: normal;
  line-height: 1;
}

.card-actions em {
  width: auto;
  height: auto;
  margin-left: 4px;
  font-size: 18px;
  transform: translateY(-1px);
}

.action-book::before {
  content: "";
  position: absolute;
  inset: 2px 3px 2px 2px;
  border: 1.6px solid #8b620f;
  border-left-width: 2.4px;
  border-radius: 2px 4px 4px 2px;
}

.action-book::after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 8px;
  border-left: 1px solid rgba(139, 98, 15, 0.75);
}

.action-share::before {
  content: "↗";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #8b620f;
  font-size: 15px;
  font-weight: 800;
}

.result-feedback {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.result-feedback button {
  flex: 1;
  min-height: 34px;
  border: 1px solid rgba(210, 199, 184, 0.88);
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.94);
  color: #1f1e1b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(66, 55, 41, 0.045);
}

.result-feedback i {
  color: #0f6a35;
  font-style: normal;
  font-size: 13px;
  line-height: 1;
}

.result-feedback button.selected {
  border-color: rgba(23, 111, 82, 0.34);
  background: rgba(226, 240, 219, 0.9);
  color: var(--jade);
}

.result-card.result-card-premium {
  position: relative;
  justify-self: start;
  width: min(323px, calc(100% - 39px));
  margin: 4px 0 6px 39px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  overflow: visible;
}

.premium-result-image {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  pointer-events: none;
}

.premium-result-copy {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.premium-hotspot {
  position: absolute;
  border: 0;
  background: transparent;
  color: transparent;
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

.premium-hotspot:focus-visible {
  outline: 2px solid rgba(194, 119, 23, 0.58);
  outline-offset: 2px;
  border-radius: 999px;
}

.premium-hotspot-evidence {
  left: 5.3%;
  top: 76%;
  width: 44%;
  height: 9.5%;
}

.premium-hotspot-share {
  left: 53.4%;
  top: 76%;
  width: 42.6%;
  height: 9.5%;
}

.premium-hotspot-good {
  left: 2.2%;
  top: 91.4%;
  width: 28.4%;
  height: 8.6%;
}

.premium-hotspot-mid {
  left: 33.4%;
  top: 91.4%;
  width: 28.6%;
  height: 8.6%;
}

.premium-hotspot-low {
  left: 64.8%;
  top: 91.4%;
  width: 27.7%;
  height: 8.6%;
}

.reply-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 18px 6px;
}

.reply-row[hidden] {
  display: none;
}

.reply-row button {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--jade);
  padding: 8px 12px;
  font-size: 12px;
  white-space: nowrap;
}

.composer {
  min-height: 62px;
  display: grid;
  grid-template-columns: 34px 1fr 52px 34px;
  gap: 7px;
  align-items: center;
  padding: 8px 18px 10px;
  border-top: 1px solid var(--line);
}

.composer input {
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 21px;
  padding: 0 14px;
  outline: none;
  background: white;
}

.composer button {
  height: 36px;
  border: 0;
  border-radius: 18px;
  background: var(--jade);
  color: white;
  font-weight: 760;
}

.composer button:disabled {
  opacity: 0.54;
}

.composer button:first-child,
.composer button:last-child {
  background: transparent;
  color: var(--ink);
  font-size: 20px;
}

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

.role-stack {
  display: grid;
  gap: 12px;
  padding-bottom: 10px;
}

.role-card {
  min-height: 154px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 12px;
  padding: 10px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}

.role-card.featured {
  border-color: rgba(23, 111, 82, 0.34);
  background: linear-gradient(135deg, #fbfffb, #fffefd);
}

.role-card.selected {
  border-color: rgba(23, 111, 82, 0.48);
  box-shadow: 0 12px 28px rgba(23, 111, 82, 0.12);
}

.role-card.selected .role-title strong::after {
  content: "当前";
  display: inline-grid;
  place-items: center;
  height: 18px;
  margin-left: 7px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--jade);
  color: white;
  font-size: 10px;
  font-weight: 650;
  vertical-align: 2px;
}

.role-card img {
  width: 118px;
  height: 134px;
  object-fit: cover;
  object-position: top center;
  border-radius: 12px;
  background: #f1f4f0;
}

.role-card > div {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
}

.role-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.role-title strong {
  font-size: 17px;
  line-height: 1.25;
  font-weight: 760;
}

.role-title em {
  border-radius: 999px;
  background: var(--jade-soft);
  color: var(--jade);
  padding: 3px 8px;
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}

.role-card p {
  margin: 0;
  color: #66706a;
  font-size: 12px;
  line-height: 1.5;
}

.role-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.role-tags span {
  border-radius: 999px;
  background: #f4f5f1;
  color: #6c746f;
  padding: 4px 7px;
  font-size: 11px;
}

.role-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.role-meta span {
  color: var(--muted);
  font-size: 11px;
}

.role-meta button {
  flex: 0 0 auto;
  min-height: 32px;
  border: 1px solid rgba(23, 111, 82, 0.34);
  border-radius: 999px;
  background: #fffefd;
  color: var(--jade);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 760;
}

.thread {
  min-height: 78px;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 12px;
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.thread img,
.mine-profile img,
.teacher-list img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  background: #eef3ee;
}

.thread strong,
.thread em,
.thread p {
  display: block;
  margin: 0;
}

.thread em {
  display: inline;
  color: var(--jade);
  font-size: 11px;
  font-style: normal;
  background: var(--jade-soft);
  padding: 2px 6px;
  border-radius: 999px;
}

.thread p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.thread-empty {
  min-height: 258px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 28px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.82);
  text-align: center;
}

.thread-empty strong {
  font-size: 18px;
}

.thread-empty p {
  max-width: 240px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.thread-empty button {
  min-height: 36px;
  border: 1px solid rgba(23, 111, 82, 0.24);
  border-radius: 999px;
  background: var(--jade);
  color: #fff;
  padding: 0 16px;
  font-weight: 760;
}

.message-search {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin: 10px 0 12px;
}

.message-search input {
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fffdf8;
  padding: 0 12px;
  outline: none;
}

.message-search input:focus {
  border-color: rgba(23, 111, 82, 0.36);
  box-shadow: 0 0 0 3px rgba(23, 111, 82, 0.08);
}

.message-search button {
  border: 1px solid rgba(23, 111, 82, 0.18);
  border-radius: 999px;
  background: var(--jade-soft);
  color: var(--jade);
  padding: 0 12px;
  font-weight: 760;
}

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

.notification-card {
  min-height: 78px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fffdf8;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 12px;
  box-shadow: var(--card-shadow);
}

.notification-card > span {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: var(--jade-soft);
  color: var(--jade);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 850;
}

.notification-card strong {
  display: block;
  font-size: 15px;
  font-weight: 820;
}

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

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

.pinned {
  border-color: #e9cba4;
  background: #fffaf2;
}

.small-section {
  margin-top: 18px;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.small-section[hidden] {
  display: none;
}

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

.small-section button {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--jade);
  min-height: 34px;
  padding: 0 12px;
}

.mine-head {
  align-items: center;
  padding-top: 12px;
  margin-bottom: 14px;
}

.mine-profile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mine-profile img {
  width: 56px;
  height: 56px;
  border: 1px solid rgba(23, 111, 82, 0.12);
}

.mine-profile h1 {
  margin: 0;
  color: #0a261b;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 860;
}

.mine-profile p {
  margin: 5px 0 0;
  color: #738079;
  font-size: 12px;
  line-height: 1.35;
}

.study-member-card {
  position: relative;
  padding: 16px;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  border: 1px solid rgba(23, 111, 82, 0.13);
  border-radius: 18px;
  background:
    radial-gradient(circle at 84% 8%, rgba(197, 151, 76, 0.16), transparent 38%),
    linear-gradient(135deg, rgba(255, 252, 244, 0.96), rgba(231, 246, 232, 0.9));
  box-shadow: var(--card-shadow);
  margin-bottom: 12px;
}

.study-member-card > span {
  flex: 0 0 auto;
  align-self: flex-start;
  border-radius: 999px;
  background: #fff7e6;
  color: #9a6a27;
  border: 1px solid rgba(154, 106, 39, 0.18);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 820;
}

.study-member-card h2,
.study-member-card p,
.mine-card h2 {
  margin: 0;
}

.study-member-card h2 {
  color: #0d2d20;
  font-size: 20px;
  line-height: 1.2;
}

.study-member-card p {
  margin-top: 5px;
  color: #55705f;
  font-size: 13px;
  line-height: 1.35;
}

.study-member-card button {
  flex: 0 0 auto;
  border: 0;
  border-radius: 18px;
  background: var(--jade);
  color: white;
  min-height: 36px;
  padding: 0 14px;
  font-weight: 850;
}

.mine-study-panel {
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 254, 251, 0.94);
  box-shadow: var(--card-shadow);
}

.mine-study-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.mine-study-panel h2 {
  margin: 0;
  color: #0d2d20;
  font-size: 17px;
  font-weight: 850;
}

.mine-study-panel header button {
  border: 0;
  border-radius: 999px;
  background: var(--jade-soft);
  color: var(--jade);
  min-height: 30px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
}

.mine-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #fffdf8;
}

.mine-stat-grid article {
  min-height: 70px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 10px 12px;
  border-right: 1px solid var(--line);
}

.mine-stat-grid article:last-child {
  border-right: 0;
}

.mine-stat-grid strong {
  color: #10261d;
  font-size: 24px;
  line-height: 1;
  font-weight: 860;
}

.mine-stat-grid strong span {
  font-size: 14px;
}

.mine-stat-grid span {
  color: #7c857f;
  font-size: 11px;
}

.mine-progress-line {
  height: 5px;
  margin-top: 12px;
  border-radius: 999px;
  background: rgba(23, 111, 82, 0.12);
  overflow: hidden;
}

.mine-progress-line i {
  display: block;
  width: 57%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0d7d55, #168865);
}

.mine-card {
  padding: 14px;
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 254, 251, 0.94);
  box-shadow: var(--card-shadow);
}

.mine-card h2 {
  font-size: 17px;
  color: #0d2d20;
  font-weight: 850;
}

.mine-card > button {
  min-height: 46px;
  border: 1px solid rgba(23, 111, 82, 0.06);
  border-radius: 12px;
  background: #fffdf8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  text-align: left;
  color: #182820;
  font: inherit;
}

.mine-card > button span {
  font-size: 14px;
  font-weight: 720;
}

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

.mine-detail-screen {
  background: linear-gradient(180deg, #fffefd 0%, #faf8f3 100%);
}

.detail-top {
  min-height: 46px;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  padding-top: var(--h5-safe-top);
  margin-bottom: 12px;
}

.detail-top strong {
  text-align: center;
  font-size: 18px;
  font-weight: 780;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bazi-report-top {
  padding-top: calc(var(--h5-safe-top) + 12px);
}

.mine-detail-content {
  display: grid;
  gap: 12px;
  padding-bottom: 8px;
}

.mine-detail-hero,
.mine-detail-card,
.detail-list {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--card-shadow);
}

.mine-detail-hero {
  padding: 18px;
  background: linear-gradient(135deg, #fff4dc, #e7f6e8);
}

.mine-detail-hero span {
  color: var(--jade);
  font-size: 12px;
  font-weight: 760;
}

.mine-detail-hero h2,
.mine-detail-hero p,
.mine-detail-card h3,
.mine-detail-card p {
  margin: 0;
}

.mine-detail-hero h2 {
  margin-top: 6px;
  font-size: 24px;
}

.mine-detail-hero p,
.mine-detail-card p {
  margin-top: 8px;
  color: #5e6b64;
  line-height: 1.55;
}

.mine-detail-hero button,
.mine-detail-card button,
.detail-record button {
  min-height: 36px;
  margin-top: 12px;
  border: 0;
  border-radius: 999px;
  background: var(--jade);
  color: #fff;
  padding: 0 14px;
  font-weight: 780;
}

.mine-detail-card {
  padding: 14px;
}

.mine-detail-card button + button {
  margin-left: 8px;
  background: #efe6dc;
  color: #7b5a37;
}

.mine-detail-card button:disabled {
  cursor: default;
  opacity: 0.55;
}

.detail-list {
  overflow: hidden;
}

.detail-row,
.detail-setting,
.detail-record {
  min-height: 52px;
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
}

.detail-row:last-child,
.detail-setting:last-child,
.detail-record:last-child {
  border-bottom: 0;
}

.detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.detail-row span {
  font-weight: 720;
}

.detail-row em {
  color: var(--muted);
  font-style: normal;
  text-align: right;
  line-height: 1.35;
}

button.detail-row {
  width: 100%;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.detail-row-link em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.detail-row-link em::after {
  content: "›";
  color: var(--green);
  font-size: 17px;
  line-height: 1;
}

.detail-setting {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
}

.detail-setting b,
.detail-setting small {
  display: block;
}

.detail-setting small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

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

.detail-record h3 {
  margin: 6px 0 4px;
  font-size: 16px;
  line-height: 1.35;
}

.detail-record p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.mine-thread-list {
  margin-top: 0;
}

.mine-empty {
  min-height: 360px;
}

.tabbar {
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(255, 254, 253, 0.98);
}

.tabbar button {
  border: 0;
  background: transparent;
  color: #8d938f;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  font-size: 11px;
  line-height: 1.1;
  font-weight: 520;
}

.tabbar .active {
  color: var(--jade);
  font-weight: 760;
}

.vip-card button:disabled {
  cursor: default;
  opacity: 0.55;
}

.tabbar button span::before {
  content: attr(data-icon);
  width: 22px;
  height: 22px;
  margin: 0 auto 3px;
  border: 1.5px solid currentColor;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 12px;
  line-height: 1;
}

.tabbar button span {
  display: grid;
  place-items: center;
}

.tabbar .center b {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: white;
  background: linear-gradient(180deg, #248764, #116b4d);
  font-size: 24px;
  box-shadow: 0 10px 24px rgba(31, 118, 87, 0.26);
  border: 6px solid #e6f2e8;
}

.sheet {
  width: min(390px, 100%);
  max-height: min(82vh, 740px);
  margin: auto auto 0;
  border: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  background: var(--paper);
  color: var(--ink);
  padding: 10px 18px calc(20px + var(--h5-safe-bottom));
  overflow: auto;
}

.sheet::backdrop {
  background: rgba(25, 28, 26, 0.38);
}

.sheet-handle {
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: #ddd6cc;
  margin: 0 auto 12px;
}

.sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.sheet-head h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 760;
}

.sheet-head button {
  border: 0;
  border-radius: 50%;
  background: var(--soft);
  width: 32px;
  height: 32px;
  font-size: 20px;
}

.chart-library-screen {
  background: linear-gradient(180deg, #fffefd 0%, #f7faf6 100%);
  padding: 0;
}

.chart-library-screen.active,
.chart-library-screen.screen-leaving {
  display: block;
}

.chart-library-top {
  padding: max(12px, var(--h5-safe-top)) 16px 10px;
  border-bottom: 1px solid rgba(218, 211, 199, 0.72);
  background: rgba(255, 254, 252, 0.92);
  backdrop-filter: blur(10px);
}

.chart-library-top span {
  width: 36px;
  height: 36px;
}

.chart-library-page {
  display: grid;
  gap: 12px;
  padding: 14px 16px 20px;
}

.chart-library-hero {
  border: 1px solid rgba(23, 111, 82, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(232, 246, 236, 0.92), rgba(255, 248, 231, 0.88)),
    var(--paper);
  padding: 15px;
  box-shadow: 0 12px 24px rgba(23, 111, 82, 0.07);
}

.chart-library-hero span {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(23, 111, 82, 0.1);
  color: var(--jade);
  font-size: 12px;
  font-weight: 820;
}

.chart-library-hero h2 {
  margin: 8px 0 5px;
  font-size: 20px;
  line-height: 1.25;
}

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

.chart-library-search {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(23, 111, 82, 0.12);
  border-radius: 16px;
  background: rgba(255, 254, 250, 0.92);
  box-shadow: 0 8px 18px rgba(23, 111, 82, 0.06);
}

.chart-library-search span {
  color: var(--jade);
  font-size: 18px;
  line-height: 1;
}

.chart-library-search input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #12261f;
  font-size: 14px;
  font-weight: 560;
}

.chart-library-search input::placeholder {
  color: #8d9992;
  font-weight: 500;
}

.chart-library-search button {
  border: 0;
  background: transparent;
  color: var(--jade);
  font-size: 12px;
  font-weight: 760;
}

/* 盘库分类：自绘下拉点选（页面内展开，不弹系统选择窗）2026-07-10 */
.library-kind {
  position: relative;
  margin: 0 0 2px;
}

.library-kind-btn {
  width: 100%;
  min-height: 40px;
  padding: 0 38px 0 14px;
  border: 1px solid rgba(23, 111, 82, 0.18);
  border-radius: 12px;
  background: #f3f8f4;
  color: var(--jade);
  font-size: 13px;
  font-weight: 760;
  text-align: left;
  cursor: pointer;
}

.library-kind-btn::after {
  content: "";
  position: absolute;
  right: 15px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--jade);
  border-bottom: 2px solid var(--jade);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.18s ease;
  pointer-events: none;
}

.library-kind.open .library-kind-btn::after {
  transform: translateY(-20%) rotate(-135deg);
}

.library-kind-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 30;
  display: grid;
  gap: 2px;
  padding: 6px;
  border: 1px solid rgba(23, 111, 82, 0.16);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(23, 111, 82, 0.14);
}

.library-kind-menu[hidden] {
  display: none;
}

.library-kind-menu button {
  min-height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #4c5a52;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.library-kind-menu button.active {
  background: rgba(23, 111, 82, 0.1);
  color: var(--jade);
}

.chart-library-content {
  min-height: 390px;
}

.bazi-report-screen {
  min-height: 100%;
  background: linear-gradient(180deg, #fffaf1 0%, #fbfaf6 45%, #f6fbf7 100%);
}

.bazi-report-screen.active,
.bazi-report-screen.screen-leaving {
  display: block;
}

.bazi-report-page {
  padding: 14px 18px 24px;
}

.bazi-report-hero {
  border: 1px solid #ead6b5;
  border-radius: 20px;
  padding: 18px;
  background:
    radial-gradient(circle at 90% 20%, rgba(223, 166, 73, 0.22), transparent 34%),
    linear-gradient(135deg, #fff8e8, #ffffff 56%, #f5fbf6);
  box-shadow: 0 18px 42px rgba(94, 66, 30, 0.08);
}

.bazi-report-hero span {
  display: inline-flex;
  border: 1px solid #e5c996;
  color: #9a5a0a;
  background: rgba(255, 250, 239, 0.9);
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 800;
}

.bazi-report-hero h1 {
  margin: 12px 0 8px;
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: 0;
}

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

.bazi-report-source {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.bazi-report-source b,
.bazi-report-source em {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.bazi-report-source b {
  color: #0f7b5f;
  background: #e9f8f1;
  border: 1px solid #ccebdc;
}

.bazi-report-source em {
  color: #9a5a0a;
  background: #fff8e8;
  border: 1px solid #ead6b5;
}

.bazi-report-loading,
.bazi-report-error {
  margin-top: 14px;
  border: 1px solid #eadbc4;
  border-radius: 18px;
  background: rgba(255, 253, 250, 0.94);
  padding: 18px;
  box-shadow: 0 14px 32px rgba(89, 63, 31, 0.07);
}

.bazi-report-loading {
  text-align: center;
}

.bazi-report-loading i {
  display: block;
  width: 34px;
  height: 34px;
  margin: 2px auto 12px;
  border: 3px solid #e8d8bd;
  border-top-color: #0f7b5f;
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
}

.bazi-report-loading strong,
.bazi-report-error strong {
  display: block;
  color: #17362f;
  font-size: 17px;
  line-height: 1.35;
}

.bazi-report-loading p,
.bazi-report-error p {
  margin: 8px 0 0;
  color: #746b5d;
  font-size: 13px;
  line-height: 1.65;
}

.bazi-report-error button {
  margin-top: 14px;
  border: 0;
  border-radius: 999px;
  background: #107b5f;
  color: #fff;
  font-weight: 800;
  padding: 10px 16px;
}

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

.bazi-mini-chart {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 14px 0;
  border: 1px solid #eadbc4;
  border-radius: 16px;
  overflow: hidden;
  background: #fffdfa;
}

.bazi-mini-chart article {
  text-align: center;
  padding: 9px 4px;
  border-right: 1px solid #efe3d2;
}

.bazi-mini-chart article:last-child {
  border-right: 0;
}

.bazi-mini-chart span,
.bazi-mini-chart small {
  display: block;
  color: #887a68;
  font-size: 10px;
}

.bazi-mini-chart strong {
  display: block;
  color: #147553;
  font-size: 28px;
  line-height: 1;
  margin-top: 5px;
}

.bazi-mini-chart em {
  display: block;
  color: #b77315;
  font-size: 22px;
  font-style: normal;
  line-height: 1.1;
}

.bazi-study-progress {
  border: 1px solid #dce6d8;
  border-radius: 18px;
  background:
    radial-gradient(circle at 96% 4%, rgba(23, 99, 71, 0.12), transparent 28%),
    rgba(255, 255, 255, 0.93);
  padding: 14px;
  margin-bottom: 14px;
}

.bazi-study-progress header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.bazi-study-progress header span {
  display: inline-flex;
  border: 1px solid #cfe1cd;
  border-radius: 999px;
  background: #f2f8ee;
  color: #176347;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 850;
}

.bazi-study-progress h2 {
  margin: 8px 0 0;
  color: #1f2c24;
  font-size: 18px;
  line-height: 1.25;
}

.bazi-study-progress header b {
  flex: 0 0 auto;
  border-radius: 999px;
  background: #fff7e7;
  color: #9a5a0a;
  border: 1px solid #ead1ad;
  padding: 7px 10px;
  font-size: 11px;
}

.study-progress-meter {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf0eb;
  margin-bottom: 10px;
}

.study-progress-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #176347, #c58a2c);
}

.study-progress-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.study-progress-tags em {
  border-radius: 999px;
  background: #eef6ea;
  color: #176347;
  border: 1px solid #d9e8d4;
  padding: 4px 8px;
  font-size: 10px;
  font-style: normal;
  font-weight: 750;
}

.bazi-study-progress p {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 9px;
  margin: 0;
  padding: 8px 0;
  border-top: 1px dashed #e2d9c9;
  color: #5b635a;
  font-size: 11px;
  line-height: 1.6;
}

.bazi-study-progress p strong {
  color: #9a5a0a;
  font-size: 11px;
}

.bazi-pillar-readings {
  border: 1px solid #eadac1;
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 0%, rgba(213, 159, 71, 0.16), transparent 30%),
    rgba(255, 255, 255, 0.9);
  padding: 14px;
  margin-bottom: 14px;
}

.bazi-pillar-readings > header {
  margin-bottom: 12px;
}

.bazi-pillar-readings > header span {
  display: inline-flex;
  border: 1px solid #e7c889;
  color: #9a5a0a;
  background: #fff8e8;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 850;
}

.bazi-pillar-readings > header h2 {
  margin: 8px 0 4px;
  color: #251d15;
  font-size: 17px;
}

.bazi-pillar-readings > header p {
  margin: 0;
  color: #766b5e;
  font-size: 11px;
  line-height: 1.55;
}

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

.bazi-pillar-reading-grid article {
  border: 1px solid #eadfce;
  border-radius: 15px;
  background: rgba(255, 253, 248, 0.9);
  padding: 11px;
}

.bazi-pillar-reading-grid h3 {
  margin: 0 0 8px;
  color: #176347;
  font-size: 15px;
}

.bazi-pillar-reading-grid dl {
  margin: 0;
}

.bazi-pillar-reading-grid dt {
  margin-top: 8px;
  color: #9a5a0a;
  font-size: 10px;
  font-weight: 850;
}

.bazi-pillar-reading-grid dt:first-child {
  margin-top: 0;
}

.bazi-pillar-reading-grid dd {
  margin: 3px 0 0;
  color: #5f554b;
  font-size: 11px;
  line-height: 1.55;
}

@media (max-width: 390px) {
  .bazi-pillar-reading-grid {
    grid-template-columns: 1fr;
  }
}

.bazi-ten-god-structure {
  border: 1px solid #d7e3cf;
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(25, 116, 82, 0.12), transparent 28%),
    rgba(255, 255, 255, 0.9);
  padding: 14px;
  margin-bottom: 14px;
}

.bazi-ten-god-structure > header {
  margin-bottom: 10px;
}

.bazi-ten-god-structure > header span {
  display: inline-flex;
  border: 1px solid #cde1d1;
  color: #176347;
  background: #edf7ef;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 850;
}

.bazi-ten-god-structure > header h2 {
  margin: 8px 0 4px;
  color: #1f2c24;
  font-size: 17px;
}

.bazi-ten-god-structure > header p {
  margin: 0;
  color: #697268;
  font-size: 11px;
  line-height: 1.55;
}

.ten-god-repeat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 10px;
}

.ten-god-repeat-row em {
  font-style: normal;
  color: #176347;
  background: #f0f7ec;
  border: 1px solid #d8e7d2;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 800;
}

.ten-god-structure-list {
  display: grid;
  gap: 8px;
}

.ten-god-structure-list article {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 9px;
  border: 1px solid #e0e8d9;
  border-radius: 14px;
  background: rgba(250, 253, 248, 0.92);
  padding: 10px;
}

.ten-god-structure-list b {
  color: #9a5a0a;
  font-size: 11px;
  line-height: 1.45;
}

.ten-god-structure-list p {
  margin: 0;
  color: #535f55;
  font-size: 11px;
  line-height: 1.6;
}

.bazi-element-balance {
  border: 1px solid #dfddcb;
  border-radius: 18px;
  background:
    radial-gradient(circle at 95% 10%, rgba(61, 139, 187, 0.11), transparent 28%),
    rgba(255, 255, 255, 0.92);
  padding: 14px;
  margin-bottom: 14px;
}

.bazi-element-balance > header {
  margin-bottom: 11px;
}

.bazi-element-balance > header span {
  display: inline-flex;
  border: 1px solid #d8e3d6;
  color: #176347;
  background: #f2f7ed;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 850;
}

.bazi-element-balance > header h2 {
  margin: 8px 0 4px;
  color: #1f2c24;
  font-size: 17px;
}

.bazi-element-balance > header p {
  margin: 0;
  color: #697268;
  font-size: 11px;
  line-height: 1.55;
}

.element-balance-bars {
  display: grid;
  gap: 8px;
  margin-bottom: 11px;
}

.element-balance-bars article {
  display: grid;
  grid-template-columns: 24px 1fr 36px;
  align-items: center;
  gap: 8px;
}

.element-balance-bars b {
  color: #25352d;
  font-size: 12px;
}

.element-balance-bars div {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf0eb;
}

.element-balance-bars i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #1a7b59, #c58a2c);
}

.element-balance-bars em {
  color: #6f665b;
  font-style: normal;
  font-size: 11px;
  text-align: right;
}

.element-balance-notes {
  display: grid;
  gap: 8px;
}

.element-balance-notes article {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 9px;
  border: 1px solid #e4e3d7;
  border-radius: 14px;
  background: rgba(253, 252, 247, 0.92);
  padding: 10px;
}

.element-balance-notes b {
  color: #9a5a0a;
  font-size: 11px;
  line-height: 1.45;
}

.element-balance-notes p {
  margin: 0;
  color: #555e55;
  font-size: 11px;
  line-height: 1.6;
}

.bazi-relation-detail {
  border: 1px solid #e4d7bd;
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 6%, rgba(192, 126, 34, 0.1), transparent 28%),
    rgba(255, 255, 255, 0.92);
  padding: 14px;
  margin-bottom: 14px;
}

.bazi-relation-detail > header {
  margin-bottom: 11px;
}

.bazi-relation-detail > header span {
  display: inline-flex;
  border: 1px solid #ead1ad;
  color: #9a5a0a;
  background: #fff7e9;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 850;
}

.bazi-relation-detail > header h2 {
  margin: 8px 0 4px;
  color: #241f18;
  font-size: 17px;
}

.bazi-relation-detail > header p {
  margin: 0;
  color: #74685c;
  font-size: 11px;
  line-height: 1.55;
}

.relation-detail-list {
  display: grid;
  gap: 10px;
}

.relation-detail-list article {
  border: 1px solid #eadfcf;
  border-radius: 16px;
  background: rgba(253, 251, 245, 0.95);
  padding: 12px;
}

.relation-detail-list h3 {
  margin: 0 0 9px;
  color: #176347;
  font-size: 15px;
}

.relation-detail-list p {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 9px;
  margin: 0;
  padding: 8px 0;
  border-top: 1px dashed #e9d7bc;
}

.relation-detail-list p:first-of-type {
  border-top: 0;
}

.relation-detail-list b {
  color: #9a5a0a;
  font-size: 11px;
  line-height: 1.55;
}

.relation-detail-list span {
  color: #55584f;
  font-size: 11px;
  line-height: 1.65;
}

.bazi-timing-trigger {
  border: 1px solid #d9e1d6;
  border-radius: 18px;
  background:
    radial-gradient(circle at 90% 0%, rgba(23, 99, 71, 0.11), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 250, 245, 0.92));
  padding: 14px;
  margin-bottom: 14px;
}

.bazi-timing-trigger > header {
  margin-bottom: 11px;
}

.bazi-timing-trigger > header span {
  display: inline-flex;
  border: 1px solid #cfe1cd;
  color: #176347;
  background: #f2f8ee;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 850;
}

.bazi-timing-trigger > header h2 {
  margin: 8px 0 4px;
  color: #1f2c24;
  font-size: 17px;
}

.bazi-timing-trigger > header p {
  margin: 0;
  color: #687265;
  font-size: 11px;
  line-height: 1.55;
}

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

.timing-trigger-grid article {
  min-width: 0;
  border: 1px solid #dde5d9;
  border-radius: 15px;
  background: rgba(253, 252, 247, 0.94);
  padding: 10px;
}

.timing-trigger-grid b {
  display: inline-flex;
  margin-bottom: 7px;
  color: #9a5a0a;
  font-size: 10px;
  line-height: 1.2;
}

.timing-trigger-grid h3 {
  margin: 0 0 6px;
  color: #20352b;
  font-size: 12px;
  line-height: 1.45;
}

.timing-trigger-grid p {
  margin: 0;
  color: #5f665f;
  font-size: 11px;
  line-height: 1.58;
}

.bazi-topic-qa {
  border: 1px solid #e3d4b8;
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 0%, rgba(197, 138, 44, 0.12), transparent 28%),
    rgba(255, 255, 255, 0.92);
  padding: 14px;
  margin-bottom: 14px;
}

.bazi-topic-qa > header {
  margin-bottom: 11px;
}

.bazi-topic-qa > header span {
  display: inline-flex;
  border: 1px solid #ead1ad;
  color: #9a5a0a;
  background: #fff8ea;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 850;
}

.bazi-topic-qa > header h2 {
  margin: 8px 0 4px;
  color: #211b14;
  font-size: 17px;
}

.bazi-topic-qa > header p {
  margin: 0;
  color: #74695c;
  font-size: 11px;
  line-height: 1.55;
}

.topic-qa-list {
  display: grid;
  gap: 10px;
}

.topic-qa-list article {
  position: relative;
  border: 1px solid #e9dcc8;
  border-radius: 16px;
  background: rgba(253, 251, 246, 0.96);
  padding: 12px;
}

.topic-qa-list em {
  display: inline-flex;
  margin-bottom: 8px;
  border-radius: 999px;
  background: #edf5ea;
  color: #176347;
  padding: 3px 8px;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.topic-qa-list h3 {
  margin: 0 0 9px;
  color: #2d2419;
  font-size: 13px;
  line-height: 1.5;
}

.topic-qa-list p {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 9px;
  margin: 0;
  padding: 8px 0;
  border-top: 1px dashed #ead8be;
}

.topic-qa-list b {
  color: #9a5a0a;
  font-size: 11px;
  line-height: 1.55;
}

.topic-qa-list span {
  color: #55584f;
  font-size: 11px;
  line-height: 1.62;
}

.bazi-core-structures,
.bazi-reasoning-unit {
  border: 1px solid #eadac1;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  padding: 14px;
  margin-bottom: 14px;
}

.bazi-core-structures h2 {
  margin: 0 0 10px;
  font-size: 17px;
}

.bazi-core-structures article {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  align-items: start;
  padding: 8px 0;
  border-top: 1px dashed #eadac1;
}

.bazi-core-structures article:first-of-type {
  border-top: 0;
}

.bazi-core-structures b {
  width: 24px;
  height: 24px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: #edf5ea;
  color: #176347;
}

.bazi-core-structures p {
  margin: 0;
  color: #5f554b;
  line-height: 1.5;
  font-size: 12px;
}

.bazi-learning-path {
  border: 1px solid #d7e6d8;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(246, 251, 246, 0.9));
  padding: 14px;
  margin-bottom: 14px;
}

.bazi-learning-path header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.bazi-learning-path header span {
  flex: 0 0 auto;
  color: #176347;
  background: #eaf6ed;
  border: 1px solid #cfe4d3;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 850;
}

.bazi-learning-path header h2 {
  margin: 0;
  flex: 1;
  color: #1f3429;
  font-size: 16px;
  text-align: right;
}

.bazi-learning-path-list {
  display: grid;
  gap: 8px;
}

.bazi-learning-path article {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e5ebdf;
  border-radius: 14px;
  background: rgba(255, 253, 248, 0.86);
}

.bazi-learning-path article b {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #176347;
  color: #fff;
  font-size: 13px;
}

.bazi-learning-path h3 {
  margin: 0 0 5px;
  color: #1f2c24;
  font-size: 14px;
}

.bazi-learning-path p {
  margin: 4px 0 0;
  color: #635b51;
  font-size: 11px;
  line-height: 1.55;
}

.bazi-learning-path p strong {
  color: #926116;
}

.bazi-learning-path em {
  display: block;
  margin-top: 7px;
  color: #176347;
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
}

.bazi-report-tabs {
  display: flex;
  gap: 8px;
  margin: 14px 0;
  overflow-x: auto;
}

.bazi-report-tabs button {
  border: 1px solid #d8e4d5;
  background: #fff;
  color: #31523f;
  border-radius: 999px;
  padding: 8px 14px;
  white-space: nowrap;
  font-weight: 760;
}

.bazi-report-tabs button.active {
  background: var(--jade);
  border-color: var(--jade);
  color: #fff;
}

.bazi-reasoning-unit header span {
  color: #9a5a0a;
  font-size: 11px;
  font-weight: 820;
}

.bazi-reasoning-unit header h2 {
  margin: 6px 0 12px;
  font-size: 18px;
  line-height: 1.35;
}

.reasoning-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.reasoning-step i {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #f2e1c6;
  color: #9a5a0a;
  font-style: normal;
  font-weight: 900;
}

.reasoning-step strong {
  color: #2b241d;
}

.reasoning-step p {
  margin: 4px 0 0;
  color: #665b50;
  line-height: 1.62;
  font-size: 12px;
}

.reasoning-verdict {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 10px;
  border: 1px solid #dda94f;
  border-radius: 16px;
  padding: 12px;
  background: linear-gradient(135deg, #fff8e8, #ffffff 56%, #f8fbf4);
}

.reasoning-verdict b {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #b56d12;
  color: #fff;
}

.reasoning-verdict strong {
  display: block;
  color: #9b4f08;
  line-height: 1.45;
}

.reasoning-verdict p,
.reasoning-more p,
.reasoning-more li,
.bazi-reasoning-empty p {
  color: #665b50;
  line-height: 1.6;
  font-size: 12px;
}

.reasoning-more {
  margin-top: 10px;
}

.reasoning-more summary {
  cursor: pointer;
  color: var(--jade);
  font-weight: 780;
}

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

/* 排盘记录：左滑 / 长按删除 */
.library-swipe {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}
/* 左滑操作区：置顶 + 删除（20260714，原来只有删除一个按钮） */
.library-swipe .library-actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  z-index: 0;
}
.library-swipe .library-act {
  width: 72px;
  border: 0;
  color: #F6EFE0;
  font-family: "Noto Serif SC", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif; /* font-unify-20260726-fix21 */
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: 2px;
  cursor: pointer;
}
.library-swipe .library-pin { background: #6E7B5B; }          /* 苍青：置顶 */
.library-swipe .library-pin.is-on { background: #8A6E3B; }    /* 已置顶 → 取消置顶（赭） */
.library-swipe .library-del { background: #C2543F; }          /* 绯：删除 */
.library-swipe .library-act-locked {
  width: 72px;
  background: #B8AE9B;
  color: #F6EFE0;
  cursor: default;
}
.library-swipe .library-card {
  position: relative;
  z-index: 1;
  transition: transform .2s ease;
  touch-action: pan-y;
}
/* 两个按钮 = 144px；本命档案只有一个「本人常驻」标 = 72px */
.library-swipe.swiped .library-card { transform: translateX(-144px); }
.library-swipe-locked.swiped .library-card { transform: translateX(-72px); }

/* 乾坤色标：一眼看出男女，不用去读小字 */
.library-card-main .library-gender {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  border-radius: 4px;
  font-family: "Noto Serif SC", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif; /* font-unify-20260726-fix21 */
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: middle;
  color: #F6EFE0;
}
.library-card-main .library-gender.is-qian { background: #3F6E8C; }  /* 乾 · 男 · 苍 */
.library-card-main .library-gender.is-kun  { background: #B4506B; }  /* 坤 · 女 · 绯 */

/* 生辰一行显示，不折行；放不下就省略号 */
.library-card-time .library-card-birth {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 置顶标 */
.library-card-main .library-pin-badge {
  display: inline-block;
  min-height: 0;
  margin-left: 6px;
  padding: 0 5px;
  border: 1px solid #6E7B5B;
  border-radius: 3px;
  color: #6E7B5B;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  vertical-align: middle;
}
.birth-library-card.is-pinned { border-left: 3px solid #6E7B5B; }

.library-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, #fffefd 0%, #fbfaf6 100%);
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  box-shadow: var(--card-shadow);
}

.library-card-main {
  min-width: 0;
}

.birth-library-card {
  cursor: pointer;
}

/* [XP] 已做AI深度解析的八字：名字后跟一个小的红色「解」字带框，点开看已存结论 */
.library-card-main .library-xiangpi {
  display: inline-block;
  min-height: 0;
  margin-left: 6px;
  padding: 0 4px;
  border: 1px solid #c0392b;
  border-radius: 3px;
  color: #c0392b;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  vertical-align: middle;
  cursor: pointer;
}

/* ===== 本命档案：置顶那条 =====
 * 20260714。以前本命档案和别人的盘长得一模一样、混在一起，只能靠名字认，
 * 而名字默认就是「我的本命档案」—— 于是满屏都是它。现在给它一个明确的身份。 */
.library-card-main .library-self-badge {
  display: inline-block;
  min-height: 0;
  margin-left: 6px;
  padding: 0 5px;
  border: 1px solid var(--brand-red, #9b2c2c);
  border-radius: 3px;
  background: var(--brand-red, #9b2c2c);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  vertical-align: middle;
}

.birth-library-card-self {
  border-left: 3px solid var(--brand-red, #9b2c2c);
}

/* 本命档案不给删：左滑不露出删除按钮 */
.library-swipe-locked {
  touch-action: pan-y;
}

/* 时辰不详的时柱：压暗 + 不用衬线数字体，让它一眼看出来「这不是一个真的干支」 */
.library-pillars b.pillar-unknown {
  color: var(--ink-40, #9a9a9a);
  font-weight: 400;
  letter-spacing: 0;
}

.library-card-main span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--jade-soft);
  color: var(--jade);
  font-size: 12px;
  font-weight: 820;
  margin-bottom: 7px;
}

.question-library-card .library-card-main span {
  background: #eef5ff;
  color: #28709b;
}

.library-card-main span.library-tag-qimen-life {
  background: #f2ecff;
  color: #7652b8;
}

.library-card-main .library-card-time {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.library-card-main .library-card-time > span:first-child {
  display: inline;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  margin-bottom: 0;
}

.library-card-main .library-card-time .library-tag-chart-kind {
  min-height: 20px;
  margin-bottom: 0;
  padding: 0 7px;
  font-size: 11px;
  white-space: nowrap;
}

.library-card-main strong {
  display: block;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-card-main p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.library-pillars {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.library-pillars b {
  min-width: 38px;
  min-height: 28px;
  padding: 5px 7px;
  border-radius: 9px;
  background: #fff8ed;
  color: var(--amber);
  font-size: 13px;
  text-align: center;
}

.birth-library-card .library-pillars {
  justify-self: end;
  display: grid;
  grid-template-columns: repeat(4, 27px);
  gap: 5px;
  margin-top: 0;
  flex-wrap: nowrap;
}

.birth-library-card .library-pillars b {
  width: 27px;
  min-width: 27px;
  min-height: 48px;
  padding: 6px 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 1.22;
  letter-spacing: 1px;
}

.library-card-side {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.library-card-side em {
  color: var(--muted-2);
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

.library-card-side button,
.library-empty button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: var(--jade);
  color: #fff;
  padding: 0 14px;
  font-weight: 820;
  box-shadow: 0 8px 18px rgba(23, 111, 82, 0.16);
}

.library-empty {
  min-height: 248px;
  border: 1px dashed rgba(23, 111, 82, 0.22);
  border-radius: 18px;
  background: linear-gradient(180deg, #fbfffc 0%, #fffefd 100%);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 28px 22px;
  text-align: center;
}

.library-empty strong {
  font-size: 17px;
  font-weight: 850;
}

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

.birth-picker-sheet {
  width: min(430px, 100%);
  max-height: none;
  margin: auto auto 0;
  border: 0;
  border-radius: 22px 22px 0 0;
  padding: 0;
  background: transparent;
  color: #101312;
  overflow: visible;
}

.birth-picker-sheet::backdrop {
  background: rgba(21, 27, 24, 0.46);
  backdrop-filter: blur(1px);
}

.birth-picker-panel {
  border-radius: 22px 22px 0 0;
  background:
    radial-gradient(circle at 18% 0, rgba(237, 247, 240, 0.92), transparent 42%),
    linear-gradient(180deg, #fffefd 0%, #fbfaf5 100%);
  overflow: hidden;
  box-shadow: 0 -18px 42px rgba(17, 18, 18, 0.18);
}

.birth-picker-top {
  min-height: 82px;
  padding: 20px 20px 10px;
  display: grid;
  grid-template-columns: 64px 1fr 48px;
  gap: 12px;
  align-items: center;
}

.birth-picker-plain,
.birth-picker-today,
.birth-picker-tabs button,
.birth-picker-fields input,
.birth-picker-options button {
  font-family: inherit;
}

.birth-picker-sheet button:focus-visible {
  outline: 2px solid rgba(23, 111, 82, 0.24);
  outline-offset: 2px;
}

.birth-picker-plain {
  border: 0;
  background: transparent;
  color: #171918;
  font-size: 20px;
  text-align: left;
}

.birth-picker-tabs {
  height: 50px;
  border: 1px solid rgba(155, 100, 40, 0.34);
  border-radius: 999px;
  padding: 3px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}

.birth-picker-tabs button {
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #9a9f9a;
  font-size: 18px;
  font-weight: 780;
}

.birth-picker-tabs button.active {
  background: linear-gradient(180deg, #208260, var(--jade-deep));
  color: #fff9df;
  box-shadow: 0 8px 18px rgba(23, 111, 82, 0.2);
}

.birth-picker-today {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--jade);
  background: #fff;
  color: var(--jade);
  font-size: 19px;
  font-weight: 840;
}

.birth-picker-fields {
  padding: 8px 28px 18px;
  display: grid;
  gap: 10px;
}

.birth-picker-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.birth-picker-row.two {
  grid-template-columns: repeat(2, 1fr);
}

.birth-picker-fields label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--muted);
}

.birth-picker-fields input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  box-sizing: border-box;
}

.birth-picker-fields input:disabled {
  opacity: .5;
  background: var(--soft);
}

.birth-picker-fields input.invalid {
  border-color: #d9534f;
}

.birth-picker-sheet[data-mode="pillar"] .birth-picker-fields,
.birth-picker-sheet[data-mode="pillar"] .birth-picker-options,
.birth-picker-sheet[data-mode="pillar"] .birth-picker-options .birth-leap-toggle,
.birth-picker-sheet[data-mode="solar"] .birth-leap-toggle {
  display: none;
}

.birth-picker-sheet[data-mode="lunar"] .birth-leap-toggle {
  display: inline-flex;
}

.birth-pillar-fields {
  padding: 8px 28px 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.birth-pillar-fields[hidden],
.birth-pillar-chooser[hidden],
.birth-picker-candidates[hidden] {
  display: none;
}

.birth-pillar-fields button {
  min-width: 0;
  border: 0;
  background: transparent;
  display: grid;
  justify-items: center;
  gap: 12px;
  color: var(--ink);
}

.birth-pillar-fields span {
  font-size: 16px;
  font-weight: 780;
}

.birth-pillar-fields strong {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #edf7f0;
  color: var(--jade);
  font-size: 26px;
  font-weight: 860;
  box-shadow: inset 0 0 0 1px rgba(23, 111, 82, 0.08);
  position: relative;
}

.birth-pillar-fields strong i {
  display: block;
  font-style: normal;
  line-height: 0.92;
}

.birth-pillar-fields button.active strong {
  background: #fff4e3;
  color: var(--amber);
  box-shadow: 0 8px 20px rgba(155, 100, 40, 0.14);
}

.birth-pillar-fields button.active strong::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid #fff4e3;
}

.birth-pillar-chooser {
  margin: 0 22px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 24px rgba(31, 37, 34, 0.08);
  padding: 10px;
}

.pillar-part-tabs {
  width: fit-content;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: var(--soft);
  padding: 3px;
  display: grid;
  grid-template-columns: repeat(2, 64px);
}

.pillar-part-tabs button {
  border: 0;
  border-radius: 999px;
  min-height: 30px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 780;
}

.pillar-part-tabs button.active {
  background: var(--jade);
  color: #fff;
}

.pillar-key-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.birth-pillar-chooser[data-pillar-part-mode="zhi"] .pillar-key-grid {
  grid-template-columns: repeat(3, 1fr);
}

.pillar-key-grid button {
  min-height: 50px;
  border: 1px solid rgba(235, 231, 223, 0.9);
  border-radius: 10px;
  background: #fff;
  color: var(--jade);
  font-size: 28px;
  font-weight: 820;
  box-shadow: 0 5px 14px rgba(31, 37, 34, 0.06);
}

.pillar-key-grid button.selected {
  background: linear-gradient(180deg, #208260, var(--jade-deep));
  color: #fff;
}

.pillar-key-grid button.element-fire { color: #F00808; }
.pillar-key-grid button.element-earth { color: #986000; }
.pillar-key-grid button.element-metal { color: #F8B808; }
.pillar-key-grid button.element-water { color: #0048E0; }
.pillar-key-grid button.element-wood { color: #109008; }
.pillar-key-grid button.selected { color: #fff; }

.birth-picker-options {
  min-height: 56px;
  padding: 0 16px 18px 22px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #59625d;
  font-size: 13px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.birth-picker-option-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.birth-picker-gear {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--jade);
  font-size: 21px;
  flex: 0 0 auto;
}

.birth-picker-options button {
  margin-left: 0;
  min-width: 0;
  min-height: 30px;
  border: 0;
  border-radius: 999px;
  background: #cfd7d2;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px 3px 3px;
  font-size: 12px;
  font-weight: 780;
}

.birth-picker-options button i {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  display: block;
}

.birth-picker-options button[aria-pressed="true"] {
  background: var(--jade);
}

.birth-picker-options .birth-leap-toggle {
  margin-left: 0;
}

.birth-picker-sheet[data-mode="lunar"] .birth-picker-options [data-birth-time-unknown] {
  margin-left: 0;
}

.birth-picker-candidates {
  margin: -4px 22px 14px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.birth-picker-candidates p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
}

.birth-picker-candidates button {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  color: var(--ink);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  text-align: left;
  padding: 8px 0;
}

.birth-picker-candidates button strong {
  color: var(--jade-deep);
  font-size: 16px;
}

.birth-picker-candidates button span {
  color: var(--muted);
  font-size: 13px;
}

.birth-picker-candidates button.selected strong {
  color: var(--amber);
}

.birth-pillar-confirm {
  width: calc(100% - 44px);
  min-height: 58px;
  margin: 0 22px 20px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #208260, var(--jade-deep));
  color: #fff8df;
  font-size: 22px;
  font-weight: 860;
  box-shadow: 0 12px 28px rgba(23, 111, 82, 0.24);
}

.birth-pillar-confirm:disabled {
  opacity: 0.72;
}

@media (max-width: 390px) {
  .birth-picker-top {
    grid-template-columns: 52px 1fr 42px;
    gap: 8px;
    padding-inline: 14px;
  }

  .birth-picker-tabs button,
  .birth-picker-plain {
    font-size: 17px;
  }

  .birth-picker-fields {
    padding-inline: 20px;
    gap: 8px;
  }

  .birth-picker-options {
    padding-inline: 14px;
    font-size: 12px;
  }
}

.reasoning-sheet {
  width: min(378px, calc(100% - 24px));
  max-height: min(78vh, 674px);
  margin: auto auto 12px;
  padding: 0;
  border: 1px solid #dcbf91;
  border-radius: 22px;
  background: linear-gradient(180deg, #fffdf8, #fff8ee);
  color: #211812;
  box-shadow: 0 22px 58px rgba(40, 31, 22, 0.28);
  overflow: hidden;
}

.reasoning-sheet::backdrop {
  background: rgba(40, 31, 22, 0.28);
  backdrop-filter: blur(2px);
}

.reasoning-sheet-head {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 0;
}

.reasoning-close {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #e1ccb0;
  border-radius: 50%;
  background: #fff;
  color: #7a6757;
  font-size: 18px;
  line-height: 1;
}

.reasoning-content {
  max-height: min(78vh, 674px);
  overflow-y: auto;
  padding: 17px 17px 20px;
  scrollbar-width: thin;
}

.reasoning-content::-webkit-scrollbar {
  width: 4px;
}

.reasoning-content::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #d1b386;
}

.reasoning-premium {
  width: fit-content;
  height: 27px;
  display: inline-flex;
  align-items: center;
  margin-bottom: 9px;
  padding: 0 10px;
  border: 1px solid #d7ad6f;
  border-radius: 999px;
  background: #fff0d5;
  color: #7f430d;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.reasoning-title {
  margin: 0 42px 14px 0;
  color: #221812;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 820;
}

.reasoning-chart {
  margin-bottom: 14px;
  border: 1px solid #e4c79a;
  border-radius: 14px;
  background: #fffdf9;
  overflow: hidden;
}

.reasoning-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #efe0c8;
  background: #fff9ee;
  color: #7f430d;
  font-size: 13px;
  font-weight: 820;
}

.reasoning-chart-head em {
  font-style: normal;
  color: #13765a;
}

.reasoning-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.reasoning-pillar {
  min-height: 180px;
  border-right: 1px solid #eee2d2;
  text-align: center;
}

.reasoning-pillar:last-child {
  border-right: 0;
}

.reasoning-pillar b {
  display: block;
  padding: 8px 0;
  border-bottom: 1px solid #f0e4d5;
  background: #fffdf9;
  color: #76685d;
  font-size: 12px;
  font-weight: 760;
}

.reasoning-pillar strong {
  display: block;
  padding-top: 12px;
  color: #138049;
  font-size: 27px;
  line-height: 1.05;
  font-weight: 760;
}

.reasoning-pillar strong:nth-of-type(2) {
  padding-top: 11px;
  color: #a56623;
}

.reasoning-pillar small {
  display: inline-block;
  margin-left: 4px;
  color: #9b938a;
  font-size: 10.5px;
  vertical-align: middle;
  font-weight: 500;
}

.reasoning-pillar p {
  min-height: 60px;
  margin: 14px 0 0;
  padding: 9px 2px 10px;
  border-top: 1px solid #f0e4d5;
  color: #38312b;
  font-size: 12px;
  line-height: 1.55;
}

.reasoning-summary {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 11px;
  align-items: start;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid #e5c494;
  border-radius: 14px;
  background: #fff9ed;
}

.reasoning-seal {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid #c9954d;
  border-radius: 50%;
  background: #fff0d6;
  color: #7f430d;
  font-size: 12px;
  font-weight: 840;
  line-height: 1.25;
  text-align: center;
}

.reasoning-summary p,
.reasoning-section p {
  margin: 0;
  color: #4e4237;
  font-size: 13px;
  line-height: 1.72;
}

.reasoning-section {
  padding: 14px 0;
  border-top: 1px solid #ead8bd;
}

.reasoning-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 9px;
  color: #211812;
  font-size: 16px;
  line-height: 1.35;
}

.reasoning-section h4 span {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  background: #e8f4ee;
  color: #13765a;
  font-size: 12px;
  font-weight: 840;
  flex: 0 0 auto;
}

.reasoning-section p + p {
  margin-top: 9px;
}

.birth-form {
  display: grid;
  gap: 0;
  border-radius: 14px;
}

.birth-form label {
  min-height: 56px;
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 14px;
  border-bottom: 1px solid var(--line);
}

.birth-form input,
.birth-form select {
  height: 42px;
  border: 0;
  border-radius: 12px;
  padding: 0 12px;
  background: #f8f8f5;
  color: var(--ink);
  text-align: right;
}

.check-list {
  margin: 14px 0 12px;
  border-radius: 14px;
  background: #fff8ed;
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.check-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  min-height: auto;
  border: 0;
  font-size: 13px;
}

.birth-form p {
  margin: 0;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
}

.mini-chart,
.evidence-block,
.saved-card,
.privacy-hero {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  padding: 14px;
}

.mini-chart {
  display: grid;
  gap: 12px;
}

.mini-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.mini-pillars span {
  border-radius: 12px;
  background: var(--jade-soft);
  color: var(--jade);
  min-height: 52px;
  display: grid;
  place-items: center;
  font-weight: 900;
}

.evidence-block {
  margin-top: 12px;
}

.evidence-block h3,
.saved-card h3 {
  margin: 0 0 8px;
}

.evidence-block h4 {
  margin: 12px 0 6px;
  font-size: 13px;
  color: var(--ink);
}

.evidence-block p,
.evidence-block li,
.saved-card p,
.privacy-hero p {
  color: var(--muted);
  line-height: 1.55;
}

.evidence-meta {
  font-size: 12px;
  color: var(--muted);
}

.candidate-evidence {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 12px;
}

.candidate-evidence strong {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.candidate-evidence em {
  font-style: normal;
  color: var(--jade);
}

.saved-card span {
  color: var(--jade);
  font-weight: 850;
}

.saved-card button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--jade);
  font-weight: 850;
}

.privacy-hero {
  text-align: center;
  background: linear-gradient(135deg, #f8fff9, #fffdf8);
}

.setting-list {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.setting-list label {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
}

.setting-list label:last-child {
  border-bottom: 0;
}

.setting-list em {
  color: var(--muted);
  font-style: normal;
}

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

.teacher-list article {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 10px;
  align-items: center;
}

.teacher-list p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.35;
  font-size: 12px;
}

.teacher-list button {
  border: 1px solid rgba(31, 118, 87, 0.24);
  border-radius: 999px;
  background: var(--jade-soft);
  color: var(--jade);
  min-height: 32px;
  padding: 0 10px;
  font-weight: 850;
}

.quick-action-list {
  display: grid;
  gap: 10px;
}

.quick-action-list button {
  width: 100%;
  min-height: 68px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fffdf8;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  text-align: left;
}

.quick-action-list button > span {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: var(--jade-soft);
  color: var(--jade);
  display: grid;
  place-items: center;
  font-weight: 900;
}

.quick-action-list strong,
.quick-action-list p {
  margin: 0;
}

.quick-action-list strong {
  font-size: 15px;
  font-weight: 820;
}

.quick-action-list p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.app-toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 80;
  width: min(320px, calc(100vw - 48px));
  transform: translateX(-50%);
  border: 1px solid rgba(23, 111, 82, 0.16);
  border-radius: 999px;
  background: rgba(23, 111, 82, 0.94);
  color: #fff;
  padding: 11px 16px;
  box-shadow: 0 14px 34px rgba(15, 56, 42, 0.22);
  text-align: center;
  font-size: 13px;
  line-height: 1.4;
}

@keyframes appPageInRight {
  from {
    opacity: 0.72;
    transform: translate3d(34px, 0, 0) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes appPageOutLeft {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0.5;
    transform: translate3d(-22px, 0, 0) scale(0.992);
  }
}

@keyframes appPageInLeft {
  from {
    opacity: 0.72;
    transform: translate3d(-30px, 0, 0) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes appPageOutRight {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0.5;
    transform: translate3d(22px, 0, 0) scale(0.992);
  }
}

@keyframes appPagePushIn {
  from {
    opacity: 0.96;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes appPageHoldBack {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    opacity: 0.72;
    transform: translate3d(-18px, 0, 0) scale(0.982);
  }
}

@keyframes appPageReturnIn {
  from {
    opacity: 0.72;
    transform: translate3d(-18px, 0, 0) scale(0.982);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes appPagePopOut {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0.96;
    transform: translate3d(100%, 0, 0);
  }
}

@keyframes appPageFadeIn {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes appPageFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes featureCarousel {
  0%,
  27% {
    transform: translate3d(0, 0, 0);
  }
  33%,
  60% {
    transform: translate3d(-33.3333%, 0, 0);
  }
  66%,
  93% {
    transform: translate3d(-66.6666%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes featureDotOne {
  0%,
  27%,
  100% {
    width: 18px;
    background: var(--jade);
  }
  33%,
  93% {
    width: 6px;
    background: rgba(23, 111, 82, 0.22);
  }
}

@keyframes featureDotTwo {
  0%,
  27%,
  66%,
  100% {
    width: 6px;
    background: rgba(23, 111, 82, 0.22);
  }
  33%,
  60% {
    width: 18px;
    background: var(--jade);
  }
}

@keyframes featureDotThree {
  0%,
  60%,
  100% {
    width: 6px;
    background: rgba(23, 111, 82, 0.22);
  }
  66%,
  93% {
    width: 18px;
    background: var(--jade);
  }
}

@media (prefers-reduced-motion: reduce) {
  .screen[class*="page-"] {
    animation: none !important;
  }

  .feature-track,
  .feature-dots i {
    animation: none !important;
  }

  .phone.is-transitioning .screen.screen-leaving {
    display: none;
  }
}

/* Professional learning workbench home */
#screen-chart.active,
#screen-chart.screen-leaving {
  padding: 0;
  background:
    radial-gradient(circle at 14% 1%, rgba(23, 111, 82, 0.05), transparent 32%),
    radial-gradient(circle at 92% 92%, rgba(176, 134, 74, 0.05), transparent 34%),
    #fbfdfb;
}

.workbench-home {
  min-height: 100%;
  padding: 0 24px 98px;
  color: #071d14;
  background:
    radial-gradient(circle at 18% 6%, rgba(30, 127, 88, 0.06), transparent 30%),
    linear-gradient(180deg, #fcfefd 0%, #f9fbf9 100%);
  position: relative;
  overflow: hidden;
}

.workbench-home::before {
  content: "";
  position: absolute;
  top: 64px;
  right: -30px;
  width: 182px;
  height: 170px;
  opacity: 0.12;
  pointer-events: none;
  background:
    linear-gradient(38deg, transparent 0 36%, rgba(56, 104, 77, 0.8) 36% 38%, transparent 38% 100%),
    radial-gradient(ellipse at 34% 40%, rgba(56, 104, 77, 0.82) 0 20%, transparent 21%),
    radial-gradient(ellipse at 55% 24%, rgba(56, 104, 77, 0.72) 0 18%, transparent 19%),
    radial-gradient(ellipse at 67% 50%, rgba(56, 104, 77, 0.66) 0 16%, transparent 17%),
    radial-gradient(ellipse at 44% 66%, rgba(56, 104, 77, 0.58) 0 14%, transparent 15%);
  transform: rotate(-12deg);
  filter: blur(0.2px);
}

.workbench-status {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
  font-size: 19px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
  color: #030b07;
  position: relative;
  z-index: 1;
}

.status-icons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status-icons i {
  display: block;
}

.status-icons i:nth-child(1) {
  width: 24px;
  height: 16px;
  background:
    linear-gradient(to top, #030b07 0 6px, transparent 6px),
    linear-gradient(to top, transparent 0 2px, #030b07 2px 9px, transparent 9px),
    linear-gradient(to top, transparent 0 5px, #030b07 5px 13px, transparent 13px);
  background-size: 5px 100%, 5px 100%, 5px 100%;
  background-position: 0 0, 8px 0, 16px 0;
  background-repeat: no-repeat;
}

.status-icons i:nth-child(2) {
  width: 21px;
  height: 15px;
  border: 3px solid #030b07;
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 0 0 14px 0;
  transform: rotate(225deg);
}

.status-icons i:nth-child(3) {
  width: 27px;
  height: 15px;
  border: 3px solid #030b07;
  border-radius: 4px;
  position: relative;
}

.status-icons i:nth-child(3)::before {
  content: "";
  position: absolute;
  inset: 2px 5px 2px 2px;
  border-radius: 2px;
  background: #030b07;
}

.status-icons i:nth-child(3)::after {
  content: "";
  position: absolute;
  top: 3px;
  right: -6px;
  width: 3px;
  height: 7px;
  border-radius: 0 2px 2px 0;
  background: #030b07;
}

.workbench-hero {
  min-height: 92px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding-top: 16px;
  position: relative;
  z-index: 1;
}

.workbench-hero h1 {
  margin: 0;
  font-size: 32px;
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: 0;
  color: #071d14;
}

.workbench-hero p {
  margin: 11px 0 0;
  font-size: 15px;
  line-height: 1.4;
  color: #7a827f;
  letter-spacing: 0;
}

.workbench-hero em {
  display: block;
  width: 35px;
  height: 4px;
  margin-top: 10px;
  border-radius: 999px;
  background: #0d7752;
  font-style: normal;
  box-shadow: 0 2px 4px rgba(23, 111, 82, 0.16);
}

.workbench-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 18px;
}

.workbench-actions button {
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #050b08;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    0 16px 32px rgba(31, 37, 34, 0.08),
    inset 0 0 0 1px rgba(227, 231, 226, 0.75);
}

.workbench-actions svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bamboo-watermark {
  position: absolute;
  top: 10px;
  right: -22px;
  width: 160px;
  height: 142px;
  opacity: 0.12;
  pointer-events: none;
  background:
    linear-gradient(35deg, transparent 0 46%, #6a8e76 46% 48%, transparent 48% 100%),
    linear-gradient(50deg, transparent 0 58%, #6a8e76 58% 60%, transparent 60% 100%),
    radial-gradient(ellipse at 24% 52%, #6a8e76 0 13%, transparent 14%),
    radial-gradient(ellipse at 42% 36%, #6a8e76 0 14%, transparent 15%),
    radial-gradient(ellipse at 62% 22%, #6a8e76 0 13%, transparent 14%),
    radial-gradient(ellipse at 66% 58%, #6a8e76 0 14%, transparent 15%);
  transform: rotate(-9deg);
}

.study-overview-card,
.quick-chart-panel,
.today-practice-card {
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(218, 224, 216, 0.92);
  box-shadow:
    0 14px 34px rgba(22, 52, 39, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.study-overview-card {
  min-height: 154px;
  border-radius: 18px;
  padding: 15px 18px 12px;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.study-ring {
  width: 90px;
  height: 90px;
  position: relative;
  display: grid;
  place-items: center;
}

.study-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-83deg);
}

.study-ring circle {
  fill: none;
  stroke-linecap: round;
  stroke-width: 8.8;
}

.ring-track {
  stroke: rgba(17, 105, 75, 0.11);
}

.ring-progress {
  stroke: url("#unused");
  stroke: #0d7652;
  stroke-dasharray: 238.76;
  stroke-dashoffset: 52.5;
  filter: drop-shadow(0 5px 7px rgba(23, 111, 82, 0.15));
}

.study-ring strong {
  margin-top: 2px;
  color: #071d14;
  font-size: 23px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  position: relative;
  z-index: 1;
}

.study-ring strong span {
  margin-left: 1px;
  font-size: 14px;
  font-weight: 850;
}

.study-ring small {
  margin-top: 30px;
  color: #7f8985;
  font-size: 11px;
  line-height: 1;
  position: absolute;
  z-index: 1;
}

.study-overview-main {
  min-width: 0;
  padding-top: 3px;
}

.study-overview-main h2 {
  margin: 0 0 16px;
  color: #111916;
  font-size: 17px;
  line-height: 1.2;
  font-weight: 650;
  letter-spacing: 0;
  text-align: center;
}

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

.study-metrics article {
  min-width: 0;
  padding: 0 12px;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-left: 1px solid rgba(224, 228, 221, 0.86);
}

.study-metrics article:first-child {
  border-left: 0;
  padding-left: 0;
}

.study-metrics strong {
  color: #111916;
  font-size: 24px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0;
}

.study-metrics strong span {
  font-size: 15px;
  font-weight: 760;
}

.study-metrics span {
  margin-top: 9px;
  color: #8a918e;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.study-metrics i {
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
  margin-left: 5px;
  margin-top: -17px;
  justify-self: start;
  border: 1px solid rgba(155, 164, 159, 0.48);
  border-radius: 50%;
  color: #a5ada9;
  font-size: 9px;
  font-style: normal;
  line-height: 1;
}

.study-overview-card footer {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding-top: 13px;
  border-top: 1px solid rgba(224, 228, 221, 0.86);
}

.study-overview-card footer p {
  margin: 0;
  font-size: 14px;
  color: #111916;
  white-space: nowrap;
}

.study-overview-card footer strong {
  font-weight: 520;
}

.goal-progress,
.practice-progress {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(13, 82, 58, 0.11);
}

.goal-progress i,
.practice-progress i {
  display: block;
  height: 100%;
  width: 64%;
  border-radius: inherit;
  background: linear-gradient(90deg, #14805a, #096d4a);
  box-shadow: 0 4px 10px rgba(23, 111, 82, 0.16);
}

.study-overview-card footer > span {
  color: #303a35;
  font-size: 12px;
  white-space: nowrap;
}

.quick-chart-panel {
  margin-top: 10px;
  border-radius: 18px;
  padding: 9px 14px 9px;
}

.quick-chart-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.quick-chart-panel h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #111916;
  font-size: 19px;
  line-height: 1.16;
  font-weight: 900;
  letter-spacing: 0;
}

.quick-chart-panel header button,
.today-practice-card header button {
  border: 0;
  background: transparent;
  color: #777f7b;
  font-size: 14px;
  line-height: 1;
  padding: 8px 0;
}

.mini-compass,
.button-compass,
.practice-icon,
.workbench-entry-grid .entry-card > span {
  display: inline-grid;
  place-items: center;
  position: relative;
}

.mini-compass {
  width: 20px;
  height: 20px;
  color: #0d7652;
}

.mini-compass::before,
.button-compass::before,
.practice-icon::before {
  content: "";
  width: 100%;
  height: 100%;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.mini-compass::after,
.button-compass::after,
.practice-icon::after {
  content: "";
  position: absolute;
  width: 46%;
  height: 46%;
  border: 1.7px solid currentColor;
  border-radius: 50%;
  box-shadow:
    0 -9px 0 -7px currentColor,
    0 9px 0 -7px currentColor,
    9px 0 0 -7px currentColor,
    -9px 0 0 -7px currentColor;
}

.quick-chart-form.home-birth-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 154px;
  gap: 6px;
  margin: 0;
}

.quick-chart-form.home-birth-form label {
  min-height: 34px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(226, 225, 220, 0.95);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  padding: 0 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.quick-chart-form.home-birth-form span {
  min-width: 34px;
  margin: 0 9px 0 0;
  color: #101814;
  font-size: 13px;
  font-weight: 520;
  line-height: 1;
}

.quick-chart-form.home-birth-form input {
  width: 100%;
  min-width: 0;
  height: auto;
  border: 0;
  padding: 0;
  background: transparent;
  color: #111916;
  font-size: 13px;
  font-weight: 420;
  line-height: 1.2;
  outline: 0;
}

.quick-chart-form.home-birth-form input::placeholder {
  color: #a2a9a6;
}

.quick-chart-form.home-birth-form input.is-invalid,
.quick-chart-form.home-birth-form input[aria-invalid="true"] {
  color: #d65a52;
}

.quick-chart-form.home-birth-form input.is-invalid::placeholder,
.quick-chart-form.home-birth-form input[aria-invalid="true"]::placeholder {
  color: #d65a52;
}

.quick-name-field {
  grid-column: span 1;
}

.quick-gender-field {
  grid-column: span 1;
}

.quick-gender-field .gender-toggle {
  display: flex;
  gap: 7px;
  margin-left: auto;
}

.quick-gender-field .gender-toggle button {
  min-width: 39px;
  height: 28px;
  border: 0;
  border-radius: 999px;
  background: #f5f4f1;
  color: #111916;
  font-size: 15px;
  font-weight: 820;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.quick-gender-field .gender-toggle button.active {
  background: linear-gradient(180deg, #16835c, #0d714f);
  color: #fff;
  box-shadow: 0 8px 16px rgba(23, 111, 82, 0.18);
}

.quick-birth-field {
  grid-column: 1 / -1;
  position: relative;
}

.quick-birth-field b {
  margin-left: auto;
  color: #9a9f9c;
  font-size: 24px;
  line-height: 1;
  font-weight: 300;
}

.quick-birth-field svg {
  width: 21px;
  height: 21px;
  margin-left: 12px;
  color: #686e6b;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.home-main-action.workbench-primary {
  width: 100%;
  min-height: 43px;
  margin: 10px 0 7px;
  border: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at 42% 48%, rgba(255, 232, 151, 0.18), transparent 10%),
    linear-gradient(90deg, #0b7b53, #087146);
  color: #fff;
  font-size: 17px;
  font-weight: 850;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  box-shadow: 0 16px 30px rgba(14, 115, 76, 0.24);
}

.button-compass {
  width: 23px;
  height: 23px;
  color: #dcc570;
}

.quick-chart-panel > p {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #818985;
  font-size: 10px;
  line-height: 1.3;
}

.quick-chart-panel > p i {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #2f8c67;
  position: relative;
}

.quick-chart-panel > p i::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 5px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.workbench-entry-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px 12px;
}

.entry-card {
  grid-column: span 2;
  min-height: 78px;
  border: 1px solid rgba(223, 226, 220, 0.96);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 26px rgba(31, 37, 34, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 8px 10px;
  color: #111916;
}

.entry-card.entry-review,
.entry-card.entry-library {
  grid-column: span 3;
  min-height: 56px;
  flex-direction: row;
  justify-content: flex-start;
  padding: 12px 18px;
  gap: 14px;
}

.workbench-entry-grid .entry-card > span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #0d7652;
  background: rgba(23, 111, 82, 0.1);
}

.entry-practice > span {
  color: #af7a31 !important;
  background: rgba(176, 122, 49, 0.12) !important;
}

.entry-library > span {
  border-radius: 13px !important;
  color: #2d805d !important;
  background: linear-gradient(160deg, rgba(23, 111, 82, 0.18), rgba(23, 111, 82, 0.08)) !important;
}

.entry-card > span::before,
.entry-card > span::after {
  content: "";
  position: absolute;
  display: block;
}

.entry-chart > span::before {
  width: 28px;
  height: 28px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.entry-chart > span::after {
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-shadow:
    0 -16px 0 -7px currentColor,
    0 16px 0 -7px currentColor,
    16px 0 0 -7px currentColor,
    -16px 0 0 -7px currentColor;
}

.entry-practice > span::before {
  width: 23px;
  height: 29px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.entry-practice > span::after {
  width: 8px;
  height: 8px;
  right: 12px;
  bottom: 12px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
}

.entry-course > span::before {
  top: 16px;
  width: 34px;
  height: 22px;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 32%, 50% 64%, 0 32%);
}

.entry-course > span::after {
  bottom: 11px;
  width: 23px;
  height: 12px;
  border-radius: 0 0 12px 12px;
  background: currentColor;
}

.entry-review > span::before {
  width: 27px;
  height: 20px;
  border-radius: 14px;
  background: currentColor;
}

.entry-review > span::after {
  left: 12px;
  bottom: 9px;
  width: 9px;
  height: 9px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  box-shadow:
    8px -8px 0 -5px #fff,
    15px -8px 0 -5px #fff,
    22px -8px 0 -5px #fff;
}

.entry-library > span::before {
  width: 28px;
  height: 22px;
  border-radius: 4px;
  background: currentColor;
}

.entry-library > span::after {
  top: 14px;
  left: 12px;
  width: 16px;
  height: 6px;
  border-radius: 4px 4px 0 0;
  background: currentColor;
}

.entry-card strong {
  margin: 2px 0 0;
  font-size: 15px;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: 0;
}

.entry-card small {
  margin: 0;
  color: #8a918e;
  font-size: 10px;
  line-height: 1.2;
}

.entry-review div,
.entry-library div {
  display: flex;
  flex-direction: column;
}

.today-practice-card {
  margin-top: 10px;
  border-radius: 18px;
  padding: 13px 14px 12px;
}

.today-practice-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.today-practice-card h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
}

.today-practice-card article {
  min-height: 82px;
  border: 1px solid rgba(231, 229, 222, 0.96);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.9);
  padding: 14px 16px 12px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 64px;
  gap: 12px;
  align-items: center;
}

.practice-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #0d7652;
  background: rgba(23, 111, 82, 0.1);
}

.today-practice-card h3 {
  margin: 0;
  color: #111916;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 900;
}

.today-practice-card h3 em {
  display: inline-block;
  margin-left: 4px;
  padding: 3px 6px;
  border-radius: 7px;
  background: #fff4df;
  color: #a66a25;
  font-size: 11px;
  line-height: 1;
  font-style: normal;
  font-weight: 700;
  vertical-align: 2px;
}

.today-practice-card p {
  margin: 5px 0 0;
  color: #838b87;
  font-size: 12px;
  line-height: 1.2;
}

.today-practice-card p b {
  color: #af7a31;
  font-weight: 900;
  letter-spacing: 1px;
}

.today-practice-card p i {
  color: #b8bdb9;
  font-style: normal;
}

.today-practice-card small {
  display: block;
  margin-top: 9px;
  color: #737c78;
  font-size: 12px;
}

.practice-progress {
  margin-top: 8px;
}

.practice-progress i {
  width: 83%;
}

.today-practice-card article > button {
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #16835c, #0d714f);
  color: #fff;
  font-size: 14px;
  font-weight: 850;
  box-shadow: 0 10px 18px rgba(23, 111, 82, 0.2);
}

.workbench-home + * {
  position: relative;
}

.tabbar {
  height: 72px;
  padding: 8px 18px 8px;
  border-top: 1px solid rgba(226, 225, 220, 0.95);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
}

.tabbar button {
  font-size: 12px;
  color: #909692;
}

.tabbar .active {
  color: #0d7652;
}

@media (max-width: 430px) {
  .workbench-home {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 390px) {
  .workbench-home {
    padding-left: 18px;
    padding-right: 18px;
  }

  .workbench-hero {
    min-height: 154px;
  }

  .workbench-hero h1 {
    font-size: 29px;
  }

  .workbench-actions button {
    width: 46px;
    height: 46px;
  }

  .study-overview-card {
    grid-template-columns: 96px 1fr;
    gap: 12px;
    padding: 18px 14px 14px;
  }

  .study-ring {
    width: 92px;
    height: 92px;
  }

  .study-metrics article {
    padding: 0 8px;
  }

  .study-metrics strong {
    font-size: 22px;
  }

  .quick-chart-form.home-birth-form {
    grid-template-columns: 1fr;
  }

  .today-practice-card article {
    grid-template-columns: 44px 1fr;
  }

  .today-practice-card article > button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 430px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .stage {
    padding: 0;
  }

  .phone {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    border: 0;
  }
}

/* Pixel-fidelity rebuild for the professional workbench reference image.
   Source image is 852x1844; this block maps it to a 426x922 CSS canvas. */
.phone {
  width: min(426px, 100vw);
  height: min(922px, 100vh);
  height: min(922px, 100dvh);
  border-radius: 22px;
  grid-template-rows: 1fr 72px;
}

#screen-chart.active,
#screen-chart.screen-leaving {
  background: #fbfdfb;
}

#screen-chart .workbench-home {
  min-height: 850px;
  height: 850px;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 6%, rgba(13, 118, 82, 0.055), transparent 33%),
    linear-gradient(180deg, #fcfefd 0%, #f9fbf9 100%);
}

#screen-chart .workbench-home::before {
  display: none;
}

#screen-chart .workbench-status {
  position: absolute;
  top: 0;
  left: 36px;
  right: 24px;
  height: 54px;
  padding: 0;
  font-size: 19px;
  font-weight: 900;
  color: #050b08;
}

#screen-chart .workbench-hero {
  position: absolute;
  top: 54px;
  left: 24px;
  right: 24px;
  min-height: 83px;
  height: 83px;
  padding: 7px 0 0;
}

#screen-chart .workbench-hero h1 {
  font-size: 28px;
  line-height: 1.06;
  font-weight: 880;
  color: #071d14;
}

#screen-chart .workbench-hero p {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.25;
  color: #727d78;
}

#screen-chart .workbench-hero em {
  width: 38px;
  height: 4px;
  margin-top: 12px;
  background: #0b7854;
}

#screen-chart .workbench-actions {
  gap: 15px;
  padding-top: 5px;
}

#screen-chart .workbench-actions button {
  width: 47px;
  height: 47px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px rgba(27, 38, 33, 0.09);
}

#screen-chart .bamboo-watermark {
  display: block;
  top: -4px;
  right: -46px;
  width: 190px;
  height: 154px;
  opacity: 0.105;
}

#screen-chart .study-overview-card {
  position: absolute;
  top: 137px;
  left: 24px;
  right: 24px;
  height: 163px;
  min-height: 0;
  border-radius: 18px;
  padding: 15px 24px 14px;
  grid-template-columns: 92px 1fr;
  gap: 24px;
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(219, 226, 218, 0.94);
  box-shadow: 0 12px 28px rgba(23, 42, 35, 0.055);
}

#screen-chart .study-ring {
  width: 82px;
  height: 82px;
  align-self: start;
  margin-top: 2px;
}

#screen-chart .study-ring circle {
  stroke-width: 7.5;
}

#screen-chart .study-ring strong {
  font-size: 26px;
}

#screen-chart .study-ring strong span {
  font-size: 14px;
}

#screen-chart .study-ring small {
  margin-top: 36px;
  font-size: 11px;
}

#screen-chart .study-overview-main {
  padding-top: 0;
}

#screen-chart .study-overview-main h2 {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 650;
  text-align: center;
}

#screen-chart .study-metrics article {
  min-height: 50px;
  padding: 0 15px;
}

#screen-chart .study-metrics strong {
  font-size: 22px;
}

#screen-chart .study-metrics span {
  margin-top: 10px;
  font-size: 11px;
}

#screen-chart .study-overview-card footer {
  position: absolute;
  left: 30px;
  right: 24px;
  bottom: 14px;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 8px 14px;
  padding-top: 9px;
}

#screen-chart .study-overview-card footer p {
  grid-column: 1 / -1;
  font-size: 14px;
}

#screen-chart .goal-progress {
  grid-column: 1;
  height: 8px;
}

#screen-chart .study-overview-card footer > span {
  grid-column: 2;
}

#screen-chart .quick-chart-panel {
  position: absolute;
  top: 312px;
  left: 24px;
  right: 24px;
  height: 211px;
  margin: 0;
  border-radius: 18px;
  padding: 8px 14px 13px;
  background: rgba(255, 255, 255, 0.86);
  border-color: rgba(219, 226, 218, 0.94);
  box-shadow: 0 13px 30px rgba(23, 42, 35, 0.06);
}

#screen-chart .quick-chart-panel header {
  margin-bottom: 3px;
}

#screen-chart .quick-chart-panel h2 {
  gap: 9px;
  font-size: 16px;
  font-weight: 860;
}

#screen-chart .quick-chart-panel header button {
  font-size: 14px;
  color: #6f7874;
}

#screen-chart .quick-chart-form.home-birth-form {
  grid-template-columns: minmax(0, 1fr) 140px;
  gap: 8px;
}

#screen-chart .quick-chart-form.home-birth-form label {
  min-height: 42px;
  border-radius: 8px;
  padding: 0 14px;
}

#screen-chart .quick-chart-form.home-birth-form span {
  min-width: 44px;
  margin-right: 9px;
  font-size: 14px;
}

#screen-chart .quick-gender-field span {
  min-width: 30px;
  margin-right: 6px;
}

#screen-chart .quick-chart-form.home-birth-form input {
  font-size: 14px;
}

#screen-chart .quick-gender-field .gender-toggle {
  gap: 6px;
}

#screen-chart .quick-gender-field .gender-toggle button {
  min-width: 36px;
  height: 32px;
  font-size: 15px;
}

#screen-chart .quick-birth-field svg {
  width: 22px;
  height: 22px;
  margin-left: 16px;
}

#screen-chart .home-main-action.workbench-primary {
  min-height: 40px;
  margin: 8px 0 8px;
  font-size: 16px;
  border-radius: 999px;
  box-shadow: 0 15px 28px rgba(14, 115, 76, 0.23);
}

#screen-chart .button-compass {
  width: 22px;
  height: 22px;
}

#screen-chart .quick-chart-panel > p {
  font-size: 12px;
}

#screen-chart .quick-chart-panel > p i {
  width: 15px;
  height: 15px;
}

#screen-chart .workbench-entry-grid {
  position: absolute;
  top: 535px;
  left: 24px;
  right: 24px;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px 9px;
}

#screen-chart .entry-card {
  height: 97px;
  min-height: 0;
  border-radius: 14px;
  padding: 12px 8px 10px;
  gap: 8px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 13px 26px rgba(31, 37, 34, 0.06);
}

#screen-chart .entry-card.entry-review,
#screen-chart .entry-card.entry-library {
  height: 65px;
  min-height: 0;
  padding: 10px 17px;
  gap: 15px;
}

#screen-chart .workbench-entry-grid .entry-card > span {
  width: 45px;
  height: 45px;
  border-radius: 0;
  background-color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}

#screen-chart .entry-card.entry-review > span,
#screen-chart .entry-card.entry-library > span {
  width: 42px;
  height: 42px;
}

#screen-chart .entry-card > span::before,
#screen-chart .entry-card > span::after,
#screen-chart .practice-icon::before,
#screen-chart .practice-icon::after {
  display: none !important;
}

#screen-chart .entry-chart > span {
  background-image: url("./assets/workbench/icon-chart.png?v=2") !important;
}

#screen-chart .entry-practice > span {
  background-image: url("./assets/workbench/icon-practice.png?v=2") !important;
}

#screen-chart .entry-course > span {
  background-image: url("./assets/workbench/icon-course.png?v=2") !important;
}

#screen-chart .entry-review > span {
  background-image: url("./assets/workbench/icon-review.png?v=2") !important;
}

#screen-chart .entry-library > span {
  background-image: url("./assets/workbench/icon-library.png?v=2") !important;
}

#screen-chart .entry-card strong {
  font-size: 15px;
  line-height: 1.08;
  font-weight: 900;
}

#screen-chart .entry-card small {
  font-size: 12px;
  line-height: 1.18;
  color: #838c88;
}

#screen-chart .entry-card.entry-review,
#screen-chart .entry-card.entry-library {
  display: grid;
  grid-template-columns: 42px auto;
  grid-template-rows: auto auto;
  align-content: center;
  justify-content: start;
  text-align: left;
}

#screen-chart .entry-card.entry-review > span,
#screen-chart .entry-card.entry-library > span {
  grid-row: 1 / span 2;
}

#screen-chart .entry-card.entry-review strong,
#screen-chart .entry-card.entry-library strong,
#screen-chart .entry-card.entry-review small,
#screen-chart .entry-card.entry-library small {
  justify-self: start;
}

#screen-chart .today-practice-card {
  position: absolute;
  top: 715px;
  left: 24px;
  right: 24px;
  height: 135px;
  margin: 0;
  border-radius: 18px 18px 0 0;
  padding: 18px 14px 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(219, 226, 218, 0.94);
}

#screen-chart .today-practice-card header {
  margin-bottom: 17px;
}

#screen-chart .today-practice-card h2 {
  font-size: 18px;
  font-weight: 900;
}

#screen-chart .today-practice-card article {
  min-height: 92px;
  grid-template-columns: 52px minmax(0, 1fr) 112px;
  gap: 14px;
  padding: 14px 16px 12px;
}

#screen-chart .practice-icon {
  width: 42px;
  height: 42px;
  border-radius: 0;
  background: transparent url("./assets/workbench/icon-today.png?v=2") center / contain no-repeat;
}

#screen-chart .today-practice-card h3 {
  font-size: 15px;
  line-height: 1.15;
}

#screen-chart .today-practice-card h3 em {
  margin-left: 6px;
  padding: 4px 8px;
  font-size: 12px;
}

#screen-chart .today-practice-card article > button {
  min-height: 44px;
  font-size: 14px;
}

.tabbar {
  height: 72px;
  padding: 7px 30px 18px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -10px 26px rgba(31, 37, 34, 0.045);
  position: relative;
}

.tabbar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 134px;
  height: 5px;
  border-radius: 999px;
  background: #050505;
  transform: translateX(-50%);
}

.tabbar button {
  font-size: 13px;
}

/* Typography fidelity pass: match the reference workbench screen.
   Keep this section typography-only; layout coordinates are intentionally untouched. */
#screen-chart .workbench-home,
#screen-chart .workbench-home button,
#screen-chart .workbench-home input,
.tabbar,
.tabbar button {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif !important; /* font-unify-20260726-fix21 */
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  letter-spacing: 0 !important;
}

#screen-chart .workbench-status {
  font-size: 17px !important;
  line-height: 1 !important;
  font-weight: 760 !important;
}

#screen-chart .workbench-hero h1 {
  font-size: 29px !important;
  line-height: 1.04 !important;
  font-weight: 760 !important;
}

#screen-chart .workbench-hero p {
  font-size: 14px !important;
  line-height: 1.26 !important;
  font-weight: 400 !important;
}

#screen-chart .study-ring strong {
  font-size: 25px !important;
  line-height: 1 !important;
  font-weight: 720 !important;
}

#screen-chart .study-ring strong span {
  font-size: 13px !important;
  font-weight: 560 !important;
}

#screen-chart .study-ring small {
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
}

#screen-chart .study-overview-main h2 {
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 620 !important;
}

#screen-chart .study-metrics strong {
  font-size: 24px !important;
  line-height: 1 !important;
  font-weight: 680 !important;
}

#screen-chart .study-metrics strong span {
  font-size: 13px !important;
  font-weight: 520 !important;
}

#screen-chart .study-metrics span {
  font-size: 11px !important;
  line-height: 1.15 !important;
  font-weight: 400 !important;
}

#screen-chart .study-overview-card footer p,
#screen-chart .study-overview-card footer strong {
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
}

#screen-chart .study-overview-card footer > span {
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
}

#screen-chart .quick-chart-panel h2 {
  font-size: 17px !important;
  line-height: 1.15 !important;
  font-weight: 680 !important;
}

#screen-chart .quick-chart-panel header button {
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
}

#screen-chart .quick-chart-form.home-birth-form span {
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
}

#screen-chart .quick-chart-form.home-birth-form input {
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
}

#screen-chart .quick-chart-form.home-birth-form input::placeholder {
  font-weight: 400 !important;
}

#screen-chart .quick-gender-field .gender-toggle button {
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
}

#screen-chart .quick-gender-field .gender-toggle button.active {
  font-weight: 700 !important;
}

#screen-chart .home-main-action.workbench-primary {
  font-size: 17px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
}

#screen-chart .quick-chart-panel > p {
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
}

#screen-chart .entry-card strong {
  font-size: 17px !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
}

#screen-chart .entry-card small {
  font-size: 12px !important;
  line-height: 1.18 !important;
  font-weight: 400 !important;
}

#screen-chart .today-practice-card h2 {
  font-size: 20px !important;
  line-height: 1.08 !important;
  font-weight: 720 !important;
}

#screen-chart .today-practice-card header button {
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 400 !important;
}

#screen-chart .today-practice-card h3 {
  font-size: 16px !important;
  line-height: 1.18 !important;
  font-weight: 720 !important;
}

#screen-chart .today-practice-card h3 em {
  font-size: 12px !important;
  line-height: 1 !important;
  font-weight: 500 !important;
}

#screen-chart .today-practice-card p {
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
}

#screen-chart .today-practice-card p b {
  font-size: 13px !important;
  font-weight: 520 !important;
}

#screen-chart .today-practice-card small {
  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
}

#screen-chart .today-practice-card article > button {
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

.tabbar button {
  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 400 !important;
}

.tabbar .active {
  font-weight: 600 !important;
}

/* Final workbench replica override. Keep at EOF so previous workbench attempts cannot leak through. */
.phone:has(#screen-chart.active),
.phone:has(#screen-chart.screen-leaving) {
  grid-template-rows: 1fr !important;
}

.phone:has(#screen-chart.active) > .tabbar,
.phone:has(#screen-chart.screen-leaving) > .tabbar {
  display: none !important;
}

#screen-chart.active,
#screen-chart.screen-leaving {
  padding: 0 !important;
  overflow: hidden !important;
  background: #f7faf5 !important;
}

#screen-chart .workbench-replica-host {
  position: absolute !important;
  inset: 0 !important;
  width: 426px !important;
  height: 922px !important;
  overflow: hidden !important;
  background: #f7faf5 !important;
  z-index: 50 !important;
}

#screen-chart .workbench-replica-frame {
  display: block !important;
  width: 853px !important;
  height: 1844px !important;
  border: 0 !important;
  transform: scale(0.5) !important;
  transform-origin: 0 0 !important;
  background: #f7faf5 !important;
}

#screen-chart > .workbench-replica-host + .chart-home.workbench-home {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Host-owned shared bottom navigation. This must stay at EOF. */
.phone,
.phone:has(#screen-chart.active),
.phone:has(#screen-chart.screen-leaving) {
  grid-template-rows: 1fr 72px !important;
}

.phone > .tabbar,
.phone:has(#screen-chart.active) > .tabbar,
.phone:has(#screen-chart.screen-leaving) > .tabbar {
  position: relative !important;
  z-index: 120 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  column-gap: 12px !important;
  height: 72px !important;
  padding: 7px 16px 13px !important;
  border: 1px solid rgba(210, 215, 211, 0.92) !important;
  border-bottom: 0 !important;
  border-radius: 18px 18px 0 0 !important;
  background: rgba(255, 255, 255, 0.965) !important;
  box-shadow: 0 -5px 20px rgba(30, 45, 35, 0.05) !important;
  backdrop-filter: blur(16px) !important;
}

.phone > .tabbar::after {
  content: none !important;
  display: none !important;
}

.phone > .tabbar button {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #787e7b !important;
  font-family: "DengXian", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif !important; /* font-unify-20260726-fix21 */
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 450 !important;
  letter-spacing: 0 !important;
}

.phone > .tabbar button span {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-direction: column !important;
  gap: 3px !important;
  color: inherit !important;
  font: inherit !important;
}

.phone > .tabbar button span::before {
  content: "" !important;
  display: block !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  box-shadow: none !important;
}

.phone > .tabbar button[data-go="chart"] span::before {
  width: 23px !important;
  height: 24px !important;
  background-image: url("./workbench-replica/png/icon_bottom_home_active.png") !important;
}

.phone > .tabbar button[data-go="practice"] span::before {
  width: 18px !important;
  height: 23px !important;
  background-image: url("./workbench-replica/png/icon_bottom_clipboard.png") !important;
}

.phone > .tabbar button[data-go="qimen-question"] span::before {
  width: 21px !important;
  height: 21px !important;
  margin-top: 2px !important;
  background-image: url("./workbench-replica/png/icon_bottom_chat.png") !important;
}

.phone > .tabbar button[data-go="course"] span::before {
  width: 23px !important;
  height: 21px !important;
  margin-top: 1px !important;
  background-image: url("./workbench-replica/png/icon_bottom_book.png") !important;
}

.phone > .tabbar button[data-go="mine"] span::before {
  width: 20px !important;
  height: 23px !important;
  background-image: url("./workbench-replica/png/icon_bottom_user.png") !important;
}

.phone > .tabbar .active,
.phone > .tabbar .active span {
  color: #08784f !important;
  font-weight: 560 !important;
}

.screen:not(#screen-chart):not(#screen-chart-detail):not(#screen-practice):not(#screen-mine) {
  background:
    radial-gradient(circle at 12% 5%, rgba(13, 118, 82, 0.05), transparent 34%),
    linear-gradient(180deg, #fcfefd 0%, #f8fbf7 100%) !important;
}

.detail-top,
.qimen-question-top,
.chart-library-top,
.bazi-report-top {
  background: transparent !important;
  border-bottom: 0 !important;
}

.detail-top strong,
.qimen-question-top strong,
.chart-library-top strong,
.bazi-report-top strong {
  color: #071d14 !important;
  font-weight: 760 !important;
}

.qimen-question-hero,
.qimen-question-form,
.library-panel,
.mine-vip,
.mine-card,
.mine-detail-content,
.bazi-report-hero,
.bazi-report-placeholder {
  border-color: rgba(219, 226, 218, 0.94) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 12px 28px rgba(23, 42, 35, 0.055) !important;
}

/* Unified app chrome: every primary page uses this single homepage-style bottom nav. */
.phone,
.phone:has(#screen-chart.active),
.phone:has(#screen-chart.screen-leaving) {
  grid-template-rows: 1fr 72px !important;
}

.phone > .tabbar,
.phone:has(#screen-chart.active) > .tabbar,
.phone:has(#screen-chart.screen-leaving) > .tabbar {
  position: relative !important;
  z-index: 120 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  column-gap: 12px !important;
  height: 72px !important;
  padding: 7px 16px 13px !important;
  border: 1px solid rgba(210, 215, 211, 0.92) !important;
  border-bottom: 0 !important;
  border-radius: 18px 18px 0 0 !important;
  background: rgba(255, 255, 255, 0.965) !important;
  box-shadow: 0 -5px 20px rgba(30, 45, 35, 0.05) !important;
  backdrop-filter: blur(16px) !important;
}

.phone > .tabbar::after {
  content: none !important;
  display: none !important;
}

.phone > .tabbar button {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #787e7b !important;
  font-family: "DengXian", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif !important; /* font-unify-20260726-fix21 */
  font-size: 12px !important;
  line-height: 1.25 !important;
  font-weight: 450 !important;
  letter-spacing: 0 !important;
}

.phone > .tabbar button span {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-direction: column !important;
  gap: 3px !important;
  color: inherit !important;
  font: inherit !important;
}

.phone > .tabbar button span::before {
  content: "" !important;
  display: block !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  box-shadow: none !important;
}

.phone > .tabbar button[data-go="chart"] span::before {
  width: 23px !important;
  height: 24px !important;
  background-image: url("./workbench-replica/png/icon_bottom_home_active.png") !important;
}

.phone > .tabbar button[data-go="practice"] span::before {
  width: 18px !important;
  height: 23px !important;
  background-image: url("./workbench-replica/png/icon_bottom_clipboard.png") !important;
}

.phone > .tabbar button[data-go="qimen-question"] span::before {
  width: 21px !important;
  height: 21px !important;
  margin-top: 2px !important;
  background-image: url("./workbench-replica/png/icon_bottom_chat.png") !important;
}

.phone > .tabbar button[data-go="course"] span::before {
  width: 23px !important;
  height: 21px !important;
  margin-top: 1px !important;
  background-image: url("./workbench-replica/png/icon_bottom_book.png") !important;
}

.phone > .tabbar button[data-go="mine"] span::before {
  width: 20px !important;
  height: 23px !important;
  background-image: url("./workbench-replica/png/icon_bottom_user.png") !important;
}

.phone > .tabbar .active,
.phone > .tabbar .active span {
  color: #08784f !important;
  font-weight: 560 !important;
}

.screen:not(#screen-chart):not(#screen-chart-detail):not(#screen-practice):not(#screen-mine) {
  background:
    radial-gradient(circle at 12% 5%, rgba(13, 118, 82, 0.05), transparent 34%),
    linear-gradient(180deg, #fcfefd 0%, #f8fbf7 100%) !important;
}

.detail-top,
.qimen-question-top,
.chart-library-top,
.bazi-report-top {
  background: transparent !important;
  border-bottom: 0 !important;
}

.detail-top strong,
.qimen-question-top strong,
.chart-library-top strong,
.bazi-report-top strong {
  color: #071d14 !important;
  font-weight: 760 !important;
}

.qimen-question-hero,
.qimen-question-form,
.library-panel,
.mine-vip,
.mine-card,
.mine-detail-content,
.bazi-report-hero,
.bazi-report-placeholder {
  border-color: rgba(219, 226, 218, 0.94) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 12px 28px rgba(23, 42, 35, 0.055) !important;
}

/* Accepted workbench replica handoff: show the delivered 853x1844 page at 0.5 scale. */
.phone:has(#screen-chart.active),
.phone:has(#screen-chart.screen-leaving) {
  grid-template-rows: 1fr;
}

.phone:has(#screen-chart.active) > .tabbar,
.phone:has(#screen-chart.screen-leaving) > .tabbar {
  display: none;
}

#screen-chart.active,
#screen-chart.screen-leaving {
  padding: 0 !important;
  overflow: hidden !important;
  background: #f7faf5 !important;
}

.workbench-replica-host {
  position: absolute;
  inset: 0;
  width: 426px;
  height: 922px;
  overflow: hidden;
  background: #f7faf5;
  z-index: 3;
}

.workbench-replica-frame {
  display: block;
  width: 853px;
  height: 1844px;
  border: 0;
  transform: scale(0.5);
  transform-origin: 0 0;
  background: #f7faf5;
}

.workbench-click-layer {
  position: absolute;
  inset: 0;
  z-index: 70;
  pointer-events: none;
}

.workbench-hit {
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  pointer-events: auto;
  cursor: pointer;
}

.workbench-hit:focus-visible {
  outline: 2px solid rgba(8, 121, 79, 0.45);
  outline-offset: 2px;
}

.workbench-hit.hit-record {
  left: 336px;
  top: 294px;
  width: 72px;
  height: 28px;
}

.workbench-hit.hit-birth {
  left: 36px;
  top: 378px;
  width: 354px;
  height: 43px;
}

.workbench-hit.hit-generate {
  left: 36px;
  top: 432px;
  width: 356px;
  height: 51px;
  border-radius: 26px;
}

.workbench-hit.hit-chart,
.workbench-hit.hit-practice,
.workbench-hit.hit-course {
  top: 519px;
  width: 120px;
  height: 96px;
}

.workbench-hit.hit-chart {
  left: 24px;
}

.workbench-hit.hit-practice {
  left: 153px;
}

.workbench-hit.hit-course {
  left: 282px;
}

.workbench-hit.hit-review,
.workbench-hit.hit-library {
  top: 627px;
  width: 190px;
  height: 80px;
}

.workbench-hit.hit-review {
  left: 24px;
}

.workbench-hit.hit-library {
  left: 226px;
}

.workbench-hit.hit-more-practice {
  left: 337px;
  top: 716px;
  width: 56px;
  height: 32px;
}

.workbench-hit.hit-start-practice {
  left: 307px;
  top: 747px;
  width: 88px;
  height: 43px;
  border-radius: 22px;
}

.workbench-hit.hit-tab-chart,
.workbench-hit.hit-tab-practice,
.workbench-hit.hit-tab-qimen,
.workbench-hit.hit-tab-mine {
  top: 845px;
  width: 106px;
  height: 67px;
}

.workbench-hit.hit-tab-chart {
  left: 0;
}

.workbench-hit.hit-tab-practice {
  left: 106px;
}

.workbench-hit.hit-tab-qimen {
  left: 213px;
}

.workbench-hit.hit-tab-mine {
  left: 320px;
}

#screen-chart > .workbench-replica-host + .chart-home.workbench-home {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Typography fidelity refinement 2: use a softer UI font on Windows and reduce heavy labels. */
#screen-chart .workbench-home,
#screen-chart .workbench-home button,
#screen-chart .workbench-home input,
.tabbar,
.tabbar button {
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif !important; /* font-unify-20260726-fix21 */
}

#screen-chart .workbench-hero h1 {
  font-weight: 650 !important;
}

#screen-chart .study-overview-main h2 {
  font-weight: 480 !important;
}

#screen-chart .study-metrics strong {
  font-weight: 560 !important;
}

#screen-chart .quick-chart-panel h2 {
  font-weight: 560 !important;
}

#screen-chart .quick-gender-field .gender-toggle button.active {
  font-weight: 580 !important;
}

#screen-chart .home-main-action.workbench-primary {
  font-weight: 620 !important;
}

#screen-chart .entry-card strong {
  font-weight: 560 !important;
}

#screen-chart .today-practice-card h2 {
  font-weight: 620 !important;
}

#screen-chart .today-practice-card h3 {
  font-weight: 580 !important;
}

#screen-chart .today-practice-card article > button {
  font-weight: 620 !important;
}

/* Typography fidelity refinement 3: DengXian gives a closer light mobile texture on Windows. */
#screen-chart .workbench-home,
#screen-chart .workbench-home button,
#screen-chart .workbench-home input,
.tabbar,
.tabbar button {
  font-family: "DengXian", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif !important; /* font-unify-20260726-fix21 */
}

/* Typography fidelity final mix: headings use the fuller UI face, details keep the lighter face. */
#screen-chart .workbench-hero h1,
#screen-chart .study-ring strong,
#screen-chart .study-metrics strong,
#screen-chart .quick-chart-panel h2,
#screen-chart .home-main-action.workbench-primary,
#screen-chart .entry-card strong,
#screen-chart .today-practice-card h2,
#screen-chart .today-practice-card h3,
#screen-chart .today-practice-card article > button {
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif !important; /* font-unify-20260726-fix21 */
}

#screen-chart .workbench-hero h1 {
  font-size: 28px !important;
  font-weight: 700 !important;
}

#screen-chart .study-ring strong {
  font-size: 23px !important;
  font-weight: 660 !important;
}

#screen-chart .study-metrics strong {
  font-size: 21px !important;
  font-weight: 600 !important;
}

#screen-chart .quick-chart-panel h2 {
  font-size: 16.5px !important;
  font-weight: 620 !important;
}

#screen-chart .home-main-action.workbench-primary {
  font-size: 16px !important;
  font-weight: 650 !important;
}

#screen-chart .entry-card strong {
  font-size: 15.5px !important;
  font-weight: 620 !important;
}

#screen-chart .today-practice-card h2 {
  font-size: 18px !important;
  font-weight: 650 !important;
}

#screen-chart .today-practice-card h3 {
  font-size: 15px !important;
  font-weight: 620 !important;
}

/* Typography fidelity refinement: the reference uses a lighter mobile reading texture. */
#screen-chart .workbench-hero h1 {
  font-size: 28px !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
}

#screen-chart .workbench-hero p {
  font-size: 13.5px !important;
  line-height: 1.28 !important;
  font-weight: 350 !important;
}

#screen-chart .study-ring strong {
  font-size: 22px !important;
  font-weight: 650 !important;
}

#screen-chart .study-ring strong span {
  font-size: 11px !important;
  font-weight: 500 !important;
}

#screen-chart .study-ring small {
  font-size: 10px !important;
  font-weight: 350 !important;
}

#screen-chart .study-overview-main h2 {
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 520 !important;
}

#screen-chart .study-metrics strong {
  font-size: 21px !important;
  font-weight: 600 !important;
}

#screen-chart .study-metrics strong span {
  font-size: 11px !important;
  font-weight: 460 !important;
}

#screen-chart .study-metrics span {
  font-size: 10.5px !important;
  font-weight: 350 !important;
}

#screen-chart .study-overview-card footer p,
#screen-chart .study-overview-card footer strong {
  font-size: 12px !important;
  font-weight: 380 !important;
}

#screen-chart .study-overview-card footer > span {
  font-size: 11px !important;
  font-weight: 350 !important;
}

#screen-chart .quick-chart-panel h2 {
  font-size: 16px !important;
  font-weight: 620 !important;
}

#screen-chart .quick-chart-panel header button {
  font-size: 12px !important;
  font-weight: 350 !important;
}

#screen-chart .quick-chart-form.home-birth-form span {
  font-size: 12px !important;
  font-weight: 350 !important;
}

#screen-chart .quick-chart-form.home-birth-form input {
  font-size: 12px !important;
  font-weight: 350 !important;
}

#screen-chart .quick-gender-field .gender-toggle button {
  font-size: 13px !important;
  font-weight: 450 !important;
}

#screen-chart .quick-gender-field .gender-toggle button.active {
  font-weight: 620 !important;
}

#screen-chart .home-main-action.workbench-primary {
  font-size: 16px !important;
  font-weight: 680 !important;
}

#screen-chart .quick-chart-panel > p {
  font-size: 10.5px !important;
  font-weight: 350 !important;
}

#screen-chart .entry-card strong {
  font-size: 15.5px !important;
  line-height: 1.1 !important;
  font-weight: 620 !important;
}

#screen-chart .entry-card small {
  font-size: 11px !important;
  font-weight: 350 !important;
}

#screen-chart .today-practice-card h2 {
  font-size: 18px !important;
  font-weight: 680 !important;
}

#screen-chart .today-practice-card header button {
  font-size: 12px !important;
  font-weight: 350 !important;
}

#screen-chart .today-practice-card h3 {
  font-size: 15px !important;
  font-weight: 650 !important;
}

#screen-chart .today-practice-card h3 em {
  font-size: 11px !important;
  font-weight: 450 !important;
}

#screen-chart .today-practice-card p {
  font-size: 12px !important;
  font-weight: 350 !important;
}

#screen-chart .today-practice-card p b {
  font-size: 12px !important;
  font-weight: 480 !important;
}

#screen-chart .today-practice-card small {
  font-size: 11px !important;
  font-weight: 350 !important;
}

#screen-chart .today-practice-card article > button {
  font-size: 14px !important;
  font-weight: 680 !important;
}

.tabbar button {
  font-size: 12px !important;
  font-weight: 350 !important;
}

.tabbar .active {
  font-weight: 600 !important;
}

/* Final workbench replica override. Keep at EOF so previous workbench attempts cannot leak through. */
.phone:has(#screen-chart.active),
.phone:has(#screen-chart.screen-leaving) {
  grid-template-rows: 1fr !important;
}

.phone:has(#screen-chart.active) > .tabbar,
.phone:has(#screen-chart.screen-leaving) > .tabbar {
  display: none !important;
}

#screen-chart.active,
#screen-chart.screen-leaving {
  padding: 0 !important;
  overflow: hidden !important;
  background: #f7faf5 !important;
}

#screen-chart .workbench-replica-host {
  position: absolute !important;
  inset: 0 !important;
  width: 426px !important;
  height: 922px !important;
  overflow: hidden !important;
  background: #f7faf5 !important;
  z-index: 50 !important;
}

#screen-chart .workbench-replica-frame {
  display: block !important;
  width: 853px !important;
  height: 1844px !important;
  border: 0 !important;
  transform: scale(0.5) !important;
  transform-origin: 0 0 !important;
  background: #f7faf5 !important;
}

#screen-chart > .workbench-replica-host + .chart-home.workbench-home {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
/* Host-owned shared bottom navigation. This must stay at true EOF. */
.phone,
.phone:has(#screen-chart.active),
.phone:has(#screen-chart.screen-leaving) {
  grid-template-rows: 1fr 72px !important;
}

.phone > .tabbar,
.phone:has(#screen-chart.active) > .tabbar,
.phone:has(#screen-chart.screen-leaving) > .tabbar {
  position: relative !important;
  z-index: 120 !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  column-gap: 12px !important;
  height: 72px !important;
  padding: 7px 16px 13px !important;
  border: 1px solid rgba(210, 215, 211, 0.92) !important;
  border-bottom: 0 !important;
  border-radius: 18px 18px 0 0 !important;
  background: rgba(255, 255, 255, 0.965) !important;
  box-shadow: 0 -5px 20px rgba(30, 45, 35, 0.05) !important;
  backdrop-filter: blur(16px) !important;
}

.phone > .tabbar::after {
  content: none !important;
  display: none !important;
}

.phone > .tabbar button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #787e7b !important;
  font-family: "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "PingFang SC", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif !important; /* font-unify-20260726-fix21 */
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.phone > .tabbar button span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: column !important;
  gap: 4px !important;
  color: inherit !important;
  font: inherit !important;
}

.phone > .tabbar button span::before {
  content: "" !important;
  display: block !important;
  flex: 0 0 auto !important;
  margin: 0 auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  box-shadow: none !important;
}

.phone > .tabbar button[data-go="chart"] span::before {
  width: 23px !important;
  height: 24px !important;
  background-image: url("./workbench-replica/png/icon_bottom_home_active.png") !important;
}

.phone > .tabbar button[data-go="practice"] span::before {
  width: 18px !important;
  height: 23px !important;
  background-image: url("./workbench-replica/png/icon_bottom_clipboard.png") !important;
}

.phone > .tabbar button[data-go="qimen-question"] span::before {
  width: 21px !important;
  height: 21px !important;
  margin-top: 2px !important;
  background-image: url("./workbench-replica/png/icon_bottom_chat.png") !important;
}

.phone > .tabbar button[data-go="course"] span::before {
  width: 22px !important;
  height: 22px !important;
  margin-top: 0 !important;
  background-image: url("./workbench-replica/png/icon_bottom_book.png") !important;
}

.phone > .tabbar button[data-go="mine"] span::before {
  width: 20px !important;
  height: 23px !important;
  background-image: url("./workbench-replica/png/icon_bottom_user.png") !important;
}

.phone > .tabbar .active,
.phone > .tabbar .active span {
  color: #08784f !important;
  font-weight: 500 !important;
}

.screen:not(#screen-chart):not(#screen-chart-detail):not(#screen-practice):not(#screen-mine) {
  background:
    radial-gradient(circle at 12% 5%, rgba(13, 118, 82, 0.05), transparent 34%),
    linear-gradient(180deg, #fcfefd 0%, #f8fbf7 100%) !important;
}

.detail-top,
.qimen-question-top,
.chart-library-top,
.bazi-report-top {
  background: transparent !important;
  border-bottom: 0 !important;
}

.detail-top strong,
.qimen-question-top strong,
.chart-library-top strong,
.bazi-report-top strong {
  color: #071d14 !important;
  font-weight: 760 !important;
}

.qimen-question-hero,
.qimen-question-form,
.library-panel,
.mine-vip,
.mine-card,
.mine-detail-content,
.bazi-report-hero,
.bazi-report-placeholder {
  border-color: rgba(219, 226, 218, 0.94) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow: 0 12px 28px rgba(23, 42, 35, 0.055) !important;
}
.stage {
  padding: 0 !important;
}

/* Homepage refinement: remove demo header actions and keep quick form text readable. */
#screen-chart .workbench-actions {
  display: none !important;
}

#screen-chart .quick-chart-form.home-birth-form span,
#screen-chart .quick-chart-form.home-birth-form input {
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 420 !important;
}

#screen-chart .quick-chart-form.home-birth-form input::placeholder {
  color: #929995 !important;
  font-size: 13px !important;
  font-weight: 420 !important;
}

/* H5 runtime shell: real page layout, not the fixed phone/iframe demo frame. */
html,
body {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #f7faf5 !important;
}

.stage {
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

.phone,
.phone:has(#screen-chart.active),
.phone:has(#screen-chart.screen-leaving) {
  width: 100% !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #f7faf5 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) 72px !important;
  overflow: hidden !important;
}

.screen.active,
.screen.screen-leaving,
#screen-chart.active,
#screen-chart.screen-leaving {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #f7faf5 !important;
  scrollbar-width: none !important;
}

#screen-chart .workbench-replica-host {
  display: none !important;
}

#screen-chart > .workbench-replica-host + .chart-home.workbench-home,
#screen-chart .chart-home.workbench-home {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  max-width: 560px !important;
  min-height: auto !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 24px 22px 104px !important;
  overflow: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 1 !important;
}

#screen-chart .workbench-hero {
  display: none !important;
}

#screen-chart .quick-chart-error {
  margin: 9px 14px 0 !important;
  padding: 8px 11px !important;
  border: 1px solid rgba(214, 90, 82, 0.26) !important;
  border-radius: 9px !important;
  background: rgba(255, 246, 244, 0.92) !important;
  color: #b7423b !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  font-weight: 520 !important;
}

#screen-chart .quick-chart-error[hidden] {
  display: none !important;
}

#screen-chart .quick-chart-form.home-birth-form input.is-invalid,
#screen-chart .quick-chart-form.home-birth-form input[aria-invalid="true"] {
  color: #d65a52 !important;
}

#screen-chart .quick-chart-form.home-birth-form label:has(input.is-invalid),
#screen-chart .quick-chart-form.home-birth-form label:has(input[aria-invalid="true"]) {
  border-color: rgba(214, 90, 82, 0.48) !important;
  box-shadow: 0 0 0 3px rgba(214, 90, 82, 0.07) !important;
}

.phone > .tabbar,
.phone:has(#screen-chart.active) > .tabbar,
.phone:has(#screen-chart.screen-leaving) > .tabbar {
  position: relative !important;
  grid-row: 2 !important;
  width: 100% !important;
  max-width: none !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  background: rgba(255, 255, 255, 0.98) !important;
}

/* Homepage H5 flow correction: remove screenshot-replica absolute coordinates. */
#screen-chart > .workbench-replica-host + .chart-home.workbench-home,
#screen-chart .chart-home.workbench-home {
  max-width: 720px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 18px max(18px, env(safe-area-inset-left)) 104px max(18px, env(safe-area-inset-right)) !important;
}

#screen-chart .study-overview-card,
#screen-chart .quick-chart-panel,
#screen-chart .workbench-entry-grid,
#screen-chart .today-practice-card {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

#screen-chart .study-overview-card {
  min-height: 154px !important;
}

#screen-chart .quick-chart-panel {
  padding: 12px 14px 10px !important;
}

#screen-chart .home-main-action.workbench-primary:focus,
#screen-chart .home-main-action.workbench-primary:focus-visible {
  outline: none !important;
  box-shadow: 0 15px 28px rgba(14, 115, 76, 0.23) !important;
}

#screen-chart .study-overview-card footer {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin-top: 8px !important;
}

#screen-chart .today-practice-card article {
  min-height: 82px !important;
}

/* Restore the approved image-replica homepage; keep host nav only. */
#screen-chart.active,
#screen-chart.screen-leaving {
  padding: 0 !important;
  overflow: hidden !important;
  background: #f7faf5 !important;
}

#screen-chart .workbench-replica-host {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 426px !important;
  height: 922px !important;
  overflow: hidden !important;
  background: #f7faf5 !important;
  z-index: 50 !important;
}

#screen-chart .workbench-replica-frame {
  display: block !important;
  width: 853px !important;
  height: 1844px !important;
  border: 0 !important;
  transform: scale(0.5) !important;
  transform-origin: 0 0 !important;
  background: #f7faf5 !important;
}

#screen-chart > .workbench-replica-host + .chart-home.workbench-home,
#screen-chart .chart-home.workbench-home {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

#screen-mine.active,
#screen-mine.screen-leaving {
  padding: 16px 20px 104px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Final legibility tweak for shared bottom navigation labels. */
.phone > .tabbar button,
.phone > .tabbar button span {
  font-weight: 500 !important;
}

.phone > .tabbar .active,
.phone > .tabbar .active span {
  color: #08784f !important;
  font-weight: 600 !important;
}

.phone > .tabbar .active span::before {
  filter: brightness(0) saturate(100%) invert(28%) sepia(85%) saturate(691%) hue-rotate(116deg) brightness(88%) contrast(94%) !important;
}

.phone > .tabbar button[data-go="chart"].active span::before {
  filter: none !important;
}

/* Runtime H5 shell correction: content scrolls above a shared bottom nav. */
html,
body {
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #f7faf5 !important;
}

.stage {
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

.phone,
.phone:has(#screen-chart.active),
.phone:has(#screen-chart.screen-leaving) {
  width: 100% !important;
  max-width: none !important;
  height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #f7faf5 !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) 72px !important;
  overflow: hidden !important;
}

.screen.active,
.screen.screen-leaving {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
}

.chart-detail-screen.active,
.chart-detail-screen.screen-leaving,
#screen-practice.active,
#screen-practice.screen-leaving {
  overflow: hidden !important;
}

.chart-detail-screen iframe,
#practiceFrame {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  border: 0 !important;
}

#screen-chart.active,
#screen-chart.screen-leaving {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #f7faf5 !important;
}

#screen-chart .workbench-replica-host {
  --replica-scale: 0.5;
  --replica-width: calc(853px * var(--replica-scale));
  --replica-offset: max(0px, calc((100% - var(--replica-width)) / 2));
  display: block !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: calc(1844px * var(--replica-scale)) !important;
  min-height: calc(1844px * var(--replica-scale)) !important;
  overflow: visible !important;
  background: #f7faf5 !important;
}

#screen-chart .workbench-replica-frame {
  display: block !important;
  position: absolute !important;
  left: var(--replica-offset) !important;
  top: 0 !important;
  width: 853px !important;
  height: 1844px !important;
  border: 0 !important;
  transform: scale(var(--replica-scale)) !important;
  transform-origin: 0 0 !important;
  background: #f7faf5 !important;
  pointer-events: none !important;
}

#screen-chart .workbench-click-layer {
  position: absolute !important;
  left: var(--replica-offset) !important;
  top: 0 !important;
  width: 853px !important;
  height: 1844px !important;
  transform: scale(var(--replica-scale)) !important;
  transform-origin: 0 0 !important;
  display: block !important;
  pointer-events: auto !important;
}

#screen-chart .workbench-click-layer .workbench-hit {
  pointer-events: auto !important;
}

/* Homepage replica hit map, measured from workbench-replica DOM at 853px width. */
#screen-chart .workbench-hit.hit-record {
  left: 668px !important;
  top: 589px !important;
  width: 110px !important;
  height: 29px !important;
}

#screen-chart .workbench-hit.hit-name {
  left: 71px !important;
  top: 644px !important;
  width: 428px !important;
  height: 83px !important;
  padding: 0 20px 0 126px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: transparent !important;
  caret-color: #0a8258 !important;
  outline: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  font-size: 22px !important;
}

#screen-chart .workbench-hit.hit-name:focus::placeholder {
  color: transparent !important;
}

#screen-chart .workbench-hit.hit-name:focus-visible {
  outline: 2px solid rgba(8, 121, 79, 0.28) !important;
  outline-offset: -3px !important;
}

#screen-chart .workbench-hit.hit-gender {
  top: 661px !important;
  width: 76px !important;
  height: 48px !important;
  border-radius: 999px !important;
}

#screen-chart .workbench-hit.hit-gender-male {
  left: 599px !important;
}

#screen-chart .workbench-hit.hit-gender-female {
  left: 687px !important;
}

#screen-chart .workbench-hit.hit-birth {
  left: 72px !important;
  top: 732px !important;
  width: 708px !important;
  height: 82px !important;
}

#screen-chart .workbench-hit.hit-generate {
  left: 72px !important;
  top: 835px !important;
  width: 707px !important;
  height: 78px !important;
}

#screen-chart .workbench-hit.hit-chart,
#screen-chart .workbench-hit.hit-practice,
#screen-chart .workbench-hit.hit-course {
  top: 998px !important;
  width: 241px !important;
  height: 194px !important;
}

#screen-chart .workbench-hit.hit-chart {
  left: 47px !important;
}

#screen-chart .workbench-hit.hit-practice {
  left: 305px !important;
}

#screen-chart .workbench-hit.hit-course {
  left: 563px !important;
}

#screen-chart .workbench-hit.hit-review,
#screen-chart .workbench-hit.hit-library {
  top: 1213px !important;
  height: 131px !important;
}

#screen-chart .workbench-hit.hit-review {
  left: 47px !important;
  width: 368px !important;
}

#screen-chart .workbench-hit.hit-library {
  left: 433px !important;
  width: 371px !important;
}

#screen-chart .workbench-hit.hit-more-practice {
  left: 708px !important;
  top: 1397px !important;
  width: 68px !important;
  height: 29px !important;
}

#screen-chart .workbench-hit.hit-start-practice {
  left: 609px !important;
  top: 1480px !important;
  width: 151px !important;
  height: 58px !important;
}

/* Qimen question page uses the shared H5 shell but keeps app-like inner margins. */
#screen-qimen-question.active,
#screen-qimen-question.screen-leaving {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 18px 20px 104px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #f7faf5 !important;
  scrollbar-width: none !important;
}

#screen-qimen-question .qimen-question-top,
#screen-qimen-question .qimen-mode-switch,
#screen-qimen-question .qimen-question-hero,
#screen-qimen-question .qimen-question-form {
  width: 100% !important;
  max-width: 560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

#screen-qimen-question .qimen-question-top {
  height: 44px !important;
  margin-bottom: 10px !important;
}

#screen-qimen-question .qimen-question-hero {
  display: none !important;
}

/* Mine detail pages use the same readable content rail as the homepage cards. */
#screen-mine-detail.active,
#screen-mine-detail.screen-leaving {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 12px 16px 104px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #f7faf5 !important;
  scrollbar-width: none !important;
}

#screen-mine-detail .detail-top,
#screen-mine-detail .mine-detail-content {
  width: 100% !important;
  max-width: 560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

#screen-mine-detail .mine-detail-content {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Course MVP: short teaching, live chart observation, practice, feedback, method card. */
#screen-course.active,
#screen-course.screen-leaving {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 24px 20px 112px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background:
    radial-gradient(circle at 86% 8%, rgba(40, 126, 88, 0.1), transparent 24%),
    linear-gradient(180deg, #f7fbf7 0%, #f3f8f2 100%) !important;
  scrollbar-width: none !important;
}

#screen-course .course-top,
#screen-course .course-continue-card,
#screen-course .course-path-section,
#screen-course .course-classroom,
#screen-course .course-method-card {
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.course-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.course-top > div {
  min-width: 0;
}

.course-top h1 {
  margin: 0 0 8px;
  color: #071f15;
  font-size: 30px;
  line-height: 1.05;
  font-weight: 800;
}

.course-top p {
  max-width: 320px;
  margin: 0;
  color: #66756f;
  font-size: 14px;
  line-height: 1.6;
}

.course-top button,
.course-continue-card button,
.course-feedback button,
.course-method-card button,
.course-primary-action {
  border: 0;
  border-radius: 999px;
  background: #0b7f59;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.course-top button {
  flex: 0 0 auto;
  padding: 10px 15px;
  background: #fff;
  color: #0a7a55;
  border: 1px solid rgba(8, 121, 79, 0.16);
  box-shadow: 0 10px 24px rgba(18, 59, 42, 0.08);
}

.course-continue-card,
.course-path-section,
.course-classroom,
.course-method-card {
  border: 1px solid rgba(41, 92, 70, 0.13);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 42px rgba(24, 72, 52, 0.08);
}

.course-continue-card {
  position: relative;
  padding: 18px 18px 20px;
  overflow: hidden;
}

.course-continue-card::after {
  content: "";
  position: absolute;
  inset: auto -28px -36px auto;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(8, 121, 79, 0.14), transparent 66%);
}

.course-continue-card > span,
.course-lesson-head > span,
.course-task-card > span,
.course-feedback > span,
.course-method-card header span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #e6f5ed;
  color: #08794f;
  font-size: 12px;
  font-weight: 700;
}

.course-continue-card h2,
.course-lesson-head h2,
.course-method-card h2 {
  margin: 12px 0 8px;
  color: #061b13;
  font-size: 22px;
  line-height: 1.22;
  font-weight: 800;
}

.course-continue-card p,
.course-lesson-head p,
.course-task-card p,
.course-feedback p,
.course-method-card p {
  margin: 0;
  color: #63726c;
  font-size: 14px;
  line-height: 1.65;
}

.course-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
}

.course-progress::before {
  content: "";
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0b7f59 0 34%, #dfe9e3 34% 100%);
}

.course-progress i {
  display: none;
}

.course-progress em {
  flex: 0 0 auto;
  color: #71807a;
  font-style: normal;
  font-size: 13px;
}

.course-continue-card button {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 48px;
  font-size: 16px;
  box-shadow: 0 14px 24px rgba(8, 121, 79, 0.18);
}

.course-path-section {
  margin-top: 14px;
  padding: 18px;
}

.course-path-section header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.course-path-section h2 {
  margin: 0;
  color: #071f15;
  font-size: 20px;
}

.course-path-section small {
  color: #76857f;
  font-size: 12px;
}

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

.course-step-grid article {
  min-height: 116px;
  padding: 13px 12px;
  border: 1px solid #e0e9e3;
  border-radius: 14px;
  background: #fbfdfb;
}

.course-step-grid article.active {
  border-color: rgba(8, 121, 79, 0.28);
  background: #eef9f3;
}

.course-step-grid b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: #d5f1e2;
  color: #08794f;
  font-size: 12px;
}

.course-step-grid strong {
  display: block;
  color: #081d14;
  font-size: 15px;
  line-height: 1.25;
}

.course-step-grid p {
  margin: 7px 0 0;
  color: #73827c;
  font-size: 12px;
  line-height: 1.45;
}

.course-classroom {
  margin-top: 14px;
  padding: 16px;
}

.course-lesson-head {
  padding: 4px 2px 16px;
}

.course-chart-card,
.course-task-card,
.course-feedback {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #e0e9e3;
  border-radius: 16px;
  background: #fffdf9;
}

.course-chart-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.course-chart-card strong {
  color: #071f15;
  font-size: 16px;
}

.course-chart-card small {
  color: #71807a;
  font-size: 12px;
}

.course-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.course-pillars article {
  min-width: 0;
  padding: 10px 8px;
  border: 1px solid #e2ebe5;
  border-radius: 13px;
  background: #fff;
  text-align: center;
}

.course-pillars span,
.course-pillars em {
  display: block;
  color: #74827c;
  font-size: 11px;
  font-style: normal;
}

.course-pillars b {
  display: block;
  font-size: 28px;
  line-height: 1.04;
  font-weight: 800;
}

.course-pillars .wood { color: #109008; }
.course-pillars .fire { color: #F00808; }
.course-pillars .earth { color: #986000; }
.course-pillars .metal { color: #F8B808; }
.course-pillars .water { color: #0048E0; }

.course-task-card h3,
.course-feedback h3 {
  margin: 10px 0 8px;
  color: #071f15;
  font-size: 18px;
  line-height: 1.35;
}

.course-evidence-list,
.course-answer-list {
  display: grid;
  gap: 9px;
  margin-top: 13px;
}

.course-evidence-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.course-evidence-list button,
.course-answer-list button {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #dce7e0;
  border-radius: 13px;
  background: #fff;
  color: #25352f;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
}

.course-evidence-list button.selected,
.course-answer-list button.selected {
  border-color: rgba(8, 121, 79, 0.4);
  background: #eaf8f1;
  color: #064f37;
  font-weight: 700;
}

.course-primary-action {
  width: 100%;
  min-height: 48px;
  margin-top: 14px;
  font-size: 16px;
}

.course-feedback {
  background: linear-gradient(135deg, #f7fff9, #fffaf0);
}

.course-feedback[hidden],
.course-method-card[hidden] {
  display: none !important;
}

.course-feedback button {
  min-height: 42px;
  margin-top: 13px;
  padding: 0 18px;
}

.course-method-card {
  margin-top: 14px;
  padding: 18px;
  background:
    linear-gradient(135deg, rgba(255, 250, 238, 0.96), rgba(247, 252, 248, 0.96));
  border-color: rgba(184, 135, 61, 0.2);
}

.course-method-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.course-method-card header button {
  min-height: 34px;
  padding: 0 14px;
  background: #fff;
  color: #8a5a17;
  border: 1px solid rgba(184, 135, 61, 0.28);
}

.course-method-card ol {
  margin: 14px 0;
  padding-left: 20px;
  color: #30423b;
  font-size: 14px;
  line-height: 1.75;
}

.course-method-card ol strong {
  color: #0b7f59;
}

.course-method-card > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

.course-method-card > div button {
  min-height: 44px;
  padding: 0 12px;
}

.course-method-card > div button:last-child {
  background: #fff;
  color: #0b7f59;
  border: 1px solid rgba(8, 121, 79, 0.22);
}

@media (max-width: 420px) {
  #screen-course.active,
  #screen-course.screen-leaving {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .course-top h1 {
    font-size: 28px;
  }

  .course-step-grid {
    grid-template-columns: 1fr;
  }

  .course-evidence-list {
    grid-template-columns: 1fr;
  }
}

#screen-chart-tools.active,
#screen-chart-tools.screen-leaving {
  display: block;
}

.chart-tools-screen {
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 14px 16px 96px;
  background:
    radial-gradient(circle at 86% 8%, rgba(15, 126, 86, 0.08), transparent 28%),
    linear-gradient(180deg, #f7fbf7 0%, #f4f7f1 100%);
}

.chart-tools-top {
  margin-bottom: 14px;
}

.bazi-entry-page {
  width: min(100%, 392px);
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.bazi-entry-card {
  overflow: hidden;
  border: 1px solid rgba(17, 116, 78, 0.13);
  border-radius: 16px;
  background: rgba(255, 255, 252, 0.96);
  box-shadow: 0 14px 30px rgba(20, 88, 61, 0.08);
}

.bazi-entry-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(38, 82, 65, 0.1);
}

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

.bazi-entry-row > span {
  color: #5e6661;
  font-size: 14px;
  font-weight: 780;
}

.bazi-entry-row input {
  width: 100%;
  height: 40px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #1a2420;
  font-size: 14px;
  font-weight: 660;
  text-align: right;
}

.bazi-entry-row input::placeholder {
  color: #8a908d;
  font-weight: 560;
}

.bazi-entry-options,
.bazi-entry-checks {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.bazi-entry-options button,
.bazi-entry-checks button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  color: #17231e;
  font-size: 14px;
  font-weight: 720;
  white-space: nowrap;
}

.bazi-entry-options button::before,
.bazi-entry-checks button::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid #9aa39e;
  border-radius: 50%;
  box-sizing: border-box;
}

.bazi-entry-options button.active::before,
.bazi-entry-checks button.active::before {
  border-color: #0b7f59;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.3 8.2 6.4 11.3 12.8 4.7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 12px 12px no-repeat,
    #0b7f59;
}

.bazi-entry-flags {
  grid-template-columns: 1fr auto;
  min-height: 62px;
}

.bazi-entry-flags .bazi-entry-checks {
  justify-content: flex-start;
  gap: 10px 12px;
  min-width: 0;
  flex-wrap: wrap;
}

.bazi-reverse-btn {
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: #12bfa7;
  color: #fff;
  font-size: 14px;
  font-weight: 760;
  white-space: nowrap;
  box-shadow: 0 8px 16px rgba(18, 191, 167, 0.18);
}

.bazi-entry-primary,
.bazi-entry-secondary {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
  background: linear-gradient(180deg, #15c7b3, #0db59f);
  box-shadow: 0 10px 22px rgba(13, 181, 159, 0.18);
}

.bazi-entry-secondary {
  color: #fff;
}

@media (max-width: 430px) {
  .chart-tools-screen {
    padding: 12px 14px 92px;
  }

  .bazi-entry-row {
    grid-template-columns: 78px minmax(0, 1fr);
    min-height: 54px;
    padding: 0 12px;
  }

  .bazi-entry-row > span,
  .bazi-entry-row input,
  .bazi-entry-options button,
  .bazi-entry-checks button {
    font-size: 13px;
  }

  .bazi-entry-flags {
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 10px 12px;
  }

  .bazi-entry-flags .bazi-entry-checks {
    justify-content: flex-start;
  }

  .bazi-reverse-btn {
    width: fit-content;
    justify-self: end;
  }
}

.chart-tool-card {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 92px;
  padding: 16px;
  border: 1px solid rgba(18, 112, 77, 0.12);
  border-radius: 20px;
  background: rgba(255, 254, 250, 0.95);
  box-shadow: 0 14px 30px rgba(20, 88, 61, 0.08);
  color: #102820;
  text-align: left;
}

.chart-tool-card b {
  min-width: 54px;
  height: 34px;
  border-radius: 999px;
  background: #0b7f59;
  color: #fff;
  font-size: 13px;
  font-weight: 760;
  box-shadow: 0 10px 18px rgba(11, 127, 89, 0.2);
}

/* Course V2: scripted dialogue classroom. */
#screen-course.active,
#screen-course.screen-leaving {
  display: block;
}

#screen-course {
  min-height: 100%;
  padding: 24px 20px 104px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 88% 6%, rgba(16, 112, 76, 0.08), transparent 24%),
    linear-gradient(180deg, #fbfdfa 0%, #f4faf5 100%);
}

.course-v2-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.course-v2-page-head span,
.course-v2-method-v2 span,
.course-v2-question-card > span {
  display: inline-flex;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(11, 127, 89, 0.1);
  color: #0b7f59;
  font-size: 12px;
  font-weight: 760;
}

.course-v2-page-head h1 {
  margin: 10px 0 6px;
  color: #102820;
  font-size: 30px;
  line-height: 1.12;
  font-weight: 850;
  letter-spacing: 0;
}

.course-v2-page-head p,
.course-v2-detail-card p,
.course-v2-chapter-card em {
  margin: 0;
  color: #68766f;
  font-size: 14px;
  line-height: 1.55;
}

.course-v2-tabs {
  display: flex;
  gap: 10px;
  margin: 2px -20px 0 0;
  overflow-x: auto;
  padding-bottom: 2px;
}

.course-v2-tabs button {
  flex: 0 0 auto;
  min-width: 72px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 52, 39, 0.07);
  color: #64716b;
  font-size: 14px;
  font-weight: 700;
}

.course-v2-tabs button.active {
  background: #b8ff74;
  color: #102820;
  box-shadow: 0 10px 24px rgba(120, 210, 64, 0.28);
}

.course-v2-list {
  display: grid;
  gap: 14px;
}

.course-v2-card {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 118px;
  padding: 16px;
  border: 1px solid rgba(17, 111, 78, 0.1);
  border-radius: 22px;
  background: rgba(255, 255, 252, 0.96);
  box-shadow: 0 18px 40px rgba(28, 78, 55, 0.08);
}

.course-v2-thumb,
.course-v2-detail-thumb {
  display: grid;
  place-items: center;
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(11, 127, 89, 0.16), rgba(178, 128, 52, 0.12)),
    #f6fbf7;
  color: #0b7f59;
  font-size: 28px;
  font-weight: 850;
}

.course-v2-thumb {
  width: 74px;
  height: 74px;
}

.course-v2-card-main strong {
  display: block;
  color: #102820;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 820;
}

.course-v2-card-main p {
  margin: 7px 0 10px;
  color: #68766f;
  font-size: 13px;
  line-height: 1.35;
}

.course-v2-card-main span,
.course-v2-meta span {
  display: inline-flex;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(16, 112, 76, 0.08);
  color: #0b7f59;
  font-size: 12px;
  font-weight: 760;
}

.course-v2-card > button,
.course-v2-detail-actions button,
.course-v2-player-actions button.primary {
  border: 0;
  border-radius: 999px;
  background: #0b7f59;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(11, 127, 89, 0.22);
}

.course-v2-card > button {
  min-width: 58px;
  height: 42px;
}

.course-v2-nav-head,
.course-v2-player-head {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
}

.course-v2-nav-head button,
.course-v2-player-head button:first-child {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(18, 112, 77, 0.09);
  border-radius: 50%;
  background: #fff;
  color: #102820;
  font-size: 25px;
  box-shadow: 0 8px 18px rgba(19, 70, 46, 0.08);
}

.course-v2-nav-head h1,
.course-v2-player-head h1 {
  margin: 0;
  color: #102820;
  text-align: center;
  font-size: 22px;
  font-weight: 850;
}

.course-v2-nav-head span {
  justify-self: end;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(11, 127, 89, 0.09);
  color: #0b7f59;
  font-size: 12px;
  font-weight: 760;
}

.course-v2-detail-card,
.course-v2-chapter-card,
.course-v2-bazi-card,
.course-v2-question-card,
.course-v2-method-v2 {
  border: 1px solid rgba(17, 111, 78, 0.11);
  border-radius: 24px;
  background: rgba(255, 255, 252, 0.96);
  box-shadow: 0 16px 36px rgba(28, 78, 55, 0.08);
}

.course-v2-detail-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 16px;
  padding: 18px;
}

.course-v2-detail-thumb {
  width: 92px;
  height: 92px;
}

.course-v2-detail-card h2 {
  margin: 0 0 7px;
  color: #102820;
  font-size: 24px;
  font-weight: 850;
}

.course-v2-teacher {
  color: #0b7f59 !important;
  font-weight: 760;
}

.course-v2-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.course-v2-chapter-card {
  padding: 18px;
}

.course-v2-chapter-card header {
  margin-bottom: 10px;
}

.course-v2-chapter-card header b {
  display: block;
  margin-bottom: 5px;
  color: #102820;
  font-size: 20px;
  font-weight: 850;
}

.course-v2-lesson-row {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 0;
  border: 0;
  border-top: 1px solid rgba(18, 112, 77, 0.09);
  background: transparent;
  text-align: left;
}

.course-v2-lesson-row > strong {
  color: #102820;
  font-size: 24px;
  font-weight: 880;
}

.course-v2-lesson-row span b {
  display: block;
  color: #0b7f59;
  font-size: 17px;
  font-weight: 820;
  line-height: 1.25;
}

.course-v2-lesson-row span em {
  display: block;
  margin-top: 4px;
  font-style: normal;
}

.course-v2-lesson-row i {
  display: inline-grid;
  min-width: 48px;
  height: 30px;
  padding: 0 10px;
  place-items: center;
  border: 1px solid rgba(11, 127, 89, 0.25);
  border-radius: 999px;
  color: #0b7f59;
  font-style: normal;
  font-size: 13px;
  font-weight: 760;
}

.course-v2-lesson-row.in-progress i {
  background: rgba(11, 127, 89, 0.08);
  border-color: rgba(11, 127, 89, 0.26);
}

.course-v2-lesson-row.completed i {
  background: rgba(20, 52, 39, 0.06);
  border-color: rgba(20, 52, 39, 0.12);
  color: #68766f;
}

.course-v2-lesson-row.locked span b,
.course-v2-lesson-row.locked > strong {
  color: #9aa39e;
}

.course-v2-lesson-row.locked i {
  border-color: transparent;
  background: rgba(20, 52, 39, 0.08);
  color: #9aa39e;
}

.course-v2-detail-actions {
  margin-top: 22px;
}

.course-v2-detail-actions button {
  width: 100%;
  height: 54px;
}

.course-v2-player {
  padding-bottom: 86px;
}

.course-v2-player-head {
  grid-template-columns: 42px 42px 1fr 42px;
}

.course-v2-avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #e6f7ee, #f6efe1);
  color: #0b7f59;
  font-weight: 850;
}

.course-v2-player-head h1 {
  text-align: left;
  font-size: 19px;
}

.course-v2-player-head p {
  margin: 3px 0 0;
  color: #68766f;
  font-size: 12px;
}

.course-v2-player-head button:last-child {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(11, 127, 89, 0.1);
  color: #0b7f59;
  font-weight: 850;
}

.course-v2-dialogue {
  display: grid;
  gap: 14px;
}

.course-v2-bubble {
  width: fit-content;
  max-width: 88%;
  padding: 15px 16px;
  border-radius: 20px;
  color: #102820;
  font-size: 16px;
  line-height: 1.65;
}

.course-v2-bubble.teacher {
  justify-self: start;
  border-top-left-radius: 6px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(28, 78, 55, 0.08);
}

.course-v2-bubble.user {
  justify-self: end;
  min-width: 74px;
  text-align: center;
  border-top-right-radius: 6px;
  background: #b8ff74;
  font-weight: 850;
}

.course-v2-bubble.good {
  background: #f0fbf5;
}

.course-v2-bubble.warn {
  background: #fff7e8;
}

.course-v2-bubble p {
  margin: 0;
}

.course-v2-bubble button {
  margin-top: 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(11, 127, 89, 0.1);
  color: #0b7f59;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 760;
}

.course-v2-bazi-card {
  padding: 16px;
}

.course-v2-bazi-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.course-v2-bazi-card header strong {
  color: #102820;
  font-size: 17px;
  font-weight: 850;
}

.course-v2-bazi-card header span {
  color: #617168;
  font-size: 12px;
}

.course-v2-pillars,
.course-v2-fortune-row {
  display: grid;
  gap: 8px;
}

.course-v2-pillars {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.course-v2-pillars article,
.course-v2-fortune-row b {
  display: grid;
  place-items: center;
  min-height: 108px;
  border: 1px solid rgba(17, 111, 78, 0.12);
  border-radius: 16px;
  background: rgba(250, 252, 248, 0.95);
}

.course-v2-pillars article span,
.course-v2-fortune-row b {
  color: #77837d;
  font-size: 12px;
}

.course-v2-pillars article strong,
.course-v2-fortune-row em {
  color: #0b7f59;
  font-size: 28px;
  line-height: 0.95;
  font-weight: 850;
  font-style: normal;
}

.course-v2-pillars article em {
  color: #68766f;
  font-size: 12px;
  font-style: normal;
}

.course-v2-fortune-row {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 10px;
}

.course-v2-fortune-row b {
  min-height: 72px;
  font-weight: 700;
}

.course-v2-fortune-row em {
  display: block;
  margin-top: 4px;
  color: #b57b2e;
  font-size: 20px;
}

.course-v2-question-card,
.course-v2-method-v2 {
  padding: 16px;
}

.course-v2-question-card h2,
.course-v2-method-v2 h2 {
  margin: 10px 0 14px;
  color: #102820;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 850;
}

.course-v2-question-card button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(18, 112, 77, 0.12);
  border-radius: 16px;
  background: #fff;
  color: #33433c;
  text-align: left;
  font-size: 14px;
}

.course-v2-question-card button b {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  background: rgba(20, 52, 39, 0.08);
  color: #7a8580;
}

.course-v2-question-card button.selected {
  border-color: rgba(11, 127, 89, 0.32);
  background: #ecfbf4;
}

.course-v2-question-card button.selected b {
  background: #0b7f59;
  color: #fff;
}

.course-v2-method-v2 {
  background: linear-gradient(180deg, #fffdf6, #fff9ed);
  border-color: rgba(178, 128, 52, 0.2);
}

.course-v2-method-v2 ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: #43534b;
  font-size: 14px;
  line-height: 1.55;
}

.course-v2-method-v2 p {
  margin: 14px 0 0;
  padding: 11px 12px;
  border-left: 3px solid #b57b2e;
  border-radius: 12px;
  background: rgba(178, 128, 52, 0.09);
  color: #84531a;
  font-size: 14px;
  font-weight: 760;
}

.course-v2-player-actions {
  position: sticky;
  bottom: 78px;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 10px;
  margin-top: 6px;
}

.course-v2-player-actions button {
  height: 52px;
  border: 1px solid rgba(11, 127, 89, 0.17);
  border-radius: 999px;
  background: rgba(255, 255, 252, 0.96);
  color: #0b7f59;
  font-size: 15px;
  font-weight: 800;
}

@media (max-width: 390px) {
  #screen-course {
    padding-left: 16px;
    padding-right: 16px;
  }

  .course-v2-card {
    grid-template-columns: 62px 1fr auto;
    gap: 10px;
    padding: 14px;
  }

  .course-v2-thumb {
    width: 62px;
    height: 62px;
  }

  .course-v2-detail-card {
    grid-template-columns: 78px 1fr;
  }

  .course-v2-detail-thumb {
    width: 78px;
    height: 78px;
  }

  .course-v2-pillars article strong {
    font-size: 24px;
  }
}

/* Course V2 MVP overrides: guided script classroom. */
.course-v2-card-main i {
  display: block;
  width: min(170px, 100%);
  height: 5px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(20, 52, 39, 0.09);
}

.course-v2-card-main i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #0b7f59;
}

.course-v2-conclusion-card {
  padding: 16px;
  border: 1px solid rgba(178, 128, 52, 0.24);
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 10%, rgba(236, 196, 91, 0.18), transparent 32%),
    linear-gradient(180deg, #fffdf7, #fff8e9);
  box-shadow: 0 16px 36px rgba(124, 76, 18, 0.08);
}

.course-v2-conclusion-card span {
  display: inline-flex;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(178, 128, 52, 0.12);
  color: #9a631d;
  font-size: 12px;
  font-weight: 780;
}

.course-v2-conclusion-card h2 {
  margin: 10px 0 8px;
  color: #7a4b13;
  font-size: 21px;
  line-height: 1.35;
  font-weight: 860;
}

.course-v2-conclusion-card p {
  margin: 0;
  color: #4c3d2c;
  font-size: 15px;
  line-height: 1.65;
}

.course-v2-conclusion-card button {
  width: 100%;
  height: 44px;
  margin-top: 14px;
  border: 1px solid rgba(178, 128, 52, 0.26);
  border-radius: 999px;
  background: rgba(255, 255, 252, 0.9);
  color: #8d5a18;
  font-size: 14px;
  font-weight: 800;
}

.course-v2-player-head button.active,
.course-v2-player-head button:last-child.active {
  background: #0b7f59;
  color: #fff;
  box-shadow: 0 10px 20px rgba(11, 127, 89, 0.2);
}

.course-v2-pillars article.element-fire strong {
  color: #F00808;
}

.course-v2-pillars article.element-earth strong {
  color: #986000;
}

.course-v2-pillars article.element-metal strong {
  color: #F8B808;
}

.course-v2-pillars article.element-water strong {
  color: #0048E0;
}

.course-v2-pillars article.element-wood strong {
  color: #109008;
}

/* Course V2 chat classroom: teacher-led dialogue, with cards as supporting inserts. */
.course-v2-chat-player {
  display: flex;
  height: 100%;
  min-height: 0;
  padding: 0 0 0;
  flex-direction: column;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfa 58%, #f4f8f5 100%);
}

#screen-course.active:has(.course-v2-chat-player),
#screen-course.screen-leaving:has(.course-v2-chat-player) {
  padding: 0 !important;
  overflow: hidden !important;
}

.course-v2-chat-head {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 64px;
  align-items: start;
  gap: 8px;
  min-height: 212px;
  margin: 0;
  padding: max(12px, var(--h5-safe-top)) 18px 0;
  border-bottom: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  transition: min-height 0.22s ease, padding 0.22s ease;
  contain: layout paint style;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.course-v2-chat-head.is-collapsed {
  min-height: 76px;
  padding-bottom: 8px;
}

.course-v2-head-settings {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  color: #101812;
  box-shadow: none;
}

.course-v2-head-back {
  position: relative;
  z-index: 3;
  grid-column: 1;
  grid-row: 1;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.86);
  color: #102820;
  box-shadow: none;
  font-size: 26px;
  font-weight: 780;
}

.course-v2-head-tools {
  position: relative;
  z-index: 3;
  grid-column: 3;
  grid-row: 1;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.course-v2-head-mute,
.course-v2-head-settings {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.86);
}

.course-v2-head-mute svg,
.course-v2-head-settings svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.course-v2-head-mute {
  color: #03d32f;
}

.course-v2-head-mute .mute-slash {
  display: none;
}

.course-v2-head-mute.is-muted {
  color: #9aa39e;
}

.course-v2-head-mute.is-muted .sound-wave {
  display: none;
}

.course-v2-head-mute.is-muted .mute-slash {
  display: block;
}

.course-v2-teacher-video-wrap {
  position: relative;
  z-index: 1;
  grid-column: 1 / -1;
  grid-row: 1;
  width: calc(100% + 36px);
  height: 212px;
  justify-self: center;
  align-self: start;
  margin: -12px -18px 0;
  overflow: visible;
  transition: width 0.22s ease, height 0.22s ease;
  contain: layout paint style;
  isolation: isolate;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

.course-v2-chat-head.is-collapsed .course-v2-teacher-video-wrap {
  grid-column: 2;
  width: 58px;
  height: 58px;
  margin: 0;
  overflow: visible;
  border-radius: 50%;
  box-shadow: 0 8px 20px rgba(20, 52, 39, 0.1);
}

.course-v2-chat-head.is-collapsed .course-v2-teacher-video {
  border-radius: 50%;
}

.course-v2-teacher-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  background: #fff;
  opacity: 0;
  transition: opacity 0.45s ease;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: opacity;
}

.course-v2-teacher-video-waiting {
  opacity: 1;
}

.course-v2-chat-head.is-speaking .course-v2-teacher-video-waiting {
  opacity: 0;
}

.course-v2-chat-head.is-speaking .course-v2-teacher-video-speaking {
  opacity: 1;
}

/* 20260717zzd 甲师兄视频下缘白色渐变已删（晨哥拍板：视频直接见底，不再叠白色淡出） */

.course-v2-teacher-video-wrap figcaption {
  display: none;
}

.course-v2-video-collapse {
  position: absolute;
  z-index: 4;
  right: 18px;
  bottom: 14px;
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #101812;
  font-size: 16px;
  line-height: 1;
  font-weight: 850;
}

.course-v2-chat-head.is-collapsed .course-v2-video-collapse {
  right: -5px;
  bottom: -4px;
  width: 23px;
  height: 23px;
  font-size: 16px;
  z-index: 6;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 4px 12px rgba(20, 52, 39, 0.12);
}

.course-v2-chat-stream {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  margin-top: -20px;
  padding: 0 14px 14px;
  box-sizing: border-box;
  scrollbar-width: none;
}

.course-v2-chat-stream::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Course player mobile entry: show lesson content immediately, without the video loading poster. */
.course-v2-chat-head.is-collapsed {
  min-height: 58px;
  padding: max(10px, var(--h5-safe-top)) 18px 6px;
  align-items: center;
  border-bottom: 1px solid rgba(23, 111, 82, 0.08);
}

.course-v2-chat-head.is-collapsed .course-v2-head-back,
.course-v2-chat-head.is-collapsed .course-v2-head-tools {
  align-self: center;
}

.course-v2-chat-head.is-collapsed + .course-v2-chat-stream {
  margin-top: 0;
}

.course-v2-chat-progress {
  /* 吸顶：通栏实底容器，上滑内容不从缝里透出来 */
  position: sticky;
  top: 0;
  z-index: 5;
  flex: 0 0 auto;
  height: auto;
  padding: 10px 0 8px;
  margin: 0 0 6px;
  border-radius: 0;
  background: #FBF6EA;
  overflow: visible;
  box-shadow: none;
}

.course-v2-chat-progress span {
  position: absolute;
  right: 0;
  bottom: 8px;
  color: #0b7f59;
  font-size: 11px;
  font-weight: 800;
}

.course-v2-chat-progress b {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #0b7f59, #19a56d);
}

.course-v2-chat-message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.course-v2-chat-message.user {
  justify-content: flex-end;
}

.course-v2-chat-message.user .course-v2-message-body {
  max-width: 78%;
  padding: 10px 14px;
  border-top-right-radius: 6px;
  background: #bdfc7a;
  color: #102820;
  box-shadow: none;
}

.course-v2-message-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: min(410px, 92%);
  padding: 12px 14px;
  border-radius: 16px;
  border-top-left-radius: 6px;
  background: #f2f3f2;
  color: #111f1a;
  font-size: 16px;
  line-height: 1.62;
  letter-spacing: 0;
  box-shadow: none;
}

.course-v2-message-body p {
  width: 100%;
  margin: 0;
}

.course-v2-message-body p + p {
  margin-top: 9px;
}

.course-v2-message-body strong {
  font-weight: 780;
}

.course-v2-message-typing {
  display: inline-flex;
  width: auto;
  min-width: 72px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
}

.course-v2-message-typing .typing-dots {
  display: inline-flex;
}

.course-v2-message-body.good {
  background: #f0fbf5;
}

.course-v2-message-body.warn {
  background: #fff8ea;
}

.course-v2-message-tools {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.course-v2-message-tools button {
  display: inline-flex;
  height: 26px;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(11, 127, 89, 0.1);
  color: #0b7f59;
  font-size: 11px;
  font-weight: 800;
}

.course-v2-bubble-actions {
  position: static;
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
  padding-top: 2px;
}

.course-v2-bubble-icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.course-v2-bubble-icons button {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.course-v2-bubble-icons button:active,
.course-v2-bubble-next:active {
  transform: scale(0.96);
}

.course-v2-bubble-icons img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  pointer-events: none;
}

.course-v2-bubble-next {
  display: inline-flex;
  min-width: 48px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(11, 127, 89, 0.1);
  color: #0b7f59;
  font-size: 12px;
  font-weight: 780;
  box-shadow: none;
}

.course-v2-chat-message.with-card .course-v2-message-body {
  width: min(410px, 100%);
  max-width: 100%;
}

.course-v2-chat-player .course-v2-bazi-card,
.course-v2-chat-player .course-v2-question-card,
.course-v2-chat-player .course-v2-method-v2,
.course-v2-chat-player .course-v2-conclusion-card {
  width: 100%;
  margin-top: 14px;
  border-radius: 18px;
  box-shadow: none;
}

.course-v2-chat-player .course-v2-bazi-card {
  background: rgba(255, 255, 255, 0.92);
}

.course-v2-chat-player .course-v2-bazi-card header strong {
  font-size: 15px;
}

.course-v2-lesson-visual {
  position: relative;
  width: 100%;
  margin: 12px 0 2px;
  overflow: hidden;
  border: 1px solid rgba(20, 52, 39, 0.08);
  border-radius: 15px;
  background: #f8f4ea;
  cursor: zoom-in;
}

.course-v2-lesson-visual:focus-visible {
  outline: 2px solid #087d5b;
  outline-offset: 2px;
}

.course-v2-lesson-visual.overview {
  aspect-ratio: auto;
}

.course-v2-lesson-visual img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.course-v2-lesson-visual figcaption {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: #143427;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 720;
  letter-spacing: 0;
  box-shadow: 0 6px 18px rgba(20, 52, 39, 0.08);
}

.course-v2-image-preview {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 18px;
  background: rgba(4, 14, 11, 0.9);
  backdrop-filter: blur(6px);
}

.course-v2-image-preview-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
}

.course-v2-image-preview-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 24px;
  line-height: 1;
}

.course-v2-image-preview-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(92vw, 720px);
  max-height: 84vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.course-v2-image-preview-viewport {
  width: 100%;
  max-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  touch-action: none;
  cursor: zoom-in;
}

.course-v2-image-preview-viewport.is-zoomed {
  cursor: grab;
}

.course-v2-image-preview-stage img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: 12px;
  background: #fff;
  object-fit: contain;
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.32);
  transform-origin: center center;
  transition: transform 0.12s ease-out;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

.course-v2-image-preview-stage p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}

.course-v2-chat-player .course-v2-pillars,
.course-v2-chat-player .course-v2-fortune-row {
  gap: 6px;
}

.course-v2-chat-player .course-v2-pillars article {
  min-height: 92px;
  border-radius: 14px;
}

.course-v2-chat-player .course-v2-pillars article strong {
  font-size: 23px;
}

.course-v2-chat-player .course-v2-fortune-row b {
  min-height: 60px;
  border-radius: 13px;
  font-size: 11px;
}

.course-v2-chat-player .course-v2-fortune-row em {
  display: block;
  font-size: 17px;
  line-height: 1.05;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.course-v2-chat-question-card {
  background: rgba(255, 255, 255, 0.94);
}

.course-v2-chat-question-card h2 {
  font-size: 17px;
}

.course-v2-chat-question-card button {
  min-height: 44px;
  border-radius: 14px;
  font-size: 13px;
}

.course-v2-check-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(78%, 300px);
  margin-left: auto;
  gap: 6px;
  padding: 9px 12px;
  border: 1px solid rgba(20, 52, 39, 0.08);
  border-radius: 999px;
  background: #fff;
  color: #8b9691;
  font-size: 12px;
  box-shadow: 0 10px 24px rgba(20, 52, 39, 0.06);
}

.course-v2-check-strip b {
  color: #20bd58;
}

.course-v2-chat-input {
  position: sticky;
  bottom: 76px;
  z-index: 9;
  display: grid;
  gap: 9px;
  margin-top: 18px;
  padding: 12px;
  border: 1px solid rgba(20, 52, 39, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -8px 30px rgba(20, 52, 39, 0.08);
  backdrop-filter: blur(16px);
}

.course-v2-input-card {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  color: #102820;
  text-align: left;
}

.course-v2-input-card span {
  color: #0b7f59;
  font-size: 13px;
  font-weight: 850;
}

.course-v2-input-card strong {
  font-size: 16px;
  line-height: 1.35;
}

.course-v2-input-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.course-v2-input-actions button {
  height: 40px;
  border: 1px solid rgba(11, 127, 89, 0.16);
  border-radius: 999px;
  background: #0b7f59;
  color: #fff;
  font-size: 14px;
  font-weight: 820;
}

.course-v2-input-actions button:first-child {
  background: #fff;
  color: #0b7f59;
}

.course-v2-composer {
  position: relative;
  z-index: 10;
  display: block;
  flex: 0 0 auto;
  margin: 0;
  padding: 9px 14px 8px;
  border-top: 1px solid rgba(20, 52, 39, 0.06);
  background: rgba(248, 251, 248, 0.98);
  box-shadow: 0 -10px 28px rgba(20, 52, 39, 0.06);
  backdrop-filter: blur(16px);
}

.course-v2-composer-card {
  overflow: hidden;
  border: 1px solid rgba(20, 52, 39, 0.08);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(20, 52, 39, 0.08);
}

.course-v2-composer-voice-row,
.course-v2-composer-text-row {
  display: grid;
  align-items: center;
}

.course-v2-composer-voice-row {
  grid-template-columns: 36px 1fr 30px;
  gap: 6px;
  min-height: 50px;
  padding: 0 13px;
}

.course-v2-composer-voice-main,
.course-v2-composer-mic,
.course-v2-composer-keyboard,
.course-v2-composer-send {
  border: 0;
  background: transparent;
}

.course-v2-composer-voice-main {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  color: #080f0b;
  min-width: 0;
}

.course-v2-composer-voice-main.is-listening {
  color: #087f5b;
}

.course-v2-composer-voice-main svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.course-v2-composer-voice-main b {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 17px;
  font-weight: 820;
  letter-spacing: 0;
}

.course-v2-composer-mic,
.course-v2-composer-keyboard {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #101812;
}

.course-v2-composer-mic svg,
.course-v2-composer-keyboard svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.course-v2-composer-hint {
  margin: 0 0 7px;
  color: rgba(20, 52, 39, 0.36);
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  font-weight: 520;
}

.course-v2-composer-text-row {
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  gap: 6px;
  min-height: 50px;
  padding: 0 13px;
}

.course-v2-composer-input {
  width: 100%;
  min-width: 0;
  height: 40px;
  border: 0;
  outline: none;
  background: transparent;
  color: #102820;
  font-size: 17px;
  line-height: 40px;
  font-weight: 500;
}

.course-v2-composer-input::placeholder {
  color: rgba(20, 52, 39, 0.42);
}

.course-v2-composer-send {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: #adff75;
  color: #08130d;
  box-shadow: 0 8px 20px rgba(88, 202, 85, 0.2);
}

.course-v2-composer-send svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.course-v2-ai-disclaimer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0 0;
  color: rgba(20, 52, 39, 0.28);
  font-size: 12px;
  line-height: 1;
}

.course-v2-ai-disclaimer span {
  display: none;
}

.course-v2-ai-disclaimer em {
  font-style: normal;
  white-space: nowrap;
}

.course-v2-chat-question-card button.pending {
  border-color: rgba(11, 127, 89, 0.42);
  background: rgba(11, 127, 89, 0.09);
  box-shadow: inset 0 0 0 1px rgba(11, 127, 89, 0.12);
}

.course-v2-chat-question-card button:disabled {
  cursor: default;
}

.course-v2-answer-confirm {
  display: flex;
  width: 100%;
  height: 40px;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  border: 0;
  border-radius: 999px;
  background: #0b7f59;
  color: #fff;
  font-size: 14px;
  font-weight: 820;
}

.course-v2-answer-confirm:disabled {
  background: rgba(11, 127, 89, 0.22);
  color: rgba(255, 255, 255, 0.82);
}

.course-v2-answer-confirm:not(:disabled) {
  background: #0b7f59;
  color: #fff;
}

.course-v2-settings-page {
  min-height: 100%;
  padding: 0 0 28px;
  background: #f6f6f6;
  overflow-y: auto;
}

.course-v2-settings-head {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  min-height: 68px;
  padding: 7px 18px 9px;
  background: #fff;
}

.course-v2-settings-head button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #101312;
  font-size: 28px;
  line-height: 1;
  font-weight: 640;
}

.course-v2-settings-head h1 {
  margin: 0;
  color: #101312;
  font-size: 21px;
  line-height: 1.2;
  font-weight: 850;
  text-align: center;
}

.course-v2-settings-card {
  margin: 14px 0 0;
  padding: 22px 20px 22px;
  border-radius: 22px;
  background: #fff;
}

.course-v2-settings-card > p {
  margin: 0 0 22px;
  color: #9da3a0;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 620;
}

.course-v2-setting-row {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
}

.course-v2-setting-row + .course-v2-setting-row {
  margin-top: 16px;
}

.course-v2-setting-row strong,
.course-v2-setting-title {
  color: #111513;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 850;
}

.course-v2-setting-value {
  display: inline-flex;
  min-width: 128px;
  min-height: 38px;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  border: 0;
  background: transparent;
  color: #151a17;
  font-size: 16px;
  font-weight: 720;
}

.course-v2-setting-value b {
  color: #6f7772;
  font-size: 16px;
}

.course-v2-setting-static {
  color: #222824;
  font-size: 16px;
  font-weight: 720;
}

.course-v2-voice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0 4px;
}

.course-v2-voice-list.collapsed {
  display: none;
}

.course-v2-voice-list button {
  position: relative;
  min-height: 40px;
  border: 1px solid rgba(20, 52, 39, 0.1);
  border-radius: 12px;
  background: #fbfcfa;
  color: #26312c;
  text-align: left;
  padding: 7px 32px 7px 10px;
}

.course-v2-voice-list button span {
  display: inline-flex;
  margin-right: 6px;
  color: #0b7f59;
  font-size: 11px;
  font-weight: 820;
}

.course-v2-voice-list button strong {
  color: inherit;
  font-size: 13px;
  font-weight: 780;
}

.course-v2-voice-check {
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: #02c849;
  font-size: 19px;
  line-height: 1;
  font-style: normal;
  font-weight: 900;
}

.course-v2-voice-list button.active {
  border-color: rgba(11, 127, 89, 0.34);
  background: rgba(11, 127, 89, 0.09);
  color: #0b7f59;
}

.course-v2-speed-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  gap: 8px;
  margin: 20px 0 16px;
}

.course-v2-speed-track button {
  display: grid;
  justify-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: #c6cbc8;
  font-size: 13px;
  font-weight: 760;
}

.course-v2-speed-track i {
  width: 6px;
  height: 24px;
  border-radius: 999px;
  background: #e7e9e8;
}

.course-v2-speed-track button.active {
  color: #02c849;
}

.course-v2-speed-track button.active i {
  height: 36px;
  background: #02c849;
}

.course-v2-setting-switch-row {
  margin-top: 20px;
}

.course-v2-switch {
  position: relative;
  width: 70px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: #e8e8e8;
  padding: 3px;
}

.course-v2-switch i {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  transition: transform 0.18s ease;
}

.course-v2-switch.active {
  background: #02c849;
}

.course-v2-switch.active i {
  transform: translateX(30px);
}

.course-v2-settings-save {
  width: calc(100% - 28px);
  min-height: 64px;
  margin: 86px 14px 0;
  border: 0;
  border-radius: 999px;
  background: #02cf45;
  color: #fff;
  font-size: 22px;
  font-weight: 780;
  box-shadow: 0 10px 26px rgba(2, 207, 69, 0.18);
}

@media (max-width: 390px) {
  .course-v2-message-body {
    max-width: min(100%, 92%);
    padding: 11px 13px;
    font-size: 15px;
  }

  .course-v2-chat-message.with-card .course-v2-message-body {
    max-width: 100%;
  }

  .course-v2-chat-player .course-v2-pillars article strong {
    font-size: 21px;
  }
}

/* 八字排盘内页密度修正：只收窄该二级页，避免参考图大号表单贴边。 */
#screen-chart-tools.chart-tools-screen {
  padding: 16px 20px 96px;
  overflow-y: auto;
  align-items: stretch;
  background: linear-gradient(180deg, #fffefd 0%, #f8fbf7 100%);
}

#screen-chart-tools .chart-tools-top {
  width: min(100%, 392px);
  min-height: 46px;
  margin: 0 auto 14px;
  display: grid;
  grid-template-columns: 42px 1fr 52px;
  align-items: center;
  gap: 8px;
}

#screen-chart-tools .chart-tools-top strong {
  text-align: center;
  font-size: 18px;
  font-weight: 820;
}

#screen-chart-tools .chart-tools-top .text-link-btn {
  justify-self: end;
  color: var(--jade);
  font-size: 13px;
  font-weight: 780;
}

#screen-chart-tools .bazi-entry-page {
  width: min(360px, calc(100% - 28px));
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

#screen-chart-tools .bazi-entry-card {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: var(--card-shadow);
  overflow: visible;
}

#screen-chart-tools .bazi-entry-row {
  min-height: 46px;
  padding: 0;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid rgba(23, 111, 82, 0.08);
}

#screen-chart-tools .bazi-entry-row > span {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 760;
  color: var(--muted);
  white-space: nowrap;
}

#screen-chart-tools .bazi-entry-row input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(23, 111, 82, 0.13);
  border-radius: 14px;
  background: #fffdf8;
  color: var(--ink);
  text-align: left;
  font-size: 14px;
  font-weight: 650;
}

#screen-chart-tools [data-bazi-tools-place-row][hidden] {
  display: none !important;
}

#screen-chart-tools .bazi-entry-row input::placeholder {
  color: rgba(84, 96, 90, 0.52);
  font-weight: 500;
}

#screen-chart-tools .bazi-entry-options,
#screen-chart-tools .bazi-entry-checks {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 13px;
  flex-wrap: wrap;
}

#screen-chart-tools .bazi-entry-options button,
#screen-chart-tools .bazi-entry-checks button {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0;
  gap: 7px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  line-height: 1;
  font-weight: 720;
}

#screen-chart-tools .bazi-entry-options button::before,
#screen-chart-tools .bazi-entry-checks button::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid rgba(28, 39, 34, 0.42);
  border-radius: 999px;
  box-sizing: border-box;
}

#screen-chart-tools .bazi-entry-options button.active::before,
#screen-chart-tools .bazi-entry-checks button.active::before {
  border-color: var(--jade);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.3 8.2 6.4 11.3 12.8 4.7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      center / 13px 13px no-repeat,
    var(--jade);
}

#screen-chart-tools .bazi-entry-flags {
  grid-template-columns: 1fr auto;
  min-height: 54px;
  padding-block: 8px;
}

#screen-chart-tools .bazi-entry-flags .bazi-entry-checks {
  justify-content: flex-start;
  gap: 10px 12px;
}

#screen-chart-tools .bazi-reverse-btn {
  height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #208260, var(--jade-deep));
  color: #fff;
  font-size: 13px;
  font-weight: 820;
  box-shadow: 0 10px 22px rgba(23, 111, 82, 0.16);
}

#screen-chart-tools .bazi-entry-primary,
#screen-chart-tools .bazi-entry-secondary {
  width: 100%;
  min-height: 42px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 820;
}

#screen-chart-tools .bazi-entry-primary {
  border: 0;
  background: linear-gradient(180deg, #208260, var(--jade-deep));
  color: #fff;
  box-shadow: 0 10px 22px rgba(23, 111, 82, 0.18);
}

#screen-chart-tools .bazi-entry-secondary {
  border: 1px solid rgba(23, 111, 82, 0.16);
  background: rgba(255, 255, 255, 0.82);
  color: var(--jade);
  box-shadow: none;
}

@media (max-width: 430px) {
  #screen-chart-tools.chart-tools-screen {
    padding: 14px 0 92px;
  }

  #screen-chart-tools .chart-tools-top,
  #screen-chart-tools .bazi-entry-page {
    width: min(360px, calc(100% - 28px));
    max-width: none;
  }

  #screen-chart-tools .bazi-entry-row {
    grid-template-columns: 80px minmax(0, 1fr);
    min-height: 48px;
  }

  #screen-chart-tools .bazi-entry-row > span,
  #screen-chart-tools .bazi-entry-row input,
  #screen-chart-tools .bazi-entry-options button,
  #screen-chart-tools .bazi-entry-checks button {
    font-size: 13px;
  }

  #screen-chart-tools .bazi-entry-flags {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
}

/* 八字排盘二级页安全边距：覆盖旧的满宽移动端规则，避免卡片和按钮贴住屏幕边。 */
#screen-chart-tools .chart-tools-top,
#screen-chart-tools .bazi-entry-page {
  width: min(360px, calc(100% - 28px));
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

#screen-chart-tools .bazi-entry-primary,
#screen-chart-tools .bazi-entry-secondary {
  width: 100%;
}

@media (max-width: 370px) {
  #screen-chart-tools .chart-tools-top,
  #screen-chart-tools .bazi-entry-page {
    width: min(332px, calc(100% - 24px));
  }

  #screen-chart-tools .bazi-entry-card {
    padding: 12px;
  }

  #screen-chart-tools .bazi-entry-row {
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 10px;
  }

  #screen-chart-tools .bazi-entry-flags .bazi-entry-checks {
    gap: 10px 11px;
  }
}

#screen-course-lab.course-lab-screen {
  overflow-y: auto;
  padding: 18px 18px 32px;
  background:
    radial-gradient(circle at 84% 5%, rgba(50, 150, 113, 0.08), transparent 28%),
    #f6faf7;
}

.phone:has(#screen-course-lab.active) > .tabbar {
  display: none !important;
}

.course-lab-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
  color: #10251d;
}

.course-lab-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 2px 18px;
}

.course-lab-head span,
.course-lab-panel h2,
.course-lab-issues h3 {
  display: block;
  color: rgba(16, 37, 29, 0.52);
  font-size: 12px;
  font-weight: 780;
}

.course-lab-head h1 {
  margin: 5px 0 7px;
  font-size: 28px;
  line-height: 1.1;
}

.course-lab-head p {
  max-width: 520px;
  margin: 0;
  color: rgba(16, 37, 29, 0.62);
  font-size: 13px;
  line-height: 1.7;
}

.course-lab-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.course-lab-head-actions em,
.course-lab-status {
  border-radius: 999px;
  background: rgba(21, 132, 94, 0.1);
  color: var(--jade);
  font-size: 12px;
  font-style: normal;
  font-weight: 820;
  padding: 8px 12px;
}

.course-lab-head button,
.course-lab-editor-top button {
  min-height: 34px;
  border: 1px solid rgba(21, 132, 94, 0.16);
  border-radius: 999px;
  background: #fff;
  color: var(--jade);
  font-size: 13px;
  font-weight: 800;
  padding: 0 14px;
}

.course-lab-editor-top button.primary {
  border-color: transparent;
  background: var(--jade);
  color: #fff;
}

.course-lab-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.course-lab-metrics article,
.course-lab-panel {
  border: 1px solid rgba(30, 92, 70, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 32px rgba(24, 92, 65, 0.06);
}

.course-lab-metrics article {
  padding: 14px 16px;
}

.course-lab-metrics strong {
  display: block;
  font-size: 24px;
  line-height: 1;
}

.course-lab-metrics span {
  display: block;
  margin-top: 6px;
  color: rgba(16, 37, 29, 0.54);
  font-size: 12px;
}

.course-lab-metrics .warn strong {
  color: #a46b0c;
}

.course-lab-production {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(180px, 1fr));
  gap: 12px;
  margin: 0 0 12px;
}

.course-lab-production-card {
  display: grid;
  align-content: start;
  gap: 10px;
  border: 1px solid rgba(30, 92, 70, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 32px rgba(24, 92, 65, 0.05);
  padding: 14px;
}

.course-lab-production-card header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.course-lab-production-card header b {
  color: #10251d;
  font-size: 14px;
}

.course-lab-production-card header span,
.course-lab-production-card p,
.course-lab-production-card li {
  color: rgba(16, 37, 29, 0.58);
  font-size: 12px;
  line-height: 1.6;
}

.course-lab-production-card p,
.course-lab-production-card ul {
  margin: 0;
}

.course-lab-production-card ul {
  padding-left: 16px;
}

.course-lab-production-card button,
.course-lab-inline-action {
  width: max-content;
  min-height: 32px;
  border: 1px solid rgba(21, 132, 94, 0.18);
  border-radius: 999px;
  background: #fff;
  color: var(--jade);
  font-size: 12px;
  font-weight: 820;
  padding: 0 12px;
}

.course-lab-production-card button.primary {
  border-color: transparent;
  background: var(--jade);
  color: #fff;
}

.course-lab-production-card button:disabled {
  opacity: 0.55;
}

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

.course-lab-mini-grid label {
  display: grid;
  gap: 5px;
}

.course-lab-mini-grid span,
.course-lab-field.compact span {
  color: rgba(16, 37, 29, 0.58);
  font-size: 11px;
  font-weight: 760;
}

.course-lab-mini-grid input,
.course-lab-field.compact textarea {
  width: 100%;
  border: 1px solid rgba(16, 37, 29, 0.1);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.94);
  color: #10251d;
  font: inherit;
  font-size: 12px;
  line-height: 1.55;
  outline: none;
  padding: 8px 10px;
}

.course-lab-review-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.course-lab-grid {
  display: grid;
  grid-template-columns: 190px 220px minmax(320px, 1fr) 280px;
  gap: 12px;
  align-items: start;
}

.course-lab-panel {
  padding: 14px;
}

.course-lab-courses,
.course-lab-lessons,
.course-lab-blocks {
  display: grid;
  gap: 8px;
}

.course-lab-list-main,
.course-lab-blocks button {
  width: 100%;
  border: 1px solid rgba(16, 37, 29, 0.08);
  border-radius: 12px;
  background: #fff;
  color: #10251d;
  text-align: left;
  padding: 10px 11px;
}

.course-lab-blocks button {
  position: relative;
  min-height: 50px;
  padding-right: 34px;
}

.course-lab-block-title {
  display: block;
  padding-right: 8px;
}

.course-lab-block-indicators {
  position: absolute;
  right: 9px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}

.course-lab-block-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.88);
}

.course-lab-dot-image {
  background: #16875f;
}

.course-lab-dot-question {
  background: #e7b641;
}

.course-lab-dot-summary {
  background: #d9574d;
}

.course-lab-list-main.active,
.course-lab-blocks button.active {
  border-color: rgba(21, 132, 94, 0.35);
  background: rgba(21, 132, 94, 0.08);
}

.course-lab-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
  align-items: stretch;
}

.course-lab-edit-btn {
  width: 48px;
  border: 1px solid rgba(21, 132, 94, 0.18);
  border-radius: 12px;
  background: rgba(21, 132, 94, 0.06);
  color: var(--jade);
  font-size: 12px;
  font-weight: 820;
  text-align: center;
}

.course-lab-edit-btn:active {
  transform: translateY(1px);
}

.course-lab-courses strong,
.course-lab-lessons span {
  display: block;
  font-size: 13px;
  line-height: 1.45;
}

.course-lab-courses span,
.course-lab-lessons b,
.course-lab-blocks button {
  color: rgba(16, 37, 29, 0.58);
  font-size: 12px;
}

.course-lab-editor-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.course-lab-editor-top h2 {
  margin: 0;
  font-size: 18px;
}

.course-lab-editor-top div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.course-lab-blocks {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 14px;
}

.course-lab-block-editor {
  display: grid;
  gap: 10px;
}

.course-lab-block-editor header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(16, 37, 29, 0.6);
  font-size: 12px;
}

.course-lab-block-editor header span {
  border-radius: 999px;
  background: rgba(21, 132, 94, 0.1);
  color: var(--jade);
  font-weight: 820;
  padding: 5px 9px;
}

.course-lab-ai-actions {
  display: grid;
  gap: 7px;
  border: 1px solid rgba(21, 132, 94, 0.14);
  border-radius: 14px;
  background: rgba(21, 132, 94, 0.05);
  padding: 12px;
}

.course-lab-ai-actions div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.course-lab-ai-actions label {
  display: grid;
  gap: 6px;
}

.course-lab-ai-actions label span {
  color: rgba(16, 37, 29, 0.62);
  font-size: 12px;
  font-weight: 760;
}

.course-lab-ai-actions textarea {
  width: 100%;
  min-height: 76px;
  border: 1px solid rgba(21, 132, 94, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: #10251d;
  font: inherit;
  font-size: 13px;
  line-height: 1.6;
  outline: none;
  padding: 10px 12px;
  resize: vertical;
}

.course-lab-ai-actions textarea:focus {
  border-color: rgba(21, 132, 94, 0.46);
  box-shadow: 0 0 0 3px rgba(21, 132, 94, 0.08);
}

.course-lab-ai-actions button {
  width: max-content;
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: var(--jade);
  color: #fff;
  font-size: 13px;
  font-weight: 820;
  padding: 0 14px;
}

.course-lab-ai-actions button.ghost {
  border: 1px solid rgba(21, 132, 94, 0.22);
  background: #fff;
  color: var(--jade);
}

.course-lab-ai-actions button:disabled {
  background: rgba(21, 132, 94, 0.34);
}

.course-lab-ai-actions p {
  margin: 0;
  color: rgba(16, 37, 29, 0.58);
  font-size: 12px;
  line-height: 1.6;
}

.course-lab-field {
  display: grid;
  gap: 6px;
}

.course-lab-field span {
  color: rgba(16, 37, 29, 0.6);
  font-size: 12px;
  font-weight: 760;
}

.course-lab-field input,
.course-lab-field textarea {
  width: 100%;
  border: 1px solid rgba(16, 37, 29, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: #10251d;
  font: inherit;
  font-size: 14px;
  line-height: 1.65;
  padding: 10px 12px;
  resize: vertical;
  outline: none;
}

.course-lab-field input:focus,
.course-lab-field textarea:focus {
  border-color: rgba(21, 132, 94, 0.46);
  box-shadow: 0 0 0 3px rgba(21, 132, 94, 0.08);
}

.course-lab-insert-editor {
  display: grid;
  gap: 10px;
  border-top: 1px solid rgba(16, 37, 29, 0.08);
  padding-top: 10px;
}

.course-lab-insert-editor h3 {
  margin: 0;
  color: #10251d;
  font-size: 13px;
  font-weight: 820;
}

.course-lab-image-editor {
  display: grid;
  gap: 7px;
}

.course-lab-image-editor > span {
  color: rgba(16, 37, 29, 0.6);
  font-size: 12px;
  font-weight: 760;
}

.course-lab-image-picker {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 142px;
  border: 1px dashed rgba(21, 132, 94, 0.28);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(21, 132, 94, 0.06), rgba(255, 255, 255, 0.92));
  color: var(--jade);
  cursor: pointer;
}

.course-lab-image-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.course-lab-image-picker img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
}

.course-lab-image-picker b {
  color: var(--jade);
  font-size: 14px;
}

.course-lab-image-picker em {
  position: absolute;
  right: 10px;
  bottom: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: rgba(16, 37, 29, 0.64);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
  padding: 5px 8px;
}

.course-lab-image-editor small {
  color: rgba(16, 37, 29, 0.48);
  font-size: 11px;
}

.course-lab-editor-note,
.course-lab-issues p {
  margin: 0;
  color: rgba(16, 37, 29, 0.55);
  font-size: 12px;
  line-height: 1.7;
}

.course-lab-phone {
  overflow: hidden;
  border: 1px solid rgba(21, 132, 94, 0.12);
  border-radius: 20px;
  background: linear-gradient(180deg, #fff, #f8fbf8);
}

.course-lab-phone header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(16, 37, 29, 0.07);
  font-size: 13px;
}

.course-lab-phone-stream {
  display: grid;
  gap: 10px;
  max-height: 430px;
  overflow: auto;
  padding: 12px;
}

.course-lab-phone-stream article {
  border-radius: 14px;
  background: #f1f5f2;
  padding: 10px;
}

.course-lab-phone-stream article.quiz {
  background: #fff8ed;
}

.course-lab-phone-stream p {
  margin: 0;
  color: #10251d;
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.course-lab-phone-stream img {
  display: block;
  width: 100%;
  margin-top: 8px;
  border-radius: 10px;
}

.course-lab-issues {
  margin-top: 14px;
  border-top: 1px solid rgba(16, 37, 29, 0.07);
  padding-top: 12px;
}

@media (max-width: 980px) {
  .course-lab-production {
    grid-template-columns: 1fr;
  }

  .course-lab-grid {
    grid-template-columns: 1fr;
  }

  .course-lab-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  #screen-course-lab.course-lab-screen {
    padding: 14px 14px 28px;
  }

  .course-lab-head,
  .course-lab-editor-top {
    align-items: stretch;
    flex-direction: column;
  }

  .course-lab-head h1 {
    font-size: 24px;
  }

  .course-lab-mini-grid {
    grid-template-columns: 1fr;
  }
}

/* Homepage replica first-load guard: show the native home until the iframe is ready. */
#screen-chart .workbench-replica-host:not(.is-ready) {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  background: transparent !important;
}

#screen-chart .workbench-replica-host:not(.is-ready) + .chart-home.workbench-home {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  max-width: 720px !important;
  height: auto !important;
  min-height: auto !important;
  margin: 0 auto !important;
  padding: 18px max(18px, env(safe-area-inset-left)) 104px max(18px, env(safe-area-inset-right)) !important;
  overflow: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

#screen-chart .workbench-replica-host.is-ready + .chart-home.workbench-home {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  max-width: none !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: block !important;
  z-index: 0 !important;
}

/* Mobile App UI audit pass: safe areas, browser chrome pressure, and touch legibility. */
:root {
  --h5-safe-top: max(24px, var(--app-safe-top, 0px), env(safe-area-inset-top, 0px));
  --h5-safe-bottom: max(0px, var(--app-safe-bottom, 0px), env(safe-area-inset-bottom, 0px));
  --h5-tabbar-height: calc(72px + var(--h5-safe-bottom));
}

.stage {
  min-height: 100svh !important;
  height: 100dvh !important;
}

.phone,
.phone:has(#screen-chart.active),
.phone:has(#screen-chart.screen-leaving) {
  grid-template-rows: minmax(0, 1fr) var(--h5-tabbar-height) !important;
}

.phone.chart-detail-mode {
  grid-template-rows: minmax(0, 1fr) !important;
}

.phone.chart-detail-mode > .tabbar {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.phone > .tabbar,
.phone:has(#screen-chart.active) > .tabbar,
.phone:has(#screen-chart.screen-leaving) > .tabbar {
  height: var(--h5-tabbar-height) !important;
  min-height: var(--h5-tabbar-height) !important;
  padding-bottom: var(--h5-safe-bottom) !important;
  align-content: start !important;
}

#screen-chart .workbench-replica-host {
  --replica-scale: 0.5;
  --replica-width: 426.5px;
  --replica-height: 922px;
  --replica-offset: max(0px, calc((100% - var(--replica-width)) / 2));
  height: calc(var(--replica-height) + var(--h5-safe-top) + 12px) !important;
  min-height: calc(var(--replica-height) + var(--h5-safe-top) + 12px) !important;
  padding-top: var(--h5-safe-top) !important;
  overflow: hidden !important;
}

#screen-chart .workbench-replica-frame,
#screen-chart .workbench-click-layer {
  top: var(--h5-safe-top) !important;
}

#screen-chart .workbench-replica-frame {
  transform: scale(var(--replica-scale)) !important;
}

#screen-chart .workbench-click-layer {
  transform: scale(var(--replica-scale)) !important;
}

#screen-qimen-question.active,
#screen-qimen-question.screen-leaving {
  padding: calc(18px + var(--h5-safe-top)) 16px calc(96px + var(--h5-safe-bottom)) !important;
}

#screen-qimen-question .qimen-question-top {
  min-height: 46px !important;
  height: auto !important;
  margin-bottom: 12px !important;
}

#screen-qimen-question .qimen-question-top strong {
  font-size: 22px !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
}

#screen-qimen-question .qimen-mode-switch {
  min-height: 54px !important;
  padding: 4px !important;
}

#screen-qimen-question .qimen-mode-switch button {
  min-height: 44px !important;
  font-size: 16px !important;
}

#screen-qimen-question .qimen-question-form {
  border-radius: 18px !important;
}

#screen-qimen-question .qimen-question-form label,
#screen-qimen-question .qimen-form-row {
  min-height: 54px !important;
}

#screen-qimen-question .qimen-question-form label span,
#screen-qimen-question .qimen-form-row > span {
  font-size: 14px !important;
}

#screen-qimen-question .qimen-question-form input,
#screen-qimen-question .qimen-question-form select,
#screen-qimen-question .qimen-question-form textarea,
#screen-qimen-question .qimen-inline-options button {
  font-size: 16px !important;
}

.birth-picker-sheet {
  width: min(430px, calc(100% - 16px)) !important;
  max-height: min(88dvh, calc(100dvh - 20px)) !important;
  margin: auto auto max(0px, var(--h5-safe-bottom)) !important;
  overflow: hidden !important;
}

.birth-picker-panel {
  max-height: min(88dvh, calc(100dvh - 20px)) !important;
  display: flex !important;
  flex-direction: column !important;
}

.birth-picker-top {
  min-height: 72px !important;
  padding: 16px 18px 8px !important;
  grid-template-columns: 58px minmax(0, 1fr) 44px !important;
}

.birth-picker-tabs {
  height: 46px !important;
}

.birth-picker-tabs button {
  height: 38px !important;
  font-size: 17px !important;
}

.birth-picker-fields {
  padding: 4px 22px 12px !important;
  gap: 8px !important;
}

.birth-picker-fields input {
  padding: 7px 8px !important;
  font-size: 12px !important;
}

.birth-picker-options {
  min-height: 46px !important;
  padding: 0 14px 12px !important;
  flex-wrap: wrap !important;
  white-space: normal !important;
  row-gap: 6px !important;
}

.birth-picker-option-text {
  flex: 1 1 180px !important;
}

@media (max-width: 380px) {
  :root {
    --h5-safe-top: max(24px, var(--app-safe-top, 0px), env(safe-area-inset-top, 0px));
  }

  #screen-chart .workbench-replica-host {
    --replica-scale: 0.422;
    --replica-width: 360px;
    --replica-height: 779px;
  }

  #screen-qimen-question.active,
  #screen-qimen-question.screen-leaving {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .birth-picker-top {
    grid-template-columns: 50px minmax(0, 1fr) 40px !important;
    gap: 8px !important;
    padding: 14px 14px 6px !important;
  }

  .birth-picker-tabs button,
  .birth-picker-plain {
    font-size: 16px !important;
  }

  .birth-picker-fields {
    padding: 2px 16px 10px !important;
    gap: 6px !important;
  }

  .birth-picker-fields input {
    padding: 6px 7px !important;
  }
}

@media (min-width: 381px) and (max-width: 400px) {
  #screen-chart .workbench-replica-host {
    --replica-scale: 0.457;
    --replica-width: 390px;
    --replica-height: 843px;
  }
}

/* Mobile native home polish: avoid the scaled 853px replica on real phones. */
#screen-chart.active,
#screen-chart.screen-leaving {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(21, 129, 91, 0.08), transparent 34%),
    linear-gradient(180deg, #fcfefd 0%, #f6faf5 100%) !important;
}

#screen-chart .workbench-replica-host,
#screen-chart .workbench-replica-host.is-ready {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#screen-chart .workbench-replica-host + .chart-home.workbench-home,
#screen-chart .workbench-replica-host.is-ready + .chart-home.workbench-home {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  height: auto !important;
  min-height: calc(100dvh - var(--h5-tabbar-height)) !important;
  margin: 0 auto !important;
  padding: max(18px, var(--h5-safe-top)) 16px calc(var(--h5-tabbar-height) + var(--h5-safe-bottom) + 18px) !important;
  overflow: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  display: block !important;
  color: #071d14 !important;
  background:
    radial-gradient(circle at 82% 7%, rgba(85, 126, 99, 0.12), transparent 24%),
    radial-gradient(circle at 12% 0%, rgba(13, 118, 82, 0.08), transparent 32%),
    linear-gradient(180deg, #fcfefd 0%, #f6faf4 100%) !important;
}

#screen-chart .workbench-home::before {
  display: none !important;
}

#screen-chart .workbench-hero {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  min-height: auto !important;
  height: auto !important;
  padding: 0 0 14px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
}

#screen-chart .workbench-hero h1 {
  margin: 0 !important;
  font-size: 29px !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  color: #061c12 !important;
}

#screen-chart .workbench-hero p {
  margin: 8px 0 0 !important;
  font-size: 16px !important;
  line-height: 1.42 !important;
  color: #5f6a66 !important;
}

#screen-chart .workbench-hero em {
  width: 36px !important;
  height: 4px !important;
  margin-top: 10px !important;
  border-radius: 999px !important;
  background: #0b7854 !important;
}

#screen-chart .bamboo-watermark {
  display: block !important;
  top: -10px !important;
  right: -46px !important;
  width: 168px !important;
  height: 140px !important;
  opacity: 0.1 !important;
}

#screen-chart .study-overview-card {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  height: auto !important;
  min-height: 174px !important;
  border-radius: 14px !important;
  padding: 17px 18px 15px !important;
  display: grid !important;
  grid-template-columns: 90px minmax(0, 1fr) !important;
  gap: 16px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(219, 226, 218, 0.95) !important;
  box-shadow: 0 12px 28px rgba(23, 42, 35, 0.06) !important;
}

#screen-chart .study-ring {
  width: 88px !important;
  height: 88px !important;
  align-self: start !important;
  margin-top: 2px !important;
}

#screen-chart .study-ring circle {
  stroke-width: 7.8 !important;
}

#screen-chart .study-ring strong {
  font-size: 27px !important;
  line-height: 1 !important;
}

#screen-chart .study-ring strong span {
  font-size: 15px !important;
}

#screen-chart .study-ring small {
  margin-top: 35px !important;
  font-size: 12px !important;
}

#screen-chart .study-overview-main {
  min-width: 0 !important;
  padding-top: 0 !important;
}

#screen-chart .study-overview-main h2 {
  margin: 0 0 16px !important;
  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 760 !important;
  text-align: center !important;
}

#screen-chart .study-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#screen-chart .study-metrics article {
  min-width: 0 !important;
  min-height: 52px !important;
  padding: 0 10px !important;
}

#screen-chart .study-metrics article:first-child {
  padding-left: 0 !important;
}

#screen-chart .study-metrics strong {
  font-size: 25px !important;
  line-height: 1 !important;
}

#screen-chart .study-metrics strong span {
  font-size: 15px !important;
}

#screen-chart .study-metrics span {
  margin-top: 9px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  color: #7f8985 !important;
  white-space: nowrap !important;
}

#screen-chart .study-overview-card footer {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  gap: 9px 14px !important;
  padding-top: 13px !important;
  border-top: 1px solid rgba(224, 228, 221, 0.9) !important;
}

#screen-chart .study-overview-card footer p {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
}

#screen-chart .goal-progress {
  grid-column: 1 !important;
  height: 8px !important;
}

#screen-chart .study-overview-card footer > span {
  grid-column: 2 !important;
  font-size: 13px !important;
}

#screen-chart .quick-chart-panel {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  height: auto !important;
  margin: 14px 0 0 !important;
  border-radius: 14px !important;
  padding: 14px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(219, 226, 218, 0.95) !important;
  box-shadow: 0 12px 28px rgba(23, 42, 35, 0.06) !important;
}

#screen-chart .quick-chart-panel header {
  margin-bottom: 10px !important;
}

#screen-chart .quick-chart-panel h2 {
  gap: 9px !important;
  font-size: 19px !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
}

#screen-chart .quick-chart-panel header button,
#screen-chart .today-practice-card header button {
  min-height: 34px !important;
  padding: 0 !important;
  font-size: 15px !important;
  color: #66726d !important;
}

#screen-chart .quick-chart-form.home-birth-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 132px !important;
  gap: 9px !important;
}

#screen-chart .quick-chart-form.home-birth-form label {
  min-height: 47px !important;
  border-radius: 10px !important;
  padding: 0 12px !important;
}

#screen-chart .quick-chart-form.home-birth-form span {
  min-width: 42px !important;
  margin-right: 9px !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
}

#screen-chart .quick-chart-form.home-birth-form input {
  font-size: 15px !important;
  line-height: 1.25 !important;
}

#screen-chart .quick-gender-field {
  padding: 0 9px !important;
}

#screen-chart .quick-gender-field span {
  min-width: 28px !important;
  margin-right: 5px !important;
}

#screen-chart .quick-gender-field .gender-toggle {
  gap: 5px !important;
}

#screen-chart .quick-gender-field .gender-toggle button {
  min-width: 34px !important;
  height: 32px !important;
  font-size: 15px !important;
}

#screen-chart .quick-birth-field {
  grid-column: 1 / -1 !important;
}

#screen-chart .quick-birth-field svg {
  width: 22px !important;
  height: 22px !important;
  margin-left: 12px !important;
}

#screen-chart .home-main-action.workbench-primary {
  min-height: 48px !important;
  margin: 12px 0 9px !important;
  border-radius: 999px !important;
  font-size: 17px !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
  box-shadow: 0 14px 26px rgba(14, 115, 76, 0.22) !important;
}

#screen-chart .button-compass {
  width: 23px !important;
  height: 23px !important;
}

#screen-chart .quick-chart-panel > p {
  justify-content: flex-start !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

#screen-chart .quick-chart-panel > p i {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
}

#screen-chart .workbench-entry-grid {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  margin: 16px 0 0 !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#screen-chart .entry-card {
  min-height: 104px !important;
  height: auto !important;
  border-radius: 13px !important;
  padding: 13px 8px 11px !important;
  gap: 8px !important;
}

#screen-chart .entry-card.entry-review,
#screen-chart .entry-card.entry-library {
  min-height: 68px !important;
  height: auto !important;
  padding: 12px 14px !important;
  gap: 12px !important;
}

#screen-chart .workbench-entry-grid .entry-card > span {
  width: 42px !important;
  height: 42px !important;
}

#screen-chart .entry-card.entry-review > span,
#screen-chart .entry-card.entry-library > span {
  width: 38px !important;
  height: 38px !important;
}

#screen-chart .entry-card strong {
  font-size: 17px !important;
  line-height: 1.12 !important;
  font-weight: 900 !important;
}

#screen-chart .entry-card small {
  font-size: 13px !important;
  line-height: 1.25 !important;
  color: #74807b !important;
}

#screen-chart .today-practice-card {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  height: auto !important;
  min-height: 150px !important;
  margin: 16px 0 0 !important;
  border-radius: 14px !important;
  padding: 16px 14px !important;
  overflow: hidden !important;
}

@media (max-width: 380px) {
  #screen-chart .workbench-replica-host + .chart-home.workbench-home,
  #screen-chart .workbench-replica-host.is-ready + .chart-home.workbench-home {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #screen-chart .workbench-hero h1 {
    font-size: 27px !important;
  }

  #screen-chart .workbench-hero p {
    font-size: 15px !important;
  }

  #screen-chart .study-overview-card {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 16px 15px 14px !important;
  }

  #screen-chart .study-ring {
    width: 82px !important;
    height: 82px !important;
  }

  #screen-chart .study-metrics article {
    padding: 0 7px !important;
  }

  #screen-chart .study-metrics strong {
    font-size: 23px !important;
  }

  #screen-chart .study-metrics span {
    font-size: 11px !important;
  }

  #screen-chart .quick-chart-form.home-birth-form {
    grid-template-columns: minmax(0, 1fr) 118px !important;
    gap: 8px !important;
  }

  #screen-chart .quick-chart-form.home-birth-form label {
    padding: 0 10px !important;
  }

  #screen-chart .quick-chart-form.home-birth-form span {
    min-width: 38px !important;
    margin-right: 7px !important;
    font-size: 14px !important;
  }

  #screen-chart .quick-gender-field {
    padding: 0 8px !important;
  }

  #screen-chart .quick-gender-field span {
    min-width: 26px !important;
    margin-right: 4px !important;
  }

  #screen-chart .quick-gender-field .gender-toggle button {
    min-width: 31px !important;
  }

  #screen-chart .home-main-action.workbench-primary {
    font-size: 16px !important;
  }

  #screen-chart .entry-card {
    min-height: 98px !important;
  }

  #screen-chart .entry-card strong {
    font-size: 16px !important;
  }

  #screen-chart .entry-card small {
    font-size: 12px !important;
  }
}

/* Extra narrow phone guard: keep 360px first view from clipping card content. */
#screen-chart .workbench-replica-host + .chart-home.workbench-home,
#screen-chart .workbench-replica-host.is-ready + .chart-home.workbench-home {
  box-sizing: border-box !important;
  overflow-x: clip !important;
}

#screen-chart .study-metrics article {
  align-items: center !important;
  text-align: center !important;
}

#screen-chart .study-metrics i {
  display: none !important;
}

@media (max-width: 380px) {
  #screen-chart .study-overview-card {
    grid-template-columns: 82px minmax(0, 1fr) !important;
    gap: 11px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #screen-chart .study-metrics article {
    padding: 0 4px !important;
  }

  #screen-chart .study-metrics article:first-child {
    padding-left: 0 !important;
  }

  #screen-chart .study-metrics strong {
    font-size: 22px !important;
  }

  #screen-chart .study-metrics span {
    font-size: 10.5px !important;
  }

  #screen-chart .quick-chart-form.home-birth-form {
    grid-template-columns: 1fr !important;
  }

  #screen-chart .quick-name-field,
  #screen-chart .quick-gender-field,
  #screen-chart .quick-birth-field {
    grid-column: 1 / -1 !important;
  }

  #screen-chart .quick-gender-field .gender-toggle {
    margin-left: auto !important;
  }
}

/* H5 shell width guard: remove the old demo-phone gutters on real browser viewports. */
html,
body,
.stage {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.stage {
  height: 100dvh !important;
  min-height: 100dvh !important;
  display: block !important;
}

.phone,
.phone:has(#screen-chart.active),
.phone:has(#screen-chart.screen-leaving) {
  width: min(100%, 360px) !important;
  max-width: 360px !important;
  justify-self: start !important;
  min-width: 0 !important;
  height: 100dvh !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#screen-chart .workbench-replica-host + .chart-home.workbench-home,
#screen-chart .workbench-replica-host.is-ready + .chart-home.workbench-home {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

#screen-chart .quick-chart-form.home-birth-form {
  grid-template-columns: 1fr !important;
}

#screen-chart .quick-name-field,
#screen-chart .quick-gender-field,
#screen-chart .quick-birth-field {
  grid-column: 1 / -1 !important;
}

#screen-chart .quick-gender-field .gender-toggle {
  margin-left: auto !important;
}

/* Mobile first-screen density trim: keep only core metrics and avoid right-edge squeeze. */
#screen-chart .study-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#screen-chart .study-metrics article:nth-child(3) {
  display: none !important;
}

#screen-chart .quick-chart-panel header button {
  display: none !important;
}

#screen-chart .quick-gender-field .gender-toggle {
  margin-left: 18px !important;
}

/* Study overview compact stats: vertical rows read better than squeezed columns. */
#screen-chart .study-overview-main h2 {
  text-align: left !important;
}

#screen-chart .study-metrics {
  grid-template-columns: 1fr !important;
  gap: 7px !important;
}

#screen-chart .study-metrics article,
#screen-chart .study-metrics article:first-child {
  min-height: 26px !important;
  padding: 0 !important;
  border-left: 0 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  align-items: baseline !important;
  text-align: left !important;
}

#screen-chart .study-metrics strong {
  font-size: 24px !important;
}

#screen-chart .study-metrics span {
  margin: 0 0 0 10px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

/* Bottom tabbar guard: five equal app tabs instead of old fixed coordinates. */
.phone > .tabbar,
.phone:has(#screen-chart.active) > .tabbar,
.phone:has(#screen-chart.screen-leaving) > .tabbar {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  grid-row: 2 !important;
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
  height: var(--h5-tabbar-height) !important;
  min-height: var(--h5-tabbar-height) !important;
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  align-items: start !important;
  padding: 7px 0 var(--h5-safe-bottom) !important;
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  background: rgba(255, 255, 255, 0.98) !important;
}

.phone > .tabbar button,
.phone:has(#screen-chart.active) > .tabbar button,
.phone:has(#screen-chart.screen-leaving) > .tabbar button {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 58px !important;
  min-height: 58px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 0 !important;
}

.phone > .tabbar button span,
.phone:has(#screen-chart.active) > .tabbar button span,
.phone:has(#screen-chart.screen-leaving) > .tabbar button span {
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-direction: column !important;
  gap: 4px !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.phone > .tabbar button span::before {
  flex: 0 0 auto !important;
  margin: 0 auto !important;
}

/* The home icon asset is green by default; make inactive tabs visually consistent. */
.phone > .tabbar button:not(.active) span::before {
  filter: grayscale(1) saturate(0%) opacity(0.64) !important;
}

.phone > .tabbar .active span::before {
  filter: brightness(0) saturate(100%) invert(28%) sepia(85%) saturate(691%) hue-rotate(116deg) brightness(88%) contrast(94%) !important;
}

.phone > .tabbar button[data-go="chart"].active span::before {
  filter: none !important;
}

/* Homepage version recovery: use the accepted workbench replica, not the native fallback. */
.phone,
.phone:has(#screen-chart.active),
.phone:has(#screen-chart.screen-leaving) {
  width: 100% !important;
  max-width: 430px !important;
  margin: 0 auto !important;
  grid-template-rows: minmax(0, 1fr) var(--h5-tabbar-height) !important;
}

#screen-chart.active,
#screen-chart.screen-leaving {
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #f7faf5 !important;
}

#screen-chart .workbench-replica-host,
#screen-chart .workbench-replica-host.is-ready {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: calc(1844px * var(--replica-scale, 0.457)) !important;
  min-height: calc(1844px * var(--replica-scale, 0.457)) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: #f7faf5 !important;
  z-index: 3 !important;
}

#screen-chart .workbench-replica-frame {
  display: block !important;
  width: 853px !important;
  height: 1844px !important;
  border: 0 !important;
  transform: translateX(var(--replica-offset, 0px)) scale(var(--replica-scale, 0.457)) !important;
  transform-origin: 0 0 !important;
  background: #f7faf5 !important;
}

#screen-chart .workbench-click-layer {
  inset: 0 auto auto 0 !important;
  width: var(--replica-width, 390px) !important;
  height: calc(1844px * var(--replica-scale, 0.457)) !important;
  transform: translateX(var(--replica-offset, 0px)) scale(var(--replica-scale, 0.457)) !important;
  transform-origin: 0 0 !important;
}

#screen-chart .workbench-replica-host + .chart-home.workbench-home,
#screen-chart .workbench-replica-host.is-ready + .chart-home.workbench-home {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  max-width: none !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: block !important;
  z-index: 0 !important;
}

/* Course reader: keep the lesson focused and remove the app tabbar while reading. */
.phone:has(#screen-course.active .course-v2-chat-player),
.phone:has(#screen-course.screen-leaving .course-v2-chat-player) {
  grid-template-rows: minmax(0, 1fr) !important;
}

.phone:has(#screen-course.active .course-v2-chat-player) > .tabbar,
.phone:has(#screen-course.screen-leaving .course-v2-chat-player) > .tabbar {
  display: none !important;
}

.phone:has(#screen-course.active .course-v2-chat-player) #screen-course,
.phone:has(#screen-course.screen-leaving .course-v2-chat-player) #screen-course {
  padding-bottom: 0 !important;
}

/* Mobile safe-area and density normalization: align app pages with the question-bank scale. */
:root {
  --h5-safe-top: max(24px, var(--app-safe-top, 0px), env(safe-area-inset-top, 0px));
}

#screen-chart .workbench-replica-host,
#screen-chart .workbench-replica-host.is-ready {
  height: calc((1844px * var(--replica-scale, 0.457)) + var(--h5-safe-top)) !important;
  min-height: calc((1844px * var(--replica-scale, 0.457)) + var(--h5-safe-top)) !important;
  padding-top: var(--h5-safe-top) !important;
  box-sizing: border-box !important;
}

#screen-chart .workbench-click-layer {
  inset: var(--h5-safe-top) auto auto 0 !important;
}

#screen-practice.active,
#screen-practice.screen-leaving {
  padding-top: var(--h5-safe-top) !important;
  box-sizing: border-box !important;
  background: #FBF6EA !important;
}

#screen-qimen-question.active,
#screen-qimen-question.screen-leaving {
  padding: calc(var(--h5-safe-top) + 10px) 16px calc(var(--h5-tabbar-height) + 12px) !important;
}

#screen-course.active,
#screen-course.screen-leaving,
#screen-mine.active,
#screen-mine.screen-leaving,
#screen-mine-detail.active,
#screen-mine-detail.screen-leaving,
#screen-messages.active,
#screen-messages.screen-leaving,
#screen-roles.active,
#screen-roles.screen-leaving {
  /* 与题库同思路：顶部安全区统一走 --h5-safe-top（含 APP 注入与 env 兜底），底部走 tabbar + safe-bottom */
  padding: calc(var(--h5-safe-top) + 12px) 16px calc(var(--h5-tabbar-height) + 12px) !important;
}

.phone:has(#screen-course.active .course-v2-chat-player) #screen-course,
.phone:has(#screen-course.screen-leaving .course-v2-chat-player) #screen-course {
  padding: 0 !important;
}

#screen-course .course-v2-chat-head.is-collapsed {
  padding: var(--h5-safe-top) 16px 6px !important;
}

#screen-course .course-v2-page-head h1,
#screen-course .course-top h1 {
  font-size: 24px !important;
  line-height: 1.16 !important;
  font-weight: 820 !important;
}

#screen-course .course-v2-page-head p,
#screen-course .course-top p {
  font-size: 13px !important;
  line-height: 1.48 !important;
}

#screen-course .course-v2-tabs {
  gap: 8px !important;
  margin-right: -16px !important;
}

#screen-course .course-v2-tabs button {
  min-width: 62px !important;
  height: 36px !important;
  font-size: 13px !important;
}

#screen-course .course-v2-list {
  gap: 12px !important;
}

#screen-course .course-v2-card {
  grid-template-columns: 54px minmax(0, 1fr) auto !important;
  gap: 14px !important;
  min-height: 112px !important;
  padding: 14px !important;
  border-radius: 20px !important;
}

#screen-course .course-v2-thumb {
  width: 54px !important;
  height: 54px !important;
  border-radius: 18px !important;
  font-size: 20px !important;
}

#screen-course .course-v2-card-main strong {
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 850 !important;
}

#screen-course .course-v2-card-main p {
  margin: 6px 0 8px !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

#screen-course .course-v2-card-main span,
#screen-course .course-v2-meta span {
  min-height: 22px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
}

#screen-course .course-v2-card > button {
  min-width: 52px !important;
  height: 38px !important;
  font-size: 13px !important;
}

#screen-course .course-v2-detail-card {
  grid-template-columns: 64px minmax(0, 1fr) !important;
  gap: 14px !important;
  padding: 14px !important;
  border-radius: 20px !important;
}

#screen-course .course-v2-detail-thumb {
  width: 64px !important;
  height: 64px !important;
  border-radius: 18px !important;
  font-size: 22px !important;
}

#screen-course .course-v2-detail-card h2 {
  font-size: 20px !important;
  line-height: 1.22 !important;
}

#screen-course .course-v2-chapter-card {
  padding: 14px !important;
  border-radius: 20px !important;
}

#screen-course .course-v2-chapter-card header b {
  font-size: 17px !important;
}

#screen-course .course-v2-lesson-row {
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  gap: 10px !important;
  padding: 12px 0 !important;
}

#screen-course .course-v2-lesson-row > strong {
  font-size: 18px !important;
}

#screen-course .course-v2-lesson-row span b {
  font-size: 15px !important;
}

#screen-course .course-v2-lesson-row i {
  min-width: 44px !important;
  height: 28px !important;
  font-size: 12px !important;
}

#screen-qimen-question .qimen-question-top strong,
#screen-mine .mine-profile h1 {
  font-size: 20px !important;
  line-height: 1.18 !important;
  font-weight: 820 !important;
}

#screen-qimen-question .qimen-mode-switch button,
#screen-qimen-question .qimen-question-form input,
#screen-qimen-question .qimen-question-form select,
#screen-qimen-question .qimen-question-form textarea,
#screen-qimen-question .qimen-inline-options button {
  font-size: 14px !important;
}

#screen-qimen-question .qimen-question-form label span,
#screen-qimen-question .qimen-form-row > span {
  font-size: 13px !important;
}

#screen-qimen-question .qimen-question-form label,
#screen-qimen-question .qimen-form-row {
  min-height: 50px !important;
}

#screen-mine .mine-profile img {
  width: 48px !important;
  height: 48px !important;
}

#screen-mine .mine-profile p {
  font-size: 12px !important;
}

#screen-mine .mine-study-panel,
#screen-mine .mine-card {
  padding: 14px !important;
  border-radius: 18px !important;
}

#screen-mine .mine-study-panel h2,
#screen-mine .mine-card h2 {
  font-size: 16px !important;
}

#screen-mine .mine-stat-grid article {
  min-height: 66px !important;
  padding: 10px 12px !important;
}

#screen-mine .mine-stat-grid strong {
  font-size: 22px !important;
}

#screen-mine .mine-card > button {
  min-height: 44px !important;
  border-radius: 12px !important;
}

#screen-mine .mine-card > button span {
  font-size: 14px !important;
}

/* ==== 书卷风换肤（html.skin-sj 启用；F5 2026-07-08）==== */

/* 第一部分：:root token 语义映射覆盖（--danger 为功能色，保持不动） */
html.skin-sj {
  --bg: #F1E8D2;
  --paper: #FBF6EA;
  --soft: #F1E8D2;
  --line: #DCCDA8;
  --ink: #3A3023;
  --muted: #5A4F3C;
  --muted-2: #8A7E68;
  --jade: #16453A;
  --jade-deep: #0F3229;
  --jade-soft: #EFE7CE;
  --amber: #B98A2F;
  --amber-soft: #EFE7CE;
  --shadow: 0 18px 50px rgba(58, 48, 35, 0.1);
  --card-shadow: 0 10px 28px rgba(58, 48, 35, 0.1);
}

/* 第二部分：body 纸纹底 */
html.skin-sj body{background:repeating-linear-gradient(115deg,transparent 0 3px,rgba(58,48,35,.014) 3px 6px),repeating-linear-gradient(25deg,transparent 0 4px,rgba(58,48,35,.01) 4px 8px),#F1E8D2}

/* 第三部分：硬编码大面积表面点杀 */

/* 3.1 底部导航（原 rgba(255,255,255,.965/.98) !important，L7716/8760/13641） */
html.skin-sj .phone > .tabbar,
html.skin-sj .phone:has(#screen-chart.active) > .tabbar,
html.skin-sj .phone:has(#screen-chart.screen-leaving) > .tabbar {
  background: rgba(251, 246, 234, 0.98) !important;
}

/* 3.2 统一屏底（原 冷绿渐变 #fcfefd→#f8fbf7 !important，L8592） */
html.skin-sj .screen:not(#screen-chart):not(#screen-chart-detail):not(#screen-practice):not(#screen-mine) {
  background: #FBF6EA !important;
}

/* 3.3 排盘详情屏底（原 #f5f6f3 = 旧 --bg 硬编码，L121） */
html.skin-sj .chart-detail-screen {
  background: #F1E8D2;
}

/* 3.4 整屏级白面 → 纸色 */
html.skin-sj .qimen-question-screen,
html.skin-sj .chart-library-screen,
html.skin-sj .bazi-report-screen,
html.skin-sj .mine-detail-screen,
html.skin-sj .workbench-home,
html.skin-sj #screen-chart .workbench-home,
html.skin-sj .course-v2-chat-player {
  background: #FBF6EA;
}

/* 3.5 面板/卡级白面 → 纸色（含课堂气泡、输入卡、蓝调教师卡） */
html.skin-sj .chart-detail-screen iframe,
html.skin-sj .home-teacher-card,
html.skin-sj .birth-picker-panel,
html.skin-sj .reasoning-sheet,
html.skin-sj .course-v2-input-card,
html.skin-sj .course-v2-bubble.teacher,
html.skin-sj .course-v2-check-strip {
  background: #FBF6EA;
}

/* 3.6 工作台三大卡（原 rgba 白 .84–.92，末段 L13096/13212 带 !important） */
html.skin-sj .study-overview-card,
html.skin-sj .quick-chart-panel,
html.skin-sj .today-practice-card,
html.skin-sj #screen-chart .study-overview-card,
html.skin-sj #screen-chart .quick-chart-panel,
html.skin-sj #screen-chart .today-practice-card {
  background: rgba(251, 246, 234, 0.92) !important;
}

/* 3.7 统一面板组（原 rgba(255,255,255,.86) !important，L8614–8626） */
html.skin-sj .qimen-question-hero,
html.skin-sj .qimen-question-form,
html.skin-sj .library-panel,
html.skin-sj .mine-vip,
html.skin-sj .mine-card,
html.skin-sj .mine-detail-content,
html.skin-sj .bazi-report-hero,
html.skin-sj .bazi-report-placeholder {
  background: rgba(251, 246, 234, 0.86) !important;
}

/* 3.8 入口卡（原 rgba 白 .92，L6626/7274） */
html.skin-sj .entry-card,
html.skin-sj #screen-chart .entry-card {
  background: rgba(251, 246, 234, 0.92);
}

/* 3.9 八字报告学习进度卡（原多层白 .93，L3733） */
html.skin-sj .bazi-study-progress {
  background: rgba(251, 246, 234, 0.93);
}

/* 3.10 课堂吸顶头部（原 rgba 白 .98，L10595） */
html.skin-sj .course-v2-chat-head {
  background: rgba(251, 246, 234, 0.98);
}

/* 3.11 课堂视频下缘渐隐：20260717zzd 随主块一并删除（皮肤系统 zp 已下架，此块本为孤儿） */

/* 3.12 课堂吸底输入面板（原 rgba 白 .96，L11234） */
html.skin-sj .course-v2-chat-input {
  background: rgba(251, 246, 234, 0.96);
}

/* 3.13 课堂内嵌八字卡（原 rgba 白 .92，L11028） */
html.skin-sj .course-v2-chat-player .course-v2-bazi-card {
  background: rgba(251, 246, 234, 0.92);
}

/* 3.14 课堂提问卡（原 rgba 白 .94，L11192） */
html.skin-sj .course-v2-chat-question-card {
  background: rgba(251, 246, 234, 0.94);
}

/* 3.15 课程选中项冷绿浅底（原 #eaf8f1，L9526）→ 浅绿面 */
html.skin-sj .course-evidence-list button.selected,
html.skin-sj .course-answer-list button.selected {
  background: #EFE7CE;
}

/* 3.16 课程工坊面板（原 rgba 白 .88/.9，L12072/12110） */
html.skin-sj .course-lab-metrics article,
html.skin-sj .course-lab-panel {
  background: rgba(251, 246, 234, 0.88);
}

html.skin-sj .course-lab-production-card {
  background: rgba(251, 246, 234, 0.9);
}

/* 3.17 课程工坊预览手机（原 #fff→#f8fbf8 渐变，L12557） */
html.skin-sj .course-lab-phone {
  background: #FBF6EA;
}

/* 3.18 主容器与工作台点杀（F5 视觉审计 2026-07-08） */
html.skin-sj .phone, html.skin-sj .stage .phone, html.skin-sj main.stage > section.phone { background: #F1E8D2 !important; }
html.skin-sj button.primary { background: linear-gradient(#1E5044, #0F3229); }
html.skin-sj .home-main-action { background: radial-gradient(circle at 42% 48%, rgba(216, 185, 106, .22), rgba(0, 0, 0, 0) 12%), linear-gradient(135deg, #1E5044, #0F3229) !important; }
html.skin-sj .study-overview-card svg circle:first-of-type { stroke: rgba(58, 48, 35, .12); }
html.skin-sj .study-overview-card svg circle:last-of-type { stroke: #16453A; }
html.skin-sj .workbench-home h1 { color: #16453A; }
html.skin-sj .workbench-home h1::after { background: #B98A2F; }
html.skin-sj .entry-card span[aria-hidden] { filter: sepia(.4) hue-rotate(-10deg) saturate(.85); }

/* 3.19 悬案修复：L14157 的 .phone 渐变规则本身已命中生效，但默认工作台屏上被
   三层不透明 #f7faf5 完全遮挡 —— L13712 #screen-chart.active / L13731 .workbench-replica-host /
   L13742 iframe.workbench-replica-frame（第四层为 iframe 内文档 workbench-replica/styles.css L30，
   属独立 CSSOM，已由 app.js applyWorkbenchReplicaSkin 同源注入置透）。此处将三层遮挡置透。 */
html.skin-sj #screen-chart.active,
html.skin-sj #screen-chart.screen-leaving {
  background: transparent !important;
}

html.skin-sj #screen-chart .workbench-replica-host,
html.skin-sj #screen-chart .workbench-replica-host.is-ready {
  background: transparent !important;
}

html.skin-sj #screen-chart .workbench-replica-frame {
  background: transparent !important;
}

/* 3.20 课程页四大面板（原 rgba(255,255,255,.92)，L9255）→ 米纸 */
html.skin-sj .course-continue-card,
html.skin-sj .course-path-section,
html.skin-sj .course-classroom,
html.skin-sj .course-method-card {
  background: rgba(251, 246, 234, 0.92);
}

/* 3.21 课程工坊表单输入面（原 rgba 白 .92/.94，L12190/L12393/L12453）→ 米纸 */
html.skin-sj .course-lab-mini-grid input,
html.skin-sj .course-lab-field.compact textarea,
html.skin-sj .course-lab-field input,
html.skin-sj .course-lab-field textarea,
html.skin-sj .course-lab-ai-actions textarea {
  background: rgba(251, 246, 234, 0.94);
}

/* 3.22 课程工坊图片选择面板（原 冷白渐变，L12502）→ 纸绿渐变 */
html.skin-sj .course-lab-image-picker {
  background: linear-gradient(135deg, rgba(22, 69, 58, 0.06), rgba(251, 246, 234, 0.92));
}

/* skin-audit-agentA-done */

/* ==== 「我的」青囊骨法 mz-（2026-07-08）：本屏新版即默认，规则全部以 #screen-mine 打头 ==== */

#screen-mine {
  --mz-serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", "Noto Serif CJK SC", serif; /* font-unify-20260726-fix21 */
  background: #FAF9F5 !important;
  color: #262320;
}

/* 眉头行：小字距淡墨 + 右侧细线 */
#screen-mine .mz-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 0 26px;
  font-size: 11px;
  letter-spacing: 6px;
  color: #9B958A;
  white-space: nowrap;
}

#screen-mine .mz-eyebrow::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #E8E4DB;
}

/* 身份区 */
#screen-mine .mz-id {
  display: flow-root;
  margin: 0 0 34px;
}

#screen-mine .mz-gear {
  float: right;
  width: 34px;
  height: 34px;
  margin: 2px 0 0 12px;
  padding: 0;
  border: 1px solid #E8E4DB;
  border-radius: 999px;
  background: transparent;
  color: #9B958A;
  font-size: 15px;
  line-height: 32px;
  text-align: center;
}

#screen-mine .mz-name {
  margin: 0 0 10px;
  font-family: var(--mz-serif);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.22;
  color: #262320;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#screen-mine .mz-meta {
  margin: 0;
  font-size: 12px;
  letter-spacing: 1.5px;
  line-height: 1.9;
  color: #9B958A;
}

#screen-mine .mz-cinnabar {
  color: #C2543F;
  font-weight: 600;
}

/* 区块与区块头 */
#screen-mine .mz-block {
  margin: 0 0 34px;
}

#screen-mine .mz-shead {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 16px;
  padding-bottom: 9px;
  border-bottom: 1px solid #E8E4DB;
}

#screen-mine .mz-shead .mz-en {
  font-size: 10px;
  letter-spacing: 3px;
  color: #9B958A;
}

#screen-mine .mz-shead .mz-cn {
  font-family: var(--mz-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #262320;
}

#screen-mine .mz-shead .mz-note {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 1px;
  color: #9B958A;
}

/* 左侧 1px 竖细线缩进 */
#screen-mine .mz-indent {
  padding: 2px 0 2px 14px;
  border-left: 1px solid #E8E4DB;
}

/* 积分余额 */
#screen-mine .mz-balance {
  margin: 0 0 8px;
  line-height: 1;
}

#screen-mine .mz-num {
  font-family: var(--mz-serif);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: #C9A15C;
}

#screen-mine .mz-balance small {
  margin-left: 6px;
  font-family: var(--mz-serif);
  font-size: 14px;
  color: #9B958A;
}

#screen-mine .mz-sub {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1.8;
  color: #9B958A;
}

/* 学籍主行 */
#screen-mine .mz-mem {
  margin: 0 0 6px;
}

#screen-mine .mz-mem b {
  font-family: var(--mz-serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #262320;
}

#screen-mine .mz-mem span {
  margin-left: 8px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #9B958A;
}

/* 胶囊按钮 */
#screen-mine .mz-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}

#screen-mine .mz-btn {
  min-height: 38px;
  padding: 9px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-family: var(--mz-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1;
  color: #262320;
}

#screen-mine .mz-btn-gold {
  background: #C9A15C;
  border-color: #C9A15C;
  color: #FFFDF7;
}

#screen-mine .mz-btn-dark {
  background: #2B2823;
  border-color: #2B2823;
  color: #F6EFE0;
}

#screen-mine .mz-btn-line {
  border-color: #E8E4DB;
  color: #262320;
}

#screen-mine .mz-fine {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.5px;
  line-height: 1.8;
  color: #9B958A;
}

/* 细线行清单 */
#screen-mine .mz-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 15px 2px;
  border: 0;
  border-bottom: 1px solid #E8E4DB;
  background: transparent;
  font-family: var(--mz-serif);
  font-size: 14px;
  letter-spacing: 1px;
  color: #262320;
  text-align: left;
}

#screen-mine .mz-row em {
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #9B958A;
  white-space: nowrap;
}

#screen-mine .mz-row > span {
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1;
  color: #9B958A;
}

/* 页脚 */
#screen-mine .mz-foot {
  margin: 26px 0 8px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 1px;
  color: #9B958A;
}

/* ==== 书卷底栏重做（html.skin-sj，2026-07-08）：纸底 + 衬线标签 + 朱砂方章激活态 ==== */

html.skin-sj .phone > .tabbar,
html.skin-sj .phone:has(#screen-chart.active) > .tabbar,
html.skin-sj .phone:has(#screen-chart.screen-leaving) > .tabbar {
  background: rgba(251, 246, 234, 0.98) !important;
  border-top: 1px solid #DCCDA8 !important;
  box-shadow: none !important;
}

html.skin-sj .phone > .tabbar button,
html.skin-sj .phone:has(#screen-chart.active) > .tabbar button,
html.skin-sj .phone:has(#screen-chart.screen-leaving) > .tabbar button,
html.skin-sj .phone > .tabbar button span,
html.skin-sj .phone:has(#screen-chart.active) > .tabbar button span,
html.skin-sj .phone:has(#screen-chart.screen-leaving) > .tabbar button span {
  font-family: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", "Noto Serif CJK SC", serif !important; /* font-unify-20260726-fix21 */
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 2px !important;
  color: #9B958A !important;
}

html.skin-sj .phone > .tabbar button span::before,
html.skin-sj .phone:has(#screen-chart.active) > .tabbar button span::before,
html.skin-sj .phone:has(#screen-chart.screen-leaving) > .tabbar button span::before {
  content: attr(data-icon) !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  color: #16453A !important;
}

html.skin-sj .phone > .tabbar .active,
html.skin-sj .phone:has(#screen-chart.active) > .tabbar .active,
html.skin-sj .phone:has(#screen-chart.screen-leaving) > .tabbar .active,
html.skin-sj .phone > .tabbar .active span,
html.skin-sj .phone:has(#screen-chart.active) > .tabbar .active span,
html.skin-sj .phone:has(#screen-chart.screen-leaving) > .tabbar .active span {
  color: #A63D2C !important;
  font-weight: 700 !important;
}

html.skin-sj .phone > .tabbar .active span::before,
html.skin-sj .phone:has(#screen-chart.active) > .tabbar .active span::before,
html.skin-sj .phone:has(#screen-chart.screen-leaving) > .tabbar .active span::before {
  background: #A63D2C !important;
  color: #F6EFE0 !important;
  box-shadow: inset 0 0 0 1.5px rgba(246, 239, 224, 0.35) !important;
  filter: none !important;
}

/* mz-mine-and-tabbar-done */

/* mz-detail */
/* ==== 「我的」二级/三级详情页 · 青囊骨法统一（2026-07-08） ====
   作用对象：#screen-mine-detail（app.js getMineDetailHtml 系列模板：
   privacy / vip / birth / practice-records / mistakes / favorites /
   evidence-records / corrections / qa-records / data）。
   规则全部以 #screen-mine-detail 打头。屏底一条用 5×ID 叠加，
   压过 L9156 “#f7faf5 !important” 与 L14046 skin-sj 3.2
   “.screen:not()×4 ≈ (4,1,1) !important” 两处旧冷底。 */

#screen-mine-detail {
  --mzd-serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", "Noto Serif CJK SC", serif; /* font-unify-20260726-fix21 */
  background: #FAF9F5;
  color: #262320;
}

#screen-mine-detail#screen-mine-detail#screen-mine-detail#screen-mine-detail#screen-mine-detail.active,
#screen-mine-detail#screen-mine-detail#screen-mine-detail#screen-mine-detail#screen-mine-detail.screen-leaving {
  background: #FAF9F5 !important;
}

/* 页头：返回=描边圆钮，标题=衬线 16px 字距 2px（压 L7820 冷墨 !important） */
#screen-mine-detail .detail-top {
  min-height: 48px;
  margin-bottom: 18px;
}

#screen-mine-detail .detail-top .icon-btn {
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 1px solid #E8E4DB !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #9B958A !important;
  font-size: 20px;
  line-height: 32px;
  text-align: center;
}

#screen-mine-detail .detail-top strong {
  color: #262320 !important;
  font-family: var(--mzd-serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
}

#screen-mine-detail .mine-detail-content {
  gap: 26px;
}

/* 浮卡拍平：纸上分区，不再描卡壳 */
#screen-mine-detail .mine-detail-hero,
#screen-mine-detail .mine-detail-card,
#screen-mine-detail .detail-list {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* 小节眉：10px 字距 3px 淡墨 + 底部 1px 细线 */
#screen-mine-detail .mine-detail-hero span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 2px 9px;
  border-bottom: 1px solid #E8E4DB;
  color: #9B958A;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 3px;
}

#screen-mine-detail .mine-detail-hero h2 {
  margin: 14px 0 0;
  font-family: var(--mzd-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.4;
  color: #262320;
}

#screen-mine-detail .mine-detail-hero p {
  margin: 10px 0 0;
  color: #9B958A;
  font-size: 12px;
  letter-spacing: 0.5px;
  line-height: 1.9;
}

/* 数字：衬线 + 金 */
#screen-mine-detail .mzd-num {
  font-family: var(--mzd-serif);
  font-style: normal;
  font-weight: 700;
  color: #C9A15C;
}

#screen-mine-detail .mine-detail-hero p.mzd-price {
  margin: 12px 0 0;
  color: #262320;
  line-height: 1;
}

#screen-mine-detail .mzd-price .mzd-num {
  font-size: 34px;
  line-height: 1;
}

#screen-mine-detail .mzd-price small {
  margin-left: 6px;
  font-family: var(--mzd-serif);
  font-size: 13px;
  color: #9B958A;
}

/* 胶囊按钮三式：金实心 / 深底 / 描边 */
#screen-mine-detail .mine-detail-hero button,
#screen-mine-detail .mine-detail-card button,
#screen-mine-detail .detail-record button {
  min-height: 38px;
  margin-top: 16px;
  padding: 9px 22px;
  border: 1px solid #C9A15C;
  border-radius: 999px;
  background: #C9A15C;
  color: #FFFDF7;
  font-family: var(--mzd-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1;
  box-shadow: none;
}

#screen-mine-detail .mine-detail-card button {
  border-color: #2B2823;
  background: #2B2823;
  color: #F6EFE0;
}

#screen-mine-detail .mine-detail-card button + button {
  margin-left: 10px;
  border-color: #E8E4DB;
  background: transparent;
  color: #262320;
}

#screen-mine-detail .detail-record button {
  min-height: 32px;
  margin-top: 10px;
  padding: 7px 16px;
  border-color: #E8E4DB;
  background: transparent;
  color: #262320;
  font-size: 12px;
  letter-spacing: 1.5px;
}

/* 卡内标题：衬线小节头 + 细线 */
#screen-mine-detail .mine-detail-card h3 {
  margin: 0;
  padding: 0 2px 9px;
  border-bottom: 1px solid #E8E4DB;
  font-family: var(--mzd-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #262320;
}

#screen-mine-detail .mine-detail-card p {
  margin: 12px 0 0;
  color: #9B958A;
  font-size: 12px;
  letter-spacing: 0.5px;
  line-height: 1.9;
}

/* 行清单：padding 15px 2px + 底细线 + 右注淡墨（末行保留细线，同 mz-row） */
#screen-mine-detail .detail-row,
#screen-mine-detail .detail-setting,
#screen-mine-detail .detail-record {
  min-height: 0;
  padding: 15px 2px;
  border-bottom: 1px solid #E8E4DB;
}

#screen-mine-detail .detail-row:last-child,
#screen-mine-detail .detail-setting:last-child,
#screen-mine-detail .detail-record:last-child {
  border-bottom: 1px solid #E8E4DB;
}

#screen-mine-detail .detail-row span {
  font-family: var(--mzd-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #262320;
}

#screen-mine-detail .detail-row em {
  color: #9B958A;
  font-size: 12px;
  letter-spacing: 0.5px;
  line-height: 1.6;
}

#screen-mine-detail .detail-row .mzd-num {
  font-size: 16px;
  letter-spacing: 0.5px;
}

#screen-mine-detail .detail-row-link em::after {
  color: #9B958A;
}

/* 清单头行（vip 权益/充值档位的小节眉行） */
#screen-mine-detail .detail-row.mzd-list-head {
  min-height: 0;
  padding: 0 2px 9px;
}

#screen-mine-detail .detail-row.mzd-list-head span {
  font-family: inherit;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 3px;
  color: #9B958A;
}

#screen-mine-detail .detail-row.mzd-list-head em {
  font-size: 10px;
  letter-spacing: 1px;
  color: #9B958A;
}

/* 清单脚注 */
#screen-mine-detail .mzd-note {
  margin: 0;
  padding: 12px 2px 0;
  color: #9B958A;
  font-size: 11px;
  letter-spacing: 0.5px;
  line-height: 1.8;
}

/* 设置开关行 */
#screen-mine-detail .detail-setting b {
  font-family: var(--mzd-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #262320;
}

#screen-mine-detail .detail-setting small {
  margin-top: 5px;
  color: #9B958A;
  font-size: 11px;
  letter-spacing: 0.5px;
  line-height: 1.7;
}

#screen-mine-detail .detail-setting input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #C9A15C;
}

/* 收藏/理法笔记条目 */
#screen-mine-detail .detail-record span {
  color: #9B958A;
  font-size: 10px;
  letter-spacing: 2px;
}

#screen-mine-detail .detail-record h3 {
  margin: 8px 0 6px;
  font-family: var(--mzd-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.5;
  color: #262320;
}

#screen-mine-detail .detail-record p {
  color: #9B958A;
  font-size: 12px;
  letter-spacing: 0.3px;
  line-height: 1.8;
}

/* 本命档案四柱：衬线金字 + 细线格 */
#screen-mine-detail .mini-pillars {
  margin-top: 14px;
  gap: 8px;
}

#screen-mine-detail .mini-pillars span {
  min-height: 56px;
  border: 1px solid #E8E4DB;
  border-radius: 4px;
  background: transparent;
  color: #C9A15C;
  font-family: var(--mzd-serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 2px;
}

/* #3（2026-07-15w）错题簿卡片：整块可点、清爽排版；#2 报告正文可读排版 */
.detail-record-link {
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.detail-record-link:hover,
.detail-record-link:focus-visible {
  border-color: var(--jade, #1f7657);
  box-shadow: 0 4px 16px rgba(30, 45, 35, .08);
  transform: translateY(-1px);
  outline: none;
}
.detail-record-go {
  display: inline-block;
  margin-top: 8px;
  font-size: 12.5px;
  font-weight: 640;
  color: var(--jade, #1f7657);
  font-style: normal;
}
.report-body p {
  margin: 0 0 12px;
  line-height: 1.85;
  font-size: 14.5px;
  color: var(--ink, #33291c);
  text-align: justify;
}
.report-body p:last-child { margin-bottom: 0; }

/* 报告库（问命记录）线程条目改行清单 */
#screen-mine-detail .mine-thread-list {
  gap: 0;
}

#screen-mine-detail .mine-thread-list .thread {
  min-height: 0;
  grid-template-columns: 40px 1fr auto;
  padding: 15px 2px;
  border: 0 !important;
  border-bottom: 1px solid #E8E4DB !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#screen-mine-detail .mine-thread-list .thread img {
  width: 40px;
  height: 40px;
}

#screen-mine-detail .mine-thread-list .thread strong {
  font-family: var(--mzd-serif);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #262320;
}

#screen-mine-detail .mine-thread-list .thread em {
  padding: 0;
  background: transparent;
  color: #9B958A;
  font-size: 10px;
  letter-spacing: 2px;
}

#screen-mine-detail .mine-thread-list .thread p {
  color: #9B958A;
  font-size: 12px;
}

#screen-mine-detail .mine-thread-list .thread > span {
  color: #9B958A;
  font-size: 11px;
  letter-spacing: 0.5px;
}

/* 空态 */
#screen-mine-detail .mine-empty {
  min-height: 320px;
  padding: 28px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#screen-mine-detail .mine-empty strong {
  font-family: var(--mzd-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #262320;
}

#screen-mine-detail .mine-empty p {
  color: #9B958A;
  font-size: 12px;
  letter-spacing: 0.5px;
  line-height: 1.9;
}

/* mz-detail-done */

/* skin-course-v2 */
/* ==== 课程模块 course-v2 冷绿/荧光绿清剿（2026-07-08） ====
   作用对象：L9856-11740 course-v2 基础规则 + L11976 course-lab 屏底。
   冷白大底已由 3.4/3.5/3.10-3.15 处理，此处补齐文字/按钮/胶囊/进度/状态等其余冷色。
   映射铁表：实心冷绿#0b7f59系→linear-gradient(135deg,#1E5044,#0F3229) 字#E9DFC8；
   荧光绿(#b8ff74/#bdfc7a/#adff75/#02c849系/tabs active)→描金 rgba(216,185,106,.9) 或
   linear-gradient(135deg,#B98A2F,#D8B96A) 字#2B1F10；冷白#fff系→#FBF6EA 边#DCCDA8；
   冷薄荷→#EFE7CE；冷墨#102820→#3A3023；冷灰绿#68766f→#8A7E68；绿字→#16453A；
   绿渐变缩略图→#16453A-#2E6B5E；荧光对勾/进度字#20bd58→#8A6A1F。
   不动：五行设色 element-*（用 :not 绕开）、错误红、暖琥珀区（method-v2 内容/conclusion-card/
   warn 气泡/fortune-row em）、近黑图片灯箱 image-preview。
   注意：html.skin-sj 抬高了特异性，原文件里的状态变体（active/selected/pending/locked/
   completed/in-progress/is-muted/is-listening/:first-child/:disabled/good/warn、chat 内
   box-shadow:none）会被基础覆盖压掉，故均在本区各自重申。 */

/* cv2-01 冷墨标题/正文 #102820 系 → 暖墨 */
html.skin-sj .course-v2-page-head h1,
html.skin-sj .course-v2-card-main strong,
html.skin-sj .course-v2-nav-head h1,
html.skin-sj .course-v2-player-head h1,
html.skin-sj .course-v2-detail-card h2,
html.skin-sj .course-v2-chapter-card header b,
html.skin-sj .course-v2-lesson-row > strong,
html.skin-sj .course-v2-bubble,
html.skin-sj .course-v2-bazi-card header strong,
html.skin-sj .course-v2-question-card h2,
html.skin-sj .course-v2-method-v2 h2,
html.skin-sj .course-v2-method-v2 ul,
html.skin-sj .course-v2-input-card,
html.skin-sj .course-v2-composer-voice-main,
html.skin-sj .course-v2-composer-mic,
html.skin-sj .course-v2-composer-keyboard,
html.skin-sj .course-v2-composer-input,
html.skin-sj .course-v2-settings-head button,
html.skin-sj .course-v2-settings-head h1,
html.skin-sj .course-v2-setting-row strong,
html.skin-sj .course-v2-setting-title,
html.skin-sj .course-v2-setting-value,
html.skin-sj .course-v2-setting-static {
  color: #3A3023;
}

/* cv2-02 冷灰绿次要文字 → 暖灰 */
html.skin-sj .course-v2-page-head p,
html.skin-sj .course-v2-detail-card p,
html.skin-sj .course-v2-chapter-card em,
html.skin-sj .course-v2-card-main p,
html.skin-sj .course-v2-player-head p,
html.skin-sj .course-v2-bazi-card header span,
html.skin-sj .course-v2-pillars article span,
html.skin-sj .course-v2-pillars article em,
html.skin-sj .course-v2-fortune-row b,
html.skin-sj .course-v2-setting-value b,
html.skin-sj .course-v2-check-strip {
  color: #8A7E68;
}

/* cv2-03 淡冷灰绿（locked/静音/说明） → 淡暖灰 */
html.skin-sj .course-v2-lesson-row.locked span b,
html.skin-sj .course-v2-lesson-row.locked > strong,
html.skin-sj .course-v2-head-mute.is-muted,
html.skin-sj .course-v2-settings-card > p {
  color: #ADA08A;
}

/* cv2-04 绿字强调（文字处 #0b7f59） → 深松墨 */
html.skin-sj .course-v2-lesson-row span b,
html.skin-sj .course-v2-input-card span,
html.skin-sj .course-v2-voice-list button span,
html.skin-sj .course-v2-chat-progress span {
  color: #16453A;
}

/* cv2-05 讲师名（原 !important，同级压制） */
html.skin-sj .course-v2-teacher {
  color: #16453A !important;
}

/* cv2-06 四柱大字（:not 绕开五行设色 element-*） */
html.skin-sj .course-v2-pillars article:not([class*="element-"]) strong {
  color: #16453A;
}

/* cv2-07 冷绿浅底胶囊/圆钮 → 米绢底 + 深松墨字 */
html.skin-sj .course-v2-page-head span,
html.skin-sj .course-v2-method-v2 span,
html.skin-sj .course-v2-question-card > span,
html.skin-sj .course-v2-card-main span,
html.skin-sj .course-v2-meta span,
html.skin-sj .course-v2-nav-head span,
html.skin-sj .course-v2-player-head button:last-child {
  background: #EFE7CE;
  color: #16453A;
}

/* cv2-08 tabs 常态（冷墨薄底） */
html.skin-sj .course-v2-tabs button {
  background: rgba(58, 48, 35, 0.07);
  color: #8A7E68;
}

/* cv2-09 tabs 激活（荧光绿 → 描金） */
html.skin-sj .course-v2-tabs button.active {
  background: linear-gradient(135deg, #B98A2F, #D8B96A);
  color: #2B1F10;
  box-shadow: 0 10px 24px rgba(185, 138, 47, 0.28);
}

/* cv2-10 课程列表卡 */
html.skin-sj .course-v2-card {
  border-color: #DCCDA8;
  background: rgba(251, 246, 234, 0.96);
  box-shadow: 0 18px 40px rgba(58, 48, 35, 0.08);
}

/* cv2-11 绿渐变缩略图 → 松墨渐变 + 绢字 */
html.skin-sj .course-v2-thumb,
html.skin-sj .course-v2-detail-thumb {
  background: linear-gradient(135deg, #16453A, #2E6B5E);
  color: #E9DFC8;
}

/* cv2-12 进度槽（卡内） */
html.skin-sj .course-v2-card-main i {
  background: rgba(58, 48, 35, 0.09);
}

/* cv2-12b 课堂顶部吸顶容器：纸色实底，防止上滑内容透字 */
html.skin-sj .course-v2-chat-progress {
  background: #FBF6EA;
}

/* cv2-13 进度条填充（实心冷绿/绿渐变 → 松墨渐变） */
html.skin-sj .course-v2-card-main i b,
html.skin-sj .course-v2-chat-progress b {
  background: linear-gradient(135deg, #1E5044, #0F3229);
}

/* cv2-14 返回圆钮（冷白圆钮） */
html.skin-sj .course-v2-nav-head button,
html.skin-sj .course-v2-player-head button:first-child {
  border-color: #DCCDA8;
  background: #FBF6EA;
  color: #3A3023;
  box-shadow: 0 8px 18px rgba(58, 48, 35, 0.08);
}

/* cv2-15 详情/章节/八字/提问卡（method-v2 底为暖琥珀渐变，不入组） */
html.skin-sj .course-v2-detail-card,
html.skin-sj .course-v2-chapter-card,
html.skin-sj .course-v2-bazi-card,
html.skin-sj .course-v2-question-card {
  border-color: #DCCDA8;
  background: rgba(251, 246, 234, 0.96);
  box-shadow: 0 16px 36px rgba(58, 48, 35, 0.08);
}

/* cv2-16 method-v2 只换冷绿投影，暖底暖边保留 */
html.skin-sj .course-v2-method-v2 {
  box-shadow: 0 16px 36px rgba(58, 48, 35, 0.08);
}

/* cv2-17 重申：课堂内嵌卡无投影（压回 cv2-15/16） */
html.skin-sj .course-v2-chat-player .course-v2-bazi-card,
html.skin-sj .course-v2-chat-player .course-v2-question-card,
html.skin-sj .course-v2-chat-player .course-v2-method-v2,
html.skin-sj .course-v2-chat-player .course-v2-conclusion-card {
  box-shadow: none;
}

/* cv2-18 课时行分隔线 */
html.skin-sj .course-v2-lesson-row {
  border-top-color: rgba(58, 48, 35, 0.14);
}

/* cv2-19 课时状态胶囊常态 */
html.skin-sj .course-v2-lesson-row i {
  border-color: rgba(22, 69, 58, 0.35);
  color: #16453A;
}

/* cv2-20 重申：进行中 */
html.skin-sj .course-v2-lesson-row.in-progress i {
  background: #EFE7CE;
  border-color: rgba(22, 69, 58, 0.35);
}

/* cv2-21 重申：已完成 */
html.skin-sj .course-v2-lesson-row.completed i {
  background: rgba(58, 48, 35, 0.06);
  border-color: rgba(58, 48, 35, 0.14);
  color: #8A7E68;
}

/* cv2-22 重申：锁定 */
html.skin-sj .course-v2-lesson-row.locked i {
  border-color: transparent;
  background: rgba(58, 48, 35, 0.08);
  color: #ADA08A;
}

/* cv2-23 讲师头像（冷薄荷渐变 → 米绢渐变） */
html.skin-sj .course-v2-avatar {
  background: linear-gradient(135deg, #EFE7CE, #F6EFE0);
  color: #16453A;
}

/* cv2-24 讲师气泡冷绿投影（底已由 3.5 换纸） */
html.skin-sj .course-v2-bubble.teacher {
  box-shadow: 0 12px 28px rgba(58, 48, 35, 0.08);
}

/* cv2-25 课堂消息体常态（冷灰白 → 深纸） */
html.skin-sj .course-v2-message-body {
  background: #F1E8D2;
  color: #3A3023;
}

/* cv2-26 用户气泡（荧光绿 → 描金） */
html.skin-sj .course-v2-bubble.user,
html.skin-sj .course-v2-chat-message.user .course-v2-message-body {
  background: rgba(216, 185, 106, 0.9);
  color: #2B1F10;
}

/* cv2-27 good 气泡（冷薄荷 → 米绢） */
html.skin-sj .course-v2-bubble.good,
html.skin-sj .course-v2-message-body.good {
  background: #EFE7CE;
}

/* cv2-28 重申：warn 气泡暖底（防 cv2-25 压掉） */
html.skin-sj .course-v2-message-body.warn {
  background: #fff8ea;
}

/* cv2-29 气泡内操作丸（冷绿浅底 → 金褐浅底） */
html.skin-sj .course-v2-bubble button,
html.skin-sj .course-v2-message-tools button,
html.skin-sj .course-v2-bubble-next {
  background: rgba(185, 138, 47, 0.16);
  color: #8A6A1F;
}

/* cv2-30 四柱/大运格子（冷白面） */
html.skin-sj .course-v2-pillars article,
html.skin-sj .course-v2-fortune-row b {
  border-color: #DCCDA8;
  background: rgba(251, 246, 234, 0.95);
}

/* cv2-31 提问选项常态（冷白钮） */
html.skin-sj .course-v2-question-card button {
  border-color: #DCCDA8;
  background: #FBF6EA;
  color: #3A3023;
}

/* cv2-32 选项序号圆标常态 */
html.skin-sj .course-v2-question-card button b {
  background: rgba(58, 48, 35, 0.08);
  color: #8A7E68;
}

/* cv2-33 重申：选中项（冷薄荷/冷绿边 → 米绢/金边） */
html.skin-sj .course-v2-question-card button.selected {
  border-color: rgba(185, 138, 47, 0.55);
  background: #EFE7CE;
}

/* cv2-34 重申：待确认项 */
html.skin-sj .course-v2-chat-question-card button.pending {
  border-color: rgba(185, 138, 47, 0.55);
  background: rgba(216, 185, 106, 0.28);
  box-shadow: inset 0 0 0 1px rgba(185, 138, 47, 0.2);
}

/* cv2-35 实心冷绿钮/序号/播放激活 → 松墨渐变 + 绢字（在 cv2-07 之后，压回 last-child 常态） */
html.skin-sj .course-v2-card > button,
html.skin-sj .course-v2-detail-actions button,
html.skin-sj .course-v2-player-actions button.primary,
html.skin-sj .course-v2-answer-confirm,
html.skin-sj .course-v2-question-card button.selected b,
html.skin-sj .course-v2-player-head button.active,
html.skin-sj .course-v2-player-head button:last-child.active {
  border-color: rgba(233, 223, 200, 0.35);
  background: linear-gradient(135deg, #1E5044, #0F3229);
  color: #E9DFC8;
}

/* cv2-36 重申：答案确认钮禁用态 */
html.skin-sj .course-v2-answer-confirm:disabled {
  background: rgba(30, 80, 68, 0.28);
  color: rgba(233, 223, 200, 0.85);
}

/* cv2-37 实心钮冷绿投影 → 松墨投影 */
html.skin-sj .course-v2-card > button,
html.skin-sj .course-v2-detail-actions button,
html.skin-sj .course-v2-player-actions button.primary,
html.skin-sj .course-v2-player-head button.active,
html.skin-sj .course-v2-player-head button:last-child.active {
  box-shadow: 0 12px 24px rgba(15, 50, 41, 0.22);
}

/* cv2-38 播放页双钮常态（冷白面绿字） */
html.skin-sj .course-v2-player-actions button {
  border-color: #DCCDA8;
  background: rgba(251, 246, 234, 0.96);
  color: #16453A;
}

/* cv2-39 课堂顶部返回/设置圆钮 */
html.skin-sj .course-v2-head-back,
html.skin-sj .course-v2-head-settings {
  background: rgba(251, 246, 234, 0.86);
  color: #3A3023;
}

/* cv2-40 静音钮（激活荧光绿 #03d32f → 描金；is-muted 由 cv2-03 接管） */
html.skin-sj .course-v2-head-mute {
  background: rgba(251, 246, 234, 0.86);
  color: #B98A2F;
}

/* cv2-41 收起态头部分隔线 */
html.skin-sj .course-v2-chat-head.is-collapsed {
  border-bottom-color: rgba(58, 48, 35, 0.12);
}

/* cv2-42 讲师视频兜底面（冷白 → 纸） */
html.skin-sj .course-v2-teacher-video {
  background: #FBF6EA;
}

/* cv2-43 视频收起钮 */
html.skin-sj .course-v2-video-collapse {
  background: rgba(251, 246, 234, 0.92);
  color: #3A3023;
}

/* cv2-44 重申：收起态收起钮 */
html.skin-sj .course-v2-chat-head.is-collapsed .course-v2-video-collapse {
  background: rgba(251, 246, 234, 0.96);
  box-shadow: 0 4px 12px rgba(58, 48, 35, 0.12);
}

/* cv2-45 收起态视频圆窗投影 */
html.skin-sj .course-v2-chat-head.is-collapsed .course-v2-teacher-video-wrap {
  box-shadow: 0 8px 20px rgba(58, 48, 35, 0.1);
}

/* cv2-46 课件图边线 */
html.skin-sj .course-v2-lesson-visual {
  border-color: rgba(58, 48, 35, 0.12);
}

/* cv2-47 课件图焦点环（冷绿 → 深松墨） */
html.skin-sj .course-v2-lesson-visual:focus-visible {
  outline-color: #16453A;
}

/* cv2-48 课件图题注 */
html.skin-sj .course-v2-lesson-visual figcaption {
  background: rgba(251, 246, 234, 0.9);
  color: #3A3023;
  box-shadow: 0 6px 18px rgba(58, 48, 35, 0.08);
}

/* cv2-49 打卡条边线/投影（底 3.5、灰字 cv2-02 已管） */
html.skin-sj .course-v2-check-strip {
  border-color: rgba(58, 48, 35, 0.12);
  box-shadow: 0 10px 24px rgba(58, 48, 35, 0.06);
}

/* cv2-50 打卡数字（荧光对勾绿 #20bd58 → 暗金） */
html.skin-sj .course-v2-check-strip b {
  color: #8A6A1F;
}

/* cv2-51 吸底输入面板边线/投影（底 3.12 已管） */
html.skin-sj .course-v2-chat-input {
  border-color: rgba(58, 48, 35, 0.12);
  box-shadow: 0 -8px 30px rgba(58, 48, 35, 0.08);
}

/* cv2-52 输入区双钮（实心冷绿 → 松墨渐变） */
html.skin-sj .course-v2-input-actions button {
  border-color: rgba(15, 50, 41, 0.4);
  background: linear-gradient(135deg, #1E5044, #0F3229);
  color: #E9DFC8;
}

/* cv2-53 重申：输入区首钮（冷白绿字 → 纸面松墨字） */
html.skin-sj .course-v2-input-actions button:first-child {
  border-color: #DCCDA8;
  background: #FBF6EA;
  color: #16453A;
}

/* cv2-54 composer 吸底条（冷绿白 → 纸） */
html.skin-sj .course-v2-composer {
  border-top-color: rgba(58, 48, 35, 0.1);
  background: rgba(251, 246, 234, 0.98);
  box-shadow: 0 -10px 28px rgba(58, 48, 35, 0.06);
}

/* cv2-55 composer 卡（冷白 → 纸） */
html.skin-sj .course-v2-composer-card {
  border-color: #DCCDA8;
  background: #FBF6EA;
  box-shadow: 0 10px 28px rgba(58, 48, 35, 0.08);
}

/* cv2-56 重申：语音聆听态（冷绿 → 描金） */
html.skin-sj .course-v2-composer-voice-main.is-listening {
  color: #B98A2F;
}

/* cv2-57 composer 提示行 */
html.skin-sj .course-v2-composer-hint {
  color: rgba(58, 48, 35, 0.4);
}

/* cv2-58 输入占位符 */
html.skin-sj .course-v2-composer-input::placeholder {
  color: rgba(58, 48, 35, 0.45);
}

/* cv2-59 AI 免责行 */
html.skin-sj .course-v2-ai-disclaimer {
  color: rgba(58, 48, 35, 0.35);
}

/* cv2-60 发送钮（荧光绿 #adff75 → 描金） */
html.skin-sj .course-v2-composer-send {
  background: linear-gradient(135deg, #B98A2F, #D8B96A);
  color: #2B1F10;
  box-shadow: 0 8px 20px rgba(185, 138, 47, 0.22);
}

/* cv2-61 设置页底（冷灰白 → 纸纹底色） */
html.skin-sj .course-v2-settings-page {
  background: #F1E8D2;
}

/* cv2-62 设置页头/卡（冷白 → 纸） */
html.skin-sj .course-v2-settings-head,
html.skin-sj .course-v2-settings-card {
  background: #FBF6EA;
}

/* cv2-63 音色项常态 */
html.skin-sj .course-v2-voice-list button {
  border-color: rgba(58, 48, 35, 0.16);
  background: #F6EFE0;
  color: #3A3023;
}

/* cv2-64 重申：音色选中（冷绿 → 金边米绢） */
html.skin-sj .course-v2-voice-list button.active {
  border-color: rgba(185, 138, 47, 0.55);
  background: #EFE7CE;
  color: #16453A;
}

/* cv2-65 音色对勾（荧光绿 #02c849 → 暗金） */
html.skin-sj .course-v2-voice-check {
  color: #8A6A1F;
}

/* cv2-66 语速档常态字 */
html.skin-sj .course-v2-speed-track button {
  color: #C8BCA4;
}

/* cv2-67 语速刻度条常态 */
html.skin-sj .course-v2-speed-track i {
  background: #E3D8BE;
}

/* cv2-68 重申：语速激活字（荧光绿 → 描金） */
html.skin-sj .course-v2-speed-track button.active {
  color: #B98A2F;
}

/* cv2-69 重申：语速激活刻度（荧光绿 → 描金） */
html.skin-sj .course-v2-speed-track button.active i {
  background: linear-gradient(135deg, #B98A2F, #D8B96A);
}

/* cv2-70 开关槽常态 */
html.skin-sj .course-v2-switch {
  background: #E3D8BE;
}

/* cv2-71 开关钮芯（冷白 → 纸） */
html.skin-sj .course-v2-switch i {
  background: #FBF6EA;
}

/* cv2-72 重申：开关开启（荧光绿 #02c849 → 描金） */
html.skin-sj .course-v2-switch.active {
  background: linear-gradient(135deg, #B98A2F, #D8B96A);
}

/* cv2-73 保存大钮（荧光绿 #02cf45 → 描金） */
html.skin-sj .course-v2-settings-save {
  background: linear-gradient(135deg, #B98A2F, #D8B96A);
  color: #2B1F10;
  box-shadow: 0 10px 26px rgba(185, 138, 47, 0.2);
}

/* cv2-74 课程工坊屏底（冷绿渐变 → 纸纹 #F1E8D2） */
html.skin-sj #screen-course-lab.course-lab-screen {
  background:
    radial-gradient(circle at 84% 5%, rgba(185, 138, 47, 0.08), transparent 28%),
    #F1E8D2;
}

/* skin-course-v2-done */

/* fix-tabbar-height */
/* ==== 底栏矮化（2026-07-09）：总高约 54px（含安全区），章 22px、字 11px、内边距压缩；
   按钮触达区＝整格高度（54-3=51px）仍 ≥44px ==== */
html.skin-sj {
  --h5-tabbar-height: calc(54px + var(--h5-safe-bottom));
}

html.skin-sj .phone > .tabbar,
html.skin-sj .phone:has(#screen-chart.active) > .tabbar,
html.skin-sj .phone:has(#screen-chart.screen-leaving) > .tabbar {
  height: var(--h5-tabbar-height) !important;
  min-height: var(--h5-tabbar-height) !important;
  padding: 3px 0 var(--h5-safe-bottom) !important;
  align-items: stretch !important;
  align-content: stretch !important;
}

html.skin-sj .phone > .tabbar button,
html.skin-sj .phone:has(#screen-chart.active) > .tabbar button,
html.skin-sj .phone:has(#screen-chart.screen-leaving) > .tabbar button {
  height: 100% !important;
  min-height: 44px !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 0 !important;
  font-size: 11px !important;
}

html.skin-sj .phone > .tabbar button span,
html.skin-sj .phone:has(#screen-chart.active) > .tabbar button span,
html.skin-sj .phone:has(#screen-chart.screen-leaving) > .tabbar button span {
  gap: 2px !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
}

html.skin-sj .phone > .tabbar button span::before,
html.skin-sj .phone:has(#screen-chart.active) > .tabbar button span::before,
html.skin-sj .phone:has(#screen-chart.screen-leaving) > .tabbar button span::before {
  width: 22px !important;
  height: 22px !important;
  font-size: 12px !important;
}
/* fix-tabbar-height-done */

/* fix-back-unify */
/* ==== 返回钮全局制式（2026-07-09）：34px 圆钮、底 #FBF6EA、1px #DCCDA8 边、
   箭头/字色 #3A3023、无投影。覆盖 .icon-btn（含返回变体）、course-v2 课堂返回、
   mine-detail 页头返回（压 L14552 ID 级 !important） ==== */
html.skin-sj .icon-btn,
html.skin-sj .icon-btn[aria-label*="返回"],
html.skin-sj .chat-top > .icon-btn:first-child,
html.skin-sj .course-v2-head-back,
html.skin-sj #screen-mine-detail .detail-top .icon-btn {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 1px solid #DCCDA8 !important;
  border-radius: 999px !important;
  background: #FBF6EA !important;
  color: #3A3023 !important;
  box-shadow: none !important;
}

html.skin-sj .icon-btn[aria-label*="返回"],
html.skin-sj .chat-top > .icon-btn:first-child,
html.skin-sj #screen-mine-detail .detail-top .icon-btn {
  font-size: 19px !important;
  line-height: 1 !important;
}

html.skin-sj .course-v2-head-back {
  font-size: 20px !important;
  line-height: 1 !important;
}
/* fix-back-unify-done */

/* course-home-v2 */
/* ==== 学堂卷首（2026-07-08）：课程首页重排 —— 卷首题 / 续读深卡 / 金杠页签 / 书目卡 / 学径提示。
   模板：app.js renderCourseV2Home / renderCourseV2Card（shell 加 .v2-academy 标记，钩子
   data-course-v2-action / data-category / data-course-id 原样保留）。
   选择器一律 #screen-course .v2-academy 打头（1id+2class 起步）压过 L9856 基础层与 skin-sj 层；
   与 L13834-13900 调优层同名的 !important 属性在本区逐条重申 !important。
   设色：页底#F1E8D2 卡#FBF6EA 内凹#F6EEDA 墨#3A3023 淡墨#8A7E68 线#DCCDA8
   墨绿#16453A/#0F3229 金#B98A2F/#D8B96A 朱砂#A63D2C 衬线"Noto Serif SC","Songti SC"。 ==== */

/* chv2-01 屏底换纸纹：5×ID 叠加 + !important，压 L14046 skin-sj 3.2 的 (4,2,1)!important 冷纸底 */
#screen-course#screen-course#screen-course#screen-course#screen-course:has(.v2-academy) {
  background:
    radial-gradient(circle at 86% 4%, rgba(185, 138, 47, 0.07), transparent 26%),
    #F1E8D2 !important;
}

/* chv2-02 学堂衬线变量与竖排间距 */
#screen-course .v2-academy {
  --acad-serif: "Noto Serif SC", "Songti SC", "Source Han Serif SC", "STSong", "SimSun", "Noto Serif CJK SC", serif; /* font-unify-20260726-fix21 */
  gap: 16px;
}

/* chv2-03 卷首行：左题右注，底压书线 */
#screen-course .v2-academy .course-v2-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 0;
  padding: 0 0 12px;
  border-bottom: 1px solid #DCCDA8;
}

/* chv2-04 卷首内 span 重置基础层胶囊观感（命中 .acad-en / .acad-read） */
#screen-course .v2-academy .course-v2-page-head span {
  display: block;
  width: auto;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 0;
  background: transparent;
  font-weight: 500;
}

/* chv2-05 英文小注 ACADEMY */
#screen-course .v2-academy .acad-en {
  font-size: 10px !important;
  letter-spacing: 5px;
  color: #B98A2F;
}

/* chv2-06 大题「学堂」：衬线宽字距（压 L13834 !important） */
#screen-course .v2-academy .course-v2-page-head h1 {
  margin: 6px 0 0;
  font-family: var(--acad-serif);
  font-size: 30px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: 8px;
  color: #3A3023;
}

/* chv2-07 右侧「已修 N 讲」小字 */
#screen-course .v2-academy .acad-read {
  flex: 0 0 auto;
  padding-bottom: 4px !important;
  font-size: 11px !important;
  letter-spacing: 1.5px;
  color: #8A7E68;
  white-space: nowrap;
}

#screen-course .v2-academy .acad-read b {
  font-family: var(--acad-serif);
  font-size: 15px;
  font-weight: 700;
  color: #B98A2F;
}

/* chv2-08 续读深卡：墨绿渐变 + 右上金晕 */
#screen-course .v2-academy .acad-resume {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 14px;
  padding: 15px 16px;
  border: 1px solid rgba(15, 50, 41, 0.55);
  border-radius: 18px;
  background:
    radial-gradient(circle at 94% -12%, rgba(216, 185, 106, 0.22), transparent 46%),
    linear-gradient(135deg, #16453A, #0F3229);
  box-shadow: 0 16px 32px rgba(15, 50, 41, 0.22);
}

#screen-course .v2-academy .acad-resume-label {
  grid-column: 1 / -1;
  margin-bottom: 3px;
  font-size: 10px;
  letter-spacing: 4px;
  color: #D8B96A;
}

#screen-course .v2-academy .acad-resume-course {
  grid-column: 1;
  font-family: var(--acad-serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.3;
  color: #F6EEDA;
}

#screen-course .v2-academy .acad-resume-lesson {
  grid-column: 1;
  margin: 0;
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1.5;
  color: rgba(233, 223, 200, 0.72);
}

/* chv2-09 金色胶囊「继续研读」（钩子沿用课程卡 detail 进入） */
#screen-course .v2-academy .acad-resume-btn {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: center;
  min-height: 36px;
  padding: 9px 16px;
  border: 1px solid rgba(216, 185, 106, 0.6);
  border-radius: 999px;
  background: linear-gradient(135deg, #B98A2F, #D8B96A);
  color: #2B1F10;
  font-family: var(--acad-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1;
  box-shadow: 0 10px 22px rgba(15, 50, 41, 0.32);
}

/* chv2-10 页签行改书签式：透明底衬线字 + 金杠选中（压 L13847/L13852 !important 与 skin 层胶囊） */
#screen-course .v2-academy .course-v2-tabs {
  gap: 2px !important;
  margin: 0 -20px 0 0 !important;
  padding-bottom: 0;
  border-bottom: 1px solid rgba(220, 205, 168, 0.55);
}

#screen-course .v2-academy .course-v2-tabs button {
  position: relative;
  min-width: 0 !important;
  height: 40px !important;
  padding: 0 11px 12px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-family: var(--acad-serif);
  font-size: 14px !important;
  font-weight: 600;
  letter-spacing: 2px;
  color: #8A7E68;
}

#screen-course .v2-academy .course-v2-tabs button::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 0;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #B98A2F, #D8B96A);
  transform: translateX(-50%);
}

#screen-course .v2-academy .course-v2-tabs button.active {
  background: transparent;
  box-shadow: none;
  color: #3A3023;
  font-weight: 700;
}

#screen-course .v2-academy .course-v2-tabs button.active::after {
  width: 24px;
}

/* chv2-11 课程卡改书目卡：纸面双行网格（书脊通栏左立，右列内容 + 底部开卷行；压 L13862 !important） */
#screen-course .v2-academy .course-v2-card {
  grid-template-columns: 46px minmax(0, 1fr) !important;
  grid-template-rows: auto auto;
  align-items: stretch;
  gap: 2px 14px !important;
  min-height: 0 !important;
  padding: 14px 14px 10px !important;
  border: 1px solid #DCCDA8;
  border-radius: 14px !important;
  background: #FBF6EA;
  box-shadow: 0 12px 26px rgba(58, 48, 35, 0.08);
}

#screen-course .v2-academy .course-v2-card.primary {
  border-color: rgba(185, 138, 47, 0.5);
  box-shadow: 0 14px 30px rgba(138, 106, 31, 0.12);
}

/* chv2-12 书脊条：墨绿窄条 + 内侧金缝线 + 竖排衬线首二字（压 L13870 !important） */
#screen-course .v2-academy .course-v2-thumb {
  grid-row: 1 / span 2;
  width: 46px !important;
  height: auto !important;
  min-height: 92px;
  align-self: stretch;
  border-radius: 6px 12px 12px 6px !important;
  background: linear-gradient(160deg, #1E5044, #0F3229);
  color: #E9DFC8;
  box-shadow:
    inset -3px 0 0 rgba(216, 185, 106, 0.38),
    inset 0 0 0 1px rgba(233, 223, 200, 0.1);
}

#screen-course .v2-academy .course-v2-thumb b {
  writing-mode: vertical-rl;
  font-family: var(--acad-serif);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 7px;
  color: #E9DFC8;
}

/* chv2-13 书目卡右列：课名衬线（压 L13877 !important） */
#screen-course .v2-academy .course-v2-card-main strong {
  font-family: var(--acad-serif);
  font-size: 16.5px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px;
  color: #3A3023;
}

/* chv2-14 简介（压 L13883 !important） */
#screen-course .v2-academy .course-v2-card-main p {
  margin: 5px 0 8px !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
  letter-spacing: 0.4px;
  color: #8A7E68;
}

/* chv2-15 讲数徽标：内凹绢底金边（压 L13889 !important） */
#screen-course .v2-academy .course-v2-card-main span {
  min-height: 20px !important;
  padding: 2px 9px !important;
  border: 1px solid rgba(185, 138, 47, 0.38);
  border-radius: 999px;
  background: #F6EEDA;
  color: #8A6A1F;
  font-size: 10.5px !important;
  font-weight: 600;
  letter-spacing: 1px;
}

/* chv2-16 进度线（金） */
#screen-course .v2-academy .course-v2-card-main i {
  display: block;
  width: 100%;
  height: 3px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(58, 48, 35, 0.1);
}

#screen-course .v2-academy .course-v2-card-main i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #B98A2F, #D8B96A);
}

/* chv2-17 「开卷 →」行：卡底虚线上的暗金衬线字（原 detail 钩子按钮只改观感；压 L13896 !important） */
#screen-course .v2-academy .course-v2-card > button {
  grid-column: 2;
  justify-self: end;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 30px;
  margin-top: 10px;
  padding: 6px 18px;
  border: 1px solid rgba(185, 138, 47, 0.5);
  border-radius: 999px;
  background: linear-gradient(160deg, #F6EEDA, #EFE2C2);
  box-shadow: 0 4px 10px rgba(138, 106, 31, 0.12);
  color: #8A6A1F;
  font-family: var(--acad-serif);
  font-size: 12.5px !important;
  font-weight: 700;
  letter-spacing: 3px;
  text-align: center;
  transition: transform .12s ease, box-shadow .12s ease;
}
#screen-course .v2-academy .course-v2-card > button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(138, 106, 31, 0.14);
}

/* chv2-18 学径提示：两侧引线小字 */
#screen-course .v2-academy .acad-path-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0;
  color: #8A7E68;
  font-size: 11px;
  letter-spacing: 2px;
}

#screen-course .v2-academy .acad-path-hint::before,
#screen-course .v2-academy .acad-path-hint::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #DCCDA8;
}
/* course-home-v2-done */

/* mz-keju */
/* ==== 学籍科举功名卡（2026-07-08）：#screen-mine MEMBERSHIP 块重构（已整块移至 CREDITS 之前）。
   功名大字 + 五级成长径（童生→秀才→举人→贡士→进士）+ 解锁小注 + 会员行 + 打卡行；
   钩子 data-mine-detail="vip" / "practice-records" 原样保留。
   骨法沿用 mz-：底#FAF9F5 域内细线#E8E4DB 金#C9A15C 朱砂#C2543F 淡墨#9B958A 衬线 var(--mz-serif)。
   成长径 flex 五等分，点间细线用节点 ::before 伪元素铺设（首点无线，已达段落描金）。 ==== */

/* kj-01 功名行：朱砂衬线大字 + 基线小注 */
#screen-mine .mz-keju-rank {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 2px;
}

#screen-mine .mz-keju-rank b {
  font-family: var(--mz-serif);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 5px;
  line-height: 1.15;
  color: #C2543F;
}

#screen-mine .mz-keju-rank span {
  font-size: 11px;
  letter-spacing: 1px;
  color: #9B958A;
  white-space: nowrap;
}

/* kj-02 成长径：五级等分横排 */
#screen-mine .mz-keju-path {
  display: flex;
  align-items: flex-start;
  margin: 14px 0 10px;
}

#screen-mine .mz-keju-node {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

/* kj-03 点间细线：起于左邻点缘、止于本点缘（首点无线） */
#screen-mine .mz-keju-node::before {
  content: "";
  position: absolute;
  top: 5px;
  left: calc(-50% + 10px);
  right: calc(50% + 10px);
  height: 1px;
  background: #E8E4DB;
}

#screen-mine .mz-keju-node:first-child::before {
  display: none;
}

/* 已达段落连线描金 */
#screen-mine .mz-keju-node.is-done::before,
#screen-mine .mz-keju-node.is-current::before {
  background: #C9A15C;
}

/* kj-04 级点：过金实心 / 现朱实心带晕 / 未至灰空 */
#screen-mine .mz-keju-node i {
  box-sizing: border-box;
  width: 11px;
  height: 11px;
  border: 1px solid #D9D3C7;
  border-radius: 999px;
  background: #FAF9F5;
}

#screen-mine .mz-keju-node.is-done i {
  border-color: #C9A15C;
  background: #C9A15C;
}

#screen-mine .mz-keju-node.is-current i {
  border-color: #C2543F;
  background: #C2543F;
  box-shadow: 0 0 0 3px rgba(194, 84, 63, 0.15);
}

/* kj-05 点下级名 9.5px */
#screen-mine .mz-keju-node em {
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 1px;
  line-height: 1;
  color: #9B958A;
  white-space: nowrap;
}

#screen-mine .mz-keju-node.is-current em {
  font-family: var(--mz-serif);
  font-weight: 700;
  color: #C2543F;
}

/* kj-06 当前级下一句解锁小注 */
#screen-mine .mz-keju-unlock {
  margin: 0 0 16px;
  font-size: 11px;
  letter-spacing: 0.5px;
  line-height: 1.7;
  color: #9B958A;
}

#screen-mine .mz-keju-unlock b {
  font-family: var(--mz-serif);
  font-weight: 700;
  color: #262320;
}

/* kj-07 会员行「直通进士」小徽：衬线金字 */
#screen-mine .mz-keju-mark {
  margin-left: 8px;
  font-style: normal;
  font-family: var(--mz-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #C9A15C;
}
/* mz-keju-done */

/* 3.23 First-load fix: never flash the legacy native workbench.
   While the replica iframe is loading, show a paper placeholder in place;
   the legacy chart-home stays collapsed at all times. */
#screen-chart .workbench-replica-host:not(.is-ready) {
  --replica-scale: 0.5;
  --replica-width: calc(853px * var(--replica-scale));
  --replica-offset: max(0px, calc((100% - var(--replica-width)) / 2));
  display: block !important;
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: calc(1844px * var(--replica-scale)) !important;
  min-height: calc(1844px * var(--replica-scale)) !important;
  overflow: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: var(--paper, #F1E8D2) !important;
}

#screen-chart .workbench-replica-host:not(.is-ready) + .chart-home.workbench-home {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 1px !important;
  max-width: none !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: block !important;
}

/* The iframe element itself paints paper while its document loads. */
#screen-chart .workbench-replica-frame {
  background: var(--paper, #F1E8D2) !important;
}

/* 3.24 mine-edit：「我的」页 名字/头像/生辰 编辑（青囊骨法：#FAF9F5 / #E8E4DB / #C9A15C / #2B2823） */

#screen-mine .mz-name-row {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 10px;
  min-width: 0;
}

#screen-mine .mz-name-row .mz-name {
  margin: 0;
  cursor: pointer;
}

#screen-mine .mz-name-row .mz-name::after {
  content: "改";
  display: inline-block;
  margin-left: 9px;
  vertical-align: 6px;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 1;
  padding: 3px 6px 2px;
  border: 1px solid #E8E4DB;
  border-radius: 999px;
  color: #9B958A;
}

#screen-mine .mz-avatar {
  flex: none;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
}

/* 朱砂/墨绿方章头像（纯 CSS，衬线单字，微旋转） */
.mz-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  font-family: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", "Noto Serif CJK SC", serif; /* font-unify-20260726-fix21 */
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
  color: #F6EFE0;
  transform: none;
  box-shadow: inset 0 0 0 1.5px rgba(250, 249, 245, 0.5), inset 0 0 10px rgba(24, 16, 10, 0.22);
}

.mz-seal[data-tone="cinnabar"] {
  background: #A63D2C;
}

.mz-seal[data-tone="ink"] {
  background: #16453A;
}

.mz-seal[data-tone="none"] {
  background: transparent;
  color: #9B958A;
  font-size: 17px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px #E8E4DB;
}

/* 名字下方生辰信息行 */
#screen-mine .mz-birth-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 7px 6px 7px 0;
  border: 0;
  border-bottom: 1px solid #E8E4DB;
  background: none;
  font-family: var(--mz-serif);
  font-size: 12px;
  letter-spacing: 1.5px;
  color: #9B958A;
  cursor: pointer;
}

#screen-mine .mz-birth-line b {
  font-weight: 600;
  color: #262320;
}

#screen-mine .mz-birth-line span {
  font-size: 10px;
  letter-spacing: 1px;
  padding: 3px 8px 2px;
  border: 1px solid #C9A15C;
  border-radius: 999px;
  color: #C9A15C;
  line-height: 1;
}

/* 编辑弹层（改名 / 章样） */
.mine-edit-sheet {
  margin: auto;
  padding: 0;
  border: 1px solid #E8E4DB;
  border-radius: 18px;
  background: #FAF9F5;
  color: #262320;
  width: min(324px, calc(100vw - 48px));
  box-shadow: 0 24px 60px rgba(38, 35, 32, 0.24);
}

.mine-edit-sheet::backdrop {
  background: rgba(38, 35, 32, 0.44);
}

.mine-edit-panel {
  padding: 26px 24px 24px;
}

.mine-edit-eyebrow {
  margin: 0 0 14px;
  font-family: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", "Noto Serif CJK SC", serif; /* font-unify-20260726-fix21 */
  font-size: 11px;
  letter-spacing: 6px;
  color: #C9A15C;
}

.mine-edit-title {
  margin: 0 0 18px;
  font-family: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", "Noto Serif CJK SC", serif; /* font-unify-20260726-fix21 */
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.3;
  color: #262320;
}

.mine-edit-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid #E8E4DB;
  border-radius: 12px;
  background: #FFFDF7;
  font-family: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", "Noto Serif CJK SC", serif; /* font-unify-20260726-fix21 */
  font-size: 18px;
  letter-spacing: 1px;
  color: #262320;
}

.mine-edit-input:focus {
  outline: none;
  border-color: #C9A15C;
}

.mine-edit-hint {
  margin: 12px 0 0;
  font-size: 11px;
  letter-spacing: 1px;
  line-height: 1.8;
  color: #9B958A;
}

.mine-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.mine-edit-btn {
  min-height: 38px;
  padding: 9px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-family: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", "Noto Serif CJK SC", serif; /* font-unify-20260726-fix21 */
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1;
  cursor: pointer;
}

.mine-edit-btn.is-dark {
  background: #2B2823;
  border-color: #2B2823;
  color: #F6EFE0;
}

.mine-edit-btn.is-line {
  border-color: #E8E4DB;
  color: #262320;
}

/* 章样九宫格 */
.mine-seal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 8px;
}

.mine-seal-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 10px 4px 8px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: none;
  cursor: pointer;
}

.mine-seal-item .mz-seal {
  width: 46px;
  height: 46px;
  font-size: 25px;
}

.mine-seal-item:nth-child(2n) .mz-seal[data-tone="cinnabar"] {
  transform: none;
}

.mine-seal-item:nth-child(3n) .mz-seal[data-tone="ink"] {
  transform: none;
}

.mine-seal-item em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 1px;
  color: #9B958A;
}

.mine-seal-item.is-selected {
  border-color: #C9A15C;
  background: #FFFDF7;
}

/* 3.25 First-paint: keep the replica iframe invisible until layout vars are
   JS-synced (is-ready). Prevents the mis-centered wide flash on phones. */
#screen-chart .workbench-replica-host .workbench-replica-frame {
  transition: opacity 0.28s ease;
}

#screen-chart .workbench-replica-host:not(.is-ready) .workbench-replica-frame {
  opacity: 0 !important;
}

#screen-chart .workbench-replica-host:not(.is-ready) {
  overflow: hidden !important;
}

#screen-chart .workbench-replica-host:not(.is-ready)::after {
  content: "洞明";
  position: absolute;
  left: 50%;
  top: 34%;
  width: 74px;
  height: 74px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  font-family: "Songti SC", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", serif; /* font-unify-20260726-fix21 */
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #fbf6ea;
  background: #a63d2c;
  border-radius: 14px;
  box-shadow: inset 0 0 0 2px rgba(251, 246, 234, 0.55), 0 6px 18px rgba(58, 48, 35, 0.18);
  opacity: 0.9;
  pointer-events: none;
  animation: wbSealBreath 1.6s ease-in-out infinite alternate;
}

@keyframes wbSealBreath {
  from { opacity: 0.55; }
  to { opacity: 0.95; }
}

/* 3.26 mine page: align background with the site paper tone and separate
   modules into distinct page-paper cards (readability feedback). */
#screen-mine,
#screen-mine-detail.mine-detail-screen {
  background:
    linear-gradient(180deg, rgba(185, 138, 47, 0.035), transparent 140px),
    repeating-linear-gradient(0deg, rgba(58, 48, 35, 0.012) 0 1px, transparent 1px 3px),
    #F1E8D2 !important;
}

#screen-mine .mz-block {
  margin: 0 0 18px;
  padding: 16px 18px 18px;
  background: #FBF6EA;
  border: 1px solid rgba(220, 205, 168, 0.75);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(58, 48, 35, 0.045);
}

#screen-mine .mz-shead {
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #E3D9C2;
}

#screen-mine .mz-row {
  border-bottom: 1px solid #EDE4CF;
}

#screen-mine .mz-rows .mz-row:last-child {
  border-bottom: 0;
}

#screen-mine .mz-id {
  margin-bottom: 22px;
}

#screen-mine .mz-eyebrow {
  margin-bottom: 18px;
}

#screen-mine .mz-foot {
  color: #8A7E68;
}

/* ==== 我的·个人中心 创始人四项改版（2026-07-08 F5）：头部规整 / 科举九阶 / 两档会员 / 积分两路 ==== */

/* [A] 头部规整：命主身份独立一层（朱砂强调），入学/已修降为次级灰字 */
#screen-mine .mz-ident {
  margin: 0 0 4px;
  font-family: var(--mz-serif);
  font-size: 13px;
  letter-spacing: 1.5px;
  line-height: 1.6;
  color: #262320;
}
#screen-mine .mz-ident b.mz-cinnabar {
  font-family: var(--mz-serif);
  font-weight: 700;
}
#screen-mine .mz-ident span {
  margin-left: 10px;
  color: #9B958A;
  font-weight: 400;
}

/* [B] 科举九阶：节点更密、级名收窄防挤，连线间隙随之缩短 */
#screen-mine .mz-keju-path-9 .mz-keju-node {
  gap: 6px;
}
#screen-mine .mz-keju-path-9 .mz-keju-node em {
  font-size: 8.5px;
  letter-spacing: 0;
}
#screen-mine .mz-keju-path-9 .mz-keju-node i {
  width: 9px;
  height: 9px;
}
#screen-mine .mz-keju-path-9 .mz-keju-node::before {
  top: 4px;
  left: calc(-50% + 6px);
  right: calc(50% + 6px);
}

/* [C] 科举功名浮窗：晋升规则表（浮窗内，复用 mine-edit-sheet 骨架） */
#sheet-keju {
  max-height: calc(100vh - 48px);
}
#sheet-keju .mine-edit-panel {
  overflow-y: auto;
}
#sheet-keju .keju-tab {
  margin: 12px 0 4px;
  border: 1px solid #E8E4DB;
  border-radius: 12px;
  overflow: hidden;
}
#sheet-keju .keju-tab-row {
  display: grid;
  grid-template-columns: 64px 1fr 56px;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid #EFEBE2;
  font-size: 12px;
}
#sheet-keju .keju-tab-row:last-child {
  border-bottom: 0;
}
#sheet-keju .keju-tab-row span {
  font-family: var(--mz-serif);
  font-weight: 700;
  letter-spacing: 1px;
  color: #262320;
}
#sheet-keju .keju-tab-row em {
  font-style: normal;
  color: #8A7E68;
}
#sheet-keju .keju-tab-row i {
  font-style: normal;
  text-align: right;
  font-family: var(--mz-serif);
  font-weight: 700;
  color: #C9A15C;
}
#sheet-keju .keju-tab-row.is-done {
  background: #FBFAF6;
}
#sheet-keju .keju-tab-row.is-done span {
  color: #9B958A;
}
#sheet-keju .keju-tab-row.is-current {
  background: #FBF3F1;
}
#sheet-keju .keju-tab-row.is-current span {
  color: #C2543F;
}
#sheet-keju .keju-tab-head {
  background: #F3EFE5;
}
#sheet-keju .keju-tab-head span,
#sheet-keju .keju-tab-head em,
#sheet-keju .keju-tab-head i {
  font-family: var(--mz-serif);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 1px;
  color: #9B958A;
}
/* ==== 我的·个人中心 改版结束 ==== */

/* ==== 全部模块 底部浮窗（新增，2026-07-09；排盘菜单页落地 - 母版C）====
 * 依附 dialog#sheet-all-modules（见 index.html），沿用既有 .sheet/.sheet-handle/.sheet-head 结构，
 * 网格与卡片视觉照搬 原型-排盘菜单页v1/index.html 的 .mgrid/.m 系统，
 * 颜色一律走既有 token（--bg/--paper/--jade/--amber/--line 等），随 html.skin-sj 换肤自动生效。 */
.all-modules-sheet .sheet-head {
  align-items: flex-start;
}

/* 叉号(×)：dialog.showModal() 打开时浏览器会自动 focus 第一个可聚焦元素（就是这个
   关闭钮），于是它带上难看的焦点高亮圈。这里消掉焦点外圈，背景仍与默认态一致
   （.sheet-head button 用 var(--soft)），不影响正常显示。 */
.all-modules-sheet [data-close]:focus,
.all-modules-sheet [data-close]:focus-visible {
  outline: none;
  box-shadow: none;
  background: var(--soft);
}
.all-modules-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted-2);
}
/* 排盘菜单页自适应（2026-07-25 fix3）：浮窗已删除，.mgrid 现在只服务于
 * modules-screen。用 auto-fill 按容器宽度自动列数，小屏不溢出；卡片居中、不被拉伸。 */
/* modules-layout-20260726-fix16: 排盘菜单页单独内边距，压过全局 .screen padding 清零。
 * 浮窗已删除，.mgrid/.m 当前只服务于 #allModulesGrid，这里把加大样式限定在
 * .modules-screen 作用域内，避免影响任何残留引用。 */
#screen-modules.active {
  display: flex !important;
  flex-direction: column;
  padding: 16px 20px 18px !important;
}
.modules-screen .all-modules-sub {
  margin: 18px 0 14px;
}
.modules-screen .mgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 10px;
  align-content: start;
  justify-items: center;
  padding: 0;
}
.modules-screen .m {
  gap: 7px;
  padding: 16px 6px 14px;
}
.modules-screen .m .box {
  width: 64px;
  height: 64px;
  font-size: 24px;
}
.modules-screen .m strong {
  font-size: 15px;
}
.modules-screen .m small {
  font-size: 11px;
}
@media (max-width: 360px) {
  .modules-screen .mgrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px 8px;
  }
  .modules-screen .m .box {
    width: 58px;
    height: 58px;
  }
}
/* ① 模块浮窗（2026-07-15t）——「菜单可见、可点 + 浮窗浮在其上、绝不顶菜单」。
   踩过的坑：非模态 <dialog> 默认 position:absolute，会占文档流，把 72px 高的
   底部菜单顶上去。根治办法（这次真的对了）：
     · all-modules.js 用非模态 show() —— 菜单不被 inert 锁死、随手可点；
     · 这里显式 position:fixed —— 浮窗脱离文档流，底部停在菜单上沿（bottom = 菜单高
       72px），菜单整条露出、可点；浮窗和菜单同时可见。
   圆角/滑动/大小仍全用 .sheet 默认，只覆盖定位。 */
.all-modules-sheet[open] {
  position: fixed !important;
  left: 50%;
  transform: translateX(-50%);
  top: auto !important;
  /* bottom 由 all-modules.js 在打开时按底部菜单实测高度精确设置（桌面 54 / 手机 72
     不一，写死必留缝）。这里给个兜底值，JS 每次打开都会覆盖成精确高度、零缝。 */
  bottom: 54px;
  margin: 0 !important;
  max-height: calc(100vh - 120px) !important;
  z-index: 130;
}
.mgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 6px;
  padding: 4px 2px 6px;
}
.m {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 14px 6px 12px;
  border-radius: 16px;
  cursor: pointer;
  background: transparent;
  border: 0;
  transition: 0.15s;
  min-height: 44px;
  font-family: inherit;
}
.m:active {
  transform: scale(0.96);
  background: var(--jade-soft);
}
.m[disabled] {
  cursor: default;
  opacity: 0.72;
}
.m[disabled]:active {
  transform: none;
  background: transparent;
}
.m .box {
  width: 56px;
  height: 56px;
  border-radius: 17px;
  background: var(--jade-soft);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--amber);
  font-size: 22px;
  font-weight: 700;
  font-family: var(--mz-serif, serif);
}
.m strong {
  font-size: 14px;
  color: var(--jade);
  letter-spacing: 0.02em;
}
.m small {
  font-size: 10.5px;
  color: var(--muted-2);
  text-align: center;
  line-height: 1.3;
}
.m.cur .box {
  background: linear-gradient(160deg, var(--jade), var(--jade-deep));
  border-color: var(--jade-deep);
  color: #f0d691;
}
.m.cur strong {
  color: var(--jade-deep);
}
.m.soon .box {
  color: var(--muted-2);
  background: var(--soft);
  border-style: dashed;
}
.m.soon strong {
  color: var(--muted);
}
.m .flag {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 9px;
  color: var(--amber);
  background: var(--amber-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1px 5px;
}
.m.cur .flag {
  color: #f0d691;
  background: transparent;
  border-color: transparent;
}
.m.soon .flag {
  color: var(--muted-2);
}
@media (max-width: 360px) {
  .mgrid {
    gap: 8px 4px;
  }
  .m .box {
    width: 50px;
    height: 50px;
  }
  .m strong {
    font-size: 13px;
  }
}
/* ==== 全部模块 底部浮窗 结束 ==== */

/* ==== [学堂时间轴] 二级页课程流·开始 ==== */
#screen-course .ctl{
  position:relative;
  margin-top:16px;
  padding-left:44px;
}
#screen-course .ctl::before{
  content:"";
  position:absolute;
  left:16px; top:8px; bottom:16px;
  width:2px;
  background:linear-gradient(#D8C9A6,#EADFC6);
  border-radius:2px;
}
#screen-course .ctl-chapter{ position:relative; }
#screen-course .ctl-chapter + .ctl-chapter{ margin-top:24px; }
#screen-course .ctl-chapter-head{
  position:relative;
  display:flex; flex-direction:column; gap:3px;
  margin:0 0 4px;
  min-height:34px;
}
#screen-course .ctl-chapter-idx{
  position:absolute;
  left:-44px; top:-3px;
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  background:linear-gradient(160deg,#1E5044,#0F3229);
  color:#E9DFC8;
  font-family:var(--acad-serif,serif);
  font-size:13px; font-weight:700; letter-spacing:1px;
  box-shadow:0 6px 14px rgba(15,50,41,.22);
}
#screen-course .ctl-chapter-meta b{
  display:block;
  font-family:var(--acad-serif,serif);
  font-size:15px; font-weight:700; letter-spacing:1px;
  color:#3A3023; line-height:1.35;
}
#screen-course .ctl-chapter-meta em{
  display:block; margin-top:2px;
  font-style:normal; font-size:11.5px; line-height:1.55;
  color:#9C8F76;
}
#screen-course .ctl-track{ position:relative; margin-top:4px; }
#screen-course .ctl-lesson{
  position:relative;
  display:flex; align-items:center;
  width:100%;
  padding:11px 12px 11px 0;
  border:0; background:transparent;
  text-align:left; cursor:pointer;
  border-bottom:1px dashed rgba(220,205,168,.55);
  transition:background .15s ease;
}
#screen-course .ctl-lesson:last-child{ border-bottom:0; }
#screen-course .ctl-lesson:active{ background:rgba(185,138,47,.07); }
#screen-course .ctl-dot{
  position:absolute;
  left:-33px; top:50%; transform:translateY(-50%);
  width:11px; height:11px; border-radius:50%;
  background:#FBF6EA;
  border:2px solid #C4B489;
  box-shadow:0 0 0 3px #FBF6EA;
}
#screen-course .ctl-lesson-body{
  flex:1; min-width:0;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
#screen-course .ctl-lesson-title{
  min-width:0; display:flex; align-items:baseline; gap:8px;
  font-size:13.5px; font-weight:600; color:#3A3023;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#screen-course .ctl-lesson-title i{
  flex:none; font-style:normal;
  font-family:var(--acad-serif,serif);
  font-size:12px; font-weight:700; letter-spacing:1px; color:#B98A2F;
}
#screen-course .ctl-lesson-status{
  flex:none; font-size:11px; letter-spacing:.5px;
  padding:2px 10px; border-radius:999px;
  color:#8A6A1F; background:#F6EEDA;
  border:1px solid rgba(185,138,47,.35);
}
/* 已学：墨绿实心节点 */
#screen-course .ctl-lesson.completed .ctl-dot{ background:#1E5044; border-color:#1E5044; }
#screen-course .ctl-lesson.completed .ctl-lesson-status{
  color:#1E5044; background:rgba(30,80,68,.08); border-color:rgba(30,80,68,.3);
}
/* 当前/在学：朱红实心节点 + 光晕 + 朱红标签 */
#screen-course .ctl-lesson.in-progress .ctl-dot,
#screen-course .ctl-lesson.is-current .ctl-dot{
  background:#C0392B; border-color:#C0392B;
  box-shadow:0 0 0 3px #FBF6EA,0 0 0 6px rgba(192,57,43,.16);
}
#screen-course .ctl-lesson.in-progress .ctl-lesson-title,
#screen-course .ctl-lesson.is-current .ctl-lesson-title{ color:#B02A1C; font-weight:700; }
#screen-course .ctl-lesson.in-progress .ctl-lesson-status,
#screen-course .ctl-lesson.is-current .ctl-lesson-status{
  color:#fff; background:#C0392B; border-color:#C0392B;
}
#screen-course .ctl-lesson .ctl-now{
  flex:none; margin-left:2px;
  font-style:normal; font-size:10px; font-weight:700; letter-spacing:1px;
  color:#fff; background:#C0392B;
  padding:1px 6px; border-radius:5px;
  transform:translateY(-1px);
}
/* 未解锁：灰空心节点 */
#screen-course .ctl-lesson.locked .ctl-dot{ background:#FBF6EA; border-color:#CFC2A6; }
#screen-course .ctl-lesson.locked .ctl-lesson-title{ color:#B3A88E; }
#screen-course .ctl-lesson.locked .ctl-lesson-title i{ color:#C4B58F; }
#screen-course .ctl-lesson.locked .ctl-lesson-status{
  color:#A99B7E; background:#F1EADA; border-color:rgba(180,165,130,.3);
}
/* ==== [学堂时间轴] 二级页课程流·结束 ==== */

/* ==== [学堂书目卡] 信息更足 + 书籍感·开始 ==== */
/* 书脊：墨绿书脊 + 右侧奶白书页叠边 + 内侧金缝 + 立体上浮 */
#screen-course .v2-academy .cv2-book .course-v2-thumb{
  position:relative;
  width:50px !important;
  min-height:100px;
  overflow:hidden;
  border-radius:10px !important;
  background:linear-gradient(160deg,#1E5044,#0F3229);
  box-shadow:0 8px 18px rgba(15,50,41,.20);
}
/* 金色内框（题签质感，去掉杂乱书页条纹） */
#screen-course .v2-academy .cv2-book .course-v2-thumb::before{
  content:"";
  position:absolute; inset:5px;
  border:1px solid rgba(216,185,106,.55);
  border-radius:6px;
  pointer-events:none;
}
#screen-course .v2-academy .cv2-book .course-v2-thumb::after{ content:none; }
#screen-course .v2-academy .cv2-book .course-v2-thumb b{
  position:relative; z-index:1;
}
/* 讲师署名 */
#screen-course .v2-academy .cv2-book .course-v2-card-main p.cv2-teacher{
  margin:3px 0 6px !important;
  font-size:11.5px !important;
  letter-spacing:.5px;
  color:#8A6A1F !important;
}
/* 简介压紧 */
#screen-course .v2-academy .cv2-book .course-v2-card-main > p{
  margin:0 0 8px !important;
}
/* 徽标组：讲数 / K级 / 时长 */
#screen-course .v2-academy .cv2-book .cv2-chips{
  display:flex; flex-wrap:wrap; gap:6px;
  margin:0 0 10px;
}
/* 进度条 + 已学说明 */
#screen-course .v2-academy .cv2-book .cv2-progress{ margin-top:2px; }
#screen-course .v2-academy .cv2-book .cv2-progress i{ margin-top:0 !important; }
#screen-course .v2-academy .cv2-book .cv2-progress em{
  display:block; margin-top:6px;
  font-style:normal; font-size:10.5px; letter-spacing:.5px;
  color:#9A8A6A;
}
/* ==== [学堂书目卡] 结束 ==== */

/* ==== [mine] 未登录态 + 登录浮层头部（并发覆盖后重建） ==== */
.mz-name-guest,
.mz-guest-tip,
.mz-login-cta {
  display: none;
}
#screen-mine.is-guest #mineNameText,
#screen-mine.is-guest .mz-ident,
#screen-mine.is-guest .mz-meta,
#screen-mine.is-guest .mz-birth-line,
#screen-mine.is-guest .mz-gear {
  display: none !important;
}
#screen-mine.is-guest .mz-name-guest {
  display: block;
}
#screen-mine.is-guest .mz-guest-tip {
  display: block;
  margin: 10px 0 0;
  font-size: 12.5px;
  color: #6B6459;
}
#screen-mine.is-guest .mz-login-cta {
  display: inline-flex;
  align-items: center;
  margin: 12px auto 2px;
  height: 38px;
  padding: 0 22px;
  border: 0;
  border-radius: 20px;
  cursor: pointer;
  background: linear-gradient(180deg, #208260, #0F6648);
  color: #fff;
  font-size: 14px;
  letter-spacing: .06em;
  font-family: var(--mz-serif, inherit);
}
#screen-mine.is-guest .mz-seal {
  background: linear-gradient(160deg, #9AA8A1, #6D7D75) !important;
}
.mz-login-body {
  padding: 4px 20px 0;
}
.mz-login-tip {
  font-size: 12.5px;
  color: #6B6459;
  text-align: center;
  margin: 2px 0 16px;
}
.mz-wx-btn {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 12px;
  background: #07C160;
  color: #fff;
  font-size: 15.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
/* ===== 数据管理 · 导入导出（20260714 重写）===== */
.mzdata-hero { padding: 6px 0 14px; }
.mzdata-hero span { font-size: 11px; letter-spacing: 3px; color: #9AA39D; }
.mzdata-hero h2 { margin: 6px 0 6px; font-size: 20px; letter-spacing: 1.5px; color: #16453A; }
.mzdata-hero p { margin: 0; font-size: 13px; line-height: 1.8; color: #7A6F5A; }
.mzdata-card {
  background: rgba(255, 255, 255, .62);
  border: 1px solid rgba(22, 69, 58, .12);
  border-radius: 14px; padding: 15px 16px; margin: 0 0 16px;
}
.mzdata-lead { margin: 0 0 10px; font-size: 13.5px; line-height: 1.8; color: #4a5a52; }
.mzdata-note {
  margin: 0 0 12px; padding: 10px 12px; border-radius: 10px;
  background: rgba(185, 138, 47, .07); border: 1px solid rgba(185, 138, 47, .2);
  font-size: 12.5px; line-height: 1.75; color: #7a6a4a;
}
.mzdata-btn {
  display: block; width: 100%; min-height: 42px; margin: 0 0 8px;
  border: 1px solid rgba(22, 69, 58, .18); border-radius: 11px;
  background: rgba(255, 255, 255, .8); color: #16453A;
  font-family: "Noto Serif SC", serif; font-size: 13.5px; letter-spacing: 1px; cursor: pointer;
}
.mzdata-btn.is-dark { border: 0; background: linear-gradient(150deg, #1A5044, #0F3229); color: #F3ECD8; }
.mzdata-btn.is-danger { border-color: rgba(179, 38, 30, .3); color: #8a3a32; }
.mzdata-btn:active { filter: brightness(.95); }
.mzdata-hint { margin: 8px 0 0; font-size: 12.5px; line-height: 1.75; color: #9A8F79; }
.mzdata-hint.is-ok { color: #1A5044; }
.mzdata-hint.is-err { color: #8a3a32; }
.mzdata-guide {
  margin: 10px 0 0; padding: 14px 15px; border-radius: 12px;
  background: rgba(22, 69, 58, .04); border: 1px solid rgba(22, 69, 58, .12);
}
.mzdata-guide h4 { margin: 0 0 8px; font-size: 14.5px; color: #16453A; letter-spacing: 1px; }
.mzdata-guide p { margin: 0 0 8px; font-size: 13px; line-height: 1.8; color: #5a6a62; }
.mzdata-guide ol { margin: 0 0 12px; padding-left: 20px; }
.mzdata-guide li { margin: 6px 0; font-size: 13px; line-height: 1.8; color: #5a6a62; }
/* 提示词：等宽、可选中、可长按复制 —— 微信里 clipboard 常被禁，长按是最后一条路 */
.mzdata-prompt {
  margin: 0 0 10px; padding: 12px; border-radius: 10px;
  background: #2b2f2c; color: #d8e0d6;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.7;
  white-space: pre-wrap; word-break: break-all;
  max-height: 260px; overflow: auto;
  -webkit-user-select: text; user-select: text;
}

/* 微信外 + 短信未通 = 登录不了。把登录浮层里那些按了也没用的控件压暗，
   并在上面放一句明确的话。短信一通，服务端 capabilities.sms 变 true，这些类自动摘掉。 */
.mz-nologin-tip {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(179, 38, 30, .06);
  border: 1px solid rgba(179, 38, 30, .18);
  color: #8a3a32;
  font-size: 12.5px;
  line-height: 1.75;
}
.mz-login-body.is-nologin .mz-wx-btn,
.mz-login-body.is-nologin .mz-lpane,
.mz-login-body.is-nologin .mz-login-or {
  opacity: .38;
  pointer-events: none;   /* 按了也没用的东西，就别让人按 */
}

/* 充值页：微信外登录不了时，替换掉支付渠道条 */
.mzd-pay-blocked {
  margin: 14px 0 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(179, 38, 30, .06);
  border: 1px solid rgba(179, 38, 30, .18);
  color: #8a3a32;
  font-size: 12.5px;
  line-height: 1.8;
  text-align: center;
}

/* ===== 支付渠道条（20260713 新增）=====
   之前 .mzv-pay-opt / .mzv-pay-ic 在整个 styles.css 里**没有任何样式** ——
   守护会员页那个「支付渠道」渲染出来就是个裸 <button>，用户根本看不出它是什么。
   现在补上，并在充值页也复用。

   注意：不给用户选渠道 —— 微信内只能微信支付、微信外只能支付宝，两边都是唯一解。
   这一条只是**告诉用户点下去会跳到哪儿**。 */
.mzv-pay {
  display: flex;
  justify-content: center;
  margin: 14px 0 10px;
}
.mzv-pay-opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(22, 69, 58, .14);
  background: rgba(255, 255, 255, .6);
  font-size: 13.5px;
  letter-spacing: .5px;
  color: #4a5a52;
}
.mzv-pay-opt.is-wx { color: #07C160; border-color: rgba(7, 193, 96, .3); background: rgba(7, 193, 96, .06); }
.mzv-pay-opt.is-ali { color: #1677FF; border-color: rgba(22, 119, 255, .3); background: rgba(22, 119, 255, .06); }
.mzv-pay-logo {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* 微信 logo。用 SVG，不再用「微」字当图标 ——
   .mz-wx-btn 是 flex+gap，字符图标会被当成独立 flex item，跟后面的文字之间多出 8px 空隙。 */
.mz-wx-logo {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: #fff;
}
.mz-wx-btn span {
  letter-spacing: 1px;   /* 「微信一键登录」是一个文本节点，不会被 gap 拆开 */
}
.mz-wx-ico {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  color: #07C160;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.mz-login-or {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #A9B0AA;
  font-size: 12px;
  margin: 18px 0 14px;
}
.mz-login-or::before,
.mz-login-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #E7E1D5;
}
.mz-ltab {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.mz-ltab button {
  flex: 1;
  height: 38px;
  border: 1px solid #E7E1D5;
  background: #FFFEFB;
  border-radius: 10px;
  font-size: 13px;
  color: #6B6459;
  cursor: pointer;
}
.mz-ltab button.is-on {
  border-color: #176F52;
  background: #176F52;
  color: #fff;
}
.mz-lpane[hidden] {
  display: none;
}
.mz-lin {
  width: 100%;
  height: 46px;
  border: 1px solid #E7E1D5;
  border-radius: 12px;
  padding: 0 14px;
  font-size: 15px;
  outline: none;
  background: #FFFEFB;
  margin-bottom: 12px;
}
.mz-lin:focus {
  border-color: #176F52;
}
.mz-lcode {
  display: flex;
  gap: 8px;
}
.mz-lcode .mz-lin {
  flex: 1;
}
.mz-getcode {
  white-space: nowrap;
  height: 46px;
  padding: 0 14px;
  border: 1px solid #176F52;
  background: none;
  color: #176F52;
  border-radius: 12px;
  font-size: 13px;
  cursor: pointer;
}
.mz-getcode[disabled] {
  opacity: .5;
  pointer-events: none;
}
.mz-lerr {
  color: #B23A2E;
  font-size: 12px;
  min-height: 16px;
  margin: 0 2px 8px;
}
.mz-agree {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11.5px;
  color: #6B6459;
  line-height: 1.55;
  margin: 0 0 16px;
}
.mz-agree input {
  margin-top: 2px;
  flex: none;
}
.mz-login-go {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  background: linear-gradient(180deg, #208260, #0F6648);
  color: #fff;
  font-size: 16px;
  letter-spacing: .2em;
  padding-left: .2em;
}
/* ==== [mine] 登录态 + 登录浮层 结束 ==== */

/* ==== [mine] 会员权益对比表（vip 详情）（并发覆盖后重建） 开始 ==== */
#screen-mine-detail .mzd-cmp-wrap {
  margin: 14px 0 4px;
  border: 1px solid #E7E1D5;
  border-radius: 14px;
  overflow: hidden;
  background: #FFFEFB;
}
#screen-mine-detail .mzd-cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
#screen-mine-detail .mzd-cmp th,
#screen-mine-detail .mzd-cmp td {
  padding: 9px 6px;
  text-align: center;
  border-bottom: 1px solid #EEE8DC;
}
#screen-mine-detail .mzd-cmp thead th {
  font-weight: 600;
  color: #2A2622;
  background: #F6F1E7;
  font-size: 12.5px;
}
#screen-mine-detail .mzd-cmp thead th.is-max,
#screen-mine-detail .mzd-cmp td.is-max {
  background: #F7EAE6;
}
#screen-mine-detail .mzd-cmp thead th.is-max {
  color: #B23A2E;
}
#screen-mine-detail .mzd-cmp tbody td:first-child,
#screen-mine-detail .mzd-cmp thead th:first-child {
  text-align: left;
  color: #6B6459;
  white-space: nowrap;
}
#screen-mine-detail .mzd-cmp td.y {
  color: #176F52;
  font-weight: 600;
}
#screen-mine-detail .mzd-cmp td.m {
  color: #B23A2E;
  font-weight: 600;
}
#screen-mine-detail .mzd-cmp td.n {
  color: #C9CEC8;
}
#screen-mine-detail .mzd-cmp tr.mzd-cmp-price td {
  font-weight: 600;
  color: #2A2622;
  border-bottom: 0;
}
#screen-mine-detail .mzd-cmp-foot {
  margin: 0;
  padding: 10px 12px 12px;
  font-size: 11px;
  line-height: 1.6;
  color: #9B958A;
  background: #FBF8F2;
}
/* ==== [mine] 会员权益对比表 结束 ==== */

/* ==== [全站原生触感] 开始 ==== */
/* 目标：贴近原生 App —— 无蓝色点按高亮、无文本误选、按压不改变大小，反馈统一为轻变色 */
*{ -webkit-tap-highlight-color:transparent; }
body{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
input, textarea, [contenteditable="true"]{ -webkit-user-select:text; user-select:text; }
button, a, .nav-item{ touch-action:manipulation; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible){ outline:none; }
/* 取消所有按压缩放/位移，改为轻变色反馈 */
.course-v2-bubble-icons button:active,
.course-v2-bubble-next:active,
.course-lab-edit-btn:active,
#screen-course .v2-academy .course-v2-card > button:active,
.m:active{ transform:none; }
.course-v2-bubble-icons button:active,
.course-v2-bubble-next:active,
.course-lab-edit-btn:active,
#screen-course .v2-academy .course-v2-card > button:active{ filter:brightness(.94); }
/* ==== [全站原生触感] 结束 ==== */

/* ==== [学堂课程中心] 开始 ==== */
/* 金刚区（五馆入口） */
.acad-halls{ display:flex; justify-content:space-between; gap:6px; margin:18px 2px 4px; }
.acad-halls button{ flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; border:0; background:transparent; cursor:pointer; padding:4px 0; }
.acad-halls b{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:linear-gradient(160deg,#FBF6EA,#F3E9D2); border:1px solid rgba(185,138,47,.35); color:#16453A; font-family:"Noto Serif SC","Songti SC","SimSun","Noto Serif CJK SC","Source Han Serif SC",serif; /* font-unify-20260726-fix21 */ font-size:17px; font-weight:700; box-shadow:0 3px 8px rgba(90,70,40,.08); }
.acad-halls span{ font-size:11px; color:#5A4F3C; letter-spacing:.5px; }
.acad-halls button:active b{ background:#F3E9D2; }

/* 今日一讲（运营位） */
.acad-daily{ display:block; width:100%; text-align:left; margin:16px 0 6px; padding:16px 18px; border:0; border-radius:16px; cursor:pointer; background:linear-gradient(150deg,#16453A,#0F3229); box-shadow:0 10px 26px rgba(15,50,41,.24); }
.acad-daily .ad-kick{ font-size:11px; letter-spacing:2px; color:#E9CE86; }
.acad-daily strong{ display:block; margin:8px 0 5px; font-family:"Noto Serif SC","Songti SC","SimSun","Noto Serif CJK SC","Source Han Serif SC",serif; /* font-unify-20260726-fix21 */ font-size:18px; letter-spacing:1px; color:#fff; }
.acad-daily p{ margin:0 0 12px; font-size:12px; color:rgba(233,223,200,.75); }
.acad-daily em{ display:inline-flex; align-items:center; gap:6px; font-style:normal; padding:8px 16px; border-radius:999px; background:linear-gradient(92deg,#EFDCA0,#D6B45F); color:#123A2F; font-size:12.5px; font-weight:700; letter-spacing:1px; }

/* 区块标题 */
.acad-sec-head{ display:flex; align-items:baseline; justify-content:space-between; margin:28px 2px 12px; }
.acad-sec-head h2{ margin:0; font-size:16px; letter-spacing:2px; color:#2A2622; border-left:0; padding-left:0; }
.acad-sec-head small{ font-size:11px; letter-spacing:1px; color:#B98A2F; }

/* 经典聆听：横滑竖版书封 */
.acad-album-row{ display:flex; gap:12px; overflow-x:auto; padding:2px 2px 8px; scrollbar-width:none; }
.acad-album-row::-webkit-scrollbar{ display:none; }
.acad-album{ flex:0 0 122px; border:0; background:transparent; padding:0; cursor:pointer; text-align:left; }
.aa-cover{ position:relative; display:block; height:162px; border-radius:12px; overflow:hidden; box-shadow:0 10px 22px rgba(40,30,15,.22); }
.aa-cover::after{ content:""; position:absolute; inset:5px; border:1px solid rgba(216,185,106,.4); border-radius:7px; pointer-events:none; }
.tone-ink .aa-cover{ background:linear-gradient(160deg,#2B2620,#171310); }
.tone-jade .aa-cover{ background:linear-gradient(160deg,#1A4A3E,#0E2C22); }
.tone-night .aa-cover{ background:linear-gradient(160deg,#232A38,#12151E); }
.tone-gold .aa-cover{ background:linear-gradient(160deg,#6E5518,#3E2F0C); }
.aa-kind{ position:absolute; top:9px; left:9px; font-style:normal; font-size:9px; letter-spacing:1px; color:#123A2F; background:linear-gradient(92deg,#EFDCA0,#D6B45F); border-radius:4px; padding:2px 5px; z-index:1; }
.aa-cover b{ position:absolute; top:28px; right:14px; writing-mode:vertical-rl; font-family:"Noto Serif SC","Songti SC","SimSun","Noto Serif CJK SC","Source Han Serif SC",serif; /* font-unify-20260726-fix21 */ font-size:19px; font-weight:700; letter-spacing:6px; color:#EBD79A; }
.aa-cover em{ position:absolute; top:32px; right:44px; writing-mode:vertical-rl; font-style:normal; font-size:9px; letter-spacing:2.5px; color:rgba(233,223,200,.5); max-height:72px; overflow:hidden; }
.aa-state{ position:absolute; left:9px; bottom:8px; text-decoration:none; font-size:9px; letter-spacing:1px; color:#E9CE86; border:1px solid rgba(233,206,134,.4); border-radius:999px; padding:2px 7px; }
.aa-title{ display:block; margin:8px 0 2px; font-size:12.5px; font-weight:600; color:#2A2622; }
.aa-meta{ display:block; font-size:10.5px; color:#9A8F7D; }

/* 研读演示位（待开讲） */
.acad-study-demos{ display:grid; gap:10px; margin-top:10px; }
.acad-study-demo{ display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; border:1px dashed rgba(185,138,47,.4); border-radius:14px; background:rgba(251,246,234,.6); cursor:pointer; text-align:left; }
.acad-study-demo > b{ display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:rgba(22,69,58,.08); color:#16453A; font-family:"Noto Serif SC","Songti SC","SimSun","Noto Serif CJK SC","Source Han Serif SC",serif; /* font-unify-20260726-fix21 */ font-weight:700; flex:none; }
.acad-study-demo span{ flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.acad-study-demo strong{ font-size:13.5px; color:#2A2622; }
.acad-study-demo em{ font-style:normal; font-size:11px; color:#9A8F7D; }
.acad-study-demo u{ text-decoration:none; font-size:10.5px; color:#B98A2F; border:1px solid rgba(185,138,47,.35); border-radius:999px; padding:3px 8px; white-space:nowrap; }

/* 免费专区（短识） */
.acad-free-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.acad-free-card{ text-align:left; padding:12px 13px; border:1px solid rgba(58,48,35,.1); border-radius:14px; background:rgba(255,255,255,.7); cursor:pointer; display:flex; flex-direction:column; gap:5px; }
.acad-free-card i{ align-self:flex-start; font-style:normal; font-size:9.5px; letter-spacing:1px; color:#176F52; background:rgba(23,111,82,.08); padding:2px 7px; border-radius:4px; }
.acad-free-card strong{ font-size:13.5px; color:#2A2622; }
.acad-free-card em{ font-style:normal; font-size:11px; line-height:1.5; color:#9A8F7D; }

/* 学堂热听榜 */
.acad-rank{ margin-top:20px; padding:14px 16px; border:1px solid rgba(58,48,35,.1); border-radius:16px; background:rgba(251,246,234,.85); }
.acad-rank header{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:8px; }
.acad-rank h2{ margin:0; font-size:15px; letter-spacing:2px; color:#2A2622; border-left:0; padding-left:0; }
.acad-rank small{ font-size:10.5px; color:#B98A2F; letter-spacing:1px; }
.acad-rank-row{ display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px dashed rgba(58,48,35,.1); }
.acad-rank-row b{ width:20px; text-align:center; font-family:"Noto Serif SC","Songti SC","SimSun","Noto Serif CJK SC","Source Han Serif SC",serif; /* font-unify-20260726-fix21 */ font-size:15px; color:#9A8F7D; flex:none; }
.acad-rank-row b.r1{ color:#B23A2E; }
.acad-rank-row b.r2{ color:#B98A2F; }
.acad-rank-row b.r3{ color:#176F52; }
.acad-rank-row span{ flex:1; font-size:13px; font-weight:600; color:#2A2622; }
.acad-rank-row em{ font-style:normal; font-size:10.5px; color:#9A8F7D; }

/* 守护会员横幅 */
.acad-member{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; margin-top:16px; padding:13px 16px; border:0; border-radius:14px; cursor:pointer; background:linear-gradient(120deg,#2B2317,#141009); box-shadow:0 8px 20px rgba(25,18,8,.3); }
.acad-member span{ display:flex; flex-direction:column; gap:3px; text-align:left; }
.acad-member b{ font-size:13.5px; color:#EBD79A; letter-spacing:1px; }
.acad-member em{ font-style:normal; font-size:10.5px; color:rgba(233,223,200,.6); }
.acad-member i{ font-style:normal; font-size:11.5px; color:#E9CE86; white-space:nowrap; }

/* —— 聆听课演示页（文字+音频 口袋读书式）—— */
.acad-listen{ display:flex; flex-direction:column; min-height:100%; }
.al-sub{ margin:2px 2px 10px; font-size:12px; color:#9A8F7D; letter-spacing:.5px; }
.al-wave{ display:flex; align-items:center; justify-content:center; gap:4px; height:34px; margin-bottom:6px; }
.al-wave i{ width:3px; height:8px; border-radius:2px; background:rgba(22,69,58,.22); transition:height .2s ease; }
.al-wave.on i{ animation:alWave 1s ease-in-out infinite; background:rgba(22,69,58,.5); }
.al-wave.on i:nth-child(2n){ animation-delay:.15s; }
.al-wave.on i:nth-child(3n){ animation-delay:.3s; }
.al-wave.on i:nth-child(5n){ animation-delay:.45s; }
@keyframes alWave{ 0%,100%{ height:8px; } 50%{ height:22px; } }
.al-script{ flex:1; padding:6px 2px 16px; }
.al-line{ padding:12px 14px; border-radius:14px; opacity:.45; transition:opacity .25s ease, background-color .25s ease; }
.al-line.current{ opacity:1; background:rgba(251,246,234,.92); box-shadow:inset 3px 0 0 #B98A2F; }
.al-t{ margin:0; font-family:"Noto Serif SC","Songti SC","SimSun","Noto Serif CJK SC","Source Han Serif SC",serif; /* font-unify-20260726-fix21 */ font-size:18px; line-height:1.75; letter-spacing:1px; color:#2A2622; }
.al-n{ margin:7px 0 0; font-size:12.5px; line-height:1.7; color:#8A7F6B; }
.al-line.current .al-n{ color:#6E5518; }
.al-note{ margin:22px 0 0; text-align:center; font-size:10.5px; letter-spacing:1px; color:#B5AB99; }
.al-bar{ position:sticky; bottom:calc(86px + var(--h5-safe-bottom)); z-index:5; display:flex; align-items:center; justify-content:space-between; margin:8px 6px 96px; padding:10px 18px; border-radius:999px; background:rgba(251,246,234,.95); border:1px solid rgba(185,138,47,.3); box-shadow:0 12px 30px rgba(60,45,20,.18); backdrop-filter:blur(6px); }
.al-speed, .al-restart{ border:0; background:transparent; font-size:12.5px; font-weight:700; color:#5A4F3C; cursor:pointer; letter-spacing:1px; min-width:44px; }
.al-play{ display:grid; place-items:center; width:54px; height:54px; border:0; border-radius:50%; background:linear-gradient(150deg,#16453A,#0F3229); color:#EBD79A; font-size:18px; cursor:pointer; box-shadow:0 8px 20px rgba(15,50,41,.35); }
/* —— 四轮：去掉页头（学堂/已修），续学卡即页首 —— */
.acad-center > .acad-resume{ margin-top:10px; }
.acad-center .acad-sec-head h2{ font-size:17px; letter-spacing:2.5px; }
.acad-center .acad-sec-head small{ font-size:11.5px; }

/* —— 三轮视觉升级：真图书封 + 卡片质感 —— */
/* 守护横幅置顶：页面第一视觉锚点 */
.acad-center .acad-member{ margin:12px 0 2px; padding:12px 16px; }
.acad-center .acad-member-top{ margin:10px 0 4px; padding:14px 16px; }
/* 真图封面：图上叠暗色渐层保证竖排书名可读；无图时回退各 tone 渐变 */
.aa-cover.has-img{ background-size:cover; background-position:center top; }
/* 场景照做底：顶部横带 + 右缘竖带双重压暗（竖排书名落位处），中段留亮保画面 */
.aa-cover.has-img::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(12,9,5,.6),rgba(12,9,5,.16) 52%,rgba(12,9,5,.4)), linear-gradient(270deg,rgba(12,9,5,.52),rgba(12,9,5,0) 55%); }
.aa-cover.has-img b{ color:#F6E7B2; text-shadow:0 1px 3px rgba(0,0,0,.9), 0 0 14px rgba(0,0,0,.6); }
.aa-cover.has-img em{ color:rgba(242,233,212,.85); text-shadow:0 1px 2px rgba(0,0,0,.85); }
/* 场景照封面不描金边，画面更干净 */
.aa-cover.has-img::after{ display:none; }
/* —— 经典聆听 · 竖排大列表（参考听书 App 书单样式） —— */
.acad-album-list{ display:flex; flex-direction:column; gap:12px; }
.acad-albumv{ display:flex; gap:14px; width:100%; padding:13px; border:1px solid rgba(185,138,47,.16); border-radius:16px; background:linear-gradient(172deg,#FFFEFA,#FBF5E8); box-shadow:0 8px 20px rgba(90,70,40,.07); cursor:pointer; text-align:left; }
.acad-albumv:active{ filter:brightness(.97); }
.aav-cover{ position:relative; flex:none; width:94px; height:141px; border-radius:11px; overflow:hidden; background-size:cover; background-position:center top; box-shadow:0 8px 18px rgba(40,30,15,.22); }
.aav-tag{ position:absolute; left:0; top:8px; padding:2px 8px 2px 7px; border-radius:0 999px 999px 0; background:linear-gradient(92deg,#B8934A,#8F6D2B); color:#FFF7E0; font-size:10px; font-style:normal; letter-spacing:.5px; }
.aav-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; padding:3px 0 1px; }
.aav-title{ font-family:"Noto Serif SC","Songti SC","Noto Serif CJK SC","Source Han Serif SC",serif; /* font-unify-20260726-fix21 */ font-size:17.5px; font-weight:700; letter-spacing:1px; color:#2E2618; }
/* 专辑简介：2 行 → 最多 4 行（20260713）。
   卡片高度由封面（141px）撑着，原来只放 2 行，下面白白空着一片；
   4 行既填满了空间，也让用户在点进去之前就能大致知道这一辑讲什么。 */
.aav-hook{ font-size:12.5px; line-height:1.65; color:#7A6F5A; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.aav-date{ margin-top:auto; font-size:11.5px; color:#9A8F79; }
.aav-plays{ font-size:11.5px; color:#9A8F79; }
/* —— 讲解页收起态顶栏：三件套等高对齐 + 线性喇叭（20260713） —— */
#screen-course .course-v2-chat-head.is-collapsed{ display:flex !important; align-items:center; gap:10px; min-height:0 !important; padding:calc(var(--h5-safe-top) + 18px) 14px 10px !important; border-bottom:0 !important; }
/* 视频 figure 常驻 DOM，收起态仅用 CSS 藏起（不拆 <video> 以免展开黑屏重载） */
#screen-course .course-v2-chat-head.is-collapsed .course-v2-teacher-video-wrap{ display:none !important; }
.course-v2-chat-head.is-collapsed .course-v2-head-back{ flex:none; width:34px; height:34px; font-size:21px; font-weight:600; border:1px solid rgba(58,48,35,.14); background:rgba(251,246,234,.92); }
.course-v2-chat-head.is-collapsed .course-v2-teacher-restore{ flex:none; margin:0 auto; height:34px; padding:4px 12px 4px 5px; box-shadow:none; border-color:rgba(58,48,35,.14); }
.course-v2-chat-head.is-collapsed .course-v2-teacher-restore i{ width:22px; height:22px; font-size:11px; }
.course-v2-chat-head.is-collapsed .course-v2-head-tools{ flex:none; }
html.skin-sj .course-v2-head-mute{ width:34px; height:34px; border:1px solid rgba(58,48,35,.14); background:rgba(251,246,234,.92); color:#7A5A18; }
.course-v2-head-mute svg{ width:17px !important; height:17px !important; stroke-width:1.7 !important; }
html.skin-sj .course-v2-head-mute.is-muted{ color:#9A8F79; }
/* —— 讲解页小修：老师视频还原胶囊 + 气泡 SVG 图标 —— */
.course-v2-teacher-restore{ display:inline-flex; align-items:center; gap:7px; margin:0 auto; padding:6px 14px 6px 7px; border:1px solid rgba(185,138,47,.3); border-radius:999px; background:rgba(255,253,246,.92); color:#6B604C; font-size:12.5px; cursor:pointer; box-shadow:0 4px 14px rgba(90,70,40,.12); }
.course-v2-teacher-restore i{ display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:linear-gradient(150deg,#1A5044,#0F3229); color:#EBD79A; font-style:normal; font-size:12px; font-family:"Noto Serif SC","Noto Serif CJK SC","Source Han Serif SC",serif; /* font-unify-20260726-fix21 */ }
.course-v2-teacher-restore svg{ color:#B3A78F; }
.course-v2-bubble-icons svg{ display:block; color:#A89A7E; }
.course-v2-bubble-icons button:active svg{ color:#7A5A18; }
/* —— 研读课程介绍页 · hero 重设计 —— */
.cvd-hero{ position:relative; overflow:hidden; margin-top:4px; padding:22px 20px 18px; border-radius:18px; background:linear-gradient(150deg,#1C5346 0%,#0F3229 62%,#0B241D 100%); box-shadow:0 14px 34px rgba(15,50,41,.28); }
.cvd-glyph{ position:absolute; right:-14px; top:-26px; font-family:"Noto Serif SC","Songti SC","Noto Serif CJK SC","Source Han Serif SC",serif; /* font-unify-20260726-fix21 */ font-style:normal; font-size:150px; line-height:1; font-weight:700; color:rgba(233,206,134,.1); pointer-events:none; }
.cvd-kicker{ display:inline-block; padding:3px 10px; border-radius:999px; border:1px solid rgba(233,206,134,.4); color:#E9CE86; font-size:11px; letter-spacing:2px; }
.cvd-title{ margin:12px 0 0; font-family:"Noto Serif SC","Songti SC","Noto Serif CJK SC","Source Han Serif SC",serif; /* font-unify-20260726-fix21 */ font-size:25px; letter-spacing:3px; color:#F5EAD0; }
.cvd-teacher{ margin:8px 0 0; font-size:12.5px; color:rgba(240,232,214,.72); letter-spacing:.5px; }
.cvd-chips{ display:flex; gap:8px; margin-top:14px; }
.cvd-chips span{ padding:5px 12px; border-radius:999px; background:rgba(233,206,134,.13); border:1px solid rgba(233,206,134,.25); color:#EBD79A; font-size:11.5px; letter-spacing:1px; }
.cvd-desc{ margin:14px 6px 4px; font-size:13.5px; line-height:1.9; color:#6B604C; }
/* 专辑页顶部分享 */
.course-v2-nav-head .ap-share{ border:1px solid rgba(185,138,47,.4); border-radius:999px; padding:5px 14px; background:rgba(255,253,246,.7); color:#7A5A18; font-size:12.5px; letter-spacing:1px; cursor:pointer; }
/* 专辑页订阅入口 */
.ap-sub{ display:block; width:100%; margin:10px 0 2px; padding:12px 16px; border:1px solid rgba(185,138,47,.45); border-radius:14px; background:linear-gradient(172deg,#FFFDF6,#F8EFDA); color:#7A5A18; font-size:15px; font-weight:600; letter-spacing:1px; cursor:pointer; box-shadow:0 6px 16px rgba(90,70,40,.08); }
.ap-owned{ margin:10px 2px 2px; font-size:13px; color:#8A7F6B; letter-spacing:.5px; }

/* —— 播放器五代控制区：功能行 / 进度行(±15s) / 走带行 —— */
.c2-ctrl{ margin:4px 0 calc(34px + var(--h5-safe-bottom)); } /* 操作区整体上移 */
.c2-func-row{ display:flex; align-items:flex-start; justify-content:space-evenly; margin:0 30px 2px; }
.c2-fn{ display:flex; flex-direction:column; align-items:center; gap:3px; min-width:52px; padding:6px 4px; border:0; background:transparent; color:rgba(255,255,255,.85); cursor:pointer; }
.c2-fn:active{ color:#fff; }
.c2-fn.on{ color:#F0DDA6; }
.c2-fn-ic{ display:grid; place-items:center; height:26px; }
.c2-fn-rate{ min-width:44px; padding:2px 6px; border:1.3px solid currentColor; border-radius:7px; font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.5px; }
.c2-fn-tt{ font-size:11px; letter-spacing:1px; color:rgba(255,255,255,.62); text-shadow:0 1px 4px rgba(0,0,0,.6); }
.c2-fn.on .c2-fn-tt{ color:rgba(240,221,166,.9); }
.c2-ctrl .c2-progress-row{ margin:2px 14px; gap:8px; }
.c2-skip{ display:grid; place-items:center; width:40px; height:40px; flex:none; border:0; border-radius:50%; background:transparent; color:rgba(255,255,255,.82); cursor:pointer; }
.c2-skip:active{ background:rgba(255,255,255,.1); }
.c2-transport{ display:flex; align-items:center; justify-content:space-evenly; margin:4px 22px 0; }
.c2-tb{ display:grid; place-items:center; width:44px; height:44px; flex:none; border:0; border-radius:50%; background:transparent; color:rgba(255,255,255,.85); cursor:pointer; transition:background-color .15s ease, color .15s ease; }
.c2-tb:active{ background:rgba(255,255,255,.12); }
.c2-tb.on{ color:#F0DDA6; }
.c2-transport .c2-play{ position:static; transform:none; width:58px; height:58px; }
/* —— 底部浮层弹窗：选集 / 倍速 / 定时（纸面浅色，附件同构） —— */
/* 提高优先级压过 .acad-cine2 > * 的 position:relative，浮窗必须绝对覆盖、不得把内容顶起 */
.acad-cine2 > .c2-sheetmask, .c2-sheetmask{ position:absolute !important; inset:0; z-index:6; border:0; background:rgba(0,0,0,.45); }
.acad-cine2 > .c2-sheet, .c2-sheet{ position:absolute !important; left:0; right:0; bottom:0; top:auto; z-index:7; background:#FBF7EE; border-radius:18px 18px 0 0; box-shadow:0 -14px 44px rgba(0,0,0,.4); padding-bottom:calc(10px + var(--h5-safe-bottom)); }
.c2-sheet.anim{ animation:c2sheetup .22s ease; }
@keyframes c2sheetup{ from{ transform:translateY(26px); opacity:0; } to{ transform:none; opacity:1; } }
.c2s-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px 8px; }
.c2s-head b{ font-family:"Noto Serif SC","Noto Serif CJK SC","Source Han Serif SC",serif; /* font-unify-20260726-fix21 */ font-size:17px; letter-spacing:2px; color:#2E2618; }
.c2s-x{ border:0; background:transparent; color:#9A8F79; font-size:16px; cursor:pointer; padding:4px 6px; }
.c2s-src{ margin:0 18px 8px; font-size:12px; color:#8A7F6B; }
.c2s-src span{ color:#7A5A18; }
.c2s-list{ max-height:46vh; overflow-y:auto; padding:0 8px 6px; }
.c2s-row{ display:flex; flex-direction:column; gap:4px; width:100%; padding:12px 10px; border:0; border-bottom:1px solid rgba(58,48,35,.07); background:transparent; text-align:left; cursor:pointer; }
.c2s-row:active{ background:rgba(58,48,35,.05); }
.c2s-tt{ display:flex; align-items:center; gap:6px; font-size:14.5px; color:#2E2618; }
.c2s-row.on .c2s-tt{ color:#A0392D; font-weight:700; }
.c2s-row.locked .c2s-tt{ color:#9A8F79; }
.c2s-meta{ display:flex; align-items:center; gap:10px; font-size:11.5px; color:#9A8F79; }
.c2s-meta em{ font-style:normal; }
.c2s-meta b{ color:#A0392D; font-weight:600; }
.c2s-meta u{ text-decoration:none; color:#7A5A18; }
.c2s-lock{ color:#B3A78F; }
.c2s-eq{ display:inline-flex; align-items:flex-end; gap:1.6px; height:11px; }
.c2s-eq u{ width:2.4px; background:#A0392D; animation:c2eq .9s ease-in-out infinite; transform-origin:bottom; }
.c2s-eq u:nth-child(1){ height:6px; } .c2s-eq u:nth-child(2){ height:11px; animation-delay:.2s; } .c2s-eq u:nth-child(3){ height:8px; animation-delay:.45s; }
@keyframes c2eq{ 0%,100%{ transform:scaleY(.5);} 50%{ transform:scaleY(1);} }
.c2s-card{ margin:4px 14px 8px; padding:14px 14px 16px; border-radius:14px; background:#fff; box-shadow:0 4px 18px rgba(90,70,40,.06); }
.c2s-ratebig{ text-align:center; font-size:34px; font-weight:800; color:#2E2618; font-variant-numeric:tabular-nums; margin:2px 0 12px; }
.c2s-ruler{ position:relative; height:42px; margin:0 14px 12px; }
.c2s-ruler::before{ content:""; position:absolute; left:0; right:0; top:0; height:14px; background:repeating-linear-gradient(90deg, rgba(58,48,35,.3) 0 1.5px, transparent 1.5px calc((100% - 1.5px)/15)); }
.c2s-pointer{ position:absolute; top:-5px; width:3.5px; height:24px; margin-left:-1.75px; border-radius:3px; background:#A0392D; }
.c2s-ruler .rl{ position:absolute; top:24px; transform:translateX(-50%); font-size:11px; color:#9A8F79; }
.c2s-ruler .rl:first-of-type{ transform:translateX(0); }
.c2s-ruler .rl:last-of-type{ transform:translateX(-100%); }
.c2s-circles{ display:flex; justify-content:space-between; gap:8px; margin:0 4px; }
.c2s-circle{ width:52px; height:52px; flex:none; border-radius:50%; border:1.5px solid rgba(58,48,35,.18); background:#fff; color:#2E2618; font-size:14px; font-weight:600; cursor:pointer; }
.c2s-circle.on{ border-color:#A0392D; color:#A0392D; box-shadow:0 0 0 1px rgba(160,57,45,.15); }
.c2s-sec{ font-size:15px; font-weight:700; color:#2E2618; margin:2px 0 8px; }
.c2s-sub{ font-size:12.5px; color:#8A7F6B; margin:10px 0 8px; }
.c2s-time .c2s-circle{ width:56px; height:56px; }
.c2s-eps{ gap:10px; }
.c2s-pill{ flex:1; padding:10px 6px; border-radius:999px; border:1.5px solid rgba(58,48,35,.18); background:#fff; color:#2E2618; font-size:13px; cursor:pointer; }
.c2s-pill.on{ border-color:#A0392D; color:#A0392D; }
.c2s-off{ display:block; width:calc(100% - 8px); margin:12px 4px 0; padding:10px; border:0; border-radius:10px; background:rgba(58,48,35,.06); color:#6B604C; font-size:13px; cursor:pointer; }
.c2s-off.on{ color:#A0392D; }

/* —— 1:1 细节还原（对照参考稿） —— */
/* 播放大键：磨砂半透明大圆 + 白色图形（参考稿样式） */
.c2-transport .c2-play{ width:68px; height:68px; background:rgba(255,255,255,.2); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); backdrop-filter:blur(6px); }
.c2-transport .c2-play svg{ width:26px; height:26px; }
.c2-transport .c2-play .pb-load{ border-color:rgba(255,255,255,.3); border-top-color:#fff; }
/* 倍速弹窗：大数字与开关卡 */
.c2s-ratebig{ font-size:40px; letter-spacing:1px; }
.c2s-togglerow{ display:flex; align-items:center; justify-content:space-between; width:calc(100% - 28px); border:0; cursor:pointer; font-size:15px; color:#2E2618; padding:14px; }
.c2s-switch{ position:relative; width:46px; height:26px; flex:none; border-radius:999px; background:rgba(58,48,35,.18); transition:background-color .18s ease; }
.c2s-switch::after{ content:""; position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.2); transition:left .18s ease; }
.c2s-switch.on{ background:#1A5044; }
.c2s-switch.on::after{ left:22px; }
/* 定时弹窗：按时间行右侧单选 + 定时启播入口卡 */
.c2s-subrow{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:10px 0 8px; }
.c2s-subrow .c2s-sub{ margin:0; }
.c2s-radio{ display:inline-flex; align-items:center; gap:6px; border:0; background:transparent; font-size:12.5px; color:#8A7F6B; cursor:pointer; padding:2px 0; }
.c2s-radio i{ width:16px; height:16px; border-radius:50%; border:1.5px solid rgba(58,48,35,.3); background:#fff; }
.c2s-radio.on{ color:#A0392D; }
.c2s-radio.on i{ border-color:#A0392D; box-shadow:inset 0 0 0 4px #fff, inset 0 0 0 10px #A0392D; }
.c2s-time{ gap:6px; }
.c2s-time .c2s-circle{ width:54px; height:54px; font-size:13px; }
.c2s-startrow{ display:flex; align-items:center; gap:8px; width:calc(100% - 28px); border:0; cursor:pointer; padding:14px; }
.c2s-startrow b{ font-size:15px; color:#2E2618; letter-spacing:.5px; flex:none; }
.c2s-new{ flex:none; padding:1px 6px; border-radius:6px; background:#A0392D; color:#fff; font-size:10px; font-style:normal; font-weight:700; letter-spacing:.5px; }
.c2s-startrow span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; font-size:12px; color:#9A8F79; }
.c2s-startrow em{ flex:none; font-style:normal; color:#B3A78F; font-size:16px; }
/* 播放列表：页签头 + 工具行 + 行内钟表/已播/更多 */
.c2s-tabs{ padding-bottom:4px; }
.c2s-tabrow{ display:flex; align-items:center; gap:18px; }
.c2s-tab{ position:relative; border:0; background:transparent; font-size:15.5px; color:#8A7F6B; cursor:pointer; padding:2px 0 8px; }
.c2s-tab.on{ color:#2E2618; font-weight:700; font-size:16.5px; }
.c2s-tab.on::after{ content:""; position:absolute; left:50%; bottom:0; width:22px; height:3px; border-radius:3px; background:#A0392D; transform:translateX(-50%); }
.c2s-toolbar{ display:flex; align-items:center; justify-content:space-between; margin:2px 18px 4px; }
.c2s-tool{ display:inline-flex; align-items:center; gap:5px; border:0; background:transparent; font-size:12.5px; color:#6B604C; cursor:pointer; padding:6px 0; }
.c2s-tool.on{ color:#A0392D; }
.c2s-row{ flex-direction:row; align-items:center; gap:8px; }
.c2s-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.c2s-meta b{ color:#D2691E; font-weight:600; }
.c2s-meta svg{ flex:none; color:#B3A78F; }
.c2s-more{ flex:none; align-self:center; text-decoration:none; color:#B3A78F; font-size:15px; font-weight:700; padding:6px 4px; letter-spacing:1px; }
.c2s-lock{ flex:none; color:#B3A78F; }
.aa-cover > *{ z-index:1; }
.aa-cover::after{ z-index:2; }
/* 研读主卡：描金细边 + 纸感渐变 */
.acad-center .course-v2-card{ border:1px solid rgba(185,138,47,.26); border-radius:16px; background:linear-gradient(168deg,#FDFBF4,#F6EDD8); box-shadow:0 10px 24px rgba(90,70,40,.09); }
.acad-center .course-v2-card .acad-spine{ box-shadow:inset 0 0 0 1px rgba(216,185,106,.45), 0 6px 14px rgba(15,50,41,.28); }
/* 待开讲：去掉虚线的"半成品感"，改玉色书脊小签 */
.acad-study-demo{ border:1px solid rgba(58,48,35,.1); border-style:solid; background:rgba(251,246,234,.55); }
.acad-study-demo > b{ background:linear-gradient(160deg,#1A4A3E,#0E2C22); color:#EBD79A; box-shadow:inset 0 0 0 1px rgba(216,185,106,.32); }
.acad-study-demo u{ color:#8A7F6B; border-color:rgba(58,48,35,.2); }
/* 免费短识卡：暖纸渐变 + 描金细边 */
.acad-free-card{ border:1px solid rgba(185,138,47,.2); background:linear-gradient(172deg,#FFFDF8,#FAF3E3); box-shadow:0 6px 16px rgba(90,70,40,.07); }

/* —— 二轮减法：更大气、少卡壳 —— */
.acad-album-row{ gap:14px; }
.aa-cover b{ font-size:20px; }
.acad-rank-plain{ margin-top:0; padding:0 4px; border:0; background:transparent; }
.acad-rank-plain .acad-rank-row:first-child{ border-top:0; }
.acad-free-row{ gap:12px; }
.acad-member{ margin-top:24px; }

/* —— 短识演示页（图文小课）—— */
.acad-shortie .sh-sub{ margin:2px 2px 16px; font-size:12px; color:#9A8F7D; letter-spacing:.5px; }
.sh-body{ padding:0 2px 40px; }
.sh-sec{ margin-bottom:22px; }
.sh-sec h3{ display:flex; align-items:baseline; gap:9px; margin:0 0 8px; font-size:15.5px; letter-spacing:1.5px; color:#2A2622; border-left:0; padding-left:0; }
.sh-sec h3 b{ font-family:"Noto Serif SC","Songti SC","SimSun","Noto Serif CJK SC","Source Han Serif SC",serif; /* font-unify-20260726-fix21 */ font-size:12px; color:#B98A2F; letter-spacing:1px; }
.sh-sec p{ margin:0; font-size:14.5px; line-height:1.9; color:#4A4438; text-align:justify; }
.sh-quote{ margin:26px 0; padding:18px 20px; text-align:center; border-top:1px solid rgba(185,138,47,.35); border-bottom:1px solid rgba(185,138,47,.35); }
.sh-quote span{ font-family:"Noto Serif SC","Songti SC","SimSun","Noto Serif CJK SC","Source Han Serif SC",serif; /* font-unify-20260726-fix21 */ font-size:16px; letter-spacing:2px; color:#6E5518; }
.sh-cta{ display:grid; place-items:center; width:100%; height:50px; border:0; border-radius:999px; background:linear-gradient(150deg,#16453A,#0F3229); color:#EBD79A; font-size:14px; font-weight:700; letter-spacing:2px; cursor:pointer; box-shadow:0 8px 20px rgba(15,50,41,.25); }
.sh-cta:active{ filter:brightness(.92); }
/* —— 坛经专辑介绍页 —— */
.acad-albumpage .ap-hero{ position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:4px; min-height:210px; margin-top:4px; padding:16px; border-radius:18px; overflow:hidden; background-size:cover; background-position:center 42%; box-shadow:0 14px 34px rgba(30,22,10,.3); }
.acad-albumpage .ap-hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,8,5,.05),rgba(10,8,5,.12) 55%,rgba(10,8,5,.56)); }
.acad-albumpage .ap-hero > *{ position:relative; }
.ap-hero-row{ display:flex; align-items:flex-end; gap:13px; }
.ap-cover{ display:block; width:62px; height:84px; flex:none; border-radius:7px; background-size:cover; background-position:center; box-shadow:0 8px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(216,185,106,.5); }
.ap-hero-main{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.ap-tag{ align-self:flex-start; font-size:11px; letter-spacing:1.5px; color:#F0DDA6; background:rgba(0,0,0,.4); border-radius:999px; padding:5px 11px; backdrop-filter:blur(4px); }
.ap-title{ font-family:"Noto Serif SC","Songti SC","SimSun","Noto Serif CJK SC","Source Han Serif SC",serif; /* font-unify-20260726-fix21 */ font-size:26px; font-weight:700; letter-spacing:4px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.6); }
.ap-meta{ font-size:11.5px; color:rgba(240,232,214,.85); }
.ap-intro{ margin:16px 2px 4px; font-size:13.5px; line-height:1.9; color:#4A4438; text-align:justify; }
.ap-fit{ margin:4px 2px 14px; font-size:11.5px; color:#9A8F7D; }
.ap-start{ display:grid; place-items:center; width:100%; height:50px; border:0; border-radius:999px; background:linear-gradient(150deg,#16453A,#0F3229); color:#EBD79A; font-size:14px; font-weight:700; letter-spacing:2px; cursor:pointer; box-shadow:0 8px 20px rgba(15,50,41,.25); }
.ap-start:active{ filter:brightness(.92); }
.ap-toc{ margin:0 2px 8px; }
.ap-row{ display:flex; align-items:center; gap:12px; width:100%; padding:13px 10px; border:0; border-bottom:1px solid rgba(58,48,35,.08); background:transparent; cursor:pointer; text-align:left; }
.ap-row b{ width:26px; flex:none; font-family:"Noto Serif SC","Songti SC","SimSun","Noto Serif CJK SC","Source Han Serif SC",serif; /* font-unify-20260726-fix21 */ font-size:14px; color:#B98A2F; }
.ap-row > span{ flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.ap-row strong{ font-size:14px; font-weight:600; color:#2A2622; }
.ap-row em{ font-style:normal; font-size:11px; color:#9A8F7D; }
.ap-row u{ text-decoration:none; font-size:10.5px; white-space:nowrap; border-radius:999px; padding:3px 9px; }
.ap-row .ap-free{ color:#176F52; border:1px solid rgba(23,111,82,.35); }
.ap-row .ap-lock{ color:#9A8F7D; border:1px solid rgba(58,48,35,.16); }
.ap-row.locked strong{ color:#8A8071; }
/* 20260717zza 已读态（克制）：听过的集 —— 集号转低调松绿 +「· 已听」同色，标题略淡。
   刻意区别于 .ap-row.locked 的冷灰（那是「未解锁」，与「已听」是两码事，别撞一起）。 */
.ap-row.is-heard b{ color:#6FA088; }
.ap-row.is-heard strong{ color:#6B6456; }
.ap-row.is-heard em{ color:#6FA088; }
.ap-row:active{ background:rgba(20,30,25,.05); }

/* —— 电影字幕式播放页（底图 + 字幕 + 人声 + 背景音）—— */
.acad-cine{ position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:100%; padding:16px 16px calc(96px + var(--h5-safe-bottom)); background-color:#0C0906; background-size:cover; background-position:center; }
.acad-cine::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,6,3,.55),rgba(8,6,3,.16) 30%,rgba(8,6,3,.22) 62%,rgba(8,6,3,.74)); }
.acad-cine > *{ position:relative; z-index:1; }
.cine-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.cine-back{ display:grid; place-items:center; width:38px; height:38px; flex:none; border:0; border-radius:50%; background:rgba(0,0,0,.38); color:#fff; font-size:19px; cursor:pointer; }
.cine-title{ flex:1; text-align:center; font-size:13px; letter-spacing:1px; color:rgba(255,255,255,.92); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cine-prog{ flex:none; font-size:11px; color:rgba(255,255,255,.66); font-variant-numeric:tabular-nums; }
.cine-sub{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:16px; padding:24px 6px; text-align:center; cursor:pointer; }
.cine-t{ margin:0; font-family:"Noto Serif SC","Songti SC","SimSun","Noto Serif CJK SC","Source Han Serif SC",serif; /* font-unify-20260726-fix21 */ font-size:21px; line-height:1.85; letter-spacing:2px; font-weight:700; color:#F5D97E; text-shadow:0 2px 10px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.95); }
.cine-n{ margin:0; font-size:13px; line-height:1.85; color:rgba(255,255,255,.9); text-shadow:0 1px 8px rgba(0,0,0,.85); }
.cine-bar{ display:flex; align-items:center; justify-content:space-between; padding:0 10px; }
.cine-bar .al-speed, .cine-bar .al-restart{ color:rgba(255,255,255,.85); text-shadow:0 1px 6px rgba(0,0,0,.6); }
.cine-bar .al-play{ background:linear-gradient(150deg,#F0DDA6,#D6B45F); color:#123A2F; box-shadow:0 8px 22px rgba(0,0,0,.4); }

/* —— 听书模式 + 底图（分层强质感）—— */
.al-scene{ position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:216px; margin-top:2px; padding:14px 16px 34px; border-radius:18px; overflow:hidden; background-size:cover; background-position:center 32%; box-shadow:0 18px 40px rgba(30,20,8,.32); }
.al-scene::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,6,3,.3),rgba(8,6,3,.06) 40%,rgba(8,6,3,.62)); }
.al-scene::after{ content:""; position:absolute; inset:7px; border:1px solid rgba(216,185,106,.35); border-radius:12px; pointer-events:none; }
.al-scene > *{ position:relative; z-index:1; }
.al-scene-top{ display:flex; align-items:center; justify-content:space-between; }
.al-scene-top .cine-prog{ background:rgba(0,0,0,.35); border-radius:999px; padding:4px 10px; }
.al-scene-info b{ display:block; font-family:"Noto Serif SC","Songti SC","SimSun","Noto Serif CJK SC","Source Han Serif SC",serif; /* font-unify-20260726-fix21 */ font-size:22px; font-weight:700; letter-spacing:3px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.7); }
.al-scene-info span{ display:block; margin-top:4px; font-size:11.5px; color:rgba(240,232,214,.88); text-shadow:0 1px 6px rgba(0,0,0,.6); }
/* 纸面文稿卡：上叠底图，形成分层 */
.al-paper{ position:relative; z-index:2; margin:-22px 4px 0; padding:14px 12px 20px; background:linear-gradient(180deg,#FDFBF4,#F7F0DD); border:1px solid rgba(185,138,47,.24); border-radius:18px; box-shadow:0 14px 32px rgba(90,70,40,.14); }
.al-paper .al-wave{ height:26px; margin:0 0 4px; }
.al-status{ margin:2px 0 8px; text-align:center; font-size:11.5px; letter-spacing:1px; color:#B98A2F; }
.acad-listen-scene .al-bar{ margin-top:10px; }

/* —— 整页底图 + 歌词式上滚播放页 —— */
#screen-course{ position:relative; }
.acad-cine2{ position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; overflow:hidden; background-color:#0C0906; }
/* 背景动效层：缓慢 Ken Burns 呼吸推移 */
.c2-bg{ position:absolute; inset:-5%; background-size:cover; background-position:center; animation:c2Ken 44s ease-in-out infinite alternate; will-change:transform; }
@keyframes c2Ken{ 0%{ transform:scale(1) translate(0,0); } 100%{ transform:scale(1.1) translate(-1.5%,-2.5%); } }
@media (prefers-reduced-motion: reduce){ .c2-bg{ animation:none; } }
.acad-cine2::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(8,6,3,.6),rgba(8,6,3,.26) 34%,rgba(8,6,3,.32) 64%,rgba(8,6,3,.8)); }
/* 字幕区中央加暗晕，保证任何底图下文字可读 */
.c2-shade{ position:absolute; inset:0; z-index:1; background:radial-gradient(ellipse 82% 46% at 50% 52%, rgba(8,6,3,.68) 0%, rgba(8,6,3,.34) 62%, transparent 100%); pointer-events:none; }
.acad-cine2 > *{ position:relative; z-index:2; }
.acad-cine2 > .c2-bg{ position:absolute; inset:-5%; z-index:0; }
.acad-cine2 > .c2-shade{ position:absolute; inset:0; z-index:1; }
/* 意境动效层：两团暖光晕缓慢漂移 + 底部薄雾横移 */
.acad-cine2 > .c2-fx{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.c2-fx i{ position:absolute; display:block; }
.c2-fx i:nth-child(1){ width:300px; height:300px; left:-8%; top:5%; border-radius:50%; background:radial-gradient(circle, rgba(240,214,140,.16), transparent 62%); animation:fxDrift1 26s ease-in-out infinite alternate; }
.c2-fx i:nth-child(2){ width:240px; height:240px; right:-6%; top:36%; border-radius:50%; background:radial-gradient(circle, rgba(214,180,95,.12), transparent 62%); animation:fxDrift2 34s ease-in-out infinite alternate; }
.c2-fx i:nth-child(3){ left:-15%; right:-15%; bottom:-4%; height:30%; background:linear-gradient(180deg, transparent, rgba(233,223,200,.12)); filter:blur(16px); animation:fxMist 40s ease-in-out infinite alternate; }
@keyframes fxDrift1{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(60px,40px) scale(1.2); } }
@keyframes fxDrift2{ from{ transform:translate(0,0) scale(1.15); } to{ transform:translate(-50px,-46px) scale(.92); } }
@keyframes fxMist{ from{ transform:translateX(-3%); } to{ transform:translateX(4%); } }
@media (prefers-reduced-motion: reduce){ .c2-fx i{ animation:none; } }
.c2-top{ padding:14px 16px 4px; }
.c2-nav{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.c2-ep{ border:1px solid rgba(233,206,134,.42); background:rgba(0,0,0,.34); color:#E9CE86; font-size:12px; letter-spacing:1px; border-radius:999px; padding:7px 13px; cursor:pointer; }
.c2-ep:active{ background:rgba(233,206,134,.18); }
.c2-nav .cine-prog{ background:rgba(0,0,0,.34); border-radius:999px; padding:5px 10px; }
.c2-info{ margin-top:12px; text-align:center; }
.c2-info b{ display:block; font-family:"Noto Serif SC","Songti SC","SimSun","Noto Serif CJK SC","Source Han Serif SC",serif; /* font-unify-20260726-fix21 */ font-size:21px; font-weight:700; letter-spacing:3px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.8); }
.c2-info span{ display:block; margin-top:5px; font-size:11.5px; color:rgba(240,232,214,.86); text-shadow:0 1px 6px rgba(0,0,0,.7); }
.c2-wave{ height:30px; margin:10px 0 0; }
.c2-wave i{ background:rgba(233,206,134,.32); }
.c2-wave.on i{ background:rgba(233,206,134,.72); }
.c2-status{ color:#E9CE86; }
/* 字幕滚动区：只滚字幕，背景不动；上下渐隐 */
.c2-lyrics{ flex:1; min-height:0; overflow-y:auto; padding:0 22px; cursor:pointer; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 84%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 12%,#000 84%,transparent); }
.c2-lyrics::-webkit-scrollbar{ display:none; }
.c2-pad{ height:170px; }
.c2-line{ padding:12px 4px; text-align:center; opacity:.32; transition:opacity .3s ease; background:transparent !important; box-shadow:none !important; }
.c2-line.current{ opacity:1; }
.c2-line .al-t{ color:#F7DD86; font-size:19px; line-height:1.85; letter-spacing:1.5px; text-shadow:0 2px 10px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.9), 0 0 24px rgba(0,0,0,.6); }
.c2-line .al-n{ color:rgba(255,255,255,.92); text-shadow:0 1px 8px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.85); }
/* 当前句：大字黑边金黄、小字纯白（覆盖纸面模式的深色白话） */
.c2-line.current .al-t{ color:#FFE28A; }
.al-line.c2-line.current .al-n{ color:#fff; }
/* 进度行：时间标签 + 秒级进度条（rAF 驱动，无 width 过渡） */
.c2-progress-row{ display:flex; align-items:center; gap:10px; margin:0 18px; }
.c2-time{ flex:none; min-width:34px; font-size:10.5px; font-variant-numeric:tabular-nums; letter-spacing:.5px; color:rgba(255,255,255,.6); text-shadow:0 1px 4px rgba(0,0,0,.6); }
.c2-time[data-c2-dur]{ text-align:right; }
.c2-progress{ position:relative; flex:1; height:26px; display:flex; align-items:center; cursor:pointer; touch-action:none; }
.c2-progress::before{ content:""; position:absolute; left:0; right:0; top:50%; margin-top:-2px; height:4px; border-radius:4px; background:rgba(255,255,255,.18); box-shadow:inset 0 1px 1px rgba(0,0,0,.35); transition:height .18s ease, margin-top .18s ease; }
.c2-progress i{ position:relative; display:block; height:4px; border-radius:4px; width:0%; background:linear-gradient(90deg,#EFDCA0,#D6B45F); pointer-events:none; transition:height .18s ease; }
/* 只有拖动中与松手后 1 秒（.linger）保持放大，之后自动回细条 */
.c2-progress.drag::before, .c2-progress.linger::before{ height:7px; margin-top:-3.5px; }
.c2-progress.drag i, .c2-progress.linger i{ height:7px; }
/* 旋钮：白芯金晕，常驻小点，交互放大 */
.c2-knob{ position:absolute; right:-8px; top:50%; width:14px; height:14px; border-radius:50%; background:#FFF9E8; box-shadow:0 0 0 3px rgba(214,180,95,.9), 0 2px 8px rgba(0,0,0,.5); transform:translateY(-50%) scale(.55); transition:transform .18s ease; }
.c2-progress.drag .c2-knob, .c2-progress.linger .c2-knob{ transform:translateY(-50%) scale(1); }
/* 控制条：玻璃拟态 · 上缘高光 · 统一图标体系 */
.c2-bar{ position:static; margin:8px 16px 0; padding:11px 18px; border-radius:20px; background:rgba(14,10,6,.58); border:1px solid rgba(233,206,134,.22); box-shadow:0 14px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter:blur(14px); }
.c2-bar2{ position:relative; bottom:auto; display:flex; align-items:center; justify-content:space-between; }
.c2-side{ display:flex; align-items:center; gap:6px; }
.c2-bar .al-speed{ min-width:46px; padding:7px 10px; border-radius:10px; border:0; background:rgba(255,255,255,.08); color:rgba(255,255,255,.9); font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.5px; text-align:center; cursor:pointer; transition:background-color .15s ease; }
.c2-bar .al-speed:active{ background:rgba(255,255,255,.16); }
/* 图标钮：38px 命中区 · 18px 线性图标 */
.c2-ib{ display:grid; place-items:center; width:38px; height:38px; flex:none; border:0; border-radius:50%; background:transparent; color:rgba(255,255,255,.82); cursor:pointer; transition:background-color .15s ease, color .15s ease; }
.c2-ib:active{ background:rgba(255,255,255,.12); }
.c2-ib.on{ color:#F0DDA6; }
.c2-ib svg{ display:block; }
/* 播放键：金面 · 内高光 · 三态（播放/暂停/加载） */
.c2-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:52px; height:52px; display:grid; place-items:center; border:0; border-radius:50%; background:linear-gradient(155deg,#F4E3AC,#D2AE55); color:#1B130A; cursor:pointer; box-shadow:0 6px 20px rgba(214,180,95,.4), inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(120,88,30,.35); transition:filter .15s ease; }
.c2-play:active{ filter:brightness(.92); }
.c2-play svg{ grid-area:1/1; }
.c2-play .pb-play{ margin-left:2px; }
.c2-play .pb-pause{ display:none; }
.c2-play .pb-load{ grid-area:1/1; display:none; width:22px; height:22px; border-radius:50%; border:2.5px solid rgba(27,19,10,.25); border-top-color:#1B130A; animation:c2spin .8s linear infinite; }
.c2-play.is-playing .pb-play{ display:none; }
.c2-play.is-playing .pb-pause{ display:block; }
.c2-play.is-loading .pb-play, .c2-play.is-loading .pb-pause{ display:none; }
.c2-play.is-loading .pb-load{ display:block; }
@keyframes c2spin{ to{ transform:rotate(360deg); } }
/* 正在播放 + 选集（播放框下方） */
.c2-epline{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:9px 22px calc(62px + var(--h5-safe-bottom)); padding:0; border:0; background:transparent; cursor:pointer; }
.c2-epline span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; font-size:12px; color:rgba(240,232,214,.82); text-shadow:0 1px 5px rgba(0,0,0,.7); }
.c2-epline em{ flex:none; font-style:normal; font-size:12px; font-weight:700; letter-spacing:1px; color:#F0DDA6; }
.c2-epline:active span{ color:#fff; }
/* 倍速迷你竖条 */
.c2-mini{ position:absolute; left:24px; bottom:calc(150px + var(--h5-safe-bottom)); z-index:5; display:flex; flex-direction:column; gap:2px; padding:6px; background:rgba(18,14,8,.95); border:1px solid rgba(233,206,134,.32); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.5); backdrop-filter:blur(8px); }
.c2-mini-timer{ left:86px; }
.c2-mini-timer button{ min-width:88px; }
.c2-mini button{ min-width:56px; padding:8px 12px; border:0; border-radius:8px; background:transparent; color:rgba(240,232,214,.9); font-size:12.5px; font-weight:700; cursor:pointer; text-align:center; }
.c2-mini button.on{ color:#123A2F; background:linear-gradient(92deg,#EFDCA0,#D6B45F); }
.c2-mini button:active{ background:rgba(233,206,134,.18); }
/* 选集面板 */
.c2-picker{ position:absolute; left:10px; right:10px; bottom:calc(88px + var(--h5-safe-bottom)); z-index:5; overflow:hidden; background:rgba(18,14,8,.96); border:1px solid rgba(233,206,134,.3); border-radius:16px; box-shadow:0 -10px 40px rgba(0,0,0,.5); backdrop-filter:blur(10px); }
.c2-picker header{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid rgba(233,206,134,.18); color:#E9CE86; }
.c2-picker header b{ font-size:14px; letter-spacing:2px; }
.c2-picker header span{ flex:1; font-size:11px; color:rgba(240,232,214,.6); }
.c2-picker header button{ border:0; background:transparent; color:rgba(255,255,255,.7); font-size:14px; cursor:pointer; }
.c2-picker-list{ max-height:38vh; overflow-y:auto; padding:6px; }
.c2-pick{ display:flex; align-items:center; gap:10px; width:100%; padding:11px 10px; border:0; border-radius:10px; background:transparent; cursor:pointer; text-align:left; }
.c2-pick b{ width:22px; flex:none; font-family:"Noto Serif SC","Songti SC","SimSun","Noto Serif CJK SC","Source Han Serif SC",serif; /* font-unify-20260726-fix21 */ color:#B98A2F; }
.c2-pick span{ flex:1; font-size:13px; color:#F0E8D6; }
.c2-pick em{ font-style:normal; font-size:10.5px; color:#E9CE86; white-space:nowrap; }
.c2-pick.on{ background:rgba(233,206,134,.14); }
.c2-pick.locked span{ color:rgba(255,255,255,.45); }
.c2-pick.locked em{ color:rgba(255,255,255,.4); }
.c2-pick:active{ background:rgba(233,206,134,.1); }
/* ==== [学堂课程中心] 结束 ==== */

/* ==== [学堂首页·四轮质感统一] 开始 ==== */
/* 守护条：收敛的黑檀金匾——小圆角、细描金边、无高光花哨 */
.acad-center .acad-member{ position:relative; border-radius:10px; background:#1D160D; border:1px solid rgba(216,185,106,.45); box-shadow:0 8px 20px rgba(25,18,8,.25); }
.acad-center .acad-member::before, .acad-center .acad-member::after{ content:none; }
.acad-center .acad-member i{ padding:7px 13px; border-radius:7px; border:1px solid rgba(233,206,134,.55); background:transparent; color:#EBD79A; font-weight:700; font-size:11.5px; letter-spacing:1.5px; }
.acad-center .acad-member:active i{ background:rgba(233,206,134,.16); }
.acad-center .acad-member b{ font-family:"Noto Serif SC","Songti SC","SimSun","Noto Serif CJK SC","Source Han Serif SC",serif; /* font-unify-20260726-fix21 */ letter-spacing:2px; color:#EFDCA0; }
.acad-center .acad-member em{ color:rgba(233,223,200,.62); }
.acad-center .acad-member-top{ margin:12px 0 6px; padding:13px 15px; }
/* 守护条右侧 CTA：描金小胶囊——醒目而不刺眼，与纸金风一致 */
.acad-center .acad-member-top b{ font-weight:700; }
.acad-center .acad-member-top i{ background:linear-gradient(92deg,#F3E0A6,#D8B96A); border-color:transparent; color:#2A1E0C; font-weight:800; letter-spacing:1.5px; box-shadow:0 2px 8px rgba(198,158,74,.35); }
.acad-center .acad-member-top:active i{ background:linear-gradient(92deg,#EED89A,#CDAE5E); }

/* 章节标题：统一节奏 + 金点缀 */
.acad-center .acad-sec-head{ margin:30px 2px 13px; }
.acad-center .acad-sec-head h2{ display:flex; align-items:center; gap:8px; font-size:17px; letter-spacing:2.5px; }
.acad-center .acad-sec-head h2::before{ content:""; width:5px; height:5px; border-radius:50%; background:#B98A2F; box-shadow:0 0 0 2.5px rgba(185,138,47,.22); flex:none; }

/* 卡片质感三统一：圆角 18 · 描金细边 · 同一套阴影 */
.acad-center .course-v2-card{ border-radius:18px; box-shadow:0 12px 26px rgba(90,70,40,.1); }
.acad-study-demo{ border-radius:16px; background:linear-gradient(170deg,rgba(253,251,244,.8),rgba(246,237,216,.65)); border:1px solid rgba(185,138,47,.2); box-shadow:0 8px 18px rgba(90,70,40,.07); }
.acad-free-card{ border-radius:16px; box-shadow:0 8px 18px rgba(90,70,40,.07); }
.acad-free-card i{ letter-spacing:1.5px; }

/* 横滑区：右缘渐隐提示还能滑 */
.acad-album-row{ -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent); mask-image:linear-gradient(90deg,#000 92%,transparent); padding-bottom:10px; }
.aa-title{ margin-top:9px; }

/* 热听榜：更轻、字重节奏 */
.acad-rank-plain .acad-rank-row{ padding:9px 0; border-top:1px dashed rgba(58,48,35,.09); }
.acad-rank-plain .acad-rank-row b{ font-size:16px; }
.acad-rank-plain .acad-rank-row em{ letter-spacing:.5px; }

/* 铭言：留白 + 两侧描金短线 */
.acad-center .acad-path-hint{ display:flex; align-items:center; justify-content:center; gap:12px; margin:34px 0 10px; }
.acad-center .acad-path-hint::before, .acad-center .acad-path-hint::after{ content:""; width:36px; height:1px; background:linear-gradient(90deg,transparent,rgba(185,138,47,.5)); }
.acad-center .acad-path-hint::after{ background:linear-gradient(90deg,rgba(185,138,47,.5),transparent); }
/* ==== [学堂首页·四轮质感统一] 结束 ==== */

/* ==== [全站原生触感·补漏] 弹窗与所有可聚焦元素 ==== */
/* 鼠标/触摸点按不出现蓝色焦点框；键盘 Tab 导航仍保留可见焦点（可访问性） */
*:focus:not(:focus-visible){ outline:none !important; }
dialog:focus{ outline:none; }
input:focus, textarea:focus, select:focus{ outline:none; }
/* 文本选中色统一为描金（输入框内选中不再是系统蓝） */
::selection{ background:rgba(185,138,47,.32); color:inherit; }
/* dialog 弹窗内元素继承全局：不可误选正文，输入框除外 */
dialog{ -webkit-user-select:none; user-select:none; }
dialog input, dialog textarea{ -webkit-user-select:text; user-select:text; }

/* 奇门断事·起局时间「用当前时刻」勾选按钮（默认勾选） */
.qimen-now-row{ margin-top:-6px; }
.qimen-now-check{ display:inline-flex; align-items:center; gap:7px; background:none; border:0; padding:4px 2px; font-size:12px; color:#6b6353; letter-spacing:.5px; cursor:pointer; }
.qimen-now-check .box{ width:16px; height:16px; box-sizing:border-box; border-radius:4px; border:1.5px solid rgba(139,109,54,.55); background:#fffdf7; display:inline-grid; place-items:center; transition:all .15s; }
.qimen-now-check.on{ color:#16453A; font-weight:600; }
.qimen-now-check.on .box{ background:linear-gradient(150deg,#1A5044,#0F3229); border-color:#16453A; }
.qimen-now-check.on .box::after{ content:"✓"; color:#F3ECD8; font-size:11px; line-height:1; font-weight:700; }
.qimen-now-check:active{ opacity:.75; }


/* ============================================================
 * 站内确认弹层（20260714）—— 替代 window.confirm
 * 原生 confirm 连弹几次会被浏览器接管，按钮变成「离开/关闭网页」，
 * 用户一按就把整个页面关了。见 app.js askConfirm 的注释。
 * ============================================================ */
.dm-confirm-mask {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(28, 24, 18, .45);
  opacity: 0;
  transition: opacity .16s ease;
}
.dm-confirm-mask.is-on { opacity: 1; }
.dm-confirm {
  width: 100%;
  max-width: 320px;
  padding: 22px 20px 14px;
  border-radius: 14px;
  background: var(--paper, #F6EFE0);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
  transform: translateY(8px) scale(.98);
  transition: transform .16s ease;
}
.dm-confirm-mask.is-on .dm-confirm { transform: none; }
.dm-confirm-msg {
  margin: 0 0 18px;
  font-family: "Noto Serif SC", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif; /* font-unify-20260726-fix21 */
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink, #2C2823);
}
.dm-confirm-acts {
  display: flex;
  gap: 10px;
}
.dm-confirm-acts button {
  flex: 1;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--line, #DCD3C2);
  background: transparent;
  font-family: "Noto Serif SC", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif; /* font-unify-20260726-fix21 */
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--ink2, #6B6255);
  cursor: pointer;
}
.dm-confirm-acts .dm-confirm-ok {
  border-color: transparent;
  background: var(--ink, #2C2823);
  color: #F6EFE0;
}
.dm-confirm-acts .dm-confirm-ok.is-danger { background: #C2543F; }
.dm-confirm-acts button:active { opacity: .8; }

/* 功名九阶：走过的阶位点亮（20260714）
 * 以前圆点和九阶表的高亮行是写死的「白丁」，晋阶之后也不动 —— 见 mine-ui.js mzPaintKeju。 */
.mz-keju-d.is-passed i { background: var(--brand-red, #9b2c2c); opacity: .5; }
.mz-keju-d.is-passed em { color: var(--ink2, #6B6255); }
.keju-tab-row.is-passed { opacity: .62; }
.keju-tab-row.is-passed span { text-decoration: line-through; text-decoration-color: rgba(0,0,0,.25); }


/* ============================================================
 * 数据搬家 · 四步图示（20260714）
 * 用户来这个页面只有一个目的：把别的软件里的命盘搬过来。
 * 所以导入独占主位，导出降级成一行小字，清除整块删掉。
 * ============================================================ */
.mzstep { margin: 14px 0 12px; }
.mzstep-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 2px;
}
.mzstep-i {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 4px 10px;
  border: 1px solid var(--line, #DCD3C2);
  border-radius: 10px;
  background: var(--card, #FFFBF2);
  text-align: center;
}
.mzstep-i b {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink, #2C2823);
  color: #F6EFE0;
  font-size: 11px;
  line-height: 18px;
  font-weight: 600;
}
.mzstep-i.is-done b { background: #6E7B5B; }
.mzstep-i.is-done { border-color: #6E7B5B; }
.mzstep-ic { font-size: 20px; font-style: normal; line-height: 1; }
.mzstep-i em {
  font-style: normal;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink2, #6B6255);
}
.mzstep-arrow {
  align-self: center;
  color: var(--ink3, #9A9080);
  font-size: 14px;
}

.mzdata-card.is-main { padding-top: 16px; }
.mzdata-btn.is-big {
  height: 46px;
  font-size: 15px;
  letter-spacing: 3px;
}
.mzdata-btn.is-ghost {
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: var(--ink2, #6B6255);
  font-size: 13px;
  text-decoration: none;
}
.mzdata-card.is-note {
  background: rgba(155, 44, 44, .04);
  border-color: rgba(155, 44, 44, .18);
}
.mzdata-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 12px 2px 4px;
  font-size: 12px;
  color: var(--ink3, #9A9080);
}
.mzdata-foot span { flex: 1 1 100%; }
.mzdata-link {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink2, #6B6255);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.mzdata-link.is-danger { color: #8a3a32; }

/* ============================================================
 * 课程付费墙 · 试听三集（20260714）
 * 「八字基础理法」800 墨点解锁整课，前三讲免费。
 * 价格在服务端（store.js COURSE_PRICES），这里只负责画。
 * ============================================================ */
.cvd-paywall {
  margin: 14px 0;
  padding: 14px 16px;
  border: 1px solid var(--gold, #C9A15C);
  border-radius: 12px;
  background: rgba(201, 161, 92, .07);
}
.cvd-paywall-lead {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink2, #6B6255);
}
.cvd-paywall-lead b { color: var(--red, #9B2C2C); }
.cvd-unlock {
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: 9px;
  background: var(--ink, #2C2823);
  color: #F6EFE0;
  font-family: "Noto Serif SC", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif; /* font-unify-20260726-fix21 */
  font-size: 15px;
  letter-spacing: 2px;
  cursor: pointer;
}
.cvd-unlock:active { opacity: .85; }
.cvd-paywall-note {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--ink3, #9A9080);
  text-align: center;
}
.cvd-owned {
  margin: 12px 0;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(110, 123, 91, .1);
  color: #6E7B5B;
  font-size: 12.5px;
  text-align: center;
}
/* 锁住的讲次：看得见但点了是去解锁，不是死路 */
.ctl-lesson.locked .ctl-lesson-status,
.course-v2-lesson-row.locked .ctl-lesson-status { color: var(--gold, #C9A15C); }

/* 渠道合作入口是个 <a>（其余的 mz-row 都是 <button>），
 * 于是它带上了浏览器给链接的默认下划线，在这一排里显得很突兀。 */
a.mz-row,
a.mz-row-plain,
a.mz-row:visited {
  text-decoration: none;
  color: inherit;
}

/* ============================================================
 * 兑换结果浮窗 · 重做（20260714）
 * ------------------------------------------------------------
 * 原来用的是 .sheet（底部抽屉），从下面滑上来，而且只有墨点一个位置。
 * 渠道兑换码同时发墨点和经验 —— 经验那份用户压根看不见，以为没给。
 * 现在：居中弹出，两样奖励各占一枚印章，明明白白。
 * ============================================================ */
.dm-redeem {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100%;
  max-height: 100%;
}
.dm-redeem::backdrop {
  background: rgba(28, 24, 18, .5);
  backdrop-filter: blur(2px);
}
.dm-rd {
  width: min(320px, calc(100vw - 48px));
  padding: 28px 22px 18px;
  border-radius: 16px;
  background: var(--paper, #F6EFE0);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
  text-align: center;
  animation: dmRdIn .22s cubic-bezier(.2, .9, .3, 1.2);
}
@keyframes dmRdIn {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to   { opacity: 1; transform: none; }
}
.dm-rd-ic {
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: #F6EFE0;
}
.dm-rd-ic.is-ok  { background: #6E7B5B; }   /* 苍 */
.dm-rd-ic.is-bad { background: #C2543F; }   /* 绯 */
.dm-rd-title {
  margin: 0 0 6px;
  font-family: "Noto Serif SC", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif; /* font-unify-20260726-fix21 */
  font-size: 18px;
  letter-spacing: 3px;
  color: var(--ink, #2C2823);
}
.dm-rd-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink2, #6B6255);
}

/* 奖励：墨点 / 经验，各一枚印章 */
.dm-rd-gains {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 6px;
}
.dm-rd-gain {
  flex: 1;
  max-width: 120px;
  padding: 12px 6px 10px;
  border: 1px solid rgba(185, 144, 63, .4);
  border-radius: 10px;
  background: rgba(185, 144, 63, .08);
}
.dm-rd-gain.is-exp {
  border-color: rgba(110, 123, 91, .4);
  background: rgba(110, 123, 91, .09);
}
.dm-rd-gain b {
  display: block;
  font-family: "Noto Serif SC", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif; /* font-unify-20260726-fix21 */
  font-size: 26px;
  line-height: 1.1;
  color: #9B2C2C;
  font-variant-numeric: tabular-nums;
}
.dm-rd-gain.is-exp b { color: #5F6B4E; }
.dm-rd-gain span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--ink3, #9A9080);
}

.dm-rd-bal {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ink3, #9A9080);
}
.dm-rd-ok {
  width: 100%;
  height: 44px;
  margin-top: 18px;
  border: 0;
  border-radius: 9px;
  background: var(--ink, #2C2823);
  color: #F6EFE0;
  font-family: "Noto Serif SC", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", serif; /* font-unify-20260726-fix21 */
  font-size: 15px;
  letter-spacing: 4px;
  cursor: pointer;
}
.dm-rd-ok:active { opacity: .85; }

/* （20260716zp）主题皮肤系统（黑金/白简）已整体下架：配色不合理、返工量大，晨哥拍板删除。
   原 374 行实现（含令牌层与硬编码大面镜像清单）见 git/备份与 HANDOFF §11。 */

/* 20260721 round6：盘库分页「加载更多」按钮 */
.library-sentinel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  margin: 8px 0 24px;
  pointer-events: none;
}
.library-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(107, 98, 85, 0.18);
  border-top-color: var(--ink2, #6B6255);
  border-radius: 50%;
  animation: library-spin 0.8s linear infinite;
}
@keyframes library-spin {
  to { transform: rotate(360deg); }
}

/* 八字盘打开 3 秒看门狗：避免真机 WebView 卡死时白屏无反馈 */
.chart-open-watchdog-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(250, 248, 244, 0.94);
}
.chart-open-watchdog-box {
  text-align: center;
  color: var(--ink, #2C2823);
}
.chart-open-watchdog-box p {
  margin: 0 0 12px;
  font-size: 15px;
  letter-spacing: 1px;
}
.chart-open-watchdog-retry {
  padding: 10px 22px;
  border: 1px solid var(--ink2, #6B6255);
  border-radius: 20px;
  background: transparent;
  color: var(--ink, #2C2823);
  font-size: 14px;
  letter-spacing: 2px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* nav-qimen-rename-20260726-fix22: 四字导航标签在小屏防溢出 */
.phone > .tabbar button[data-go="qimen-question"] span {
  font-size: 11px !important;
}