.iztro-palace {
  padding: 3px;
  display: grid;
  text-transform: capitalize;
  grid-template-rows: auto auto auto 50px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "major minor adj"
    "horo  horo adj"
    "fate  fate fate"
    "ft   ft  ft";
  transition: all 0.25s ease-in-out;
  grid-auto-flow: column;
}
.iztro-palace.focused-palace {
  background-color: #aab8d32f;
}
.iztro-palace.opposite-palace {
  background-color: #93f73d4f;
}
.iztro-palace.surrounded-palace {
  background-color: #aff46f24;
}
.iztro-palace-major {
  grid-area: major;
}
.iztro-palace-minor {
  grid-area: minor;
  justify-self: center;
}
.iztro-palace-adj {
  grid-area: adj;
  display: inline-flex;
  justify-self: flex-end;
  gap: 3px;
  white-space: nowrap;
  text-align: right;
}
.iztro-palace-horo-star {
  grid-area: horo;
  align-self: center;
}
.iztro-palace-horo-star .stars {
  display: flex;
  gap: 3px;
}
.iztro-palace-scope {
  white-space: nowrap;
  text-align: center;
}
.iztro-palace-scope-decadal {
  font-weight: 700;
}
.iztro-palace-fate {
  grid-area: fate;
  align-self: flex-end;
  white-space: nowrap;
  justify-content: center;
  display: flex;
  gap: 3px;
  height: 17px;
}

.iztro-palace-fate .iztro-palace-decadal-active {
  background-color: var(--iztro-color-decadal);
}

.iztro-palace-fate .iztro-palace-yearly-active {
  background-color: var(--iztro-color-yearly);
}

.iztro-palace-fate .iztro-palace-monthly-active {
  background-color: var(--iztro-color-monthly);
}

.iztro-palace-fate .iztro-palace-daily-active {
  background-color: var(--iztro-color-daily);
}

.iztro-palace-fate .iztro-palace-hourly-active {
  background-color: var(--iztro-color-hourly);
}

.iztro-palace-footer {
  grid-area: ft;
  display: grid;
  grid-template-columns: auto auto auto;
  align-self: flex-start;
}

.iztro-palace-lft24 {
  text-align: left;
}

.iztro-palace-rgt24 {
  text-align: right;
}
.iztro-palace-name {
  cursor: pointer;
  text-wrap: nowrap;
}
.iztro-palace-name .iztro-palace-name-wrapper {
  position: relative;
}
.iztro-palace-name .iztro-palace-name-taichi {
  position: absolute;
  font-size: 12px;
  line-height: 14px;
  background-color: var(--iztro-color-major);
  padding: 0 2px;
  color: #fff;
  z-index: 2;
  border-radius: 0 4px 4px 0;
  font-weight: normal !important;
  bottom: 0;
}
.iztro-palace-gz {
  text-align: right;
  cursor: pointer;
}
.iztro-palace-gz span {
  display: inline-block;
  padding: 0 1px;
  text-wrap: nowrap;
}
.iztro-palace-dynamic-name {
  text-align: center;
  display: flex;
  white-space: nowrap;
  gap: 3px;
  justify-content: center;
}
.iztro-palace-dynamic-name .iztro-palace-dynamic-name-decadal {
  color: var(--iztro-color-decadal);
}
.iztro-palace-dynamic-name .iztro-palace-dynamic-name-yearly {
  color: var(--iztro-color-yearly);
}
.iztro-palace-dynamic-name .iztro-palace-dynamic-name-monthly {
  color: var(--iztro-color-monthly);
}
.iztro-palace-dynamic-name .iztro-palace-dynamic-name-daily {
  color: var(--iztro-color-daily);
}
.iztro-palace-dynamic-name .iztro-palace-dynamic-name-hourly {
  color: var(--iztro-color-hourly);
}

.iztro-center-palace {
  grid-area: ct;
  position: relative;
  width: 100%;
  height: 100%;
}
.iztro-center-palace-centralize {
  text-align: center;
}
.iztro-center-palace ul.basic-info {
  margin: 10px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
}
.iztro-center-palace ul.basic-info li {
  list-style: none;
}
.iztro-center-palace .center-title {
  padding: 5px 0;
  margin: 0;
  font-size: var(--iztro-star-font-size-big);
  font-weight: bold;
  text-align: center;
  border-bottom: 1px dashed var(--iztro-color-border);
}

.iztro-center-palace .astrolabe-selectors {
  margin: 10px 10px 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--iztro-star-font-size-small);
  color: var(--iztro-color-text);
}

.iztro-center-palace .astrolabe-selectors label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.iztro-center-palace-centralize .astrolabe-selectors {
  justify-content: center;
}

.iztro-center-palace .astrolabe-selectors select {
  min-width: 80px;
  padding: 2px 6px;
  border: 1px solid var(--iztro-color-border);
  border-radius: 3px;
  color: var(--iztro-color-text);
  background: transparent;
  font: inherit;
}

.horo-buttons {
  margin: 10px;
  font-size: var(--iztro-star-font-size-small);
  display: flex;
  justify-content: space-around;
}
.horo-buttons .center-button {
  display: block;
  text-align: center;
  padding: 5px;
  border: 1px solid var(--iztro-color-border);
  cursor: pointer;
  transition: all 0.25s ease-in-out;
  color: var(--iztro-color-text);
  user-select: none;
}
.horo-buttons .center-button:not(.disabled):hover {
  color: var(--iztro-color-major);
  background-color: var(--iztro-color-border);
}
.horo-buttons .center-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.horo-buttons .center-horo-hour {
  display: flex;
  align-items: center;
}

.iztro-copyright {
  position: absolute;
  bottom: 3px;
  right: 3px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.2);
  text-decoration: none;
  text-shadow: 1px 1px rgba(255, 255, 255, 0.3);
}

#palace-line {
  stroke: var(--iztro-color-awesome);
  opacity: 0.6;
  transition: all 0.25s ease-in-out;
}
#palace-line.decadal {
  stroke: var(--iztro-color-decadal);
}

.solar-horoscope {
  display: flex;
  align-items: center;
  gap: 10px;
}

.solar-horoscope-centralize {
  justify-content: center;
}

.solar-horoscope .today {
  display: inline-block;
  font-size: var(--iztro-star-font-size-small);
  cursor: pointer;
  border: 1px solid var(--iztro-color-border);
  padding: 0 5px;
  transition: all 0.25s ease-in-out;
}

.solar-horoscope .today:hover {
  color: var(--iztro-color-major);
  background-color: var(--iztro-color-border);
}

.iztro-astrolabe {
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
  display: grid;
  position: relative;
  width: 100%;
  grid-gap: 3px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  grid-template-areas:
    "g3 g4 g5 g6"
    "g2 ct ct g7"
    "g1 ct ct g8"
    "g0 g11 g10 g9";
}

.iztro-star-mutagen {
  font-weight: normal;
  font-size: var(--iztro-star-font-size-small);
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  margin-left: 1px;
  padding: 0 2px;
}

.star-with-mutagen {
  position: relative;
}

.star-with-mutagen::before {
  bottom: 0;
  content: " ";
  left: -4px;
  position: absolute;
  top: 0;
  width: 4px;
  transition: all 0.25s ease-in-out;
}

.star-with-mutagen::after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: -4px;
  right: 0;
  height: 4px;
  transition: all 0.25s ease-in-out;
}
.iztro-astrolabe-theme-default {
  --iztro-star-font-size-big: 13px;
  --iztro-star-font-size-small: 12px;
  --iztro-color-major: #531dab;
  --iztro-color-focus: #000;
  --iztro-color-quan: #2f54eb;
  --iztro-color-tough: #612500;
  --iztro-color-awesome: #d4380d;
  --iztro-color-active: #1890ff;
  --iztro-color-happy: #c41d7f;
  --iztro-color-nice: #237804;
  --iztro-color-decorator-1: #90983c;
  --iztro-color-decorator-2: #813359;
  --iztro-color-text: #8c8c8c;
  --iztro-color-border: #00152912;
  --iztro-color-decadal: var(--iztro-color-active);
  --iztro-color-yearly: var(--iztro-color-decorator-2);
  --iztro-color-monthly: var(--iztro-color-nice);
  --iztro-color-daily: var(--iztro-color-decorator-1);
  --iztro-color-hourly: var(--iztro-color-text);
}

.iztro-astrolabe {
  text-align: left;
}

.iztro-palace {
  border: 1px solid var(--iztro-color-border);
}

.iztro-star-soft,
.iztro-star-tough,
.iztro-star-adjective,
.iztro-star-flower,
.iztro-star-helper,
.iztro-palace-fate,
.iztro-palace-horo-star,
.iztro-palace-scope,
.iztro-palace-dynamic-name,
.iztro-palace-lft24,
.iztro-palace-rgt24 {
  font-size: var(--iztro-star-font-size-small);
  font-weight: normal;
  text-wrap: nowrap;
}
.iztro-palace-scope-age {
  text-wrap: balance;
}
.iztro-palace-scope-age,
.iztro-palace-scope-decadal {
  color: var(--iztro-color-text);
}

.iztro-palace-lft24 {
  color: var(--iztro-color-decorator-1);
}
.iztro-palace-rgt24 {
  color: var(--iztro-color-decorator-2);
  text-wrap: nowrap;
}

.iztro-star-major,
.iztro-star-tianma,
.iztro-star-lucun,
.iztro-palace-name,
.iztro-palace-gz {
  font-size: var(--iztro-star-font-size-big);
  font-weight: bold;
}

.iztro-star-tianma {
  color: var(--iztro-color-active);
}
.iztro-star-lucun {
  color: var(--iztro-color-awesome);
}

.iztro-palace-horo-star .iztro-star {
  opacity: 0.75;
}
.iztro-palace-horo-star .iztro-star-tianma,
.iztro-palace-horo-star .iztro-star-lucun {
  font-weight: normal;
  font-size: var(--iztro-star-font-size-small);
}

.iztro-star-brightness,
.iztro-star-adjective {
  font-style: normal;
  font-weight: normal;
  color: var(--iztro-color-text);
}

.iztro-star-brightness {
  opacity: 0.5;
}

.iztro-star-major,
.iztro-star-soft,
.iztro-palace-name {
  color: var(--iztro-color-major);
}
.iztro-star-tough {
  color: var(--iztro-color-tough);
}
.iztro-star-flower {
  color: var(--iztro-color-happy);
}
.iztro-star-helper,
.iztro-palace-gz {
  color: var(--iztro-color-nice);
}

.iztro-star-mutagen.mutagen-0 {
  background-color: var(--iztro-color-awesome);
}
.iztro-star-mutagen.mutagen-1 {
  background-color: var(--iztro-color-quan);
}
.iztro-star-mutagen.mutagen-2 {
  background-color: var(--iztro-color-nice);
}
.iztro-star-mutagen.mutagen-3 {
  background-color: var(--iztro-color-focus);
}

.iztro-star-mutagen.mutagen-decadal {
  background-color: var(--iztro-color-decadal);
  opacity: 0.6;
}
.iztro-star-mutagen.mutagen-yearly {
  background-color: var(--iztro-color-yearly);
  opacity: 0.6;
}
.iztro-star-mutagen.mutagen-monthly {
  background-color: var(--iztro-color-monthly);
  opacity: 0.6;
}
.iztro-star-mutagen.mutagen-daily {
  background-color: var(--iztro-color-daily);
  opacity: 0.6;
}
.iztro-star-mutagen.mutagen-hourly {
  background-color: var(--iztro-color-hourly);
  opacity: 0.6;
}

.iztro-palace-gz .iztro-palace-gz-active {
  background-color: var(--iztro-color-nice);
  color: #fff;
  font-weight: normal;
}

.iztro-star-mutagen-0 {
  background-color: var(--iztro-color-awesome);
  color: #fff;
  font-weight: normal;
}

.iztro-star-mutagen-1 {
  background-color: var(--iztro-color-quan);
  color: #fff;
  font-weight: normal;
}

.iztro-star-mutagen-2 {
  background-color: var(--iztro-color-nice);
  color: #fff;
  font-weight: normal;
}

.iztro-star-mutagen-3 {
  background-color: var(--iztro-color-focus);
  color: #fff;
  font-weight: normal;
}

.iztro-star-self-mutagen-0::before {
  background-color: var(--iztro-color-awesome);
}
.iztro-star-self-mutagen-1::before {
  background-color: var(--iztro-color-quan);
}
.iztro-star-self-mutagen-2::before {
  background-color: var(--iztro-color-nice);
}
.iztro-star-self-mutagen-3::before {
  background-color: var(--iztro-color-focus);
}

.iztro-star-hover-mutagen-0::after {
  background-color: var(--iztro-color-awesome);
}
.iztro-star-hover-mutagen-1::after {
  background-color: var(--iztro-color-quan);
}
.iztro-star-hover-mutagen-2::after {
  background-color: var(--iztro-color-nice);
}
.iztro-star-hover-mutagen-3::after {
  background-color: var(--iztro-color-focus);
}

.iztro-palace-name-body {
  font-size: var(--iztro-star-font-size-small);
  font-weight: normal;
  position: absolute;
  margin-top: 2px;
}

.iztro-palace-fate span {
  display: block;
  padding: 0 3px;
  border-radius: 4px;
  color: #fff;
  background-color: var(--iztro-color-major);
  cursor: pointer;
}

.iztro-palace-center-item {
  font-size: var(--iztro-star-font-size-small);
  line-height: 22px;
}

.iztro-palace-center-item label {
  color: var(--iztro-color-text);
}

.iztro-palace-center-item span {
  color: var(--iztro-color-decorator-1);
}

.gender {
  display: inline-block;
  margin-right: 5px;
}
.gender.gender-male {
  color: var(--iztro-color-quan);
}
.gender.gender-female {
  color: var(--iztro-color-happy);
}

/* react-iztro 暗色主题覆盖 — 适配九宫八卦暗色 UI */
/* 只覆盖 CSS 变量 + 边框/背景，星盘结构样式保留 */

.iztro-astrolabe-theme-default {
  --iztro-star-font-size-big: 13px;
  --iztro-star-font-size-small: 12px;
  --iztro-color-major: #e8c07a;      /* 主星: 金色 */
  --iztro-color-focus: #e8e8e8;      /* 化忌文字: 近白 */
  --iztro-color-quan: #7aa2f7;       /* 化权: 蓝 */
  --iztro-color-tough: #d8a657;      /* 煞星: 橙棕 */
  --iztro-color-awesome: #f7768e;    /* 化忌/警示: 红 */
  --iztro-color-active: #7dcfff;     /* 大限: 青 */
  --iztro-color-happy: #bb9af7;      /* 桃花星: 紫 */
  --iztro-color-nice: #9ece6a;       /* 吉星: 绿 */
  --iztro-color-decorator-1: #e0af68;
  --iztro-color-decorator-2: #f7768e;
  --iztro-color-text: #9aa5b5;       /* 次要文字 */
  --iztro-color-border: rgba(255, 255, 255, 0.14);
  --iztro-color-decadal: #7dcfff;
  --iztro-color-yearly: #f7768e;
  --iztro-color-monthly: #9ece6a;
  --iztro-color-daily: #e0af68;
  --iztro-color-hourly: #9aa5b5;
}

.iztro-astrolabe {
  background: transparent;
}

.iztro-palace {
  border-color: var(--iztro-color-border);
}