/* ========================================================
   盛世创典 | 全局价值观九宫格编辑器专属样式 (Component CSS)
   ======================================================== */

/* 1. 遮罩层基础 */
.modal-overlay { 
  position: fixed; inset: 0; z-index: 1000; 
  display: flex; align-items: center; justify-content: center; 
  background: rgba(0, 0, 0, 0.7); 
}
.modal-overlay[hidden] { display: none; }

/* 2. 九宫格主面板 */
.value-editor { 
  width: 92%; max-width: 400px; height: 86vh; max-height: 750px; 
  background-size: 100% 88%; background-position: center 100%; 
  background-repeat: no-repeat; position: relative; 
}
.ve-tabs { 
  position: absolute; top: 13%; left: 2%; right: 3%; 
  display: flex; justify-content: space-between; z-index: 10; 
}
.ve-tab-btn { height: 42px; width: 22%; cursor: pointer; transition: transform 0.2s; }
.ve-tab-btn:active { transform: scale(0.95); }

/* 3. 网格与词条 */
.ve-grid-container { 
  position: absolute; top: 24%; bottom: 15%; left: 14%; right: 7%; 
  display: flex; flex-direction: column; z-index: 5; 
}
.ve-grid-3x3 { 
  flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); 
  grid-template-rows: repeat(3, 1fr); column-gap: 4%; row-gap: 2%; 
}
.quadrant-box { 
  display: grid; grid-template-columns: repeat(2, 1fr); 
  grid-template-rows: repeat(3, 1fr); column-gap: 1px; row-gap: 2px; 
}

/* 词条默认未选中状态 */
      .ve-kw-btn { width: 108% !important; height: 90% !important; margin: 0 !important; display: flex; align-items: center; justify-content: center; text-align: center; color: #5c3a21; font-size: 15px; line-height: 1.25; letter-spacing: 1px; border-radius: 4px; transition: all 0.2s ease; cursor: pointer; background: transparent; }


/* ========================================================
   🎯 目标3：分类主题色彩系统 (根据 JS 注入的 active-tab 动态响应)
   ======================================================== */

/* 基本选中状态 (默认兼容：社会主义与马克思原理的赤红色) */
.ve-kw-btn.selected { 
  background: rgba(122, 62, 35, 0.9); 
  color: #f7e8ca; 
  font-weight: 800; 
  border: 1px solid rgba(180, 67, 61, 0.4);
}

/* 1. 中华文明选中态 (鎏金黄) */
.ve-grid-container[data-active-tab="中华文明"] .ve-kw-btn.selected {
  background: rgba(197, 145, 58, 0.95); 
  color: #ffffff; 
  border: 1px solid rgba(247, 232, 202, 0.6);
  box-shadow: 0 2px 6px rgba(197, 145, 58, 0.3);
}

/* 2. 国际主流/普世选中态 (天青蓝) */
.ve-grid-container[data-active-tab="普世"] .ve-kw-btn.selected {
  background: rgba(74, 116, 140, 0.95); 
  color: #ffffff; 
  border: 1px solid rgba(176, 208, 224, 0.6);
  box-shadow: 0 2px 6px rgba(74, 116, 140, 0.3);
}

/* 4. 底部按钮与公理层 */
.ve-actions { 
  position: absolute; bottom: 2%; left: 7%; right: 10%; 
  display: flex; justify-content: space-around; 
  z-index: 100; /* 👈 将 10 改为 100，确保按钮永远在最顶层 */
  pointer-events: auto; /* 👈 增加这行，确保绝对能点击 */
}

.ve-action-btn {
  background: transparent; 
  border: none; 
  padding: 0; 
  outline: none;
  cursor: pointer;
}
.ve-action-btn img { height: 36px; display: block; }
.ve-action-btn:active { transform: scale(0.92); }

.ve-axiom-layer { 
  position: absolute; top: -1.3%; left: -4%; width: 104%; height: 102%; 
  background-size: 100% 100%; z-index: 20; transition: opacity 0.2s; 
}
.ve-axiom-layer[data-tab="马克思"], .ve-axiom-layer[data-tab="普世"] { 
  top: -1.8%; left: -3%; 
}

/* 5. 提示小弹窗组件 (超出上限、未保存提示等) */
.mini-dialog, .detail-card { 
  background: #fdf6ec; border: 2px solid #bda07b; border-radius: 8px; 
  padding: 20px; text-align: center; margin: 0 auto; z-index: 1001; 
  width: 85%;           
  max-width: 320px;     
}
.mini-dialog__title { font-size: 16px; color: #5c3a21; margin-bottom: 10px; }
.mini-dialog__desc { font-size: 13px; color: #8c7a6b; margin-bottom: 15px; }
.mini-dialog__actions { display: flex; gap: 10px; justify-content: center; margin-top: 15px;}
.mini-dialog__btn { padding: 8px 16px; border-radius: 4px; border: none; font-weight: bold; cursor: pointer;}
.btn-primary { background: #8c5a40; color: #fff; }
.btn-secondary { background: #e0d0b0; color: #5a2a12; }

/* 6. 已选词条池 */
.selected-tags-pool { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 15px; }
.pool-tag { 
  background: #8c5a40; color: #fff; padding: 4px 8px; 
  border-radius: 4px; font-size: 12px; display: flex; gap: 6px; cursor: pointer; 
}

/* 优化详情弹窗文本排版，支持商业多维解析展示 */
.detail-card__desc {
    font-size: 13px; 
    color: #4a4a4a; 
    line-height: 1.6;
    margin-bottom: 15px;
    background: rgba(255, 255, 255, 0.5);
    padding: 12px;
    border-radius: 6px;
    border: 1px solid rgba(189, 160, 123, 0.3);
}