/* Visual result views for生肖合婚 and罗喉日时. */
.aux-result { padding: 26px; background: #f8f8f8; }
.aux-result h3, .aux-result h4, .aux-result p { margin-top: 0; }
.zodiac-hero, .flying-hero { display: flex; align-items: center; gap: 22px; overflow: hidden; padding: 26px 30px; border-radius: 16px; background: linear-gradient(120deg, #171612, #312a1e); color: #fff; }
.zodiac-hero .eyebrow, .flying-hero .eyebrow { margin-bottom: 6px; color: #d5b874; }
.zodiac-hero h3, .flying-hero h3 { margin-bottom: 7px; color: #f1dfae; font: 600 24px "Noto Serif SC", serif; }
.zodiac-hero p, .flying-hero p { margin-bottom: 0; color: #c7c3b9; font-size: 12px; line-height: 1.75; }
.zodiac-orbit { position: relative; display: grid; flex: none; place-items: center; width: 96px; height: 96px; border: 1px solid #7d6a43; border-radius: 50%; }
.zodiac-orbit::before, .zodiac-orbit::after { content: ''; position: absolute; border: 1px solid rgba(213,184,116,.25); border-radius: 50%; }
.zodiac-orbit::before { inset: 8px; }.zodiac-orbit::after { inset: 18px; }
.zodiac-orbit span { position: absolute; top: 7px; right: 5px; z-index: 2; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #b39557; font-size: 12px; }
.zodiac-orbit b { z-index: 1; color: #e4c57f; font: 500 44px "Noto Serif SC", serif; }
.zodiac-score { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-left: auto; }
.zodiac-score span { min-width: 90px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: #c9c5bb; text-align: center; font-size: 11px; }
.zodiac-score b { display: block; margin-bottom: 2px; color: #e8ca86; font-size: 22px; }
.zodiac-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.relation-group { overflow: hidden; border: 1px solid #e9e9e9; border-radius: 14px; background: #fff; }
.relation-group > header { display: flex; align-items: center; gap: 11px; padding: 17px 19px; border-bottom: 1px solid #eee; }
.relation-group > header > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 700; }
.relation-group.positive > header > span { background: #5a946f; }.relation-group.caution > header > span { background: #b1665d; }
.relation-group header h3 { margin: 0 0 2px; font-size: 15px; }.relation-group header p { margin: 0; color: #999; font-size: 11px; }
.relation-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.relation-card-grid article { display: flex; gap: 11px; min-height: 120px; padding: 17px; border-right: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; }
.relation-card-grid article > i { display: grid; flex: none; place-items: center; width: 29px; height: 29px; border-radius: 8px; font-style: normal; }
.positive .relation-card-grid article > i { color: #4e8462; background: #edf6f0; }.caution .relation-card-grid article > i { color: #a4554d; background: #f9ecea; }
.relation-card-grid h4 { margin: 1px 0 4px; font-size: 14px; }.relation-card-grid p { margin: 0; color: #999; font-size: 11px; line-height: 1.55; }
.animal-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }.animal-chips b { display: grid; place-items: center; min-width: 31px; height: 31px; border: 1px solid #e4d7b9; border-radius: 50%; color: #8e702e; background: #fffcf5; font: 500 15px "Noto Serif SC", serif; }.animal-chips span { color: #aaa; font-size: 11px; }
.zodiac-balance { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 18px 21px; border: 1px solid #e9dfca; border-radius: 13px; background: #fffdf7; }
.zodiac-balance > span { display: grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #9f7c35; background: #f4ead3; font-size: 19px; }
.zodiac-balance h3 { margin: 0 0 4px; font-size: 14px; }.zodiac-balance p { margin: 0; color: #777; font-size: 12px; line-height: 1.7; }.zodiac-balance p b { display: inline-grid; place-items: center; width: 25px; height: 25px; margin-right: 5px; border-radius: 50%; color: #fff; background: #a98948; }

.flying-hero { justify-content: space-between; }
.flying-seal { display: grid; flex: none; place-items: center; width: 68px; height: 68px; border: 1px solid #9c824c; border-radius: 50%; color: #d4b46e; font: 500 23px/1.1 "Noto Serif SC", serif; text-align: center; }
.star-legend, .palace-board, .month-flight, .pressure-board, .daily-board { margin-top: 14px; overflow: hidden; border: 1px solid #e8e8e8; border-radius: 14px; background: #fff; }
.star-legend > header, .palace-board > header, .month-flight > header, .pressure-board > header, .daily-board > header { display: flex; justify-content: space-between; align-items: center; padding: 16px 19px; border-bottom: 1px solid #eee; }
.star-legend header h3, .palace-board header h3, .month-flight header h3, .pressure-board header h3, .daily-board header h3 { margin: 0 0 3px; font-size: 15px; }
.star-legend header p, .palace-board header p, .month-flight header p, .pressure-board header p, .daily-board header p { margin: 0; color: #aaa; font-size: 11px; }
.star-legend > div { display: grid; grid-template-columns: repeat(3, 1fr); }
.star-legend article { position: relative; min-height: 92px; padding: 15px 16px 13px 20px; border-right: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; }
.star-legend article::before { content: ''; position: absolute; top: 16px; bottom: 16px; left: 10px; width: 3px; border-radius: 9px; background: #aaa; }
.star-legend article.good::before { background: #5d9871; }.star-legend article.caution::before { background: #b6675e; }
.star-legend article b { margin-right: 7px; font-size: 13px; }.star-legend article span { color: #a78643; font-size: 11px; }.star-legend article p { margin: 7px 0 0; color: #888; font-size: 11px; line-height: 1.55; }
.flying-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: 14px; }
.palace-nine-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; padding: 18px; background: #eee; }
.palace-nine-grid article { display: grid; min-height: 105px; place-items: center; align-content: center; gap: 4px; background: #fff; }
.palace-nine-grid article.center { background: #f9f4e8; }.palace-nine-grid article.good { box-shadow: inset 0 3px #6b9e79; }.palace-nine-grid article.caution { box-shadow: inset 0 3px #b97368; }
.palace-nine-grid small { color: #aaa; font-size: 10px; }.palace-nine-grid b { color: #9a7935; font: 500 25px "Noto Serif SC", serif; }.palace-nine-grid span { color: #555; font-size: 12px; }
.month-flight > div { display: grid; grid-template-columns: repeat(3, 1fr); }
.month-flight article { display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 10px 14px; border-right: 1px solid #eee; border-bottom: 1px solid #eee; }
.month-flight article small { color: #999; }.month-flight article b { font-size: 12px; }.month-flight article.good b { color: #4f8763; }.month-flight article.caution b { color: #a65c54; }
.pressure-board > div { display: grid; grid-template-columns: repeat(2, 1fr); }
.pressure-board article { padding: 17px 19px; border-right: 1px solid #eee; }.pressure-board article:last-child { border-right: 0; }
.pressure-board h4 { display: flex; justify-content: space-between; margin: 0 0 12px; font-size: 13px; }.pressure-board h4 span { color: #aaa; font-size: 10px; font-weight: 400; }
.pressure-board article > div { display: grid; gap: 7px; }.pressure-board article p { display: flex; align-items: center; gap: 6px; margin: 0; }.pressure-board article p b { width: 32px; color: #9d7c38; font-size: 11px; }.pressure-board article p span { padding: 3px 6px; border-radius: 4px; color: #777; background: #f6f6f6; font-size: 10px; }
.daily-board > header > span { display: grid; place-items: center; min-width: 46px; height: 28px; border-radius: 99px; color: #987733; background: #f7f0df; font-size: 11px; }
.day-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 14px; background: #f7f7f7; }
.day-card { overflow: hidden; border: 1px solid #e7e7e7; border-radius: 11px; background: #fff; }
.day-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 15px; border-bottom: 1px solid #eee; }
.day-card > header h4 { margin: 0 0 3px; font-size: 14px; }.day-card > header p { margin: 0; color: #999; font-size: 10px; }
.star-pill { flex: none; border-radius: 99px; padding: 6px 9px; color: #666; background: #f3f3f3; font-size: 10px; }.star-pill.good { color: #4b8060; background: #eaf4ed; }.star-pill.caution { color: #a2554e; background: #f9eae8; }
.day-pillars { display: flex; align-items: center; gap: 7px; padding: 12px 15px 6px; }.day-pillars b { display: grid; place-items: center; width: 38px; height: 30px; border: 1px solid #ded1b2; border-radius: 6px; color: #846929; font: 500 13px "Noto Serif SC", serif; }.day-pillars span { margin-left: auto; color: #999; font-size: 10px; }
.kill-hours { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 15px 10px; }.kill-hours small { margin-right: 3px; color: #999; }.kill-hours b { padding: 4px 7px; border-radius: 5px; color: #98524c; background: #f8eae8; font-size: 10px; }.kill-hours span { color: #aaa; font-size: 10px; }
.day-notices { display: flex; flex-wrap: wrap; gap: 5px; padding: 0 15px 10px; }.day-notices strong { border-radius: 5px; padding: 5px 8px; color: #9b534c; background: #fff0ed; font-size: 10px; }
.hour-wheel { display: grid; grid-template-columns: repeat(12, 1fr); border-top: 1px solid #eee; background: #fbfbfb; }
.hour-wheel span { display: grid; place-items: center; gap: 2px; min-width: 0; padding: 7px 1px; border-right: 1px solid #eee; }.hour-wheel span:last-child { border: 0; }.hour-wheel small { color: #999; font-size: 9px; }.hour-wheel b { color: #8e7133; font-size: 10px; }

@media (max-width: 850px) {
  .zodiac-columns, .flying-layout, .pressure-board > div { grid-template-columns: 1fr; }
  .zodiac-score { display: none; }
  .star-legend > div { grid-template-columns: repeat(2, 1fr); }
  .day-card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .aux-result { padding: 12px; }
  .zodiac-hero, .flying-hero { padding: 19px; }
  .zodiac-orbit { width: 72px; height: 72px; }.zodiac-orbit b { font-size: 32px; }
  .relation-card-grid, .star-legend > div { grid-template-columns: 1fr; }
  .palace-nine-grid { padding: 9px; }.palace-nine-grid article { min-height: 82px; }
  .month-flight > div { grid-template-columns: repeat(2, 1fr); }
  .hour-wheel { overflow-x: auto; grid-template-columns: repeat(12, 34px); }
}