.bg-gray-50{
     background-color: #e5e5e5;
}
.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 0 2px;
}
.bg-green-50 {
    background-color: #f0fdf4;
}
.bg-green-100 {
    background-color: #dcfce7;
}

.text-green-800 {
    color: #166534;
}
.bg-yellow-100 {
    background-color: #fef9c3;
}
.text-yellow-800 {
    color: #854d0e;
}
.bg-gray-100 {
    background-color: #f3f4f6;
}
.bg-green-500 {
    background-color: #22c55e;
}
.bg-yellow-500 {
    background-color: #eab308;
}
.text-gray-700 {
    color: #374151;
}
.font-medium {
    font-weight: 500;
}
.text-lg {
    font-size: 1.125rem;
}

.border-e5e5e5 {
    border-color: #e5e5e5;
}
.bagua-container{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
}
.bagua-container .bagua-items-row{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.zhifu-container{
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
}

.zhifu-container .zhifu-items{
   display:grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 0.5rem;
}
@media (max-width: 576px) {
    .zhifu-container {
        flex-direction: row;
    }
	.zhifu-container .zhifu-items{
		grid-template-columns: repeat(1, 1fr);
		flex:1;
	}
    .bagua-container{
		flex-direction: row;
        gap: 0.8rem;
	}
    .bagua-container .bagua-items-row{
		grid-template-columns: repeat(1, 1fr);
        flex:1;
        gap: 0.8rem;
	}
}


/* 响应式卡片布局 */
.card-container {
     display: grid;
         grid-template-columns: repeat(2, 1fr);
          gap: 0.5rem;
}
 .card-container.hujia {
      grid-template-columns: repeat(5, 1fr);
  }
@media (min-width: 576px) {
    .card-container {
                grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 992px) {
    .card-container {
                 grid-template-columns: repeat(5, 1fr);
        }
    .card-container.hujia{
                  grid-template-columns: repeat(10, 1fr);
     }

}

/* 天干卡片图标样式 */
.icon-jia {
    font-size: 2.5rem;
    color: #4CAF50;
}
.icon-yi {
    font-size: 2.5rem;
    color: #8BC34A;
}
.icon-bing {
    font-size: 2.5rem;
    color: #FF9800;
}
.icon-ding {
    font-size: 2.5rem;
    color: #FFC107;
}
.icon-wu {
    font-size: 2.5rem;
    color: #795548;
}
.icon-ji {
    font-size: 2.5rem;
    color: #CDDC39;
}
.icon-geng {
    font-size: 2.5rem;
    color: #607D8B;
}
.icon-xin {
    font-size: 2.5rem;
    color: #2196F3;
}
.icon-ren {
    font-size: 2.5rem;
    color: #2196F3;
}
.icon-gui {
    font-size: 2.5rem;
    color: #03A9F4;
}

/* 圆点颜色样式 */
.dot-yellow {
    background-color: #FFD700;
}
.dot-green {
    background-color: #4CAF50;
}
.dot-purple {
    background-color: #9C27B0;
}
.dot-orange {
    background-color: #FF5722;
}
.dot-brown {
    background-color: #795548;
}
.dot-gray {
    background-color: #9E9E9E;
}
.dot-blue {
    background-color: #2196F3;
}

/* 详细信息区域图标样式 */
.attribute-icon {
    font-size: 1.5rem;
}

/* 表格图标样式 */
.table-icon-tree {
    color: #4CAF50;
}
.table-icon-leaf {
    color: #8BC34A;
}
.table-icon-sun {
    color: #FF9800;
}
.table-icon-lightbulb {
    color: #FFC107;
}
.table-icon-geo {
    color: #795548;
}
.table-icon-grain {
    color: #CDDC39;
}
.table-icon-shield {
    color: #607D8B;
}
.table-icon-diamond {
    color: #2196F3;
}
.table-icon-water {
    color: #2196F3;
}
.table-icon-droplet {
    color: #03A9F4;
}
.table-icon-triangle {
    color: #4CAF50;
}
.table-icon-fire {
    color: #FF5722;
}
.table-icon-mountain {
    color: #795548;
}
.table-icon-diamond-gold {
    color: #607D8B;
}
.table-icon-droplet-blue {
    color: #2196F3;
}
.tg_zwm_rels{
    overflow-x: scroll;
}
@media (max-width:768px) {
    .row.detail-container>*{
    	padding-left: 0;
    	padding-right:0;
    }
}

/* 卡片样式 —— 柔和边框、圆角、轻微过渡 */
.gua-card {
border: 1px solid #e6dfd7;
border-radius: 20px;
background-color: #ffffff;
transition: transform 0.15s ease, box-shadow 0.2s ease;
height: 100%;
--bs-gutter-x:1rem;
}
/* 链接卡片 (甲子) 保持文字颜色不变，无下划线，提升点击区域 */
a.gua-card {
text-decoration: none;
color: inherit;
cursor: pointer;
}
a.gua-card:hover {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
transform: translateY(-2px);
border-color: #d6cdc0;
}
div.gua-card:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.03);
}
/* 卡片内标题区域 */
.gua-card .card-head {
text-align: center;
margin-bottom: 1rem;
}
.gua-card .gz-name {
font-size: 2rem;
font-weight: 700;
color: #222;
line-height: 1.2;
display: inline-block;
margin-right: 6px;
}
.gua-card .gz-yao {
font-size: 1rem;
color: #7a7a7a;
display: inline-block;
font-weight: 400;
}
.gua-card .gz-info {
font-size: 0.8rem;
color: #7a7a7a;
letter-spacing: 0.3px;
}
.gua-card .year-badge {
font-size: 0.85rem;
color: #4a4a4a;
padding: 0.2rem 0.8rem;
display: inline-block;
margin-top: 6px;
}
.gua-card .info-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.5rem 0.8rem;
margin-top: 0.5rem;
}


.gua-card .grid-item {
font-size: 0.9rem;
padding: 0.25rem 0;
color: #333;
text-align: center;
white-space: nowrap;
}
.gua-card .grid-item.border-bottom {
border-bottom: 1px dashed #e9e1d8;
}
.gua-card .grid-item .label {
    color: #6c6c6c;
    margin-right: 4px;
    font-weight: 450;
}
/* 让卡片主体内边距舒适 */
.gua-card .card-body {
    padding: 1.5rem 1.2rem;
}
/* 辅助 focus 可见 (无障碍) */
a.gua-card:focus-visible {
    outline: 3px solid #a07a50;
    outline-offset: 2px;
}
/* 小屏适配：允许文字换行，避免溢出 */
@media (max-width: 480px) {
.gua-card .grid-item {
white-space: normal;
word-break: keep-all;
}
.gua-card .gz-name {
font-size: 1.6rem;
}
    .gua-card .card-body{
        padding: 1rem 0.5rem;
    }
    .gua-card .info-grid {
        gap: 0.2rem;
    }
}