/* ============================================================
   九宫格数字详情卡片.css  —  可复用模块
   依赖宿主页面 CSS 变量：--radius-sm/--radius-lg/--bg-warm/--shadow-lg
     --gray-400/500/600/700/800 --gold-400/700 --purple-400/600/700
     --card-bg --transition-fast --fs-base
   所有类名 dm- 前缀，自包含，不依赖宿主 .modal-* 样式
   ============================================================ */

/* ---- 遮罩与外框 ---- */
.dm-overlay{
  position:fixed;inset:0;z-index:9999;background:rgba(12,10,20,.5);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(8px);
}
.dm-overlay.active{opacity:1;pointer-events:auto}
.dm-box{
  background:var(--card-bg,#fff);border:2px solid var(--purple-400,#9B7BE0);
  border-radius:var(--radius-lg,18px);padding:0;
  max-width:520px;width:92%;max-height:85vh;overflow-y:auto;
  position:relative;animation:dmFade .3s ease;
}
.dm-box::before{
  content:'';position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--gold-400,#D9923D),var(--purple-400,#9B7BE0),var(--purple-600,#7B5BC4));
  border-radius:var(--radius-lg,18px) var(--radius-lg,18px) 0 0;
}
@keyframes dmFade{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.dm-close{
  position:absolute;top:12px;right:14px;width:34px;height:34px;
  background:none;border:none;font-size:24px;cursor:pointer;
  color:var(--gray-400,#aaa);line-height:1;z-index:10;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;transition:all var(--transition-fast,.2s);
}
.dm-close:hover{color:var(--purple-600,#7B5BC4);background:rgba(139,94,196,.08)}

/* ---- 头部 ---- */
.dm-header{padding:22px 24px 16px;display:flex;align-items:center;gap:14px;border-bottom:2px solid rgba(139,94,196,.1)}
.dm-digit{
  width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;font-weight:800;color:#fff;flex-shrink:0;
  box-shadow:inset 0 2px 6px rgba(255,255,255,.3),inset 0 -2px 6px rgba(0,0,0,.15);
  position:relative;
}
.dm-digit::after{
  content:'';position:absolute;inset:-3px;border-radius:50%;
  border:2px solid rgba(255,255,255,.25);pointer-events:none;
}
.dm-header-info{display:flex;flex-direction:column;gap:4px}
.dm-header-info .dm-organ{font-size:1.25rem;font-weight:700;color:var(--gray-800,#222);letter-spacing:.02em}
.dm-header-info .dm-tags{display:flex;gap:6px;flex-wrap:wrap}
.dm-tag{
  font-size:.7rem;font-weight:600;padding:3px 10px;border-radius:6px;
  white-space:nowrap;letter-spacing:.03em;
  border:1px solid rgba(180,140,110,.12);
}

/* ---- 正文区段 ---- */
.dm-content{padding:18px 24px 22px;display:flex;flex-direction:column;gap:14px}
.dm-section{display:flex;flex-direction:column;gap:5px;position:relative;padding-left:10px}
.dm-section::before{
  content:'';position:absolute;left:0;top:2px;bottom:2px;width:3px;
  border-radius:2px;background:linear-gradient(180deg,var(--purple-400,#9B7BE0),var(--gold-400,#D9923D));
  opacity:.5;
}
.dm-section-label{
  font-size:.72rem;font-weight:700;color:var(--purple-600,#7B5BC4);
  letter-spacing:.08em;margin-bottom:2px;
}
.dm-section-text{font-size:.88rem;color:var(--gray-700,#555);line-height:1.6}

/* ---- 正负性格卡片 ---- */
.dm-traits{display:flex;gap:10px}
.dm-trait-card{
  flex:1;padding:12px 14px;border-radius:var(--radius-sm,8px);
  font-size:.82rem;line-height:1.55;position:relative;overflow:hidden;
}
.dm-trait-card.pos{background:rgba(39,174,96,.08);color:#1e6e34;border:1.5px solid rgba(39,174,96,.22)}
.dm-trait-card.neg{background:rgba(231,76,60,.07);color:#a52a1e;border:1.5px solid rgba(231,76,60,.2)}
.dm-trait-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
}
.dm-trait-card.pos::before{background:#27AE60}
.dm-trait-card.neg::before{background:#E74C3C}
.dm-trait-card .dm-tc-label{
  font-size:.7rem;font-weight:700;letter-spacing:.06em;margin-bottom:5px;
  display:flex;align-items:center;gap:4px;
}
.dm-trait-card.pos .dm-tc-label{color:#27AE60}
.dm-trait-card.neg .dm-tc-label{color:#E74C3C}

/* ---- 修正方法 ---- */
.dm-fix{
  background:linear-gradient(135deg,rgba(217,146,61,.1),rgba(139,94,196,.06));
  border:1.5px solid var(--gold-400,#D9923D);border-radius:var(--radius-sm,8px);
  padding:12px 14px;font-size:.85rem;color:var(--gold-700,#8a5a1a);
  font-weight:600;line-height:1.55;position:relative;overflow:hidden;
}
.dm-fix::before{
  content:'';position:absolute;top:0;left:0;width:4px;height:100%;
  background:linear-gradient(180deg,var(--gold-400,#D9923D),var(--purple-400,#9B7BE0));
}
.dm-fix .dm-fix-label{
  font-size:.7rem;font-weight:700;color:var(--purple-600,#7B5BC4);
  letter-spacing:.06em;margin-bottom:4px;display:flex;align-items:center;gap:4px;
}

/* ---- 底部信息 ---- */
.dm-footer-info{
  padding:14px 24px 18px;border-top:2px solid rgba(139,94,196,.08);
  display:flex;flex-direction:column;gap:8px;font-size:.78rem;color:var(--gray-500,#777);
}
.dm-footer-info .dm-fi-row{display:flex;gap:8px;align-items:flex-start}
.dm-footer-info .dm-fi-k{
  white-space:nowrap;flex-shrink:0;font-weight:700;color:var(--purple-600,#7B5BC4);
  padding:1px 8px;border-radius:4px;background:rgba(139,94,196,.07);font-size:.72rem;
}
.dm-footer-info .dm-fi-v{color:var(--gray-600,#666);line-height:1.5;flex:1}

/* ---- 转到九宫格按钮 ---- */
.dm-jgg-btn-wrap{
  padding:12px 24px 18px;border-top:1px solid rgba(180,140,110,.08);
  display:flex;justify-content:center;
}
.dm-jgg-btn{
  display:inline-flex;align-items:center;gap:6px;padding:10px 24px;
  border-radius:var(--radius-sm,8px);background:var(--bg-warm,#faf6f0);
  border:1.5px solid var(--purple-400,#9B7BE0);color:var(--purple-600,#7B5BC4);
  font-size:var(--fs-base,.88rem);font-weight:600;cursor:pointer;
  transition:all var(--transition-fast,.2s);white-space:nowrap;text-decoration:none;
}
.dm-jgg-btn:hover{
  border-color:var(--purple-600,#7B5BC4);color:#fff;
  background:linear-gradient(135deg,var(--gold-400,#D9923D),var(--purple-400,#9B7BE0));
}

/* ---- 免责声明 ---- */
.dm-disclaimer{
  padding:10px 24px 16px;text-align:center;font-size:.72rem;
  color:var(--gray-400,#999);line-height:1.5;
  border-top:1px dashed rgba(139,94,196,.15);
  white-space:nowrap;letter-spacing:.04em;
}
.dm-version{
  text-align:right;padding:0 18px 8px;font-size:.6rem;
  color:var(--gray-400,#bbb);opacity:.5;
}

/* ---- 内置道医九宫格小程序二维码弹窗 ---- */
.dm-qr-overlay{position:fixed;inset:0;z-index:10001;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
.dm-qr-overlay.active{opacity:1;pointer-events:auto}
.dm-qr-box{position:relative;background:#fff;border-radius:16px;padding:28px 24px 24px;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:90vw;max-height:90vh;box-shadow:0 24px 80px rgba(0,0,0,.3)}
.dm-qr-box img{width:280px;height:280px;object-fit:cover;border-radius:8px}
.dm-qr-tip{margin:0;font-size:15px;color:#333;font-weight:500;text-align:center}
.dm-qr-close{position:absolute;top:8px;right:14px;background:none;border:none;font-size:26px;color:#999;cursor:pointer;line-height:1}
.dm-qr-close:hover{color:#333}

/* ---- 响应式 ---- */
@media (max-width:600px){
  .dm-box{max-height:90vh;overflow-y:auto;width:96%}
  .dm-overlay{align-items:flex-start;padding-top:5vh;padding-bottom:5vh}
  .dm-header{padding:16px 16px 12px}
  .dm-content{padding:14px 16px 16px}
  .dm-footer-info{padding:12px 16px 14px}
  .dm-jgg-btn-wrap{padding:10px 16px 14px}
  .dm-traits{flex-direction:column}
  .dm-qr-box img{width:220px;height:220px}
}