/* ============================================================
   QIMENIT — style-new.css
   色彩体系：深蓝金色（Dark Blue × Amber Gold）
   变更原则：只改颜色，不动布局/字体/字号/框线
   ============================================================ */

/* ============================================================
   :root — 全站色彩变量（改颜色只需改这里）
   ============================================================ */
:root {
  color-scheme: dark;

  /* 背景层级 */
  --bg-page:        #0d1420;   /* 全站页面底色 */
  --bg-card:        #111b2e;   /* 普通卡片/容器 */
  --bg-card-hero:   #14203a;   /* 核心结论/强调卡片 */
  --bg-card-xiong:  #1a0f0f;   /* 凶卡片背景 */
  --bg-grid-cell:   #F5EDE0;   /* 九宫格普通格底色 */
  --bg-grid-alt:    #EDE5D8;   /* 九宫格交错格底色 */
  --bg-grid-center: #C8C8D8;   /* 九宫格中宫底色 */
  --bg-input:       #0d1420;   /* 输入框（比卡片深一档，凹进去感） */

  /* 文字层级（全部基于白色透明度） */
  --text-primary:   rgba(255,255,255,0.92);
  --text-body:      rgba(255,255,255,0.70);
  --text-secondary: rgba(255,255,255,0.50);
  --text-muted:     rgba(255,255,255,0.30);
  --text-hint:      rgba(255,255,255,0.25);

  /* 金色系（按钮、边框、点缀） */
  --gold-border:    #A07850;
  --gold-text:      #E8C9A8;
  --gold-bg:        rgba(180,130,80,0.18);   /* 按钮/badge 背景 */
  --gold-bg-badge:  rgba(180,130,80,0.22);   /* badge 背景 */
  --gold-border-badge: rgba(180,130,80,0.38);

  /* 吉凶语义色 */
  --ji-border:      #A07850;
  --ji-text:        #E8C9A8;
  --ji-badge-bg:    rgba(180,130,80,0.20);
  --ji-badge-border:rgba(180,130,80,0.35);

  --zhong-border:   #555555;
  --zhong-text:     rgba(255,255,255,0.40);
  --zhong-badge-bg: rgba(100,100,100,0.15);
  --zhong-badge-border: rgba(255,255,255,0.10);

  --xiong-border:   #993c1d;
  --xiong-text:     #e07050;
  --xiong-badge-bg: rgba(153,60,29,0.25);
  --xiong-badge-border: rgba(153,60,29,0.40);

  /* 分割线（三档透明度） */
  --divider-section: rgba(255,255,255,0.08);
  --divider-card:    rgba(255,255,255,0.06);
  --divider-light:   rgba(255,255,255,0.04);

  /* 边框 */
  --border-card:    rgba(255,255,255,0.07);
  --border-input:   rgba(255,255,255,0.10);
  --border-focus:   rgba(160,120,70,0.50);
  --grid-line:      rgba(160,110,60,0.20);  /* 九宫格线条 */

  /* 金色光晕线（卡片顶部装饰） */
  --glow-line: linear-gradient(90deg, transparent, rgba(232,185,130,0.35), transparent);
}


/* ============================================================
   全局基础
   ============================================================ */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--bg-page);
  color: var(--text-primary);
}

body {
  font-family: 'Montserrat', sans-serif;
  width: 100%;
}

* {
  overflow-anchor: none;
}

/* ============================================================
   页面视图控制
   ============================================================ */
.page-view { display: none !important; }
.page-view.active { display: block !important; }
.hidden { display: none !important; }

body[data-active-view="result"] {
  align-items: flex-start !important;
  display: block !important;
  width: 100% !important;
  min-height: 100vh !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

html:has(body[data-active-view="result"]) {
  align-items: flex-start !important;
}


/* ============================================================
   Landing 页面
   ============================================================ */
#landing-view,
#landing-view.active,
#landing-view .landing-page-container,
#landing-view .landing-page-shell {
  background: transparent !important;
}

#landing-view .landing-page-shell {
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  display: block !important;
}

#landing-view {
  width: 100%;
  box-sizing: border-box;
}

#landing-view.active {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  min-height: 100vh !important;
  padding: 20px !important;
}

html:has(body[data-active-view="landing"]),
body[data-active-view="landing"] {
  height: auto !important;
  min-height: 100vh !important;
  overflow-y: auto !important;
  display: block !important;
}

.landing-page-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

/* Brand */
#landing-view .brand,
.brand {
  display: block !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--gold-text) !important;
  position: relative;
  z-index: 3;
  opacity: 1;
  letter-spacing: .25em !important;
  text-align: center !important;
  margin: 0 0 1.4rem 0 !important;
}

/* Dark card */
#landing-view .dark-card {
  display: block !important;
  background: linear-gradient(180deg, rgba(14,30,80,0.95) 0%, rgba(6,10,28,0.92) 100%) !important;
  border: 0.5px solid var(--border-card) !important;
  border-radius: 28px !important;
  padding: 2rem 2rem 1.6rem !important;
  position: relative;
}

/* Landing: balance card height between EN/ZH */
#landing-view:has(#landingBtnEN.landing-lang-btn--active) .dark-card {
  padding: 1.6rem 2rem 1.3rem !important;
}
#landing-view:has(#landingBtnZH.landing-lang-btn--active) .dark-card {
  padding: 2.25rem 2rem 1.85rem !important;
}

/* 金色光晕顶线 */
#landing-view .dark-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: var(--glow-line);
  border-radius: 0;
  pointer-events: none;
}

/* Headlines */
.headline {
  font-size: 3.6em;
  font-weight: 800;
  line-height: 1.08;
  margin-top: 0;
  margin-bottom: 24px;
  color: var(--text-primary);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100vw;
  font-family: 'Poppins', 'Montserrat', 'Segoe UI', Arial, sans-serif;
}

#landing-view .dark-card .headline,
#landing-view .dark-card .headline-line,
#landing-view .headline,
#landing-view .headline-line {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(17px,4vw,24px) !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  font-feature-settings: 'calt' 0, 'clig' 0, 'liga' 0 !important;
  color: #F0DFC0 !important;
}

#landing-view .dark-card .headline {
  font-size: 32px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

/* Landing EN headline: match ref font + bigger size (color unchanged) */
#landing-view .headline-line.landing-en {
  font-family: 'Poppins', 'Montserrat', 'Inter', 'Segoe UI', Arial, sans-serif !important;
  font-size: clamp(23px, 5.9vw, 43px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

/* Landing EN headline: desktop slightly smaller (-1) */
@media (min-width: 481px) {
  #landing-view .headline-line.landing-en {
    font-size: clamp(20px, 5.9vw, 40px) !important;
  }

  /* Landing EN (desktop): shrink gap to description (~1/3) */
  #landing-view:has(#landingBtnEN.landing-lang-btn--active) .dark-card .headline {
    margin-bottom: 3px !important;
  }
}

/* Landing EN headline: tighten spacing between two lines */
#landing-view .headline-line.landing-en {
  margin-bottom: 10px !important;
  line-height: 1.06 !important;
}
#landing-view .headline-line.landing-en:last-of-type {
  margin-bottom: 0 !important;
}

/* Landing EN headline: increase top space to card frame (EN only) */
#landing-view:has(#landingBtnEN.landing-lang-btn--active) .dark-card .headline {
  margin-top: 18px !important;
  transform: translateY(5px);
}

/* Landing: balance vertical density between EN/ZH */
#landing-view:has(#landingBtnEN.landing-lang-btn--active) .dark-card .description.landing-en {
  margin-bottom: 22px !important;
}
#landing-view:has(#landingBtnEN.landing-lang-btn--active) .dark-card .email-form-container {
  gap: 12px !important;
}
#landing-view:has(#landingBtnEN.landing-lang-btn--active) .dark-card .landing-rules {
  margin-top: 0.95rem !important;
}

#landing-view:has(#landingBtnZH.landing-lang-btn--active) .dark-card .description.landing-zh {
  margin-bottom: 26px !important;
}
#landing-view:has(#landingBtnZH.landing-lang-btn--active) .dark-card .email-form-container {
  gap: 16px !important;
}
#landing-view:has(#landingBtnZH.landing-lang-btn--active) .dark-card .landing-rules {
  margin-top: 1.35rem !important;
}

/* Landing ZH top line: "浮生万象" above headline (font + placement only) */
#landing-view .landing-zh-topline {
  font-family: 'Noto Serif SC', serif !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  letter-spacing: 0.36em !important;
  margin: 0 0 14px 0 !important;
  text-align: center !important;
}

/* Landing ZH: unify 3 lines same font + color */
#landing-view .dark-card .landing-zh-topline,
#landing-view .dark-card .headline-line.landing-zh,
#landing-view .dark-card .description.landing-zh {
  font-family: 'Noto Serif SC', serif !important;
  color: #F0DFC0 !important;
  opacity: 1 !important;
}

/* Emphasize main ZH headline */
#landing-view .dark-card .headline-line.landing-zh {
  font-size: 36px !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em !important;
}

/* Landing ZH subtitle: "遇事不决 九宫问天" */
#landing-view .description.landing-zh {
  font-family: 'Noto Serif SC', serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  text-align: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Landing ZH: evenly spaced 3-line stack (topline / main / subtitle) */
#landing-view:has(#landingBtnZH.landing-lang-btn--active) .dark-card .landing-zh-topline {
  margin: 0 0 14px 0 !important;
}
#landing-view:has(#landingBtnZH.landing-lang-btn--active) .dark-card .headline {
  margin: 0 0 14px 0 !important;
}
#landing-view:has(#landingBtnZH.landing-lang-btn--active) .dark-card .description.landing-zh {
  margin: 0 0 28px 0 !important;
}

/* Landing EN description: slightly smaller */
#landing-view .description.landing-en {
  font-size: 1.0em !important;
}

/* Landing rules: +1 size for titles and items (EN + ZH) */
#landing-view .landing-rules-title {
  font-size: 10px !important;
}
#landing-view .landing-rules-list li {
  font-size: 10px !important;
}

/* Landing rules: keep each EN bullet on one line */
#landing-view .landing-rules-list li.landing-en {
  white-space: nowrap;
}


/* Landing email placeholder: italic */
#landing-view .email-input::placeholder {
  font-style: italic !important;
}

/* Landing: make CTA height match input (slightly lower) */
#landing-view .email-input,
#landing-view .cta-button {
  height: 48px !important;
  padding: 0 15px !important;
  line-height: 48px !important;
}

#landing-view .cta-button {
  font-size: 13px !important;
}

.sub-headline {
  font-size: 1.3em;
  font-weight: 500;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 30px;
  font-family: 'Poppins', 'Montserrat', 'Roboto', 'DM Sans', 'Inter', Arial, sans-serif;
}

.headline-line {
  white-space: nowrap;
  display: block;
  font-family: 'Poppins', 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 18px;
  margin-top: 0;
}

.headline-line:last-child {
  margin-bottom: 0;
}

/* Description */
.description {
  font-family: 'DM Sans', 'Montserrat', 'Poppins', 'Inter', 'Segoe UI', Arial, sans-serif;
  font-size: 1.1em;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.7;
  margin-bottom: 30px;
  color: var(--text-secondary);
  text-align: center;
}

#landing-view .dark-card .description,
#landing-view .description {
  color: var(--gold-text) !important;
  opacity: 0.95;
}

/* Email form */
.email-form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: 100%;
}

.email-status-message {
  width: 100%;
  max-width: 350px;
  padding: 12px 15px;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 10px;
}

.email-status-message.email-status-highlight {
  background-color: rgba(220, 53, 69, 0.2);
  border: 1px solid rgba(220, 53, 69, 0.5);
  color: #ff6b6b;
}

.email-input, .cta-button {
  width: 100% !important;
  max-width: 350px !important;
  padding: 15px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  text-align: center !important;
  box-sizing: border-box !important;
  display: block !important;
}

.email-form-container {
  width: 100% !important;
  max-width: 350px !important;
  margin: 0 auto !important;
}

.email-input {
  background: var(--bg-input) !important;
  border: 0.5px solid var(--border-input) !important;
  color: var(--text-primary) !important;
}

.email-input::placeholder {
  color: rgba(232,201,168,0.60) !important;
  text-align: center;
}

/* CTA 按钮：金色描边 + 深底 */
.cta-button,
#submit-btn-main,
.email-form-container .cta-button {
  background: var(--bg-card-hero) !important;
  color: var(--gold-text) !important;
  border: 0.5px solid rgba(160,120,70,0.40) !important;
  font-weight: bold;
  cursor: pointer;
}

#landing-view .dark-card .email-form-container .cta-button,
#landing-view .cta-button {
  background: var(--gold-bg) !important;
  color: var(--gold-text) !important;
  border: 0.5px solid rgba(160,120,70,0.40) !important;
}

/* Divider */
#landing-view .dark-card .divider,
#landing-view .divider {
  display: flex !important;
  align-items: center !important;
  gap: .75rem !important;
  width: 100% !important;
  margin: 1.5rem 0 !important;
}

.divider-line,
#landing-view .dark-card .divider-line,
#landing-view .divider-line {
  flex: 1 !important;
  height: 0.5px !important;
  background: rgba(160,120,70,0.15) !important;
}

.divider-text,
#landing-view .dark-card .divider-text,
#landing-view .divider-text {
  font-size: 11px !important;
  color: var(--gold-text) !important;
  opacity: 0.85;
  letter-spacing: .1em !important;
}

.tagline,
#landing-view .dark-card .tagline,
#landing-view .tagline {
  font-size: 11px !important;
  color: var(--gold-text) !important;
  opacity: 0.80;
  text-align: center !important;
  letter-spacing: .05em !important;
  margin: 0 !important;
}

/* Footer */
.footer,
#landing-view .footer {
  display: block !important;
  margin-top: 1.2rem !important;
  margin-bottom: 0 !important;
  font-size: 11px !important;
  color: rgba(232,201,168,0.62) !important;
  opacity: 1 !important;
  text-align: center !important;
  line-height: 1.35 !important;
}

#landing-view .footer #landingFooterEN,
#landing-view .footer #landingFooterZH {
  display: block !important;
  visibility: visible !important;
}

/* Media queries for headline */
/* ── Landing: language switcher ── */
.landing-lang-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 3;
  margin-bottom: 14px;
}

.landing-lang-btn {
  background: transparent;
  border: 0.5px solid rgba(200,160,110,0.30);
  border-radius: 6px;
  color: rgba(232,201,168,0.55);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 14px;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: all 0.15s;
}

.landing-lang-btn--active {
  border-color: rgba(200,160,110,0.70);
  color: var(--gold-text);
  background: rgba(180,130,80,0.12);
}

/* ── Landing: rules block ── */
.landing-rules {
  margin-top: 1.2rem;
  padding-top: 0.8rem;
  padding-left: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Landing divider: equalize spacing above/below "天·地·人" */
#landing-view .landing-rules {
  padding-top: 0 !important;
}

.landing-rules--no-border {
  border-top: none !important;
}

.landing-rules-title {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: rgba(232,201,168,0.60) !important;
  text-align: center !important;
  margin: 0 auto 8px !important;
  width: 100%;
  max-width: 320px;
}

.landing-rules-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  text-align: left;
  width: 100%;
  max-width: 320px;
}

.landing-rules-list li {
  font-size: 10px;
  color: rgba(232,201,168,0.58);
  line-height: 1.4;
  padding: 2px 0 2px 12px;
  position: relative;
}

.landing-rules-list li::before {
  content: '·';
  position: absolute;
  left: 2px;
  color: rgba(232,201,168,0.40);
  font-size: 12px;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .headline { font-size: 2.2em; }
  .sub-headline { font-size: 1.2em; margin-bottom: 18px; }
  .headline-line { font-size: 0.95em; margin-bottom: 10px; }

  /* Landing (mobile): shrink language buttons to 2/3 size */
  .landing-lang-btn {
    font-size: 8px !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
    line-height: 1 !important;
  }
}

@media (max-width: 480px) {
  .headline { font-size: 1.3em; }
  .sub-headline { font-size: 1em; margin-bottom: 10px; }
  .headline-line { font-size: 0.85em; margin-bottom: 6px; }

  /* Landing (mobile): balance EN/ZH density */
  #landing-view:has(#landingBtnEN.landing-lang-btn--active) .dark-card {
    padding: 1.35rem 1.25rem 1.05rem !important;
  }
  #landing-view:has(#landingBtnEN.landing-lang-btn--active) .dark-card .headline {
    margin-top: 10px !important;
    margin-bottom: 16px !important;
  }
  #landing-view:has(#landingBtnEN.landing-lang-btn--active) .dark-card .email-form-container {
    gap: 10px !important;
  }

  /* Landing (mobile): Before You Cast content -1 size (EN only) */
  #landing-view .landing-rules-list li.landing-en {
    font-size: 10px !important;
  }

  /* Landing (mobile): ZH headline sizing + centering */
  #landing-view .dark-card .headline-line.landing-zh {
    font-size: 33px !important; /* -3 total */
  }
  #landing-view .description.landing-zh {
    font-size: 18px !important; /* +1 */
    text-align: center !important;
    width: 100% !important;
  }

  /* Birthday (mobile): reduce submit-to-card-bottom spacing again */
  #birthday-view .form-container {
    padding-bottom: 0.25rem !important;
  }
}


/* ============================================================
   Birthday 表单页
   ============================================================ */
#birthday-view,
#birthday-view.active,
#birthday-view.page-view.active {
  background: var(--bg-page) !important;
  color: var(--text-primary) !important;
  min-height: 100vh !important;
}

#birthday-view .birthday-header {
  width: 100%;
  max-width: 600px;
  margin: 30px auto 12px !important;
  text-align: center;
  display: block !important;
  position: relative;
  z-index: 3;
}

.birthday-header .form-title,
.birthday-header .form-subtitle {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Ensure QiMenIt title is visible above the card */
#birthday-view .birthday-header .form-title {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-top: 0 !important;
  margin-bottom: 6px !important;
  line-height: 1.15 !important;
  color: #E8C9A8 !important;
}

.form-container {
  background: var(--bg-card) !important;
  border: 0.5px solid rgba(200,160,110,0.20) !important;
  padding: 16px 40px 16px 40px;
  border-radius: 20px;
  box-sizing: border-box;
  margin: 20px 20px;
  height: auto !important;
  position: relative;
}

/* 金色光晕顶线 */
.form-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 1px;
  background: var(--glow-line);
  pointer-events: none;
}

#birthday-view .form-container {
  background: linear-gradient(180deg, rgba(14,30,80,0.95) 0%, rgba(6,10,28,0.92) 100%) !important;
  border: 0.5px solid rgba(200,160,110,0.20) !important;
  padding: 1.5rem 2.375rem !important;
  border-radius: 20px !important;
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0 !important;
}

/* Reduce submit-to-card-bottom spacing */
#birthday-view .form-container {
  padding-bottom: 0.45rem !important;
}

.form-title {
  text-align: center;
  white-space: nowrap;
  margin-bottom: 2rem;
  font-size: 2rem;
  color: var(--text-primary);
}

#birthday-view .form-title {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0.5rem !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #E8C9A8 !important;
}

.form-subtitle {
  text-align: center;
  color: var(--gold-text);
  opacity: 0.7;
  font-size: 13px;
  font-weight: 400;
}

#birthday-view .form-subtitle {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: #E8C9A8 !important;
  opacity: 1 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

#birthday-view .form-subtitle-zh {
  color: #E8C9A8 !important;
  opacity: 1 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

.form-group {
  display: flex;
  white-space: nowrap;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 3px;
}

#birthday-view .form-group {
  margin-bottom: 0.75rem !important;
}

.form-group label {
  min-width: 0;
  margin-bottom: 4px;
  white-space: nowrap;
  text-align: center;
  margin-right: 0;
  font-size: 16px;
  color: var(--text-primary);
  width: 100%;
  display: block;
}

#birthday-view .form-group label {
  color: #E8C9A8 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  width: min(74vw, 300px) !important;
  margin: 0 auto 6px auto !important;
}

#birthday-view .form-group .label-zh {
  color: #E8C9A8 !important;
  font-size: 11px !important;
  font-weight: 400 !important;
}

/* Gender field */
#birthday-view .form-field {
  width: min(74vw, 300px) !important;
  margin: 0 auto 1.25rem auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Keep gender (Choices) aligned with other input boxes */
#birthday-view .form-field .choices,
#birthday-view .form-field .choices__inner {
  width: min(74vw, 300px) !important;
  max-width: min(74vw, 300px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

#birthday-view .form-field label {
  color: #E8C9A8 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

#birthday-view .form-field > * {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#birthday-view .form-field .form-field-label-row,
#birthday-view .form-field #gender,
#birthday-view .form-field #gender ~ .choices,
#birthday-view .form-field #gender ~ .choices .choices__inner,
#birthday-view .form-field #gender ~ .choices .choices__list--dropdown,
#birthday-view .form-field #gender ~ .choices .choices__list[aria-expanded] {
  width: 100% !important;
  max-width: 100% !important;
}

.birth-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

#birthday-view .birth-form {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* 输入框 */
select:not(.flatpickr-calendar select),
input[type="date"],
input[type="datetime-local"],
input[type="text"] {
  width: 70vw !important;
  max-width: 350px !important;
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border: 0.5px solid var(--border-input) !important;
  border-radius: 8px !important;
  min-height: 44px !important;
  padding: 12px !important;
  font-size: 16px !important;
  margin-bottom: 18px !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
  outline: none !important;
  text-align: center !important;
}

#birthday-view .birth-form input[type="text"],
#birthday-view #gregorianDate,
#birthday-view #chartTime,
#birthday-view #birthday {
  width: min(74vw, 300px) !important;
  max-width: min(74vw, 300px) !important;
  background: var(--bg-input) !important;
  border: 0.5px solid rgba(200,160,110,0.20) !important;
  border-radius: 12px !important;
  color: var(--text-primary) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-align: left !important;
  padding: 13px 16px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

#birthday-view #gregorianDate,
#birthday-view #chartTime {
  text-align: left !important;
}

#birthday-view #birthday {
  text-align: left !important;
}

#birthday-view #birthday::placeholder {
  text-align: left !important;
  font-style: italic !important;
}

select:focus,
input[type="date"]:focus,
input[type="text"]:focus {
  border-color: var(--border-focus) !important;
}

/* Birth form input placeholders */
#birthday-view .birth-form input::placeholder,
#birthday-view textarea::placeholder {
  color: rgba(200,160,110,0.40) !important;
  font-size: 13px !important;
  font-style: italic !important;
  font-weight: 400 !important;
  text-align: left !important;
}

/* Submit 按钮 */
.birth-form .submit-button,
.birth-form .cta-button {
  width: 350px;
  padding: 15px;
  background: var(--gold-bg) !important;
  border: 0.5px solid rgba(160,120,70,0.40) !important;
  border-radius: 8px;
  color: var(--gold-text) !important;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s ease;
}

#birthday-view #submit-btn-main,
#birthday-view .cta-button,
#birthday-view .submit-button {
  width: min(74vw, 300px) !important;
  max-width: min(74vw, 300px) !important;
  background: var(--gold-bg) !important;
  color: #E8C9A8 !important;
  border: 0.5px solid rgba(160,120,70,0.40) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

#birthday-view #submit-btn-main:hover,
#birthday-view .cta-button:hover {
  background: rgba(160,120,70,0.25) !important;
}

#birthday-view #submit-btn-main .btn-en {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #E8C9A8 !important;
}

#birthday-view #submit-btn-main .btn-zh {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #E8C9A8 !important;
  opacity: 1 !important;
  margin-left: 0 !important;
}

/* Compact submit button: one-third width, centered near bottom */
#birthday-view #submit-btn-main {
  width: min(24vw, 108px) !important;
  max-width: min(24vw, 108px) !important;
  min-width: 0 !important;
  padding: 10px 8px !important;
  display: block !important;
  margin: 5px auto 32px auto !important;
}

#submit-btn-main.cta-button.only-submit-btn {
  border: 0.5px solid rgba(160,120,70,0.40) !important;
  box-shadow: none !important;
}

#birthForm .submit-button,
#birthForm button[type="submit"],
#birthFormResult .submit-button,
#birthFormResult button[type="submit"] {
  margin-bottom: 32px !important;
}

.birth-form input[type="submit"],
.birth-form button[type="submit"],
#birthForm button[type="submit"],
#birthFormResult button[type="submit"] {
  background: var(--gold-bg) !important;
  border: 0.5px solid rgba(160,120,70,0.40) !important;
  width: 350px !important;
  padding: 15px !important;
  border-radius: 8px !important;
  color: var(--gold-text) !important;
  font-size: 16px !important;
  cursor: pointer !important;
  display: block !important;
}

.birth-form button[type="submit"]:hover,
#birthFormResult button[type="submit"]:hover {
  background: rgba(160,120,70,0.25) !important;
}

/* submit countdown (倒计时，用 class 代替内联 style) */
.submit-countdown {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  color: rgba(200,160,110,0.50);
}

/* Choices.js */
html body .choices {
  margin: 0 auto 18px auto !important;
}

html body .choices__inner {
  width: auto !important;
  max-width: none !important;
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border: 0.5px solid var(--border-input) !important;
  border-radius: 8px !important;
  min-height: 48px !important;
  font-size: 16px !important;
  font-family: inherit !important;
  box-sizing: border-box !important;
  padding: 12px !important;
  text-align: center !important;
}

html body .choices__list--single {
  color: var(--text-primary) !important;
}

html body .choices__list--dropdown,
html body .choices__list[aria-expanded] {
  width: auto !important;
  max-width: none !important;
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  border: 0.5px solid var(--border-input) !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
}

html body .choices__item--selectable.is-highlighted {
  background: rgba(200,160,110,0.10) !important;
  color: var(--gold-text) !important;
}

html body .choices__placeholder {
  color: rgba(200,160,110,0.40) !important;
  opacity: 1 !important;
}

html body .choices[data-type*="select-one"]::after {
  border-color: rgba(160,120,70,0.50) transparent transparent transparent !important;
}

#birthday-view .choices {
  width: min(74vw, 300px) !important;
  max-width: min(74vw, 300px) !important;
  margin: 0 auto !important;
}

#birthday-view .choices__inner {
  background: var(--bg-input) !important;
  border: 0.5px solid rgba(200,160,110,0.20) !important;
  border-radius: 12px !important;
  min-height: 0 !important;
  padding: 13px 40px 13px 16px !important;
  line-height: 1.2 !important;
  color: var(--text-primary) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#birthday-view .choices__list--single {
  color: var(--text-primary) !important;
  padding: 0 !important;
  margin: 0 !important;
}

#birthday-view .choices__placeholder {
  color: rgba(200,160,110,0.40) !important;
  font-size: 13px !important;
  font-style: italic !important;
  font-weight: 400 !important;
  opacity: 1 !important;
  text-align: left !important;
}

#birthday-view .choices__list--dropdown,
#birthday-view .choices__list[aria-expanded] {
  background: var(--bg-card) !important;
  border: 0.5px solid rgba(200,160,110,0.20) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  left: 0 !important;
  right: 0 !important;
}

#birthday-view .choices__list--dropdown .choices__item {
  color: var(--text-primary) !important;
  font-size: 14px !important;
  border-bottom: 0.5px solid rgba(200,160,110,0.10) !important;
  padding: 12px 14px !important;
}

#birthday-view .choices__list--dropdown .choices__item:last-child {
  border-bottom: none !important;
}

#birthday-view .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: rgba(200,160,110,0.10) !important;
  color: var(--gold-text) !important;
}

#birthday-view .choices__item.is-selected {
  background: rgba(200,160,110,0.12) !important;
  color: var(--gold-text) !important;
}

#birthday-view .choices[data-type*="select-one"]::after {
  border-color: rgba(160,120,70,0.50) transparent transparent transparent !important;
  right: 14px !important;
  margin-top: -2px !important;
}

#birthday-view .choices[data-type*="select-one"].is-open::after {
  border-color: transparent transparent rgba(160,120,70,0.50) transparent !important;
}

/* q-opt layout in What to Ask dropdown */
#birthday-view .q-opt {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
}

#birthday-view .q-opt-en {
  color: var(--text-primary) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

#birthday-view .q-opt-zh {
  color: var(--gold-text) !important;
  opacity: 0.5 !important;
  font-size: 12px !important;
  font-weight: 400 !important;
}

#birthday-view .choices__item.is-selected .q-opt-en,
#birthday-view .choices__item.is-selected .q-opt-zh {
  color: var(--gold-text) !important;
}

/* Gender native select — see definitive rules at end of file */

#birthday-view #gender:valid {
  color: var(--text-primary) !important;
}

/* Focus state for inputs */
#birthday-view .birth-form input:focus,
#birthday-view .birth-form select:focus,
#birthday-view .choices.is-focused .choices__inner,
#birthday-view .choices.is-open .choices__inner {
  border: 1px solid rgba(160,120,70,0.50) !important;
  box-shadow: none !important;
}

/* Chart Time focus/readonly fix */
#birthday-view #chartTime,
#birthday-view #chartTime.flatpickr-input,
#birthday-view #chartTime:focus,
#birthday-view #chartTime:active,
#birthday-view #chartTime[readonly],
#birthday-view #chartTime.flatpickr-input[readonly] {
  background: var(--bg-input) !important;
  background-color: var(--bg-input) !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Autofill */
#birthday-view #chartTime:-webkit-autofill,
#birthday-view #chartTime:-webkit-autofill:hover,
#birthday-view #chartTime:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-primary) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
  box-shadow: 0 0 0 1000px var(--bg-input) inset !important;
  border: 0.5px solid var(--border-input) !important;
  transition: background-color 9999s ease-out 0s !important;
}

/* Checkbox */
.checkbox-container,
#result-view .checkbox-container {
  width: 350px;
  margin: 9px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  font-size: 16px;
  text-align: center;
}

.checkbox-container input[type="checkbox"] {
  margin-right: 8px !important;
  margin-bottom: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.form-group.checkbox-group {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Flatpickr — Birthday view (dark blue theme, match Choices.js card) */
.flatpickr-calendar,
.flatpickr-calendar.open,
.flatpickr-calendar.inline,
.flatpickr-calendar.static {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 350px !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
  background: var(--bg-card) !important;
  border: 0.5px solid rgba(200,160,110,0.20) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

.flatpickr-calendar::before,
.flatpickr-calendar::after {
  display: none !important;
}

.flatpickr-innerContainer,
.flatpickr-rContainer {
  width: 100% !important;
  background: transparent !important;
}

.flatpickr-months,
.flatpickr-month,
.flatpickr-current-month {
  background: transparent !important;
  color: var(--text-primary) !important;
}

.flatpickr-current-month {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  overflow: visible !important;
  font-size: 118% !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  color: var(--gold-text) !important;
  background-color: transparent !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  -moz-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='18' viewBox='0 0 14 18'%3E%3Cpath d='M7 2.5 L3 6.5 H11 Z' fill='%23E8C9A8'/%3E%3Cpath d='M3 12.5 H11 L7 16 Z' fill='%23E8C9A8'/%3E%3C/svg%3E");
  background-repeat: no-repeat !important;
  background-position: right 6px center !important;
  background-size: 14px 18px !important;
  padding-right: 24px !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:active {
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='18' viewBox='0 0 14 18'%3E%3Cpath d='M7 2.5 L3 6.5 H11 Z' fill='%23E8C9A8'/%3E%3Cpath d='M3 12.5 H11 L7 16 Z' fill='%23E8C9A8'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 6px center !important;
  background-size: 14px 18px !important;
  padding-right: 24px !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
  background: #1a2744 !important;
  color: #E8C9A8 !important;
}

.flatpickr-current-month input.cur-year {
  color: var(--gold-text) !important;
  -webkit-text-fill-color: var(--gold-text) !important;
  opacity: 1 !important;
}

.flatpickr-current-month .numInputWrapper {
  width: 4.2em !important;
  min-width: 4.2em !important;
  flex: 0 0 4.2em !important;
}

.flatpickr-current-month .numInputWrapper span {
  opacity: 1 !important;
  border: none !important;
  background: transparent !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: var(--gold-text) !important;
  fill: var(--gold-text) !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: var(--gold-text) !important;
}

.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
  fill: var(--gold-text) !important;
}

.flatpickr-weekdays,
.flatpickr-weekday {
  background: transparent !important;
  color: var(--gold-text) !important;
}

span.flatpickr-weekday {
  color: var(--gold-text) !important;
  background: transparent !important;
}

.flatpickr-days {
  width: 100% !important;
  display: flex !important;
  flex-direction: column;
  background: transparent !important;
}

.flatpickr-calendar .flatpickr-days {
  max-width: 350px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.flatpickr-innerContainer,
.flatpickr-days,
.flatpickr-calendar .dayContainer {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 350px !important;
  box-sizing: border-box !important;
  background: transparent !important;
}

.flatpickr-calendar .flatpickr-day {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  border: none !important;
  color: var(--text-primary) !important;
  background: transparent !important;
}

.flatpickr-day,
.flatpickr-weekday {
  flex: 1 0 14.2857% !important;
  max-width: 14.2857% !important;
  min-width: 0 !important;
  box-sizing: border-box;
  text-align: center;
  margin: 0 !important;
  padding: 0 !important;
}

.flatpickr-calendar .flatpickr-day:hover {
  background: rgba(200,160,110,0.15) !important;
  border-radius: 4px !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.today.selected {
  background: var(--gold-border) !important;
  color: var(--bg-page) !important;
  border-color: var(--gold-border) !important;
  box-shadow: none !important;
  border-radius: 4px !important;
}

.flatpickr-day.today:not(.selected) {
  border: 1px solid var(--gold-border) !important;
  color: var(--gold-text) !important;
  border-radius: 4px !important;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--text-muted) !important;
}

.numInputWrapper:hover {
  background: transparent !important;
}

.numInputWrapper span {
  border: none !important;
}

.numInputWrapper span:hover {
  background: rgba(200,160,110,0.15) !important;
}

.numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--gold-text) !important;
}

.numInputWrapper span.arrowDown:after {
  border-top-color: var(--gold-text) !important;
}

.flatpickr-time {
  background: transparent !important;
  border-top: 0.5px solid rgba(200,160,110,0.15) !important;
}

.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator {
  color: var(--gold-text) !important;
  background: transparent !important;
  font-weight: bold !important;
  border: none !important;
  box-shadow: none !important;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus {
  background: transparent !important;
}

.flatpickr-calendar .flatpickr-time input:focus {
  box-shadow: none !important;
  outline: none !important;
}

.flatpickr-weekdays {
  display: flex !important;
}

input[type="text"].flatpickr-input {
  width: 100%;
  max-width: 350px;
  min-width: 0;
  box-sizing: border-box;
}

body[data-active-view="birthday"] .flatpickr-calendar,
body[data-active-view="birthday"] .flatpickr-calendar.open,
body[data-active-view="birthday"] .flatpickr-calendar.inline {
  width: min(74vw, 300px) !important;
  max-width: min(74vw, 300px) !important;
  left: 0 !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
}

/* flatpickr Mobile */
@media (max-width: 600px) {
  .flatpickr-month {
    position: relative !important;
  }

  .flatpickr-current-month {
    position: static !important;
    left: auto !important;
    width: 100% !important;
    padding: 0 28px !important;
    height: 34px !important;
    font-size: 110% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  .flatpickr-calendar,
  .flatpickr-calendar.open,
  .flatpickr-calendar.inline,
  .flatpickr-calendar.static {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 0.5px solid rgba(200,160,110,0.20) !important;
    box-shadow: none !important;
    border-radius: 12px !important;
  }

  .flatpickr-calendar::before,
  .flatpickr-calendar::after {
    display: none !important;
  }

  .flatpickr-innerContainer,
  .flatpickr-rContainer,
  .flatpickr-days,
  .flatpickr-calendar .dayContainer {
    width: 100% !important;
    max-width: 95vw !important;
    background: transparent !important;
  }

  .flatpickr-months,
  .flatpickr-month,
  .flatpickr-current-month {
    background: transparent !important;
    color: var(--gold-text) !important;
  }

  .flatpickr-current-month {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }

  .flatpickr-current-month input.cur-year {
    color: var(--gold-text) !important;
    -webkit-text-fill-color: var(--gold-text) !important;
    opacity: 1 !important;
  }

  .flatpickr-current-month .flatpickr-monthDropdown-months {
    color: var(--gold-text) !important;
    background-color: transparent !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='18' viewBox='0 0 14 18'%3E%3Cpath d='M7 2.5 L3 6.5 H11 Z' fill='%23E8C9A8'/%3E%3Cpath d='M3 12.5 H11 L7 16 Z' fill='%23E8C9A8'/%3E%3C/svg%3E");
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    background-size: 14px 18px !important;
    padding-right: 24px !important;
  }

  .flatpickr-current-month .flatpickr-monthDropdown-months:focus,
  .flatpickr-current-month .flatpickr-monthDropdown-months:active {
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='18' viewBox='0 0 14 18'%3E%3Cpath d='M7 2.5 L3 6.5 H11 Z' fill='%23E8C9A8'/%3E%3Cpath d='M3 12.5 H11 L7 16 Z' fill='%23E8C9A8'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    background-size: 14px 18px !important;
    padding-right: 24px !important;
  }

  .flatpickr-current-month .flatpickr-monthDropdown-months option {
    font-size: 16px !important;
    padding: 8px 4px !important;
    min-height: 32px !important;
  }

  span.flatpickr-weekday {
    color: var(--gold-text) !important;
    background: transparent !important;
  }

  .flatpickr-calendar .flatpickr-day {
    color: var(--text-primary) !important;
    background: transparent !important;
    border: none !important;
  }

  .flatpickr-day.prevMonthDay,
  .flatpickr-day.nextMonthDay {
    color: var(--text-muted) !important;
  }

  .flatpickr-months .flatpickr-prev-month svg path,
  .flatpickr-months .flatpickr-next-month svg path {
    fill: var(--gold-text) !important;
  }

  .flatpickr-current-month .numInputWrapper {
    width: 4.2em !important;
    min-width: 4.2em !important;
    flex: 0 0 4.2em !important;
  }

  .flatpickr-current-month .numInputWrapper span {
    opacity: 1 !important;
  }
}

/* flatpickr datetime-local inputs */
.birth-form input[type="datetime-local"],
.birth-form input[type="datetime-local"].flatpickr-input,
.birth-form input[type="datetime-local"].flatpickr-input.flatpickr-mobile {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border: 0.5px solid rgba(200,160,110,0.20) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  height: 44px !important;
  font-size: 15px !important;
  padding: 10px 12px !important;
  width: 100% !important;
  max-width: 350px !important;
  margin: 4px auto 18px auto !important;
  display: block !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.birth-form input[type="datetime-local"]::-webkit-datetime-edit,
.birth-form input[type="datetime-local"].flatpickr-input.flatpickr-mobile::-webkit-datetime-edit {
  color: var(--text-primary) !important;
}

.birth-form input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.birth-form input[type="datetime-local"].flatpickr-input.flatpickr-mobile::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

#birthday-view .birth-form input[type="datetime-local"].flatpickr-input.flatpickr-mobile {
  background: var(--bg-input) !important;
  color: rgba(200,160,110,0.40) !important;
  border: 0.5px solid rgba(200,160,110,0.20) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  font-size: 15px !important;
  text-align: center !important;
}

/* Form group select */
.form-group select.input-field {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background: var(--bg-input) url("data:image/svg+xml;utf8,<svg fill='rgba(160,120,70,0.8)' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>") no-repeat right 12px center/18px 18px !important;
  padding-right: 36px !important;
  cursor: pointer !important;
  color: var(--text-primary) !important;
  border: 0.5px solid rgba(200,160,110,0.20) !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-family: inherit !important;
  height: 48px !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
}

.form-group select.input-field:focus {
  border-color: var(--border-focus) !important;
}

/* Birthday view layout fix for form-field label on gender row */
.form-field > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}


/* ============================================================
   Result 页面
   ============================================================ */
#result-view,
#result-view.page-view,
#result-view.page-view.active {
  background: var(--bg-page) !important;
  color: var(--text-primary) !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: calc(100vh - 40px);
  padding-top: 40px;
}

body[data-active-view="result"],
body[data-active-view="result"] #result-view,
body[data-active-view="result"] #result-view.active,
body[data-active-view="result"] #result-view.page-view,
body[data-active-view="result"] #result-view.page-view.active {
  background: var(--bg-page) !important;
}

#result-view .form-container {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

#result-view .form-container::before {
  display: none;
}

#result-view .result-container-wrapper {
  background: transparent !important;
  max-width: 920px;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}

#result-view .result-container-wrapper,
#result-view > * {
  background: var(--bg-page) !important;
}
#result-view .fullwidth-wrapper {
  background: transparent !important;
}

/* 结果页标题 */
#result-view .result-title {
  margin: 0 auto 14px auto !important;
  padding: 18px 0 16px 0 !important;
  text-align: center !important;
  font-family: 'STSong','SimSun',Georgia,serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.22em !important;
  color: var(--gold-text) !important;
  font-size: 26px !important;
  position: relative;
  line-height: 1.25 !important;
  overflow: visible !important;
  white-space: nowrap;
  max-width: 92vw;
  font-size: var(--typo-lg, 1.5rem) !important;
}

#result-view .result-title::before {
  content: '✦  QIMENIT  ✦';
  display: block;
  font-family: 'PingFang SC','Noto Sans SC','Microsoft YaHei',Helvetica,Arial,sans-serif;
  font-size: 10px;
  letter-spacing: 0.5em;
  color: rgba(200,160,110,0.50);
  margin-bottom: 8px;
}

#result-view .result-title::after {
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  max-width: 820px;
  margin: 16px auto 0 auto;
  background: rgba(200,160,110,0.20) !important;
}

/* 日期信息 */
#result-view .date-time-info {
  margin: 0 auto 14px auto !important;
  max-width: 480px;
  padding: 0 4px !important;
  box-sizing: border-box;
}

#result-view .date-time-row {
  margin: 6px 0 !important;
  font-size: 12px !important;
  line-height: 2.2 !important;
  color: var(--text-primary) !important;
  text-align: left !important;
}

#result-view .date-time-label {
  color: rgba(200,215,240,0.70) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em;
  margin-right: 8px;
}

#result-view .date-time-value {
  color: #E8C9A8 !important;
  font-weight: 500 !important;
  margin-right: 18px !important;
}

/* BaZi table */
#result-view .bazi-table-container {
  max-width: 480px;
  margin: 0 auto 32px auto !important;
  padding: 0 4px;
  box-sizing: border-box;
  gap: 4px !important;
  align-items: stretch !important;
  padding-top: 28px !important;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  width: 100%;
}

#result-view .bazi-table {
  background: rgba(200,160,110,0.04) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid rgba(200,160,110,0.20) !important;
  border-radius: 8px !important;
  overflow: visible;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 380px;
}

#result-view .bazi-table td {
  border: 0 !important;
  border-right: 1px solid rgba(200,160,110,0.20) !important;
  border-bottom: 1px solid rgba(200,160,110,0.20) !important;
  padding: 10px 0 !important;
  font-size: 16px !important;
  font-family: 'STSong','SimSun',Georgia,serif !important;
  color: #E8C9A8 !important;
  text-align: center !important;
  background: rgba(200,160,110,0.04) !important;
}

#result-view .bazi-table tr:last-child td {
  border-bottom: 0 !important;
  color: rgba(200,215,240,0.70) !important;
}

#result-view .bazi-table td:last-child {
  border-right: 0 !important;
}

#result-view .bazi-table td:nth-child(4) {
  border-left: 0 !important;
}

#result-view #tg-hour {
  color: #E8C9A8 !important;
}
#result-view #dz-hour {
  color: rgba(200,215,240,0.82) !important;
}

/* 四柱标签 */
#result-view .bazi-table td {
  position: relative;
}

#result-view #bazi-tiangan-row td {
  padding-top: 10px !important;
}

#result-view #bazi-tiangan-row td::before {
  position: absolute;
  top: -18px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(200,215,240,0.65);
  font-family: 'PingFang SC','Noto Sans SC','Microsoft YaHei',Helvetica,Arial,sans-serif;
  content: '';
  pointer-events: none;
  user-select: none;
}

#result-view #bazi-tiangan-row #tg-year::before { content: 'Year 年柱'; }
#result-view #bazi-tiangan-row #tg-month::before { content: 'Month 月柱'; }
#result-view #bazi-tiangan-row #tg-day::before { content: 'Day 日柱'; }
#result-view #bazi-tiangan-row #tg-hour::before { content: 'Hour 时柱'; }

/* 局数 badge */
#result-view .bazi-extra-info {
  display: flex;
  flex-direction: column;
  align-items: stretch !important;
  justify-content: stretch !important;
  flex: 0 0 90px;
  width: 90px;
  align-self: stretch !important;
}

#result-view #yang-ju-box.bazi-extra-box {
  background: rgba(200,160,110,0.08) !important;
  border: 1px solid rgba(200,160,110,0.35) !important;
  border-radius: 10px !important;
  padding: 0 4px !important;
  width: 90px !important;
  color: var(--gold-text) !important;
  font-family: 'Arial Narrow','Helvetica Neue',Arial,sans-serif !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

#result-view #yang-ju-box.bazi-extra-box::before {
  content: attr(data-cnju);
  display: block;
  font-family: 'PingFang SC','Noto Sans SC','Microsoft YaHei',Helvetica,Arial,sans-serif;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(200,160,110,0.50);
  margin-bottom: 4px;
  text-align: center;
}

/* ============================================================
   九宫格
   ============================================================ */
.qimen-chart-container {
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  box-sizing: border-box;
}

#result-view .fullwidth-wrapper .qimen-chart-container {
  background: transparent !important;
  border: none;
  border-radius: 16px;
  padding: 0;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  box-sizing: border-box;
  font-family: 'PingFang SC','Noto Sans SC','Microsoft YaHei',Helvetica,Arial,sans-serif;
}

.qimen-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 500px;
  margin: 0 auto;
  position: relative;
  border: 2px solid rgba(200,160,110,0.20);
  border-radius: 0;
}

#result-view .fullwidth-wrapper .qimen-grid {
  gap: 1px;
  background: var(--grid-line);
  border: 1px solid var(--grid-line);
  border-radius: 10px;
  overflow: visible;
  width: 100%;
  max-width: 480px;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(3, 1fr) !important;
  aspect-ratio: 1 / 1 !important;
}

.qimen-cell {
  background-color: var(--bg-page);
  border: none;
  border-right: 1px solid rgba(200,160,110,0.20);
  border-bottom: 1px solid rgba(200,160,110,0.20);
  border-radius: 0;
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 120px;
  position: relative;
  overflow: visible;
  transition: all 0.3s ease;
}

#result-view .fullwidth-wrapper .qimen-cell {
  background: var(--bg-grid-cell) !important;
  padding: 12px 12px 28px;
  min-height: 0 !important;
  transition: background .2s ease;
  border-right-color: var(--grid-line) !important;
  border-bottom-color: var(--grid-line) !important;
  overflow: visible;
}

#result-view .fullwidth-wrapper .qimen-cell:nth-child(even) {
  background: var(--bg-grid-alt) !important;
}

#result-view .fullwidth-wrapper .qimen-cell:hover {
  background: #D4BA8A !important;
}

/* Remove right/bottom borders from edge cells */
.qimen-cell:nth-child(3n) {
  border-right: none;
}

.qimen-cell:nth-child(n+7) {
  border-bottom: none;
}

.qimen-cell:hover {
  background-color: rgba(35, 35, 35, 0.95);
}

/* Center palace */
.qimen-cell.qimen-center {
  background-color: rgba(20, 32, 58, 0.95);
  border-right: 1px solid rgba(200,160,110,0.20);
  border-bottom: 1px solid rgba(200,160,110,0.20);
  border-left: 2px solid rgba(200,160,110,0.20);
  border-top: 2px solid rgba(200,160,110,0.20);
}

.qimen-cell.qimen-center:nth-child(3n) {
  border-right: 2px solid rgba(200,160,110,0.20);
}

.qimen-cell.qimen-center:nth-child(n+7) {
  border-bottom: 2px solid rgba(200,160,110,0.20);
}

#result-view .fullwidth-wrapper .qimen-cell.qimen-center {
  background: var(--bg-grid-center) !important;
  border: none;
  overflow: hidden !important;
}

/* 中宫内神/星/门字号跟随中宫专用样式，不继承普通格大字 */
#result-view .fullwidth-wrapper .qimen-cell.qimen-center .qimen-god .qimen-zh,
#result-view .fullwidth-wrapper .qimen-cell.qimen-center .qimen-star .qimen-zh,
#result-view .fullwidth-wrapper .qimen-cell.qimen-center .qimen-door .qimen-zh {
  font-size: var(--typo-sm) !important;
  font-weight: 500 !important;
}

#result-view .fullwidth-wrapper .qimen-cell.qimen-center .qimen-god .qimen-en,
#result-view .fullwidth-wrapper .qimen-cell.qimen-center .qimen-star .qimen-en,
#result-view .fullwidth-wrapper .qimen-cell.qimen-center .qimen-door .qimen-en {
  font-size: 0.6em !important;
}

/* Qimen grid ::before overlay (rounded corner fix) */
#result-view .fullwidth-wrapper .qimen-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--grid-line);
  border-radius: 10px;
  pointer-events: none;
  box-sizing: border-box;
}

/* Cell content layout */
.qimen-cell-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
}

#result-view .fullwidth-wrapper .qimen-cell-content {
  gap: 3px;
  padding-bottom: 18px;
}

.qimen-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1px;
  width: 100%;
  overflow: hidden;
  word-break: break-word;
}

#result-view .fullwidth-wrapper .qimen-main { gap: 1px; }

.qimen-main .qimen-god:empty,
.qimen-main .qimen-star:empty,
.qimen-main .qimen-door:empty { display: none; }

.qimen-stems {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-self: stretch;
  gap: 3px;
  padding-top: 2px;
  width: 100%;
  box-sizing: border-box;
}

#result-view .fullwidth-wrapper .qimen-stems {
  position: absolute;
  right: 9px;
  bottom: 7px;
  padding: 0;
  width: auto;
  gap: 2px;
  align-items: flex-end;
  text-align: right;
}

.qimen-stems .qimen-tiangan {
  position: static;
  width: 100%;
  max-width: 100%;
  text-align: right;
  font-size: 0.82em;
  line-height: 1.2;
  color: var(--text-primary);
  font-weight: 500;
  padding: 0 2px;
  opacity: 0.95;
  box-sizing: border-box;
}

#result-view .fullwidth-wrapper .qimen-stems .qimen-tiangan {
  color: rgba(90,55,15,0.65) !important;
  font-family: var(--font-sans, 'PingFang SC', sans-serif) !important;
  font-size: 9px !important;
  font-weight: 400 !important;
  opacity: 0.85 !important;
  padding: 0;
  line-height: 1.45;
  white-space: nowrap;
}

/* Three layers of Qimen text */
.qimen-star,
.qimen-door,
.qimen-god {
  font-size: 0.9em;
  color: var(--text-primary);
  text-align: left;
  padding: 1px 2px;
  width: 100%;
  max-width: 100%;
  line-height: 1.2;
  box-sizing: border-box;
}

/* Override colors inside result view grid */
#result-view .fullwidth-wrapper .qimen-god {
  color: #d4a843;
  font-size: 13px;
  font-weight: 600 !important;
}

#result-view .fullwidth-wrapper .qimen-god .qimen-en {
  color: rgba(107,42,8,0.75) !important;
  font-size: 11px;
  font-weight: 400;
  opacity: 1;
  margin-left: 1px;
  display: inline;
}

#result-view .fullwidth-wrapper .qimen-star {
  color: #3fbf98;
  font-size: 13px;
  font-weight: 600 !important;
}

#result-view .fullwidth-wrapper .qimen-star .qimen-en {
  color: rgba(26,94,64,0.75) !important;
  font-size: 11px;
  font-weight: 400;
  opacity: 1;
  margin-left: 1px;
  display: inline;
}

#result-view .fullwidth-wrapper .qimen-door {
  color: #4f9fd0;
  font-size: 13px;
  font-weight: 600 !important;
}

#result-view .fullwidth-wrapper .qimen-door .qimen-en {
  color: rgba(26,62,110,0.75) !important;
  font-size: 11px;
  font-weight: 400;
  opacity: 1;
  margin-left: 1px;
  display: inline;
}

/* Chinese text */
.qimen-zh {
  display: block;
  font-size: 1em;
  line-height: 1.2;
  color: rgba(200,160,110,0.80);
}

/* English subtitle */
.qimen-en {
  display: block;
  font-size: 0.65em;
  opacity: 0.7;
  line-height: 1.1;
  margin-top: 1px;
  font-weight: normal;
}

/* Default colors outside the grid wrapper (non-result) */
.qimen-star { color: #ffd700; font-weight: bold; }
.qimen-star .qimen-en { color: #ffd700; opacity: 0.8; }
.qimen-door { color: #90ee90; }
.qimen-door .qimen-en { color: #90ee90; opacity: 0.8; }
.qimen-god { color: #87ceeb; font-weight: bold; }
.qimen-god .qimen-en { color: #87ceeb; opacity: 0.8; }

/* Center palace special */
.qimen-cell.qimen-center .qimen-stems { display: none; }
.qimen-cell.qimen-center .qimen-cell-content { justify-content: center; align-items: stretch; flex: 1; }
.qimen-cell.qimen-center .qimen-main { align-items: center; justify-content: center; flex: 1; width: 100%; }
.qimen-cell.qimen-center .qimen-star { text-align: center; width: 100%; max-width: 100%; }

#result-view .fullwidth-wrapper .qimen-cell.qimen-center .qimen-star {
  color: rgba(200,160,110,0.40);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55 !important;
  font-family: var(--font-sans, 'PingFang SC', sans-serif) !important;
}

/* Badges (马星/空亡) */
.qimen-badges {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  user-select: none;
}

.kongwang-overlay {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  user-select: none;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.qimen-badges.pos-tl { top: -10px; left: -12px; }
.qimen-badges.pos-tr { top: -10px; right: -12px; }
.qimen-badges.pos-bl { bottom: -10px; left: -12px; }
.qimen-badges.pos-br { bottom: 0; right: 0; transform: translate(50%, 50%); }
.qimen-badges.pos-ml { top: 50%; left: -14px; transform: translateY(-50%); }
.qimen-badges.pos-mr { top: 50%; right: -14px; transform: translateY(-50%); }
.qimen-badges.pos-tm { top: -12px; left: 50%; transform: translateX(-50%); }
.qimen-badges.pos-bm { bottom: -12px; left: 50%; transform: translateX(-50%); }

.qimen-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  line-height: 18px;
}

.badge-ma {
  color: #ff3b30;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.02em;
}

#result-view .badge-ma { color: #C0392B !important; font-weight: 800 !important; }

.badge-kongwang {
  width: 16px;
  height: 16px;
  border: 2px solid #ff3b30;
  border-radius: 50%;
  box-sizing: border-box;
  background: transparent;
  flex-shrink: 0;
}

#result-view .badge-kongwang { border-color: #ff3b30 !important; }

/* 宫号水印 */
#result-view .fullwidth-wrapper .qimen-cell:not(.qimen-center)::after {
  position: absolute;
  left: 9px;
  bottom: 4px;
  font-size: 28px;
  font-weight: 700;
  color: rgba(200,160,110,0.08);
  line-height: 1;
  font-family: var(--font-sans, Georgia, serif);
  pointer-events: none;
  user-select: none;
  opacity: 0.2 !important;
  content: '';
}

#result-view .fullwidth-wrapper #qimen-1::after { content: '1'; }
#result-view .fullwidth-wrapper #qimen-2::after { content: '2'; }
#result-view .fullwidth-wrapper #qimen-3::after { content: '3'; }
#result-view .fullwidth-wrapper #qimen-4::after { content: '4'; }
#result-view .fullwidth-wrapper #qimen-6::after { content: '6'; }
#result-view .fullwidth-wrapper #qimen-7::after { content: '7'; }
#result-view .fullwidth-wrapper #qimen-8::after { content: '8'; }
#result-view .fullwidth-wrapper #qimen-9::after { content: '9'; }

/* 中宫分隔线 */
#result-view .fullwidth-wrapper .qimen-cell.qimen-center .qimen-star {
  position: relative;
  padding: 10px 0;
}

#result-view .fullwidth-wrapper .qimen-cell.qimen-center .qimen-star::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 1px;
  background: rgba(200,160,110,0.15);
  transform: translate(-50%, -50%);
  opacity: 0.9;
  pointer-events: none;
}

/* 中宫 center text layout */
#result-view .qimen-center-line {
  display: block;
  margin: 4px 0 !important;
}

#result-view .qimen-center-line.qimen-center-spacer {
  height: 8px;
  margin: 0 !important;
}

#result-view .qimen-center-label {
  display: inline-block;
  min-width: 4.2em;
}

#result-view .qimen-center-zh { display: inline-block; }

#result-view .qimen-center-en {
  display: inline !important;
  margin-left: 2px !important;
  margin-top: 0 !important;
  font-family: var(--font-sans, 'PingFang SC', sans-serif) !important;
  font-size: var(--typo-sm, 0.72rem) !important;
  font-weight: 400 !important;
  opacity: 0.72 !important;
}

/* ============================================================
   Result 页面 Tabs / Lang toggle
   ============================================================ */
#result-view #resultTabs {
  width: 100% !important;
  max-width: 560px !important;
  margin: 1.5rem auto 0 !important;
  box-sizing: border-box !important;
  position: relative;
  z-index: 2;
}

#result-view #resultTabs > div:first-child {
  width: 100% !important;
  max-width: 100% !important;
}

/* Tab buttons — override inline styles */
#result-view #tabBtnChart {
  background: transparent;
  color: rgba(212, 180, 100, 0.50);
  border-color: rgba(212, 180, 100, 0.25);
}

#result-view #tabBtnChart.tab-btn--active {
  background: rgba(160,120,70,0.15) !important;
  color: var(--gold-text) !important;
  border-color: rgba(200,160,110,0.40) !important;
}

#result-view #tabBtnReading {
  background: transparent;
  color: rgba(212, 180, 100, 0.50);
  border-color: rgba(212, 180, 100, 0.25);
}

#result-view #tabBtnReading.tab-btn--active {
  background: var(--gold-bg) !important;
  color: var(--gold-text) !important;
  border-color: rgba(212, 180, 100, 0.40) !important;
}

#resultTabs.chart-active #tabBtnChart {
  background: var(--gold-bg) !important;
  color: var(--gold-text) !important;
  border-color: rgba(200,160,110,0.40) !important;
}

#resultTabs.chart-active #tabBtnReading {
  background: transparent !important;
  color: rgba(212, 180, 100, 0.50) !important;
  border-color: rgba(212, 180, 100, 0.25) !important;
}

#resultTabs.reading-active #tabBtnReading {
  background: var(--gold-bg) !important;
  color: var(--gold-text) !important;
  border-color: rgba(212, 180, 100, 0.40) !important;
}

#resultTabs.reading-active #tabBtnChart {
  background: transparent !important;
  color: rgba(212, 180, 100, 0.50) !important;
  border-color: rgba(212, 180, 100, 0.25) !important;
}

#result-view #tabBtnChart span,
#result-view #tabBtnReading span {
  color: inherit !important;
  opacity: 1 !important;
}

/* Lang toggle */
#result-view #langHint {
  color: rgba(200,160,110,0.40) !important;
}

/* ============================================================
   Result 页面 Reading section
   ============================================================ */
#result-view #panelReading,
#result-view #panelReading #resultSection {
  width: 100% !important;
  max-width: 820px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#result-view #panelReading { width: 100% !important; display: block; }
#result-view #panelReading #resultSection { margin-top: 0.375rem; }

#resultSection {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

#result-view #resultSection,
#result-view #panelReading {
  color: var(--text-primary) !important;
}

#result-view #resultSection h3 { color: var(--gold-text) !important; }
#result-view #resultSection p {
  color: var(--text-primary) !important;
  font-size: 13px !important;
}
#result-view #resultSection strong { color: var(--text-primary) !important; }
#result-view #resultSection span { color: var(--text-body) !important; }

/* Badges for 吉/凶 in result section */
#result-view #resultSection span[style*="background:#fef2f2"],
#result-view #resultSection span[style*="background: #fef2f2"] {
  background: rgba(220,38,38,0.20) !important;
  color: #f87171 !important;
}

#result-view #resultSection span[style*="background:#f0fdf4"],
#result-view #resultSection span[style*="background: #f0fdf4"] {
  background: rgba(22,163,74,0.20) !important;
  color: #4ade80 !important;
}

#result-view #resultSection div[style*="border:0.5px"] {
  border-color: rgba(200,160,110,0.20) !important;
}

#result-view #resultSection div[style*="background:var(--color-background-secondary)"] {
  background: rgba(200,160,110,0.08) !important;
}

#result-view #resultSection {
  --color-background-secondary: rgba(200,160,110,0.08);
  --color-border-tertiary: rgba(200,160,110,0.20);
  --color-text-secondary: rgba(232,223,200,0.70);
}

/* 结果页可见性保护 */
#result-view .result-title,
#result-view .date-time-info,
#result-view .bazi-table-container {
  visibility: visible !important;
  opacity: 1 !important;
}

/* ============================================================
   Typography system (result view)
   ============================================================ */
#result-view {
  --typo-lg: 1.5rem;
  --typo-md: 0.9rem;
  --typo-sm: 0.72rem;
  --font-cn: "Noto Serif SC", "STSong", "SimSun", Georgia, serif;
  --font-sans: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", Helvetica, Arial, sans-serif;
}

#result-view .result-title {
  font-family: var(--font-cn) !important;
  font-size: var(--typo-lg) !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
}

#result-view .result-title::before,
#result-view .date-time-row,
#result-view .date-time-label,
#result-view .date-time-value,
#result-view #bazi-tiangan-row td::before,
#result-view .fullwidth-wrapper .qimen-en,
#result-view .fullwidth-wrapper .qimen-stems .qimen-tiangan,
#result-view .fullwidth-wrapper .qimen-cell.qimen-center .qimen-star {
  font-family: var(--font-sans) !important;
  font-size: var(--typo-sm) !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
}

#result-view #tg-year,
#result-view #tg-month,
#result-view #tg-day,
#result-view #tg-hour {
  font-family: var(--font-cn) !important;
  font-size: var(--typo-md) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  color: #E8C9A8 !important;
}
#result-view #dz-year,
#result-view #dz-month,
#result-view #dz-day,
#result-view #dz-hour {
  font-family: var(--font-cn) !important;
  font-size: var(--typo-md) !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  color: rgba(200,215,240,0.82) !important;
}

#result-view .bazi-table td,
#result-view .fullwidth-wrapper .qimen-zh,
#result-view .fullwidth-wrapper .qimen-stems .qimen-tiangan,
#result-view .fullwidth-wrapper .qimen-cell.qimen-center .qimen-star {
  font-family: var(--font-cn) !important;
  line-height: 1.3 !important;
}

#result-view .fullwidth-wrapper .qimen-god .qimen-zh,
#result-view .fullwidth-wrapper .qimen-star .qimen-zh,
#result-view .fullwidth-wrapper .qimen-door .qimen-zh {
  font-family: var(--font-cn) !important;
  font-size: calc(var(--typo-md) - 2px) !important;
  font-weight: 800 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

#result-view .fullwidth-wrapper .qimen-en {
  font-size: calc(var(--typo-sm) - 2px) !important;
  font-weight: 500 !important;
  opacity: 0.72 !important;
}

#result-view .fullwidth-wrapper .qimen-god,
#result-view .fullwidth-wrapper .qimen-star,
#result-view .fullwidth-wrapper .qimen-door {
  font-weight: 600 !important;
}

#result-view .fullwidth-wrapper .qimen-god { color: #6B2A08 !important; }
#result-view .fullwidth-wrapper .qimen-star { color: #1A5E40 !important; }
#result-view .fullwidth-wrapper .qimen-door { color: #1A3E6E !important; }
#result-view .fullwidth-wrapper .qimen-god .qimen-en { color: rgba(107,42,8,0.75) !important; }
#result-view .fullwidth-wrapper .qimen-star .qimen-en { color: rgba(26,94,64,0.75) !important; }
#result-view .fullwidth-wrapper .qimen-door .qimen-en { color: rgba(26,62,110,0.75) !important; }
#result-view .fullwidth-wrapper .qimen-god .qimen-zh { color: #6B2A08 !important; }
#result-view .fullwidth-wrapper .qimen-star .qimen-zh { color: #1A5E40 !important; }
#result-view .fullwidth-wrapper .qimen-door .qimen-zh { color: #1A3E6E !important; }

#result-view #yang-ju-box.bazi-extra-box::before {
  font-family: var(--font-sans) !important;
  font-size: var(--typo-sm) !important;
  font-weight: 400 !important;
  letter-spacing: 0.2em !important;
}

#result-view #yang-ju-box.bazi-extra-box {
  font-family: 'Arial Narrow','Helvetica Neue',Arial,sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

/* ============================================================
   五行分布
   ============================================================ */
.elements-section {
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 0px !important;
}

.elements-chart {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
  margin-bottom: 10px !important;
}

.element-row {
  display: flex;
  align-items: center;
  width: 100%;
  margin-bottom: 10px;
}

.element-name {
  width: 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-primary);
  font-weight: bold;
  font-size: 15px;
  white-space: nowrap;
  margin-right: 18px;
}

.element-value {
  min-width: 28px;
  text-align: right;
  margin-left: 6px;
  margin-right: 18px;
  display: inline-block;
}

.element-bar-container {
  width: 340px;
  height: 24px;
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: block;
}

.element-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 12px;
  transition: width 0.3s ease;
  min-width: 0;
  max-width: 100%;
  display: block;
  z-index: 1;
}

.element-bar.wood  { background-color: #128016; }
.element-bar.fire  { background-color: #d01414; }
.element-bar.earth { background-color: #92741d; }
.element-bar.metal { background-color: #a3a1a1; }
.element-bar.water { background-color: #0f6ab4; }

.elements-section h3 {
  text-align: center;
  margin: 25px;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: bold;
  width: 100%;
  display: block;
}

/* ============================================================
   BaZi 八字表
   ============================================================ */
.bazi-table-container {
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 600px;
  padding: 0 20px;
  box-sizing: border-box;
  background: transparent !important;
}

.bazi-table {
  border-collapse: collapse;
  background-color: rgba(26, 26, 26, 0.4);
  min-width: 320px;
  width: 320px;
  flex-shrink: 0;
}

.bazi-table th,
.bazi-table td {
  border: 1px solid rgba(200,160,110,0.20);
  padding: 7px;
  text-align: center;
  color: var(--text-primary);
  font-size: 14px;
}

.bazi-table th {
  background-color: rgba(200,160,110,0.10);
  font-weight: bold;
}

.bazi-extra-box {
  background-color: rgba(200,160,110,0.08);
  border: 0.5px solid rgba(200,160,110,0.30);
  border-radius: 8px;
  padding: 12px 16px;
  color: var(--gold-text);
  font-size: 14px;
  text-align: center;
  width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

/* 四柱 tg/dz cells */
td[id^="tg-"],
td[id^="dz-"] {
  color: var(--text-primary) !important;
  background: transparent !important;
  border-color: rgba(200,160,110,0.20) !important;
}

/* ============================================================
   Day Master section
   ============================================================ */
.day-master-titles {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: nowrap;
  width: 100%;
  margin: 12px 0 0 0;
}

.day-master-section {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin: 10px 0 20px 0;
  width: 100%;
  justify-content: center;
  align-items: flex-start;
}

.day-master-block {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-bottom: 16px !important;
  flex: 1 1 0;
  min-width: 0;
}

.day-master-block:last-child .day-master-box {
  margin-bottom: 0 !important;
}

.day-master-box {
  width: 250px !important;
  background-color: rgba(200,160,110,0.10);
  border: 0.5px solid rgba(200,160,110,0.25);
  padding: 8px 0 !important;
  padding-bottom: 15px;
  min-height: unset !important;
  height: auto !important;
  border-radius: 8px;
  text-align: center;
  min-width: 200px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px !important;
  gap: 6px !important;
}

.day-master-title {
  text-align: center;
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 8px;
  color: var(--text-primary);
  width: 100%;
}

#day-master-analysis { text-align: center; }

/* ============================================================
   Birth chart table
   ============================================================ */
.birth-chart th, .birth-chart td {
  padding: 12px 8px;
  text-align: center;
  border: 1px solid rgba(200,160,110,0.20);
  color: var(--text-primary);
  overflow: visible;
  white-space: normal;
  font-size: 14px;
  line-height: 1.4;
  vertical-align: middle;
}

.birth-chart th {
  text-align: center !important;
  font-size: 14px !important;
  background-color: rgba(200,160,110,0.08);
}

.birth-chart td {
  text-align: left !important;
  font-size: 14px !important;
  white-space: nowrap !important;
}

.birth-chart th:first-child,
.birth-chart td:first-child {
  width: 140px;
  min-width: 140px;
  max-width: 140px;
  white-space: normal;
  text-align: left;
  padding-left: 15px;
}

.birth-chart {
  min-width: 640px !important;
  table-layout: fixed !important;
  border-collapse: collapse;
  margin: 0px !important;
  font-size: 12px !important;
  text-align: left !important;
}

/* ============================================================
   Language switcher
   ============================================================ */
.language-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px auto;
  max-width: 600px;
  padding: 0 20px;
  justify-content: center;
}

.language-switcher label {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
}

.language-select {
  background-color: var(--bg-card);
  border: 1px solid rgba(200,160,110,0.20);
  border-radius: 4px;
  color: var(--text-primary);
  padding: 6px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.language-select:hover {
  border-color: rgba(200,160,110,0.40);
  background-color: var(--bg-card-hero);
}

.language-select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px rgba(160,120,70,0.15);
}

/* ============================================================
   Misc helpers
   ============================================================ */
.tg1, .tg2 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  font-size: 0.9em;
}

.tg1 span, .tg2 span { display: block; }

.hidden-stem-cell {
  font-size: 0.85em;
  letter-spacing: 0.05em;
  word-break: keep-all;
}

.birth-time {
  margin: 0 !important;
  padding: 0 !important;
  margin-bottom: 0px !important;
  text-align: center;
  font-size: 14px !important;
  line-height: 1.1;
  height: auto !important;
  overflow: visible !important;
  display: block !important;
}

.birth-times-group {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
}

.true-solar-time {
  margin-bottom: 10 !important;
  padding: 0 !important;
}

#solar-time, #lunar-time, #true-solar-time {
  font-size: 16px !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  display: block !important;
}

#true-solar-time { margin-bottom: 18px !important; }

.bazi-result-panel,
.form-container,
.result-container {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.result-container {
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: auto !important;
  min-height: 100px !important;
  overflow: visible !important;
  justify-content: flex-start;
}

/* Debug */
.debug-json-container details { background: transparent; }
.debug-json-container pre {
  white-space: pre-wrap;
  word-break: break-all;
  background: rgba(255,255,255,0.05);
  padding: 12px;
  border-radius: 8px;
  margin-top: 8px;
}

/* ============================================================
   Mobile — 600px
   ============================================================ */
@media (max-width: 600px) {
  html, body {
    display: block !important;
    min-height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Landing */
  #landing-view {
    width: 100% !important;
    min-height: 100vh !important;
    padding: 100px 16px 24px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  #landing-view.active {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    min-height: 100vh !important;
    padding: 100px 16px 24px !important;
  }

  #landing-view .landing-page-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
  }

  #landing-view .dark-card {
    padding: 1.25rem 1rem 1rem !important;
    border-radius: 16px !important;
    width: calc(100% - 8px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  #landing-view .dark-card .headline {
    font-size: clamp(20px, 5.5vw, 28px) !important;
    line-height: 1.25 !important;
    margin-bottom: 14px !important;
  }

  #landing-view .dark-card .description {
    font-size: 13px !important;
    margin-bottom: 18px !important;
  }

  .email-input {
    width: 100% !important;
    max-width: 100% !important;
  }

  .cta-button {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 13px !important;
    padding: 12px 10px !important;
    white-space: nowrap !important;
  }

  /* Birthday */
  #birthday-view {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: clamp(0.35rem,1.6vw,0.65rem) clamp(1rem,5.5vw,2rem) 1.1rem !important;
    min-height: 100vh !important;
  }

  #birthday-view .form-container {
    width: min(100%, 30rem) !important;
    max-width: min(100%, 30rem) !important;
    margin: 0 auto !important;
    padding: clamp(1.15rem,4.5vw,1.6rem) clamp(0.95rem,4.2vw,1.35rem) 1.1rem !important;
    box-sizing: border-box !important;
  }

  /* Result */
  body[data-active-view="result"],
  html:has(body[data-active-view="result"]) {
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
  }

  #result-view,
  #result-view.active,
  #result-view.page-view,
  #result-view.page-view.active {
    display: block !important;
    min-height: auto !important;
    height: auto !important;
    margin-top: 0 !important;
    padding: 12px 12px 0 12px !important;
    overflow: visible !important;
  }

  #result-view .result-container-wrapper,
  #result-view .form-container,
  #result-view .result-container {
    min-height: 0 !important;
    height: auto !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    overflow: visible !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  #result-view .form-container {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  #result-view .result-title {
    font-size: 22px !important;
    letter-spacing: 0.28em !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0.35rem !important;
    line-height: 1.1 !important;
  }

  #result-view .result-container-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
    max-width: 100% !important;
  }

  #result-view .result-title::after {
    max-width: 92vw;
  }

  #result-view .date-time-info {
    margin-top: 0.1rem !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #result-view .bazi-table-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  #result-view .bazi-table {
    max-width: 100%;
    flex: 1 1 auto !important;
    height: 100% !important;
    table-layout: fixed !important;
  }

  #result-view .bazi-table td {
    font-size: calc(var(--typo-md) - 3px) !important;
    padding: 4px 0 !important;
    overflow: visible !important;
  }

  #result-view .bazi-extra-info {
    flex: 0 0 50px !important;
    width: 50px !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: stretch !important;
  }

  #result-view #yang-ju-box.bazi-extra-box {
    font-family: 'Arial Narrow','Helvetica Neue',Arial,sans-serif !important;
    font-size: 9px !important;
    letter-spacing: 0.01em !important;
    width: 50px !important;
    height: 100% !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0 2px !important;
  }

  #result-view #yang-ju-box.bazi-extra-box::before {
    font-size: calc(var(--typo-sm) - 2px) !important;
  }

  #result-view #bazi-tiangan-row td::before {
    font-size: calc(var(--typo-sm) - 2px) !important;
    top: -18px !important;
  }

  /* Qimen grid mobile */
  #result-view .date-time-info,
  #result-view .bazi-table-container {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }



  #result-view .fullwidth-wrapper .qimen-chart-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #result-view #resultTabs {
    width: 94vw !important;
    max-width: 94vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 1.2rem !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  /* Align tab row to left so Chart button defines left edge */
  #result-view #resultTabs .tab-btn-row {
    justify-content: center !important;
    padding-left: 0 !important;
  }



  /* Tabs + language buttons: equal boxes on mobile */
  #result-view #resultTabs .tab-btn {
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 84px !important;
    height: 30px !important;
    padding: 0 !important;
    font-size: 11px !important;
    line-height: 1 !important;
  }

  #result-view #resultTabs .tab-btn-sub {
    font-size: 9px !important;
  }

  #result-view #resultTabs .lang-btn {
    height: 30px !important;
    font-size: 11px !important;
    width: 44px !important;
  }

  #result-view .fullwidth-wrapper .qimen-grid {
    width: calc(100vw - 64px) !important;
    max-width: calc(100vw - 64px) !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 auto !important;
  }

  #result-view #panelReading,
  #result-view #panelReading #resultSection {
    max-width: 94vw !important;
    width: 94vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  #result-view #resultSection > div {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Reading body text slightly smaller on mobile */
  #result-view #resultSection p {
    font-size: 12px !important;
    line-height: 1.7 !important;
  }

  /* Deep Reading locked cards: reduce height to match Basic Reading */
  #result-view #resultSection .locked-card__row {
    padding: 0.7rem 1.125rem !important;
  }

  #result-view #resultSection .locked-card__btn {
    padding: 2px 8px !important;
    font-size: 9px !important;
  }

  /* Make accordion/cards slightly narrower via inner padding */
  #result-view #resultSection > div {
    padding-left: 0.95rem !important;
    padding-right: 0.95rem !important;
  }

  /* Qimen cell text mobile */
  .qimen-grid { gap: 0; max-width: 100%; }
  .qimen-cell { padding: 8px 4px; min-height: 90px; }

  .qimen-star,
  .qimen-door,
  .qimen-god,
  .qimen-palace {
    font-size: 0.65em;
    padding: 1px 2px;
  }

  .qimen-stems .qimen-tiangan { font-size: 0.72em; }

  /* Mobile: hard-cap chart text sizes for fit */
  #result-view .fullwidth-wrapper .qimen-god,
  #result-view .fullwidth-wrapper .qimen-star,
  #result-view .fullwidth-wrapper .qimen-door {
    font-size: 9px !important;
    line-height: 1.1 !important;
  }

  #result-view .fullwidth-wrapper .qimen-god .qimen-zh,
  #result-view .fullwidth-wrapper .qimen-star .qimen-zh,
  #result-view .fullwidth-wrapper .qimen-door .qimen-zh {
    display: inline !important;
    font-size: 9px !important;
    line-height: 1.05 !important;
    font-weight: 700 !important;
  }

  #result-view .fullwidth-wrapper .qimen-god .qimen-en {
    display: inline !important;
    margin-left: 3px !important;
    font-size: 7px !important;
    line-height: 1.05 !important;
    color: rgba(107,42,8,0.70) !important;
    opacity: 1 !important;
  }
  #result-view .fullwidth-wrapper .qimen-star .qimen-en {
    display: inline !important;
    margin-left: 3px !important;
    font-size: 7px !important;
    line-height: 1.05 !important;
    color: rgba(26,94,64,0.70) !important;
    opacity: 1 !important;
  }
  #result-view .fullwidth-wrapper .qimen-door .qimen-en {
    display: inline !important;
    margin-left: 3px !important;
    font-size: 7px !important;
    line-height: 1.05 !important;
    color: rgba(26,62,110,0.70) !important;
    opacity: 1 !important;
  }

  #result-view .fullwidth-wrapper .qimen-stems .qimen-tiangan {
    font-size: 8px !important;
    line-height: 1.05 !important;
  }

  /* Mobile: center palace spacer — shorter than desktop */
  #result-view .qimen-center-spacer {
    display: block !important;
    height: 4px !important;
  }

  #result-view .qimen-center-line,
  #result-view .qimen-center-label,
  #result-view .qimen-center-zh,
  #result-view .qimen-center-en {
    font-size: 7px !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  #result-view .fullwidth-wrapper .qimen-cell.qimen-center .qimen-cell-content {
    justify-content: center !important;
    align-items: center !important;
  }

  /* Mobile: remove center horizontal divider line */
  #result-view .fullwidth-wrapper .qimen-cell.qimen-center .qimen-star::after {
    display: none !important;
  }

  #result-view .fullwidth-wrapper .qimen-chart-container {
    border-radius: 14px;
  }

  #result-view .fullwidth-wrapper .qimen-cell {
    padding: 10px 10px 26px;
    min-height: 96px;
  }

  #result-view .fullwidth-wrapper .qimen-cell:not(.qimen-center)::after {
    font-size: 24px;
  }

  #result-view .fullwidth-wrapper .qimen-god .qimen-zh,
  #result-view .fullwidth-wrapper .qimen-star .qimen-zh,
  #result-view .fullwidth-wrapper .qimen-door .qimen-zh {
    display: inline !important;
    font-size: 10px !important;
    line-height: 1.05 !important;
  }

  #result-view .fullwidth-wrapper .qimen-god .qimen-en {
    display: inline !important;
    margin-left: 4px !important;
    font-size: 8px !important;
    line-height: 1.05 !important;
    color: rgba(107,42,8,0.70) !important;
    opacity: 1 !important;
  }
  #result-view .fullwidth-wrapper .qimen-star .qimen-en {
    display: inline !important;
    margin-left: 4px !important;
    font-size: 8px !important;
    line-height: 1.05 !important;
    color: rgba(26,94,64,0.70) !important;
    opacity: 1 !important;
  }
  #result-view .fullwidth-wrapper .qimen-door .qimen-en {
    display: inline !important;
    margin-left: 4px !important;
    font-size: 8px !important;
    line-height: 1.05 !important;
    color: rgba(26,62,110,0.70) !important;
    opacity: 1 !important;
  }

  #result-view .fullwidth-wrapper .qimen-stems .qimen-tiangan {
    font-size: 9px !important;
  }

  /* Center palace mobile */
  #result-view .fullwidth-wrapper .qimen-cell.qimen-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #result-view .fullwidth-wrapper .qimen-cell.qimen-center .qimen-cell-content {
    flex: 1 1 auto !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  #result-view .fullwidth-wrapper .qimen-cell.qimen-center .qimen-main {
    flex: 1 1 auto !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  #result-view .fullwidth-wrapper .qimen-cell.qimen-center .qimen-star {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    line-height: 1.45 !important;
  }

  #result-view .qimen-center-spacer {
    display: block !important;
    height: 4px !important;
  }

  #result-view .qimen-center-line {
    width: 100% !important;
    text-align: center !important;
    margin: 1px 0 !important;
    font-size: 7px !important;
    line-height: 1.3 !important;
  }

  #result-view .qimen-center-label { min-width: 0 !important; display: inline !important; font-size: 7px !important; }
  #result-view .qimen-center-zh { font-size: 7px !important; }
  #result-view .qimen-center-en { margin-left: 0 !important; text-align: center !important; font-size: 7px !important; }

  /* Birthday inputs mobile */
  #birthday-view .birth-form input[type="text"],
  #birthday-view .birth-form input[type="number"],
  #birthday-view .birth-form select,
  #birthday-view .birth-form textarea,
  #result-view .birth-form input[type="text"],
  #result-view .birth-form input[type="number"],
  #result-view .birth-form .cta-button {
    width: 70vw !important;
    max-width: 350px !important;
    min-width: 0 !important;
    height: 44px !important;
    font-size: 15px !important;
    padding: 10px 12px !important;
    margin: 4px auto !important;
    display: block !important;
    box-sizing: border-box !important;
    background: var(--bg-input) !important;
    border: 0.5px solid rgba(200,160,110,0.20) !important;
    color: var(--text-primary) !important;
  }

  #birthday-view .birth-form button,
  #birthday-view .birth-form .cta-button {
    width: 70vw !important;
    max-width: 350px !important;
    min-width: 0 !important;
    height: 44px !important;
    font-size: 15px !important;
    padding: 10px 12px !important;
    margin: 4px auto !important;
    display: block !important;
    box-sizing: border-box !important;
    background: var(--gold-bg) !important;
    border: 0.5px solid rgba(160,120,70,0.40) !important;
    color: var(--gold-text) !important;
  }

  /* Mobile-only: widen submit button without affecting desktop */
  #birthday-view #submit-btn-main {
    width: min(28vw, 132px) !important;
    max-width: min(28vw, 132px) !important;
    height: 40px !important;
  }

  .email-input {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border: 0.5px solid rgba(200,160,110,0.20) !important;
    width: 65vw !important;
    max-width: 95vw !important;
    min-width: 0 !important;
    height: 44px !important;
    font-size: 15px !important;
    padding: 10px 12px !important;
    margin: 0px auto !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  .cta-button {
    background: var(--gold-bg) !important;
    color: var(--gold-text) !important;
    border: 0.5px solid rgba(160,120,70,0.40) !important;
    width: 65vw !important;
    max-width: 95vw !important;
    min-width: 0 !important;
    height: 44px !important;
    font-size: 15px !important;
    padding: 10px 12px !important;
    margin: 0px auto !important;
    display: block !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
  }

  #submit-btn-main {
    background: var(--gold-bg) !important;
    color: var(--gold-text) !important;
    border: 0.5px solid rgba(160,120,70,0.40) !important;
    border-radius: 6px !important;
    font-size: 1.1em !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
  }

  #submit-btn-main:hover { background: rgba(160,120,70,0.25) !important; }

  .flatpickr-input, input[type='text'], input[type='date'] {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border: 0.5px solid rgba(200,160,110,0.20) !important;
  }

  .form-container {
    padding: 10px 0 !important;
    margin: 0 auto !important;
    background: var(--bg-card) !important;
    border-radius: 12px !important;
  }

  /* Day master mobile */
  .day-master-section {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 10px 0 20px 0 !important;
  }

  .day-master-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  /* Birth chart mobile */
  .birth-chart {
    overflow-x: auto !important;
    display: block !important;
    font-size: 11px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .birth-chart th, .birth-chart td {
    min-width: 0 !important;
    max-width: none !important;
    word-break: break-word !important;
    padding: 1px 1px !important;
    font-size: 10px !important;
  }

  .birth-chart th:first-child,
  .birth-chart td:first-child {
    width: 80px !important;
    min-width: 80px !important;
    max-width: 80px !important;
  }

  .element-bar-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 350px !important;
    margin: 0 auto !important;
  }

  .element-bar { height: 18px !important; }
  .element-value {
    min-width: 28px !important;
    text-align: right !important;
    margin-left: 6px !important;
    margin-right: 0 !important;
    display: inline-block !important;
  }

  /* Choices mobile */
  #gender ~ .choices,
  #gender ~ .choices .choices__inner {
    background: var(--bg-input) !important;
  }

  .choices[data-type*="select-one"]::after {
    border-color: rgba(160,120,70,0.50) transparent transparent transparent !important;
    right: 12px !important;
  }

  /* flatpickr mobile */
  .flatpickr-input,
  .birth-form input[type="text"][id="birthday"] {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border: 0.5px solid rgba(200,160,110,0.20) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    height: 44px !important;
    font-size: 15px !important;
    padding: 10px 12px !important;
    vertical-align: middle !important;
    margin: 0 8px 0 0 !important;
  }

  /* Submit button mobile */
  .birth-form input[type="submit"],
  .birth-form button[type="submit"],
  #birthForm button[type="submit"],
  #birthFormResult button[type="submit"],
  .submit-button {
    background: var(--gold-bg) !important;
    color: var(--gold-text) !important;
    border: 0.5px solid rgba(160,120,70,0.40) !important;
    width: 70vw !important;
    max-width: 350px !important;
    padding: 15px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    display: block !important;
    margin: 10px auto !important;
  }

  /* Headline mobile */
  .headline { font-size: 2.2em; }
  .description {
    font-size: 13px !important;
    line-height: 1.4 !important;
    max-width: 260px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    display: block !important;
  }

  /* Checkbox */
  .form-group.checkbox-group,
  .checkbox-group {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: unset !important;
    height: auto !important;
  }

  .checkbox-container {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    min-height: unset !important;
    height: auto !important;
  }

  .birth-form input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 8px 0 0 !important;
    vertical-align: middle !important;
  }
}

/* ============================================================
   Tab buttons & Lang toggle — replaces inline styles in HTML
   ============================================================ */
.tab-btn-row {
  display: flex;
  gap: 6px;
  margin-bottom: 1rem;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}

.tab-btn {
  flex: 0 0 auto;
  padding: 9px 16px;
  font-size: 13px;
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Inter', 'PingFang SC', 'Noto Sans SC', sans-serif;
  transition: all 0.15s;
  white-space: nowrap;
}

.tab-btn--inactive {
  font-weight: 400;
  border: 0.5px solid rgba(200,160,110,0.25);
  color: rgba(200,160,110,0.50);
  background: transparent;
}

.tab-btn--active {
  font-weight: 500;
  border: 0.5px solid rgba(200,160,110,0.40);
  color: var(--gold-text);
  background: rgba(160,120,70,0.15);
}

.tab-btn-sub {
  font-size: 11px;
  opacity: 0.7;
}

.lang-toggle {
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin-bottom: .25rem;
}

.lang-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 36px;
  padding: 0;
  line-height: 1;
  text-align: center;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}

.lang-divider {
  width: 1px;
  height: 22px;
  background: rgba(200,160,110,0.20);
  margin: 0 2px;
}

.lang-btn--inactive {
  border: 1px solid rgba(200,160,110,0.25);
  background: transparent;
  color: rgba(200,160,110,0.50);
}

.lang-btn--active {
  border: 1px solid rgba(200,160,110,0.25);
  background: rgba(160,120,70,0.15);
  color: var(--gold-text);
}

.lang-hint {
  text-align: center;
  font-size: 12px;
  color: rgba(200,160,110,0.40);
  margin-top: .25rem;
}

/* Gender field label row */
.form-field-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.label-zh-small {
  font-size: 11px;
  color: rgba(200,160,110,0.50);
}

@media (max-width: 600px) {
  /* 标题 */
  #result-view .result-title {
    letter-spacing: 0.08em !important;
    font-size: 20px !important;
    white-space: normal !important;
    padding-top: 16px !important;
  }

  #result-view .result-title::before {
    display: block !important;
    visibility: visible !important;
    font-size: 9px !important;
    letter-spacing: 0.4em !important;
    margin-bottom: 6px !important;
  }

  /* 柱标签 */
  #result-view #bazi-tiangan-row #tg-year::before { content: 'Year 年柱' !important; }
  #result-view #bazi-tiangan-row #tg-month::before { content: 'Month 月柱' !important; }
  #result-view #bazi-tiangan-row #tg-day::before { content: 'Day 日柱' !important; }
  #result-view #bazi-tiangan-row #tg-hour::before { content: 'Hour 时柱' !important; }
  #result-view #bazi-tiangan-row td::before {
    white-space: nowrap !important;
    font-size: 9px !important;
    letter-spacing: 0.04em !important;
  }

  /* 四柱格子 */
  #result-view .bazi-table td {
    font-size: 12px !important;
    padding: 4px 1px !important;
    line-height: 1.2 !important;
  }

  /* Override higher-specificity BaZi cell IDs (was var(--typo-md)) */
  #result-view #tg-year,
  #result-view #tg-month,
  #result-view #tg-day,
  #result-view #tg-hour,
  #result-view #dz-year,
  #result-view #dz-month,
  #result-view #dz-day,
  #result-view #dz-hour {
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  /* XX局badge */
  #result-view #yang-ju-box.bazi-extra-box {
    padding: 0 2px !important;
    font-family: 'Arial Narrow','Helvetica Neue',Arial,sans-serif !important;
    font-size: 9px !important;
    min-width: 0 !important;
    width: auto !important;
    letter-spacing: 0.01em !important;
  }
  #result-view #yang-ju-box.bazi-extra-box::before {
    font-size: 9px !important;
    letter-spacing: 0.1em !important;
  }

  /* 四柱容器 */
  #result-view .bazi-table-container {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    gap: 4px !important;
    padding: 0 !important;
    padding-top: 20px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Mobile: 四柱/日期/tabs 居中 */
  #result-view .date-time-info,
  #result-view #resultTabs {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }



  /* 正文 */
  #result-view #resultSection p {
    font-size: 12px !important;
    line-height: 1.7 !important;
  }
  #result-view #resultSection div[style*="font-size:12px"] {
    font-size: 12px !important;
    line-height: 1.7 !important;
  }
  #result-view #resultSection div[style*="font-size:11px"] {
    font-size: 11px !important;
  }

  /* 分析层两列改单列 */
  #result-view #resultSection div[style*="grid-template-columns:1fr 1fr"],
  #result-view #resultSection div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Flatpickr 箭头 */
  .flatpickr-prev-month,
  .flatpickr-next-month {
    color: rgba(200,160,110,0.60) !important;
    fill: rgba(200,160,110,0.60) !important;
  }
  .flatpickr-prev-month svg,
  .flatpickr-next-month svg {
    fill: rgba(200,160,110,0.60) !important;
  }
  .flatpickr-time .numInputWrapper span.arrowUp:after {
    border-color: transparent transparent rgba(200,160,110,0.60) transparent !important;
  }
  .flatpickr-time .numInputWrapper span.arrowDown:after {
    border-color: rgba(200,160,110,0.60) transparent transparent transparent !important;
  }
}


/* ── Tab row: centered tabs ── */
.tab-btn-row-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.tab-btn-row {
  display: flex;
  justify-content: center;
  gap: 8px;
}

/* Result title: anchor corner language buttons to title row */
#result-view .result-title {
  position: relative;
}

#result-view .result-title .lang-corner {
  position: absolute;
  right: max(0px, calc((100% - 820px) / 2));
  bottom: 30px;
  display: flex;
  gap: 6px;
  z-index: 5;
}

/* Desktop: half-width, equal-size buttons */
#result-view .result-title .lang-corner .lang-btn {
  font-size: 12px !important;
  line-height: 1 !important;
  height: 28px !important;
  min-height: 28px !important;
  width: 36px !important;
  min-width: 36px !important;
  max-width: 36px !important;
  padding: 0 !important;
  border-radius: 6px !important;
}


/* ══ Final overrides: all changes consolidated ══ */

/* Grid gradients */
#result-view .fullwidth-wrapper .qimen-cell {
  background: linear-gradient(160deg, #F5EDE0, #E0EAF5) !important;
}
#result-view .fullwidth-wrapper .qimen-cell:nth-child(even) {
  background: linear-gradient(160deg, #EDE5D8, #D8E4F0) !important;
}
#result-view .fullwidth-wrapper .qimen-cell.qimen-center {
  background: linear-gradient(160deg, #C8C8D8, #B8C8E0) !important;
}
#result-view .fullwidth-wrapper .qimen-cell:hover {
  background: linear-gradient(160deg, #E0D8C8, #C8D8EC) !important;
}
#result-view .fullwidth-wrapper .qimen-grid {
  background: rgba(100,130,180,0.25) !important;
}

/* Text colors: tg=warm gold, dz=cool blue */
#result-view #tg-year,
#result-view #tg-month,
#result-view #tg-day,
#result-view #tg-hour {
  color: #E8C9A8 !important;
}
#result-view #dz-year,
#result-view #dz-month,
#result-view #dz-day,
#result-view #dz-hour {
  color: rgba(200,215,240,0.82) !important;
}
#result-view .date-time-label {
  color: rgba(200,215,240,0.70) !important;
}
#result-view .date-time-value {
  color: #E8C9A8 !important;
}
#result-view .date-time-row {
  color: rgba(200,215,240,0.70) !important;
}
#result-view #bazi-tiangan-row td::before {
  color: rgba(200,215,240,0.65) !important;
}
#result-view #yang-ju-box.bazi-extra-box {
  color: #E8C9A8 !important;
}
#result-view #yang-ju-box.bazi-extra-box::before {
  color: rgba(200,215,240,0.65) !important;
}

@media (max-width: 768px) {
  /* Mobile: move buttons below the title underline, above date row, centered */
  #result-view .result-title .lang-corner {
    position: static;
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 10px auto 0;
    transform: none;
    top: auto;
    bottom: auto;
    right: auto;
  }

  #result-view .result-title .lang-corner .lang-btn {
    font-size: 8px !important;
    line-height: 1 !important;
    width: 31px !important;
    min-width: 31px !important;
    max-width: 31px !important;
    height: 15px !important;
    min-height: 15px !important;
    padding: 0 !important;
    border-radius: 3px !important;
  }
}

/* Gender: now uses Choices.js in .form-group, same as What to Ask.
   All styling is handled by #birthday-view .choices and .choices__inner rules above. */


/* ── Reading section: 方案二 — 金边竖线标题 + 半透明正文 ──
   Targets accordion sections rendered by reading.js via inline styles.
   Only overrides background/border colors; does not touch layout. */

/* Section header rows (contain the title text + chevron) */
#result-view #resultSection div[style*="cursor:pointer"],
#result-view #resultSection div[style*="cursor: pointer"] {
  background: #1a2744 !important;
  border-left: 3px solid #c8a96e !important;
  border-radius: 0 6px 6px 0 !important;
}

/* Section body (open content area) */
#result-view #resultSection div[style*="padding"][style*="border-bottom"] {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(200,160,110,0.15) !important;
}

/* Locked card rows */
#result-view #resultSection .locked-card__row {
  background: #141e30 !important;
  border-left: 3px solid rgba(200,160,100,0.25) !important;
  border-radius: 0 6px 6px 0 !important;
}

/* ══════════════════════════════════════════════════
   MOBILE FIX: Landing overflow + Result grid centering
   ══════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* Landing mobile: move whole block up */
  #landing-view .landing-page-container {
    transform: translateY(-24px);
  }

  /* Landing mobile EN headline: -2 sizes */
  #landing-view .headline-line.landing-en {
    font-size: clamp(21px, 5.9vw, 41px) !important;
  }

  /* Landing mobile ZH main headline: -3 sizes */
  #landing-view .dark-card .headline-line.landing-zh {
    font-size: 27px !important;
    white-space: nowrap !important;
  }

  /* Landing mobile Before You Cast: -1 size */
  #landing-view .landing-rules-title {
    font-size: 9px !important;
  }
  #landing-view .landing-rules-list li {
    font-size: 9px !important;
  }

  /* Landing mobile footer two lines: -1 size */
  #landing-view .footer {
    font-size: 10px !important;
  }

  /* ── Landing: prevent text overflow from dark-card ── */
  #landing-view .dark-card {
    overflow: hidden !important;
    word-break: break-word !important;
  }
  #landing-view .dark-card .headline,
  #landing-view .dark-card .headline-line {
    white-space: normal !important;
    word-break: break-word !important;
  }
  .landing-rules-list {
    max-width: 100% !important;
    padding-right: 8px !important;
  }
  .landing-rules-list li {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  .cta-button {
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* ── Result page: all content centered with equal padding ── */
  #result-view,
  #result-view.page-view,
  #result-view.page-view.active {
    padding: 20px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  #result-view .result-container-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #result-view .form-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Title: centered */
  #result-view .result-title {
    text-align: center !important;
    white-space: normal !important;
    max-width: 100% !important;
  }

  /* Date rows: left-aligned with padding */
  #result-view .date-time-info {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Bazi table container: centered with padding */
  #result-view .bazi-table-container {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    padding-top: 20px !important;
    box-sizing: border-box !important;
  }

  /* Tabs: centered, full width */
  #result-view #resultTabs {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* ── 九宫格: responsive centering with equal padding ── */
  #result-view .fullwidth-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
  }

  #result-view .fullwidth-wrapper .qimen-chart-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 12px auto !important;
    box-sizing: border-box !important;
  }

  #result-view .fullwidth-wrapper .qimen-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    aspect-ratio: 1 / 1 !important;
  }

  /* Grid cells: allow text to wrap/shrink */
  #result-view .fullwidth-wrapper .qimen-cell {
    padding: 6px 4px 22px !important;
    min-height: 0 !important;
    overflow: visible !important;
    word-break: break-all !important;
  }

  /* Smaller text in grid cells on mobile */
  #result-view .fullwidth-wrapper .qimen-god,
  #result-view .fullwidth-wrapper .qimen-star,
  #result-view .fullwidth-wrapper .qimen-door {
    font-size: 10px !important;
    line-height: 1.2 !important;
  }
  #result-view .fullwidth-wrapper .qimen-god .qimen-en,
  #result-view .fullwidth-wrapper .qimen-star .qimen-en,
  #result-view .fullwidth-wrapper .qimen-door .qimen-en {
    font-size: 8px !important;
  }
  #result-view .fullwidth-wrapper .qimen-stems .qimen-tiangan {
    font-size: 9px !important;
  }
  #result-view .fullwidth-wrapper .qimen-cell:not(.qimen-center)::after {
    font-size: 18px !important;
  }

  /* Lang toggle: centered */
  #result-view .result-title .lang-corner {
    justify-content: center !important;
  }

  /* Mobile: tighten Gregorian Date value -> Time label spacing */
  #result-view .date-time-row:first-of-type .date-time-value:first-of-type {
    margin-right: 6px !important;
  }

  #result-view .date-time-row:first-of-type .date-time-label {
    margin-right: 4px !important;
  }

  #result-view .date-time-row:first-of-type .date-time-value {
    margin-right: 0 !important;
  }
}

/* Result date/time: +1 typography size (Gregorian/Time/Lunar) */
#result-view .date-time-row,
#result-view .date-time-label,
#result-view .date-time-value {
  font-size: calc(var(--typo-sm) + 0.08rem) !important;
}

/* Desktop landing footer visibility hard fallback */
@media (min-width: 601px) {
  #landing-view.active {
    justify-content: flex-start !important;
    align-items: center !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
    padding-top: 48px !important;
    padding-bottom: 24px !important;
  }

  #landing-view .landing-page-shell {
    display: block !important;
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
  }

  #landing-view .landing-page-container {
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  #landing-view .dark-card {
    width: 100% !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  #landing-view .footer {
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 3 !important;
    margin-top: 1.2rem !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }

  #landing-view #landingFooterEN,
  #landing-view #landingFooterZH {
    display: block !important;
    visibility: visible !important;
  }
}

/* ══════════════════════════════════════════════════
   END MOBILE FIX
   ══════════════════════════════════════════════════ */