/* 紫微斗数 - Element Plus 现代化样式 */

.ziwei-modern {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 标题 */
.zw-header {
  text-align: center;
  margin-bottom: 24px;
  padding: 24px;
  background: linear-gradient(135deg, #8B4513 0%, #A0522D 100%);
  border-radius: 12px;
  color: white;
}

.zw-title {
  font-size: 28px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.title-icon { font-size: 32px; }

/* 输入卡片 */
.input-card { margin-bottom: 20px; }
.input-item { display: flex; flex-direction: column; gap: 8px; }
.input-item label { font-size: 13px; color: #606266; font-weight: 600; }

/* 信息卡片 */
.info-card { margin-bottom: 20px; }
.info-item { text-align: center; padding: 12px; background: #f5f7fa; border-radius: 8px; }
.info-label { font-size: 12px; color: #909399; display: block; margin-bottom: 4px; }
.info-value { font-size: 18px; font-weight: 700; color: #303133; }
.info-value.wuju { color: #E6A23C; }
.info-value.ming { color: #F56C6C; }
.info-value.shen { color: #409EFF; }

/* 四化 */
.sihua-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px;
  border-radius: 8px;
  min-width: 70px;
  cursor: pointer;
  transition: transform 0.2s;
}
.sihua-item:hover { transform: translateY(-2px); }
.sihua-item.化禄 { background: #FFF8DC; border: 2px solid #FFA500; }
.sihua-item.化权 { background: #FFE4E1; border: 2px solid #DC143C; }
.sihua-item.化科 { background: #E6F3FF; border: 2px solid #4169E1; }
.sihua-item.化忌 { background: #F5F5F5; border: 2px solid #2F4F4F; }
.sihua-xing { font-size: 16px; font-weight: 700; }
.sihua-hua { font-size: 12px; margin-top: 2px; }
.sihua-item.化禄 .sihua-hua { color: #FFA500; }
.sihua-item.化权 .sihua-hua { color: #DC143C; }
.sihua-item.化科 .sihua-hua { color: #4169E1; }
.sihua-item.化忌 .sihua-hua { color: #2F4F4F; }

/* 命盘容器 */
.pan-wrapper { position: relative; margin: 20px 0; }
.connection-layer {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 5;  /* 提高层级，确保在中宫之上 */
}

/* 宫位网格 - 使用4x4网格布局 */
.palace-grid { 
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas: 
    "g4  g5  g6  g7"
    "g3  mid mid g8"
    "g2  mid mid g9"
    "g1  g0  g11 g10";
  gap: 6px;
  aspect-ratio: 1;
  position: relative;
  z-index: 2;
}

/* 为每个宫位定义 grid-area */
.palace-grid > [data-pos="0"] { grid-area: g0; }
.palace-grid > [data-pos="1"] { grid-area: g1; }
.palace-grid > [data-pos="2"] { grid-area: g2; }
.palace-grid > [data-pos="3"] { grid-area: g3; }
.palace-grid > [data-pos="4"] { grid-area: g4; }
.palace-grid > [data-pos="5"] { grid-area: g5; }
.palace-grid > [data-pos="6"] { grid-area: g6; }
.palace-grid > [data-pos="7"] { grid-area: g7; }
.palace-grid > [data-pos="8"] { grid-area: g8; }
.palace-grid > [data-pos="9"] { grid-area: g9; }
.palace-grid > [data-pos="10"] { grid-area: g10; }
.palace-grid > [data-pos="11"] { grid-area: g11; }

/* 中宫 */
.center-palace { grid-area: mid; }

/* 宫位卡片 */
.palace-card {
  background: white;
  border: 2px solid #dcdfe6;
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.3s;
  min-height: 0;
  overflow: hidden;
}
.palace-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-color: #409EFF;
}
.palace-card.is-ming {
  border-color: #F56C6C;
  border-width: 3px;
  background: linear-gradient(135deg, #FFF5F5 0%, #FFEEEE 100%);
}
.palace-card.is-shen {
  border-color: #409EFF;
  border-width: 2px;
  background: linear-gradient(135deg, #F0F9FF 0%, #E6F7FF 100%);
}
.palace-card.is-selected {
  border-color: #E6A23C !important;
  border-width: 3px !important;
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(230,162,60,0.3);
  z-index: 10;
}

/* 宫头 */
.palace-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px dashed #e4e7ed;
}
.palace-header .position {
  font-size: 11px;
  color: #909399;
  background: #f5f7fa;
  padding: 2px 6px;
  border-radius: 4px;
}

/* 大限、长生 */
.daxian { margin: 2px 0; }
.changsheng {
  font-size: 11px;
  color: #F56C6C;
  text-align: center;
  font-weight: 600;
}

/* 星曜 */
.stars { margin-top: auto; }
.stars.zhu { display: flex; flex-direction: column; gap: 2px; }
.star-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.star-name {
  font-size: 14px;
  font-weight: 700;
  color: #DC143C;
}
.sihua-badge { font-size: 12px; }
.brightness {
  font-size: 9px;
  color: #909399;
  background: #f5f7fa;
  padding: 1px 3px;
  border-radius: 3px;
}
.stars.fu { margin-top: 4px; }

/* 中宫样式 */
.center-palace {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FFF8E7 0%, #FFEFD5 100%);
  border: 2px solid #E6A23C;
  border-radius: 8px;
  padding: 4px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(230, 162, 60, 0.2);
  min-height: 0;
  overflow: hidden;
}
.center-title {
  font-size: 14px;
  font-weight: 600;
  color: #8B4513;
  margin-bottom: 4px;
}
.center-info {
  color: #606266;
  font-size: 11px;
  margin-top: 4px;
  line-height: 1.4;
}

/* 响应式 */
@media (max-width: 768px) {
  .ziwei-modern { padding: 12px; }
  .zw-title { font-size: 20px; flex-wrap: wrap; }
  .palace-grid { gap: 4px; }
  .palace-card { padding: 4px; border-radius: 6px; }
  .star-name { font-size: 11px; }
  .center-title { font-size: 12px; }
  .center-info { font-size: 10px; }
}