html, body {
  margin: 0;
  padding: 0;
      width: 100%;
      height: 100%;
      overflow-x: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  
  body {
      font-family: 'Montserrat', sans-serif;
      background-color: #1a1a1a;
      color: #ffffff;
      width: 100%
  }
  
  #landing-view {
      min-height: auto;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20px;
  }
.landing-page-container {
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
  text-align: center;
}

.sub-headline {
  font-size: 1.3em;
  font-weight: 100;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 30px;
  font-family: 'Montserrat', 'Poppins', 'Roboto', 'DM Sans', 'Inter', Arial, sans-serif;
}
.headline-line {
  white-space: nowrap;
  display: block;
  font-family: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 0.01em;
  margin-bottom: 18px;
  margin-top: 0;
}
.headline-line:last-child {
  margin-bottom: 0;
}
.headline {
  font-size: 3.5em;
  font-weight: 800;
  line-height: 1.1;
  margin-top: 0;
  margin-bottom: 20px;
  color: #ffffff;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100vw;
}
.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: rgba(255,255,255,0.82);
  text-align: center;
}

.email-form-container {
  display: flex;
  flex-direction: column;
      align-items: center;
  gap: 15px;
      width: 100%;
  }
  .email-input, .cta-button {
      width: 350px !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;
      background-color: #2b0e43 !important;
      color: #fff !important;
      border: none !important;
      font-weight: bold;
  }
  .email-input {
      background-color: rgba(255, 255, 255, 0.1) !important;
      border: none !important;
      color: #ffffff !important;
  }
  .email-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
      text-align: center;
  }
  
  @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; }
  }
  @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; }
  }
  
  #birthday-view .birth-form input[type="text"],
  #birthday-view .birth-form input[type="number"],
  #birthday-view .birth-form .submit-button,
  #result-view .birth-form input[type="text"],
  #result-view .birth-form input[type="number"],
  #result-view .birth-form .cta-button {
      width: 350px !important;
      max-width: 350px !important;
      padding: 15px !important;
      margin: 10px 15px !important;
      display: block !important;
      border-radius: 8px !important;
      background-color: rgba(26, 26, 26, 0.8) !important;
      border: 0.5px solid #53416f!important;
      color: #ffffff !important;
      font-size: 16px !important;
      text-align: center !important;
      box-sizing: border-box !important; /* Ensure consistent sizing */
  }

  #result-view .birth-form .cta-button {
      margin-bottom: 50px !important;
      background-color: #2b0e43 !important;
  }
  #submit-btn-main.cta-button.only-submit-btn {
    border: none !important;
    box-shadow: none !important;
  }

  .checkbox-container,
  #result-view .checkbox-container {
      width: 350px;
      margin: 9px auto;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      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-container {
      background-color: #2a2a2a;
      padding: 16px 40px 16px 40px;
      border-radius: 20px;
      box-sizing: border-box;
      margin: 20px 20px;
      height: auto !important
  }
  .form-title {
      text-align: center;
      white-space: nowrap;
      margin-bottom: 2rem;
      font-size: 2rem;
      color: #ffffff;
  }
  .form-group {
      display: flex;
      white-space: nowrap;
      flex-direction: column;
      align-items: stretch;
      margin-bottom: 3px; /* 控制每项间距，8px更紧凑 */
  }
  .form-group label {
      min-width: 0;
      margin-bottom: 4px;
      white-space: nowrap;
      text-align: center;
      margin-right: 0;
      font-size: 16px;
      color: #fff;
  width: 100%;
      display: block;
  }
  .form-group input[type="text"],
  .form-group input[type="number"] {
      flex: none;
  max-width: 350px;
      width: 100%;
  }
  
  .birth-form {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
  }
  .birth-form input[type="text"],
  .birth-form input[type="number"] {
      width: 200px; /* Standardize width */
      max-width: 350px; /* Standardize max-width */
      padding: 15px;
      border: 2px solid #8a2be2;
      border-radius: 8px;
      background-color: #2a2a2a;
      color: #ffffff;
      font-size: 16px;
      text-align: center;
      box-sizing: border-box; /* Add box-sizing */
      margin: 0 auto 15px auto; /* Center and add bottom margin */
  }
  .birth-form .submit-button {
      background-color: #8a2be2 !important;
      width: 200px !important;
      padding: 15px !important;
      border: none !important;
      border-radius: 8px !important;
      color: #ffffff !important;
      font-size: 16px !important;
      cursor: pointer !important;
  }
  
  #result-view {
      width: 90vw !important;
      max-width: 1800px !important;
      margin: 20px auto !important;
      padding: 0 !important;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      min-height: calc(100vh - 40px);
  }
  .bazi-flex-container {
      display: flex;
      align-items: stretch; /* 关键：让子项等高 */
      align-items: stretch;
      justify-content: center;
      gap: 40px;
      width: 100%;
      padding: 0 20px;
      min-height: 100%;
  }
  .bazi-form-panel, .bazi-result-panel {
      flex: 1 1 0;
      margin: 20px 0px 20px 20px;
      background-color: transparent;
      border-radius: 0;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
      height: auto !important;
      max-height: 700px !important; /* 灰色底块更矮 */
      min-height: 100px !important;
      overflow: visible !important;
      gap: 12px;                  /* 区块间距适中 */
      box-shadow: none !important;
      padding: 0px 20px 50px 20px;
  }
  .bazi-form-panel {
      flex: 0 1 500px;
  }
  .bazi-result-panel {
      flex: 0 1 625px;
  }
  .bazi-result-panel .form-container {
    height: 100%;      /* 关键：让灰色底框填满父容器 */
    display: flex;
    flex-direction: column;
    padding: 0px 50px 40px 50px !important;
    border-radius: 20px;
    box-sizing: border-box;
    margin: 20px 20px 0px 0px;
  }
  .result-container {
      width: 100%;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
  }
  .result-title {
      font-size: 2em;
      text-align: center;
      margin: 0 0 8px 0 !important;
      padding: 30px 0 8px 0 !important;
      color: #ffffff;
      width: 100%;
      font-weight: bold;
      background: none !important;
      display: block;
  }
  .birth-time {
      margin: 0 !important;
      margin-top: 0 !important;
      padding: 0 !important;
      padding-top: 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;
  }

  .birth-chart th,
  .birth-chart td,
  .birth-chart td div {
      font-size: 12px !important;
      line-height: 1.3 !important;
      padding: 8px !important;
      vertical-align: middle;
      word-break: break-word;
    }
  .birth-chart th {
      text-align: center !important;
      font-size: 14px !important;
  }
  .birth-chart td {
      text-align: left !important;
      font-size: 14px !important;
      white-space: nowrap !important;
  }
  .birth-chart td div {
      text-align: left !important;
      font-size: 14px !important;
  }
  .birth-chart th:first-child,
  .birth-chart td:first-child {
      width: 120px;
  }
  
  .birth-chart td div {
      margin: 0;
      padding: 0;
  }
  
  .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; /* 你想要的间距，比如16px */
    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: #2b0e43;
    padding: 8px 0 !important;      /* 上下内边距缩小，比如8px */
    padding-bottom: 15px;
    min-height: unset !important;   /* 如果之前有min-height，取消它 */
    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: #fff;
    width: 100%;
  }
  #day-master-analysis { text-align: center; }
  
  /* ====== 五行分布唯一CSS方案 START ====== */
  .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: #fff;
      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.1);
      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: #fff;
      font-size: 18px;
      font-weight: bold;
      width: 100%;
      display: block;
  }
  .bazi-result-panel,
  .form-container,
  .result-container {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  /* ====== 五行分布唯一CSS方案 END ====== */
  
  .hidden-stem-cell {
      font-size: 0.85em;
      letter-spacing: 0.05em;
      word-break: keep-all;
  }
  
  .cta-button,
  .birth-form .submit-button,
  .birth-form .cta-button {
      width: 350px;
      padding: 15px;
      background-color: #2b0e43 !important;
      border: none;
      border-radius: 8px;
      color: #ffffff;
      font-size: 16px;
      cursor: pointer;
      text-align: center;
      transition: background-color 0.3s ease;
  }

  #birthForm .submit-button,
  #birthForm button[type="submit"],
  #birthFormResult .submit-button,
  #birthFormResult button[type="submit"] {
      margin-bottom: 32px !important; /* 你想要的间距，比如32px */
  }
  .result-container {
      width: 100%;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 20px;
  }
  .result-title {
      font-size: 2em;
      text-align: center;
      margin: 0 0 20px 0;
      padding: 20px 0;
      color: #ffffff;
      width: 100%;
      height: auto;
      overflow: visible;
      font-weight: bold;
      position: relative;
      z-index: 1;
  }
  .birth-chart th, .birth-chart td {
      padding: 12px 8px;
      text-align: center;
      border: 1px solid #7B4F8E;
      color: #ffffff;
      overflow: visible;
      white-space: normal;
      font-size: 14px;
      line-height: 1.4;
      vertical-align: middle;
  }
  .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-form input[type="submit"],
  .birth-form button[type="submit"],
  #birthForm button[type="submit"],
  #birthFormResult button[type="submit"] {
      background-color: #2b0e43 !important;  /* 使用与结果框相同的紫色 */
      border: none !important;
      width: 350px !important;
      padding: 15px !important;
      border-radius: 8px !important;
      color: #ffffff !important;
      font-size: 16px !important;
      cursor: pointer !important;
      display: block !important;
  }
  .birth-form button[type="submit"]:hover,
  #birthFormResult button[type="submit"]:hover {
      background-color: #7424c9 !important;
  }

  .result-container {
      height: auto !important;
      min-height: 100px !important;
      overflow: visible !important;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
  }
  
  .birth-chart th, .birth-chart td {
      white-space: nowrap !important;
      font-size: 14px !important;
      line-height: 1.4 !important;
      padding: 10px 6px !important;
      overflow: visible !important;
      vertical-align: middle !important;
  }
  .birth-chart th, .birth-chart td {
      min-width: 110px !important;  /* 进一步缩小列宽 */
      max-width: 140px !important;
  }
  .birth-chart {
      min-width: 640px !important;  /* 相应缩小整体宽度 */
      table-layout: fixed !important;
      border-collapse: collapse;
      margin: 0px !important;
      table-layout: fixed;
      font-size: 12px !important;
      text-align: left !important;
  }
  
  .result-title {
      padding-top: 40px !important;
      margin-top: 0 !important;
      margin-bottom: 8px !important;
      padding-bottom: 18px !important;
  }
  .birth-time {
      margin-bottom: 6px !important;
  }

.birth-time {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !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;
}

.checkbox-container {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    color: #fff !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: auto !important;
    white-space: nowrap !important;
    gap: 5px !important; /* 让checkbox和文字有间距 */
}

.form-group.checkbox-group {
  margin-bottom: 0 !important; /* 你想要的间距，比如4px，可以更小 */
  padding-bottom: 0 !important;
}

select:not(.flatpickr-calendar select),
input[type="date"],
input[type="datetime-local"],
input[type="text"] {
  width: 70vw !important;
  max-width: 350px !important;
  background: rgba(26, 26, 26, 0.8) !important;
  color: #fff !important;
  border: 0.5px solid #53416f !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;
}

/* 2. flatpickr 弹窗专属样式 */
.flatpickr-calendar {
  width: inherit !important;
  max-width: 350px !important;
  background-color: rgba(26, 26, 26, 0.8) !important;
  border: 0.5px solid #53416f !important;
  color: #fff !important;
  box-shadow: 0 2px 8px #0006 !important;
}
.flatpickr-calendar .flatpickr-day {
  color: #fff !important;
}
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.today {
  background: none !important;
  color: #fff !important;
}

/* 3. Choices.js 下拉专属样式 */
.choices__inner {
  /* 只针对下拉的样式 */
  background: rgba(26, 26, 26, 0.8) !important;
  border: 0.5px solid #53416f !important;
  border-radius: 8px !important;
  min-height: 44px !important;
  padding: 12px !important;
  font-size: 16px !important;
  color: #fff !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

select:focus,
input[type="date"]:focus,
input[type="text"]:focus {
  border-color: #a084ca;
}

.form-group select.input-field {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  background: #18171c url("data:image/svg+xml;utf8,<svg fill='white' 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: #fff !important;
  border: 0.5px solid #2b0e43 !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: #a084ca !important;
}

html body .choices {
    /* 不要设置宽度和背景色，只保留 margin 居中 */
    margin: 0 auto 18px auto !important;
}
html body .choices__inner {
    width: 70vw !important;
    max-width: 350px !important;
    background: rgba(26, 26, 26, 0.8) !important;  /* 统一为和其他输入框一样的深灰色 */
    color: #fff !important;
    border: 0.5px solid #53416f !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: #fff !important;
}
html body .choices__list--dropdown,
html body .choices__list[aria-expanded] {
    width: 70vw !important;
    max-width: 350px !important;
    background: #2a2a2a !important;
    color: #fff !important;
    border: 0.5px solid #53416f !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
}
html body .choices__item--selectable.is-highlighted {
    background: #3f4458 !important;
    color: #fff !important;
}
html body .choices__placeholder {
    color: #aaa !important;
    opacity: 1 !important;
}
html body .choices[data-type*="select-one"]::after {
    border-color: #fff transparent transparent transparent !important;
}
@media (max-width: 600px) {
    /* 统一所有输入、下拉、按钮、textarea、choices */
    #birthday-view .birth-form input[type="text"],
    #birthday-view .birth-form input[type="number"],
    #birthday-view .birth-form select,
    #birthday-view .birth-form button,
    #birthday-view .birth-form textarea,
    #birthday-view .birth-form .cta-button,
    #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: #222 !important;
      border: 0.5px solid #53416f !important;
      color: #fff !important;
    }
    .email-input {
        background: #222 !important;   /* 你想要的黑色 */
        color: #fff !important;
        border: 0.5px solid #53416f !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: #2b0e43 !important;   /* 你想要的紫色 */
        color: #fff !important;
        border: none !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;
      }
    /* flatpickr输入框背景色 */
    .flatpickr-input, input[type='text'], input[type='date'] {
      background: rgba(26, 26, 26, 0.8) !important;
      color: #fff !important;
      border: 0.5px solid #53416f  !important;
    }
    .form-container {
        padding: 10px 0 !important; /* 顶部和底部padding缩小 */
        margin: 0 auto !important;
        background: #222 !important; /* 或你想要的色 */
        border-radius: 12px !important;
      }
      body, html {
        background: rgba(26, 26, 26, 0.8) !important;
        min-height: 100vh !important;
      }
    /* 缩小每一组的上下间距 */
    .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;
    }
    /* 标题、描述等字体缩小 */
    .result-title, .form-title, .day-master-titles {
      font-size: 1.6em !important;
      margin-bottom: 50px !important;
      margin-top: 50px !important;
    }
    .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;
    }
    .birth-chart {
        overflow-x: auto !important;
        display: block !important;
        font-size: 11px !important;
        width: 100% !important;
        min-width: 400px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      .element-bar-container {
        width: 100% !important;
        min-width: 0 !important;
      }
      .element-bar {
        height: 18px !important;
      }
      .birth-form input[type="checkbox"] {
        width: 12px !important;
        height: 12px !important;
        margin-right: 8px !important;
      }
      .flatpickr-input, 
      .birth-form input[type="text"][id="birthday"] {
        background: rgba(26, 26, 26, 0.8) !important;
        color: #fff !important;
        border: 0.5px solid #6c3cff !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;
      }
      .flatpickr-calendar {
        width: 70vw !important;
        min-width: 0 !important;
        max-width: 350px !important;
        background: rgba(26, 26, 26, 0.95) !important;
        border: 0.5px solid #53416f !important;
        color: #fff !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(108, 60, 255, 0.15) !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
      }
      .form-group.checkbox-group,
      .checkbox-group,
      .checkbox-container {
        margin-bottom: 2px !important;  /* 你想要的间距，比如2px */
        gap: 0 !important;
        column-gap: 0 !important;
        row-gap: 0 !important;
        height: auto !important;
        line-height: 1.2 !important;
        font-size: 14px !important;
      }
      .checkbox-container input[type="checkbox"] {
        margin-right: 8px !important;
      }
      .birth-form {
        gap: 5px !important;
      }
    /* 最后一个checkbox不要margin-bottom */
      .form-group.checkbox-group:last-of-type {
        margin-bottom: 30px !important; /* 恢复与下方submit的间距 */
      }
      .form-group:not(.checkbox-group) {
        margin-bottom: 30px !important;
      }
    /* 让Choices.js的下拉箭头更明显 */
    .choices[data-type*="select-one"]::after {
      border-color: #fff transparent transparent transparent !important;
      right: 12px !important;
    }
    /* 兼容 Safari/iOS 的日期控件字体颜色 */
    .birth-form input[type="datetime-local"]::-webkit-input-placeholder,
    .birth-form input[type="datetime-local"].flatpickr-input.flatpickr-mobile::-webkit-input-placeholder {
      color: #fff !important;
    }
    .birth-form input[type="datetime-local"]::-webkit-datetime-edit,
    .birth-form input[type="datetime-local"].flatpickr-input.flatpickr-mobile::-webkit-datetime-edit {
      color: #fff !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 输入框样式 */
    .birth-form input[type="datetime-local"].flatpickr-input.flatpickr-mobile,
    .birth-form input[type="datetime-local"].flatpickr-input,
    .birth-form input[type="datetime-local"] {
      background: rgba(26, 26, 26, 0.8) !important;
      color: #fff !important;
      border: 0.5px solid #53416f !important;
      border-radius: 6px !important;
      box-shadow: none !important;
      height: 44px !important;
      font-size: 15px !important;
      padding: 10px 12px !important;
      width: 70vw !important;
      max-width: 90vw !important;
      margin: 4px auto !important;
      display: block !important;
      box-sizing: border-box !important;
    }
    /* 兼容 Safari/iOS 的日期控件字体颜色 */
    .birth-form input[type="datetime-local"].flatpickr-input.flatpickr-mobile::-webkit-input-placeholder,
    .birth-form input[type="datetime-local"].flatpickr-input.flatpickr-mobile::-webkit-datetime-edit {
      color: #fff !important;
    }
    .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: rgba(26, 26, 26, 0.8) !important;
        color: #aaa !important;
        border: 0.5px solid #53416f !important;
        border-radius: 8px !important;
        padding: 20px !important;
        font-size: 15px !important;
        text-align: center !important;
      }
      #submit-btn-main.cta-button.only-submit-btn {
        border: none !important;
        box-shadow: none !important;
      }
      #submit-btn-main {
        background: #8f5cff !important;
        color: #fff !important;
        border: none !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: #7a4be3 !important;
      }
      .form-group select.input-field {
        -webkit-appearance: none !important;
        color: #aaa !important;
        border-radius: 8px !important;
        font-size: 16px !important;
        font-family: inherit !important;
        height: 48px !important;
        min-height: 48px !important;
        text-align: center !important;
      }
      .form-group select.input-field:focus {
        border-color: #a084ca !important;
      }
      select.choices__input {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        color: transparent !important;
        position: absolute !important;
        left: 0; top: 0; width: 100%; height: 100%;
        z-index: 2;
        opacity: 0 !important;
        pointer-events: none !important;
      }
      /* 只影响Gender下拉框 */
      #gender ~ .choices, 
      #gender ~ .choices .choices__inner {
        width: 70vw !important;
        max-width: 350px !important;
        min-width: 0 !important;
        margin: 4px auto !important;
        display: block !important;
        box-sizing: border-box !important;
        height: 44px !important;
        font-size: 15px !important;
        padding: 10px 12px !important;
        background: rgba(26, 26, 26, 0.8) !important;
        color: #fff !important;
        border: 0.5px solid #53416f !important;
        border-radius: 8px !important;
        text-align: center !important;
      }
      #gender ~ .choices .choices__list--dropdown {
        width: 70vw !important;
        max-width: 350px !important;
        min-width: 0 !important;
        background: #2a2a2a !important;
        color: #fff !important;
        border: 0.5px solid #53416f !important;
        border-radius: 8px !important;
        box-sizing: border-box !important;
        left: 0 !important;
        margin: 0 auto !important;
        max-height: 200px !important;
        overflow-y: auto !important;
        z-index: 1000 !important;
        padding: 0 !important;
      }
      #gender ~ .choices .choices__item {
        font-size: 15px !important;
        padding: 10px 12px !important;
        text-align: center !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        color: #fff !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
      }
      #gender ~ .choices .choices__item--selectable.is-highlighted,
      #gender ~ .choices .choices__item--selectable.is-selected {
        background: #8f5cff !important;
        color: #fff !important;
        border-radius: 8px !important;
      }
      #gender.choices__input {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        outline: none !important;
        color: transparent !important;
        position: absolute !important;
        left: 0; top: 0; width: 100%; height: 100%;
        z-index: 2;
        opacity: 0 !important;
        pointer-events: none !important;   
      }
        /* 设置父级容器宽度 */
      .choices {
        width: 70vw !important;
        max-width: 350px !important;
        margin: 4px auto !important;
      }

      /* 设置下拉框本体样式 */
      .choices__inner {
        width: 100% !important;      /* 继承父级宽度 */
        height: 44px !important;     /* 和其他移动端输入框一致的高度 */
        min-height: 44px !important;
        font-size: 15px !important;  /* 和其他移动端输入框一致的字体 */
        padding: 10px 12px !important;
      }
      /* 只保留外层边框 */
      .flatpickr-calendar {
        border: 1.5px solid #a084ca !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px #0006 !important;
      }

      /* 只高亮选中日期，今天用淡色 */
      .flatpickr-day.selected {
        background: #a084ca !important;
        color: #fff !important;
        border: none !important;
        box-shadow: none !important;
      }
      .flatpickr-day.today:not(.selected) {
        background: #39394a !important;
        color: #fff !important;
        border: none !important;
        box-shadow: none !important;
      }
      .flatpickr-current-month input.cur-year {
        display: inline-block !important;
        width: 350px !important; /* 或你需要的宽度 */
        opacity: 1 !important;
        visibility: visible !important;
      }
      /* 去掉内部所有边框 */
      .flatpickr-innerContainer,
      .flatpickr-days,
      .flatpickr-time,
      .flatpickr-weekdays
      .flatpickr-current-month input.cur-year {
        border: none !important;
        box-shadow: none !important;
        background-color: rgba(26, 26, 26, 0.8) !important;
      }
      .flatpickr-calendar .dayContainer {
        width: 70vw !important;
        min-width: 0 !important;
        max-width: 350px !important;
      }
      .flatpickr-calendar .flatpickr-days {
        width: 70vw !important;
        max-width: 95vw !important;
        min-width: 0 !important;
      }
      html, body {
        display: block !important;
        align-items: initial !important;
        justify-content: initial !important;
        min-height: 100vh !important;
        height: auto !important;
        overflow-x: hidden !important;
      }
      /* 主容器上下布局 */
      .bazi-flex-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        min-height: auto !important;
        box-sizing: border-box !important;
        gap: 0px !important;
        padding: 0 !important;
      }
      .bazi-form-panel,
      .bazi-result-panel {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
      }
      .bazi-form-panel {
        margin-top: 50px !important; /* 你可以根据需要调整数值 */
        margin-bottom: 270px !important; /* 下方间距，防止和结果重叠 */
      }
      .bazi-result-panel {
        margin-top: 30 !important;
        margin-bottom: 50px !important; /* 防止底部内容被遮挡 */
      }
      .form-container,
      .result-container,
      .birth-chart,
      .elements-section,
      .elements-chart {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
      }
      .form-container, .result-container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 12px !important; /* 你想要的左右留白 */
        box-sizing: border-box !important;
      }
      /* Day Master 标题和内容上下排列 */
      .day-master-titles {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 12px 0 0 0 !important;
      }
      .day-master-section {
        display: flex !important;
        flex-direction: row !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 350px !important;
        margin: 10px 0 20px 0 !important;
        align-items: center !important;
      }
      .day-master-box {
        width: 100% !important;
        max-width: 350px !important;
        min-width: 0 !important;
        min-height: 30px !important;
        background: #2b1a3d !important;
        color: #fff !important;
        border-radius: 8px !important;
        margin-bottom: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 0.8em !important;
        font-weight: bold !important;
        box-sizing: border-box !important;
        padding: 10px 0 !important;
      }
      .day-master-block {
        max-width: 350px !important;
        margin: 0 auto 12px auto !important;
      }
      .day-master-block, .day-master-box {
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
      }
      .day-master-title {
        font-size: 0.8em !important;
      }

      /* 缩小表格字体和间距，宽度与输入框一致 */
      .birth-chart {
        font-size: 10px !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 350px !important;
        table-layout: fixed !important;
        margin: 0 10px !important;
        box-sizing: border-box !important;
        overflow-x: auto !important;
      }
      .birth-chart th, .birth-chart td, .birth-chart td div {
        font-size: 10px !important;
        padding: 2px 1px !important;
        min-width: 30px !important;
        max-width: 70px !important;
        word-break: break-all !important;
        text-align: left !important;
      }
      .birth-chart th:first-child,
      .birth-chart td:first-child {
        width: 70vw !important;
        min-width: 40px !important;
        max-width: 80px !important;
        padding-left: 0px !important;
      }
      /* Five Elements Distribution 容器和进度条宽度 */
      .elements-section,
      .elements-chart {
        width: 70vw !important;
        max-width: 350px !important;
        min-width: 0 !important;
        margin: 10px 10px ;
        box-sizing: border-box !important;
        padding: 5px 0px !important;
      }

      .elements-chart {
        width: 90vw;
        max-width: 100%;
        margin: 0 auto;
        margin: 0px 5px !important;
      }
      .element-bar-container {
        width: 70vw !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 18px !important;
        flex: 1 1 0 !important;
        margin: 0 !important;
      }
      .elements-section h3 {
        font-size: 1em !important;
        white-space: nowrap !important;
        margin-bottom: 10px !important;
      }
      .elements-section .element-name {
        font-size: 12px !important;
        letter-spacing: 0.5px !important;
      }
      .element-row {
        display: flex !important;
        width: 100% !important;
        margin: 8px !important;
        gap: 5px !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
      }
      .element-name {
        width: 80px !important;   /* 你可以根据实际屏幕调整，比如80px或90px */
        min-width: 80px !important;
        max-width: 80px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        font-size: 12px !important;
        margin-right: 8px !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
      }
      .element-value {
        min-width: 28px !important;
        text-align: right !important;
        margin-left: 6px !important;
        margin-right: 0 !important;
        display: inline-block !important;
      }
      /* 缩小标题、分析区字体 */
      .result-title,
      .form-title,
      .day-master-titles,
      .day-master-title,
      .day-master-box {
        font-size: 1em ;
        padding: 0 !important;
        margin: 0 0 8px 0 ;
      }
      .result-title,
      .form-title {
        font-size: 1.6em !important;
        margin: 0 0 20px 0 !important;
      }

      html, body {
        margin: 0 !important;
        padding: 0 !important;
      }
      .form-container, .bazi-result-panel {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      .bazi-result-panel,
      .form-container,
      .result-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      .fullwidth-wrapper {
        width: 100% !important;
        max-width: 350px !important; /* 或和主内容一致的宽度 */
        margin: 10px auto !important;
        left: unset !important;
        transform: none !important;
        position: static !important;
        padding: 0 0 !important;
        box-sizing: border-box !important;
      }
      .fullwidth-wrapper .birth-chart,
      .fullwidth-wrapper .elements-section,
      .fullwidth-wrapper .elements-chart {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
      }
      .birth-chart th, .birth-chart td {
        min-width: 0 !important;
        max-width: none !important;
        word-break: break-word !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      /* 控制进度条最大宽度 */
      .element-bar-container {
        max-width: 350px !important;
        width: 100% !important;
        margin: 0 auto !important;
      }
      .form-container,
      .day-master-section {
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
      }
      .result-container {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        margin-left: 50%;
        transform: translateX(-50%);
        position: relative;
        box-sizing: border-box;
        padding-left: 8px;
        padding-right: 8px;
      }
      /* 让表格和五行区宽度100%填满 .result-container */
      .result-container .birth-chart,
      .result-container .elements-section,
      .result-container .elements-chart {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0;
        box-sizing: border-box;
      }

}

/* flatpickr弹窗主色调覆盖 */
.flatpickr-calendar {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important; /* 或你想要的最大宽度 */
  border: 0.5px solid #53416f !important;
  color: #fff !important;
  box-shadow: 0 2px 8px #0006 !important;
  background: rgba(26, 26, 26, 0.8) !important;
}
.flatpickr-days {
  width: 100% !important;
  display: flex !important;
  flex-direction: column;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day:hover, .flatpickr-day.today {
  background: #a084ca !important;
  color: #fff !important;
  border: none !important;   /* 重点：去掉多余边框 */
  box-shadow: none !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  width: 50vw !important;
  max-width: 70px !important;
  color: #fff !important;
  text-align: left !important;
}

.flatpickr-weekdays {
  display: flex !important;
}
input[type="text"].flatpickr-input {
  width: 100%;
  max-width: 350px;
  min-width: 0;
  box-sizing: border-box;
}
/* 让每一行天数用 flex 平均分布 */
.flatpickr-calendar .dayContainer {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  background-color: rgba(26, 26, 26, 0.8) !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-days {
  max-width: 350px !important;  /* 跟你的输入框宽度一致 */
  min-width: 0 !important;
  margin: 0 auto !important;
  background: transparent !important; /* 避免多余背景色 */
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* 基础样式（桌面+移动通用） */
.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: rgba(26, 26, 26, 0.8) !important;
  color: #fff !important;
  border: 0.5px solid #53416f !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  height: 44px !important;
  font-size: 15px !important;
  padding: 10px 12px !important;
  width: 70vw !important;
  max-width: 350px !important;
  margin: 4px auto 18px auto !important;
  display: block !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

/* 兼容 Safari/iOS 的日期控件字体颜色 */
.birth-form input[type="datetime-local"]::-webkit-input-placeholder,
.birth-form input[type="datetime-local"].flatpickr-input.flatpickr-mobile::-webkit-input-placeholder {
  color: #fff !important;
}
.birth-form input[type="datetime-local"]::-webkit-datetime-edit,
.birth-form input[type="datetime-local"].flatpickr-input.flatpickr-mobile::-webkit-datetime-edit {
  color: #fff !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 专属样式 */
#birthday-view .birth-form input[type="datetime-local"].flatpickr-input.flatpickr-mobile {
  background: rgba(26, 26, 26, 0.8) !important;
  color: #aaa !important;
  border: 0.5px solid #53416f !important;
  border-radius: 8px !important;
  padding: 20px !important;
  font-size: 15px !important;
  text-align: center !important;
}

/* ====== FLATPICKR 星期栏和时间栏紫色背景修复 ====== */
/* 星期栏紫色背景 */
.flatpickr-calendar .flatpickr-weekdays {
  background: #8f5cff !important;
  border-radius: 8px 8px 0 0 !important;
}
.flatpickr-calendar .flatpickr-weekday {
  background: #8f5cff !important;
  color: #fff !important;
  font-weight: bold !important;
  padding: 8px 0 !important;
}

/* 时间选择栏紫色背景 */
.flatpickr-calendar .flatpickr-time {
  background: #8f5cff !important;
  color: #fff !important;
  border-radius: 0 0 8px 8px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.flatpickr-calendar .flatpickr-time input,
.flatpickr-calendar .flatpickr-time .flatpickr-time-separator {
  background: transparent !important;
  color: #fff !important;
  font-weight: bold !important;
  border: none !important;
  box-shadow: none !important;
}
.flatpickr-calendar .flatpickr-time input:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* 移动端特殊处理 */
@media (max-width: 600px) {
  .flatpickr-calendar .flatpickr-weekdays {
    background: #8f5cff !important;
  }
  .flatpickr-calendar .flatpickr-time {
    background: #8f5cff !important;
  }
}