/**
 * 通用心理测试结果页样式
 * 支持所有测试类型：MBTI、九型人格、大五人格等
 * 所有样式遵循横向编写、选择器换行的规则
 */

/* ===== 基础重置 ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { width: 100%; scroll-behavior: smooth; }
body { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%); min-height: 100vh; line-height: 1.7; width: 100%; color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }
.wrap { max-width: 75rem; margin: 0 auto; padding: 4.375rem 1.75rem 8.75rem; width: 100%; }

/* ===== CSS变量 - 主题色 ===== */
::root { --primary-color: #667eea; --primary-dark: #5a67d8; --primary-light: #818cf8; --success-color: #10b981; --warning-color: #f59e0b; --danger-color: #ef4444; --text-primary: #fff; --text-secondary: rgba(255,255,255,0.75); --text-muted: rgba(255,255,255,0.6); --bg-card: rgba(255,255,255,0.06); --bg-card-hover: rgba(255,255,255,0.1); --border-color: rgba(255,255,255,0.1); --border-color-light: rgba(255,255,255,0.08); }

/* ===== 加载遮罩 ===== */
.loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%); display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.5s ease, visibility 0.5s ease; }
.loading-overlay.loaded { opacity: 0; visibility: hidden; pointer-events: none; }
.loading-spinner { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.spinner-ring { position: absolute; width: 5rem; height: 5rem; border-radius: 50%; border: 0.25rem solid transparent; animation: spin 1.2s linear infinite; }
.spinner-ring:nth-child(1) { border-top-color: var(--primary-color); }
.spinner-ring:nth-child(2) { width: 4rem; height: 4rem; border-right-color: #764ba2; animation-delay: 0.15s; animation-direction: reverse; }
.spinner-ring:nth-child(3) { width: 3rem; height: 3rem; border-bottom-color: #a5b4fc; animation-delay: 0.3s; }
.loading-text { margin-top: 3.75rem; font-size: 1.125rem; color: var(--text-secondary); letter-spacing: 0.125rem; animation: pulse 1.5s ease-in-out infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* ===== 头部英雄区域 ===== */
.header-hero { padding: 2.5rem 2rem; background: var(--bg-card); border-radius: 2rem; margin-bottom: 2rem; border: 1px solid var(--border-color); display: flex; align-items: center; gap: 2.5rem; }
.hero-content { flex: 1; min-width: 0; }
.hero-image { flex-shrink: 0; width: 18rem; display: flex; align-items: center; justify-content: center; position: relative; }
.hero-image img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 0.5rem 2rem rgba(102,126,234,0.4)); position: relative; z-index: 2; }
.hero-decoration { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 14rem; height: 14rem; background: radial-gradient(circle, rgba(102,126,234,0.25) 0%, transparent 70%); border-radius: 50%; animation: pulse-glow 3s ease-in-out infinite; z-index: 1; }
.hero-decoration-inner { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 10rem; height: 10rem; background: radial-gradient(circle, rgba(167,139,250,0.3) 0%, transparent 70%); border-radius: 50%; animation: pulse-glow 2s ease-in-out infinite reverse; z-index: 1; }
@keyframes pulse-glow { 0%, 100% { opacity: 0.5; transform: translateY(-50%) scale(1); } 50% { opacity: 0.8; transform: translateY(-50%) scale(1.1); } }
.hero-right { flex-shrink: 0; width: 20rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.hero-big-emoji { font-size: 6rem; line-height: 1; animation: float-emoji 3s ease-in-out infinite; }
@keyframes float-emoji { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.type-badge { display: inline-block; padding: 0.75rem 1.75rem; background: linear-gradient(135deg, var(--primary-color), #764ba2); border-radius: 1.5rem; font-size: 1rem; color: var(--text-primary); margin-bottom: 1.25rem; font-weight: 600; }
.type-code-big { font-size: 5rem; font-weight: 900; background: linear-gradient(135deg, #a5b4fc, #818cf8, #c4b5fd); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 0.25rem; line-height: 1.3; margin-bottom: 0.5rem; }
.type-name-big { font-size: 2.25rem; font-weight: 700; color: var(--text-primary); margin: 0.5rem 0; }
.type-subtitle { font-size: 1.25rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
.type-emoji { font-size: 3rem; margin-bottom: 0.25rem; }
.type-sub-low { text-decoration: underline; text-decoration-color: var(--primary-light); text-underline-offset: 8px; font-weight: 300; }

/* ===== 访问限制卡片 ===== */
.access-card { max-width: 35rem; margin: 4rem auto; padding: 3rem 2.5rem; background: var(--bg-card); border-radius: 2rem; border: 1px solid var(--border-color); text-align: center; }
.access-icon { font-size: 4rem; margin-bottom: 1.5rem; }
.access-title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; }
.access-type { font-size: 3rem; font-weight: 800; background: linear-gradient(135deg, var(--primary-color), #764ba2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.5rem; }
.access-name { font-size: 1.25rem; color: var(--text-secondary); margin-bottom: 1.5rem; }
.access-desc { font-size: 1rem; color: var(--text-muted); line-height: 1.8; margin-bottom: 2rem; }
.access-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.access-btn { padding: 0.875rem 2rem; border-radius: 1.5rem; font-size: 1rem; font-weight: 600; text-decoration: none; transition: all 0.3s; display: inline-flex; align-items: center; gap: 0.5rem; }
.access-btn.primary { background: linear-gradient(135deg, var(--primary-color), #764ba2); color: var(--text-primary); }
.access-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 0.5rem 1.25rem rgba(102,126,234,0.4); }
.access-btn.secondary { background: rgba(255,255,255,0.1); color: var(--text-primary); border: 1px solid rgba(255,255,255,0.2); }
.access-btn.secondary:hover { background: rgba(255,255,255,0.15); }

/* ===== 通用区块卡片 ===== */
.section-card { background: rgba(255,255,255,0.06); border-radius: 1.75rem; padding: 2rem; margin-bottom: 2rem; border: 1px solid rgba(255,255,255,0.1); position: relative; overflow: hidden; }
.section-card::before { content: ''; position: absolute; top: -30%; right: -15%; width: 18rem; height: 18rem; background: radial-gradient(circle, rgba(102,126,234,0.08) 0%, transparent 70%); pointer-events: none; }
.section-title { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.625rem; }
.section-title-icon { font-size: 1.25rem; }

/* ===== 签名引言 ===== */
.signature-quote { font-size: 1.25rem; font-weight: 600; color: #a5b4fc; text-align: center; padding: 1.5rem 2rem; margin-bottom: 1.5rem; background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.1)); border-radius: 1.25rem; border-left: 0.375rem solid var(--primary-color); font-style: italic; line-height: 1.8; position: relative; }
.signature-quote::before { content: '"'; font-size: 2.5rem; color: rgba(102,126,234,0.3); position: absolute; top: 0.25rem; left: 0.75rem; line-height: 1; }
.signature-quote::after { content: '"'; font-size: 2.5rem; color: rgba(102,126,234,0.3); position: absolute; bottom: 0.25rem; right: 0.75rem; line-height: 1; }

/* ===== 纯文本内容 ===== */
.text-content { font-size: 1.125rem; color: var(--text-secondary); line-height: 2; }
.text-content p { margin-bottom: 1rem; }
.text-content p:last-child { margin-bottom: 0; }
.desc-highlight-box { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem; padding: 1rem 1.25rem; background: linear-gradient(135deg, rgba(102,126,234,0.12), rgba(118,75,162,0.08)); border-radius: 0.875rem; border-left: 0.25rem solid #667eea; }
.desc-highlight-icon { font-size: 1.25rem; flex-shrink: 0; }
.desc-highlight-box span:last-child { font-size: 1rem; color: #a5b4fc; font-weight: 500; }

/* ===== 特质总结 ===== */
.traits-summary { margin-top: 1.25rem; padding: 1rem 1.25rem; background: rgba(255,255,255,0.05); border-radius: 0.875rem; display: flex; gap: 0.75rem; align-items: flex-start; }
.traits-summary-icon { font-size: 1.25rem; flex-shrink: 0; }
.traits-summary-text { font-size: 0.938rem; color: var(--text-muted); line-height: 1.7; }

/* ===== 列表样式 ===== */
.list-content { display: flex; flex-direction: column; gap: 0.875rem; }
.list-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; background: var(--bg-card-hover); border-radius: 0.875rem; border: 1px solid var(--border-color-light); transition: all 0.3s; }
.list-item:hover { background: rgba(255,255,255,0.08); transform: translateX(5px); }
.list-item-icon { font-size: 1.25rem; flex-shrink: 0; }
.list-item-content { flex: 1; }
.list-item-title { font-size: 1.062rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; }
.list-item-desc { font-size: 0.938rem; color: var(--text-muted); line-height: 1.6; }

/* ===== 双栏卡片 ===== */
.dual-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 2rem; }
.dual-card { background: var(--bg-card); border-radius: 1.5rem; padding: 1.75rem; border: 1px solid var(--border-color-light); }
.dual-card.strength { border-top: 0.312rem solid var(--success-color); background: linear-gradient(180deg, rgba(16,185,129,0.05), transparent); }
.dual-card.weakness { border-top: 0.312rem solid var(--warning-color); background: linear-gradient(180deg, rgba(245,158,11,0.05), transparent); }
.dual-card.danger { border-top: 0.312rem solid var(--danger-color); background: linear-gradient(180deg, rgba(239,68,68,0.05), transparent); }
.dual-card-title { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
.dual-card.strength .dual-card-title { color: var(--success-color); }
.dual-card.weakness .dual-card-title { color: var(--warning-color); }
.dual-card.danger .dual-card-title { color: var(--danger-color); }
.dual-card-items { display: flex; flex-direction: column; gap: 0.625rem; }
.dual-card-item { font-size: 1rem; color: var(--text-secondary); padding: 0.625rem 0; border-bottom: 1px solid var(--border-color-light); line-height: 1.6; }
.dual-card-item:last-child { border-bottom: none; }

/* ===== 网格卡片 ===== */
.grid-cards { display: grid; gap: 1rem; }
.grid-cards.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cards.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-card { background: var(--bg-card-hover); border-radius: 1rem; padding: 1.25rem; text-align: center; border: 1px solid var(--border-color-light); transition: all 0.3s; }
.grid-card:hover { transform: translateY(-3px); box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.2); background: rgba(255,255,255,0.06); }
.grid-card-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.grid-card-label { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.375rem; text-transform: uppercase; letter-spacing: 0.05rem; }
.grid-card-value { font-size: 1.062rem; color: var(--text-primary); font-weight: 600; line-height: 1.5; }

/* ===== 标签云 ===== */
.tags-wrap { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.tag-item { display: inline-block; padding: 0.5rem 1rem; background: linear-gradient(135deg, rgba(102,126,234,0.2), rgba(118,75,162,0.2)); border: 1px solid rgba(102,126,234,0.3); border-radius: 1.25rem; font-size: 0.938rem; color: var(--text-primary); font-weight: 500; transition: all 0.3s; }
.tag-item:hover { background: linear-gradient(135deg, rgba(102,126,234,0.3), rgba(118,75,162,0.3)); transform: translateY(-2px); }
.tag-item.success { background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.3); color: #34d399; }
.tag-item.warning { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.3); color: #fbbf24; }
.tag-item.danger { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.3); color: #f87171; }

/* ===== 维度分析 ===== */
.dimensions-section { background: rgba(255,255,255,0.06); border-radius: 1.75rem; padding: 2rem; margin-bottom: 2rem; border: 1px solid rgba(255,255,255,0.1); }
.radar-container { position: relative; height: 22rem; max-width: 26rem; margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center; }
.radar-svg { width: 100%; height: 100%; filter: drop-shadow(0 0 1rem rgba(102,126,234,0.2)); }
.dimension-bars { display: flex; flex-direction: column; gap: 1rem; }
.dimension-bar-item { background: rgba(255,255,255,0.08); border-radius: 1rem; padding: 1rem 1.25rem; border: 1px solid rgba(255,255,255,0.1); transition: all 0.3s; }
.dimension-bar-item:hover { background: rgba(255,255,255,0.06); transform: translateX(5px); }
.dimension-bar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.625rem; }
.dimension-bar-info { display: flex; align-items: center; gap: 0.625rem; }
.dimension-bar-emoji { font-size: 1.25rem; }
.dimension-bar-name { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.dimension-bar-name-en { font-size: 0.812rem; color: var(--text-muted); margin-left: 0.375rem; }
.dimension-bar-score { font-size: 1.25rem; font-weight: 700; }
.dimension-bar-track { height: 0.625rem; background: rgba(255,255,255,0.1); border-radius: 0.312rem; overflow: hidden; }
.dimension-bar-fill { height: 100%; border-radius: 0.312rem; transition: width 0.8s ease; }
.dimension-bar-desc { font-size: 0.875rem; color: var(--text-muted); margin-top: 0.5rem; line-height: 1.5; }

/* ===== 职业建议 ===== */
.career-section { background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(118,75,162,0.06)); border-radius: 1.25rem; padding: 1.5rem; margin-bottom: 1.5rem; border: 1px solid rgba(102,126,234,0.18); }
.career-title { font-size: 1.125rem; font-weight: 700; color: #a5b4fc; margin-bottom: 0.875rem; }
.career-text { font-size: 1rem; color: var(--text-secondary); line-height: 1.8; margin-bottom: 1rem; }
.career-tags { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.career-tag { display: inline-block; padding: 0.5rem 1rem; border-radius: 1.25rem; font-size: 0.938rem; font-weight: 500; }
.career-tag.suitable { background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.25); }
.career-tag.avoid { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.25); }

/* ===== 关系建议 ===== */
.relationship-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.relationship-card { background: rgba(255,255,255,0.08); border-radius: 1rem; padding: 1.25rem; border: 1px solid rgba(255,255,255,0.1); transition: all 0.3s; }
.relationship-card:hover { transform: translateY(-2px); box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,0.15); }
.relationship-card-title { font-size: 1rem; font-weight: 700; margin-bottom: 0.625rem; display: flex; align-items: center; gap: 0.375rem; }
.relationship-card-text { font-size: 0.938rem; color: var(--text-secondary); line-height: 1.7; }
.relationship-card.love { border-left: 0.25rem solid #ec4899; }
.relationship-card.love .relationship-card-title { color: #f472b6; }
.relationship-card.friend { border-left: 0.25rem solid #38b2ac; }
.relationship-card.friend .relationship-card-title { color: #4fd1c5; }
.relationship-card.work { border-left: 0.25rem solid var(--primary-color); }
.relationship-card.work .relationship-card-title { color: #818cf8; }
.relationship-card.family { border-left: 0.25rem solid #f59e0b; }
.relationship-card.family .relationship-card-title { color: #fbbf24; }

/* ===== 置信度显示 ===== */
.confidence-section { background: rgba(255,255,255,0.06); border-radius: 1.25rem; padding: 1.5rem; margin-bottom: 2rem; border: 1px solid rgba(255,255,255,0.1); }
.confidence-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.confidence-title { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; }
.confidence-score { font-size: 1.5rem; font-weight: 800; }
.confidence-score.high { color: var(--success-color); }
.confidence-score.medium { color: var(--warning-color); }
.confidence-score.low { color: var(--danger-color); }
.confidence-bar { height: 0.5rem; background: rgba(255,255,255,0.1); border-radius: 0.25rem; overflow: hidden; margin-bottom: 0.75rem; }
.confidence-bar-fill { height: 100%; border-radius: 0.25rem; transition: width 0.8s ease; }
.confidence-message { font-size: 0.938rem; color: var(--text-muted); }

/* ===== 工作风格 ===== */
.work-style-content { }
.work-intro { font-size: 1rem; color: var(--text-secondary); line-height: 1.8; margin-bottom: 1.25rem; padding: 1rem; background: rgba(102,126,234,0.06); border-radius: 0.75rem; border-left: 0.25rem solid var(--primary-color); }
.work-traits { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.work-trait-item { display: flex; align-items: flex-start; gap: 0.875rem; padding: 1rem; background: rgba(255,255,255,0.08); border-radius: 0.875rem; border: 1px solid rgba(255,255,255,0.1); transition: all 0.3s; }
.work-trait-item:hover { background: rgba(255,255,255,0.05); transform: translateX(5px); }
.work-trait-icon { font-size: 1.5rem; flex-shrink: 0; }
.work-trait-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.375rem; }
.work-trait-desc { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; }

/* ===== 恋爱与婚姻 ===== */
.love-section-card { border-top: 0.312rem solid #ec4899; background: linear-gradient(180deg, rgba(236,72,153,0.04), transparent); }
.love-intro-box { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.5rem; background: rgba(236,72,153,0.08); border-radius: 1rem; margin-bottom: 1.5rem; }
.love-intro-icon { font-size: 2rem; flex-shrink: 0; }
.love-intro-text { font-size: 1.062rem; color: var(--text-secondary); line-height: 1.8; }
.love-main-content { margin-bottom: 1.5rem; }
.love-detail-box { padding: 1.25rem 1.5rem; background: rgba(236,72,153,0.06); border-radius: 1rem; margin-bottom: 1.25rem; border-left: 0.25rem solid #f472b6; }
.love-detail-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.love-detail-icon { font-size: 1.375rem; }
.love-detail-title { font-size: 1.125rem; font-weight: 700; color: #f472b6; }
.love-detail-text { font-size: 1rem; color: var(--text-secondary); line-height: 1.85; }
.love-cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.love-mini-card { background: rgba(255,255,255,0.06); border-radius: 1rem; padding: 1.25rem; border: 1px solid rgba(236,72,153,0.12); transition: all 0.3s; }
.love-mini-card:hover { transform: translateY(-3px); box-shadow: 0 0.5rem 1.5rem rgba(236,72,153,0.15); background: rgba(255,255,255,0.05); }
.love-mini-icon { font-size: 2rem; margin-bottom: 0.75rem; }
.love-mini-title { font-size: 1.062rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.875rem; }
.love-mini-list { display: flex; flex-direction: column; gap: 0.625rem; }
.love-mini-item { font-size: 0.938rem; color: var(--text-secondary); padding-left: 1.25rem; position: relative; line-height: 1.65; }
.love-mini-item::before { content: '✓'; position: absolute; left: 0; color: #f472b6; font-weight: 600; }
.love-tips-box { padding: 1.5rem; background: linear-gradient(135deg, rgba(236,72,153,0.06), rgba(168,85,247,0.04)); border-radius: 1rem; border: 1px solid rgba(236,72,153,0.15); }
.love-tips-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.25rem; }
.love-tips-icon { font-size: 1.375rem; }
.love-tips-title { font-size: 1.125rem; font-weight: 700; color: #f472b6; }
.love-tips-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.love-tip-item { display: flex; gap: 0.875rem; padding: 1rem; background: rgba(236,72,153,0.05); border-radius: 0.875rem; transition: all 0.3s; }
.love-tip-item:hover { transform: translateX(5px); background: rgba(255,255,255,0.06); }
.love-tip-num { font-size: 1.25rem; font-weight: 800; color: #f472b6; min-width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; background: rgba(236,72,153,0.15); border-radius: 0.5rem; flex-shrink: 0; }
.love-tip-content { flex: 1; }
.love-tip-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.375rem; }
.love-tip-desc { font-size: 0.875rem; color: var(--text-muted); line-height: 1.7; }

/* ===== 类型匹配 ===== */
.compatibility-content { }
.compatibility-intro { font-size: 1rem; color: var(--text-secondary); line-height: 1.8; margin-bottom: 1.25rem; }
.compatibility-list { display: flex; flex-direction: column; gap: 1rem; }
.compatibility-item { display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem; background: rgba(255,255,255,0.07); border-radius: 1rem; border: 1px solid rgba(255,255,255,0.1); transition: all 0.3s; }
.compatibility-item:hover { transform: translateX(5px); }
.compatibility-item.high { border-left: 0.25rem solid #10b981; }
.compatibility-item.medium { border-left: 0.25rem solid #f59e0b; }
.compatibility-item.low { border-left: 0.25rem solid #ef4444; }
.compatibility-score { font-size: 1.75rem; font-weight: 800; min-width: 4rem; text-align: center; }
.compatibility-item.high .compatibility-score { color: #10b981; }
.compatibility-item.medium .compatibility-score { color: #f59e0b; }
.compatibility-item.low .compatibility-score { color: #ef4444; }
.compatibility-name { font-size: 1.062rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; }
.compatibility-desc { font-size: 0.875rem; color: var(--text-muted); }
.compatibility-example { margin-top: 0.625rem; padding: 0.625rem 0.875rem; background: rgba(255,255,255,0.02); border-radius: 0.5rem; font-size: 0.875rem; line-height: 1.65; color: var(--text-muted); }
.example-label { color: var(--primary-light); font-weight: 600; margin-right: 0.25rem; }

/* ===== 操作按钮区域 ===== */
.action-section { background: rgba(255,255,255,0.06); border-radius: 1.5rem; padding: 1.75rem; margin-bottom: 2rem; border: 1px solid rgba(255,255,255,0.1); text-align: center; }
.action-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.action-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 1.25rem; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; border: none; text-decoration: none; }
.action-btn.primary { background: linear-gradient(135deg, var(--primary-color), #764ba2); color: var(--text-primary); }
.action-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 0.5rem 1.25rem rgba(102,126,234,0.4); }
.action-btn.secondary { background: rgba(255,255,255,0.08); color: var(--text-primary); border: 1px solid rgba(255,255,255,0.15); }
.action-btn.secondary:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }

/* ===== 分享区域 ===== */
.share-section { background: rgba(255,255,255,0.06); border-radius: 1.5rem; padding: 1.75rem; margin-bottom: 2rem; border: 1px solid rgba(255,255,255,0.1); text-align: center; }
.share-title { font-size: 1.25rem; font-weight: 700; color: var(--text-primary); margin-bottom: 1.25rem; }
.share-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.share-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; border-radius: 1.25rem; font-size: 0.938rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; border: none; text-decoration: none; }
.share-btn-wechat { background: rgba(7,193,96,0.15); color: #07c160; border: 1px solid rgba(7,193,96,0.3); }
.share-btn-wechat:hover { background: rgba(7,193,96,0.25); transform: translateY(-2px); }
.share-btn-copy { background: rgba(102,126,234,0.15); color: #a5b4fc; border: 1px solid rgba(102,126,234,0.3); }
.share-btn-copy:hover { background: rgba(102,126,234,0.25); transform: translateY(-2px); }

/* ===== 最终智慧/引言 ===== */
.final-wisdom { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2rem 1.5rem; margin-top: 1.5rem; background: linear-gradient(135deg, rgba(102,126,234,0.12), rgba(168,85,247,0.08)); border-radius: 1.5rem; border: 2px solid rgba(102,126,234,0.2); position: relative; overflow: hidden; }
.final-wisdom::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(102,126,234,0.08) 0%, transparent 70%); animation: rotate 20s linear infinite; }
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.wisdom-icon { font-size: 2.5rem; margin-bottom: 1rem; position: relative; z-index: 1; }
.wisdom-text { font-size: 1.125rem; color: #a5b4fc; line-height: 1.9; font-weight: 600; font-style: italic; position: relative; z-index: 1; word-wrap: break-word; }

/* ===== 成长建议增强 ===== */
.growth-intro-box { display: flex; align-items: flex-start; gap: 0.875rem; padding: 1.125rem 1.375rem; background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(52,211,153,0.05)); border-radius: 0.875rem; margin-bottom: 1.5rem; border-left: 0.25rem solid #10b981; }
.growth-intro-icon { font-size: 1.5rem; flex-shrink: 0; }
.growth-intro-text { font-size: 1rem; color: var(--text-secondary); line-height: 1.75; }
.growth-list { display: flex; flex-direction: column; gap: 1rem; }
.growth-item { border-left: 0.25rem solid #10b981; background: linear-gradient(90deg, rgba(16,185,129,0.04), transparent); }
.growth-item:hover { transform: translateX(8px); box-shadow: 0 0.25rem 1rem rgba(16,185,129,0.12); }
.growth-icon-1, .growth-icon-2, .growth-icon-3, .growth-icon-4, .growth-icon-5, .growth-icon-6 { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; font-weight: 800; color: #fff; flex-shrink: 0; font-size: 1rem; }
.growth-icon-1 { background: linear-gradient(135deg, #10b981, #34d399); }
.growth-icon-2 { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
.growth-icon-3 { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }
.growth-icon-4 { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
.growth-icon-5 { background: linear-gradient(135deg, #ec4899, #f472b6); }
.growth-icon-6 { background: linear-gradient(135deg, #14b8a6, #2dd4bf); }

/* ===== 组别导航 ===== */
.group-nav { background: rgba(255,255,255,0.06); border-radius: 1.25rem; padding: 1.25rem; margin-bottom: 1.5rem; border: 1px solid rgba(255,255,255,0.1); }
.group-nav-label { font-size: 1rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.875rem; text-align: center; }
.group-nav-types { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.group-type-item { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; border-radius: 1rem; font-size: 0.938rem; font-weight: 600; background: rgba(255,255,255,0.05); color: var(--text-secondary); border: 1px solid rgba(255,255,255,0.1); cursor: pointer; transition: all 0.3s; text-decoration: none; }
.group-type-item:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); transform: translateY(-2px); }
.group-type-item.current { background: linear-gradient(135deg, var(--primary-color), #764ba2); color: var(--text-primary); border-color: transparent; font-weight: 700; box-shadow: 0 0.25rem 0.75rem rgba(102,126,234,0.4); }

/* ===== 结果分布定位图（右侧） ===== */
.result-position-chart { background: rgba(255,255,255,0.03); border-radius: 1rem; padding: 0.75rem; border: 1px solid rgba(255,255,255,0.08); margin-bottom: 1rem; }
.position-chart-title { font-size: 0.8rem; color: var(--text-muted); text-align: center; margin-bottom: 0.5rem; font-weight: 600; letter-spacing: 0.05rem; text-transform: uppercase; }
.position-svg { width: 100%; height: auto; display: block; }
.pos-highlight { filter: drop-shadow(0 0 6px rgba(102,126,234,0.6)); cursor: pointer; }
.position-legend { display: flex; justify-content: center; gap: 1rem; margin-top: 0.625rem; }
.legend-item { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--text-muted); }
.legend-item i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.legend-item.current i { background: linear-gradient(135deg, #667eea, #764ba2); box-shadow: 0 0 4px rgba(102,126,234,0.5); }
.legend-item.other i { background: rgba(255,255,255,0.2); }

/* ===== Chart.js 通用图表容器 ===== */
.chart-wrapper { max-width: 22rem; margin: 0 auto 1.25rem; background: rgba(255,255,255,0.05); border-radius: 1rem; padding: 1.25rem; border: 1px solid rgba(255,255,255,0.08); }
.chart-wrapper canvas { width: 100% !important; height: auto !important; }

/* ===== 核心画像卡片（增强摘要） ===== */
.core-portrait-card { border-top: 3px solid var(--primary-color); background: linear-gradient(180deg, rgba(102,126,234,0.06), transparent); }
.portrait-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.portrait-icon-wrap { width: 3rem; height: 3rem; border-radius: 1rem; background: linear-gradient(135deg, var(--primary-color), #764ba2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.portrait-icon { font-size: 1.5rem; }
.portrait-title-area { flex: 1; }
.portrait-title { font-size: 1.375rem; font-weight: 700; color: var(--text-primary); }
.portrait-subtitle { font-size: 0.812rem; color: var(--text-muted); margin-top: 0.125rem; letter-spacing: 0.05rem; }
.core-portrait-card .signature-quote { text-align: left; padding-left: 1.5rem; padding-right: 1.5rem; font-style: normal; }
.core-portrait-card .signature-quote strong { color: #fff; font-weight: 700; }
.core-portrait-card .signature-quote .rt-highlight { color: #c4b5fd; font-weight: 500; }
.core-portrait-card .signature-quote u { text-decoration: underline; text-decoration-color: var(--primary-light); text-underline-offset: 3px; }
.keyword-cards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.25rem; }
.keyword-card { background: rgba(255,255,255,0.07); border-radius: 1rem; padding: 1.25rem; border: 1px solid rgba(255,255,255,0.1); transition: all 0.3s; text-align: center; }
.keyword-card:hover { transform: translateY(-3px); background: rgba(255,255,255,0.07); border-color: rgba(102,126,234,0.25); box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.2); }
.keyword-card-icon { font-size: 1.75rem; margin-bottom: 0.5rem; }
.keyword-card-label { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.5rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05rem; }
.keyword-card-value { font-size: 1.062rem; color: var(--text-primary); font-weight: 600; line-height: 1.5; }

/* ===== 富文本内容样式 ===== */
.rich-text-content { font-size: 1.125rem; color: var(--text-secondary); line-height: 2; background: linear-gradient(135deg, rgba(102,126,234,0.04), rgba(139,92,246,0.02)); border-radius: 1rem; padding: 1.5rem; border: 1px solid rgba(102,126,234,0.1); }
.rt-para { margin-bottom: 1.125rem; }
.rt-para:last-child { margin-bottom: 0; }
.rt-bold { color: #fff; font-weight: 700; font-size: 1.0625rem; }
.rt-highlight { color: #c4b5fd; font-weight: 500; background: rgba(139,92,246,0.1); padding: 0.1em 0.3em; border-radius: 3px; }
.rt-underline { text-decoration: underline; text-decoration-color: var(--primary-light); text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ===== 性格解析板块增强样式 ===== */
.trait-tags-section { margin-top: 1.25rem; padding: 1.25rem; background: rgba(102,126,234,0.06); border-radius: 1rem; border: 1px solid rgba(102,126,234,0.12); }
.trait-tags-title { font-size: 1rem; font-weight: 600; color: #a5b4fc; margin-bottom: 0.875rem; }
.trait-analysis-box { margin-top: 1.25rem; padding: 1.25rem; background: rgba(102,126,234,0.06); border-radius: 1rem; border-left: 3px solid var(--primary-color); }

/* ===== 性格深度解析-核心特质网格 ===== */
.desc-portrait-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 1.25rem; }
.desc-portrait-item { background: rgba(255,255,255,0.07); border-radius: 1rem; padding: 1.125rem; text-align: center; border: 1px solid rgba(255,255,255,0.1); transition: all 0.3s; }
.desc-portrait-item:hover { transform: translateY(-3px); background: rgba(255,255,255,0.07); border-color: rgba(102,126,234,0.25); box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.2); }
.dp-icon { font-size: 1.75rem; margin-bottom: 0.5rem; }
.dp-label { font-size: 1.2rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05rem; margin-bottom: 0.375rem; }
.dp-value { font-size: 1rem; color: var(--text-primary); line-height: 1.5; }

/* ===== 婚姻板块 ===== */
.marriage-section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(236,72,153,0.15); }
.marriage-header { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 1rem; }
.marriage-icon { font-size: 1.5rem; }
.marriage-title { font-size: 1.25rem; font-weight: 700; color: #f472b6; }
.marriage-style-desc { font-size: 0.95rem; color: rgba(255,255,255,0.8); line-height: 1.8; margin-bottom: 1rem; padding: 1rem 1.25rem; background: rgba(236,72,153,0.06); border-radius: 0.875rem; border-left: 3px solid rgba(236,72,153,0.4); }
.marriage-trait-tag { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; margin-bottom: 1rem; background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.12)); border-radius: 2rem; border: 1px solid rgba(102,126,234,0.25); }
.trait-icon { font-size: 1rem; }
.trait-text { font-size: 0.9rem; font-weight: 600; color: #a5b4fc; }
.marriage-indices { display: flex; flex-direction: column; gap: 0.625rem; margin-top: 0.5rem; }
.mi-item { padding: 0.875rem 1.125rem; background: linear-gradient(135deg, rgba(30,41,59,0.9), rgba(15,23,42,0.95)); border-radius: 0.75rem; border: 1px solid rgba(255,255,255,0.06); position: relative; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.mi-item:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(0,0,0,0.25); }
.mi-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.mi-label { font-size: 0.9rem; font-weight: 600; color: rgba(255,255,255,0.92); letter-spacing: 0.02em; }
.mi-level { font-size: 0.78rem; font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 1rem; letter-spacing: 0.02em; }
.mi-track { height: 7px; background: rgba(255,255,255,0.07); border-radius: 4px; overflow: hidden; margin-bottom: 0.4rem; position: relative; }
.mi-fill { height: 100%; border-radius: 4px; transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1); position: relative; overflow: hidden; }
.mi-fill::after { content:''; position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,0.18),transparent);border-radius:4px 4px 0 0; }
.mi-desc { font-size: 0.81rem; color: rgba(255,255,255,0.55); line-height: 1.55; margin-top: 0.25rem; }
.marriage-chart-box { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.25rem; padding: 1.25rem; background: rgba(236,72,153,0.04); border-radius: 1rem; border: 1px solid rgba(236,72,153,0.1); }
.m-bar-item { display: flex; align-items: center; gap: 0.75rem; }
.m-bar-label { width: 5.5rem; font-size: 0.875rem; color: var(--text-secondary); flex-shrink: 0; text-align: right; }
.m-bar-track { flex: 1; height: 10px; background: rgba(255,255,255,0.06); border-radius: 5px; overflow: hidden; min-width: 0; }
.m-bar-fill { height: 100%; border-radius: 5px; transition: width 1s ease-out; }
.m-bar-val { font-size: 0.812rem; font-weight: 700; min-width: 2.25rem; text-align: right; flex-shrink: 0; }
.marriage-insights { display: flex; flex-direction: column; gap: 0.875rem; }
.marriage-insight { display: flex; gap: 0.875rem; padding: 1rem; background: rgba(236,72,153,0.04); border-radius: 0.875rem; border-left: 0.25rem solid rgba(236,72,153,0.35); transition: all 0.3s; }
.marriage-insight:hover { background: rgba(236,72,153,0.07); transform: translateX(4px); }
.insight-num { font-size: 1rem; font-weight: 800; color: #f472b6; min-width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; background: rgba(236,72,153,0.15); border-radius: 0.5rem; flex-shrink: 0; }
.insight-body { flex: 1; }
.insight-title { font-size: 1rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.375rem; }
.insight-desc { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.7; }

/* ===== 职业时间轴 ===== */
.career-timeline { display: flex; flex-direction: column; gap: 1rem; position: relative; padding-left: 2rem; margin-top: 0.75rem; }
.career-timeline::before { content:''; position:absolute; left:0.5625rem; top:0.375rem; bottom:0.375rem; width:2px; background:linear-gradient(180deg,var(--primary-color),rgba(102,126,234,0.15)); border-radius:1px; }
.career-timeline-item { position:relative; display:flex; gap:0.875rem; align-items:flex-start; }
.timeline-dot { width:1.125rem; height:1.125rem; border-radius:50%; position:absolute; left:-2rem; top:0.1875rem; z-index:1; box-shadow:0 0 0 4px var(--bg-card); }
.timeline-dot-1 { background:#10b981; }
.timeline-dot-2 { background:#f59e0b; }
.timeline-dot-3 { background:#ec4899; }
.timeline-content { flex:1; min-width:0; }
.timeline-phase { font-size:1.0625rem; font-weight:700; color:var(--text-primary); margin-bottom:0.375rem; }
.timeline-years { font-size:0.75rem; font-weight:500; color:var(--primary-light); background:rgba(102,126,234,0.12); padding:0.125rem 0.5rem; border-radius:0.25rem; margin-left:0.375rem; vertical-align:middle; }
.timeline-desc { font-size:1rem; color:var(--text-secondary); line-height:1.8; }

/* ===== 工作环境特征列表 ===== */
.work-env-list { display: flex; flex-direction: column; gap: 0; background: linear-gradient(135deg, rgba(16,185,129,0.06), rgba(52,211,153,0.03)); border-radius: 1rem; margin-top: 0.75rem; border: 1px solid rgba(16,185,129,0.12); overflow: hidden; }
.work-env-item { display: flex; align-items: flex-start; gap: 0.875rem; padding: 0.875rem 1.25rem; transition: all 0.25s; border-bottom: 1px solid rgba(16,185,129,0.06); }
.work-env-item:last-child { border-bottom: none; }
.work-env-item:hover { background: rgba(16,185,129,0.06); transform: translateX(4px); }
.work-env-icon { font-size: 1.375rem; flex-shrink: 0; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; background: rgba(16,185,129,0.12); border-radius: 0.625rem; }
.work-env-dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #10b981, #34d399); flex-shrink: 0; margin-top: 0.4rem; box-shadow: 0 0 6px rgba(16,185,129,0.4); }
.work-env-text { font-size: 1rem; color: var(--text-secondary); line-height: 1.8; }
.work-env-text strong { color: #34d399; font-weight: 700; }

/* ===== 成长建议增强排版 ===== */
.growth-enhanced-list { display: flex; flex-direction: column; gap: 1.125rem; }
.growth-enhanced-item { background: rgba(255,255,255,0.08); border-radius: 1rem; padding: 1.25rem; border: 1px solid rgba(255,255,255,0.1); border-left: 0.25rem solid transparent; transition: all 0.3s; }
.growth-enhanced-item:nth-child(1) { border-left-color: #10b981; }
.growth-enhanced-item:nth-child(2) { border-left-color: #3b82f6; }
.growth-enhanced-item:nth-child(3) { border-left-color: #8b5cf6; }
.growth-enhanced-item:nth-child(4) { border-left-color: #f59e0b; }
.growth-enhanced-item:nth-child(5) { border-left-color: #ec4899; }
.growth-enhanced-item:nth-child(6) { border-left-color: #14b8a6; }
.growth-enhanced-item:hover { transform: translateX(6px); background: rgba(255,255,255,0.06); box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.1); }
.growth-e-header { display: flex; align-items: center; gap: 0.875rem; margin-bottom: 0.75rem; }
.growth-e-num { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; font-weight: 800; color: #fff; flex-shrink: 0; font-size: 1rem; }
.growth-e-title-group { flex: 1; }
.growth-e-title { font-size: 1.062rem; font-weight: 700; color: var(--text-primary); }
.growth-e-keyword { font-size: 0.812rem; color: var(--text-muted); margin-top: 0.125rem; }
.growth-e-body { padding-left: 3.125rem; }
.growth-e-main { font-size: 0.938rem; color: var(--text-secondary); line-height: 1.75; margin-bottom: 0.5rem; }
.growth-e-main strong { color: var(--text-primary); font-weight: 700; }
.growth-e-main .rt-highlight { color: #c4b5fd; font-weight: 500; }
.growth-e-main u { text-decoration: underline; text-decoration-color: var(--primary-light); text-underline-offset: 2px; }
.growth-e-action { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; display: flex; align-items: flex-start; gap: 0.5rem; }
.action-badge { display: inline-block; padding: 0.125rem 0.5rem; background: rgba(16,185,129,0.15); color: #34d399; border-radius: 0.25rem; font-size: 0.75rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; }

/* ===== 最终智慧 - 左右布局 ===== */
.final-wisdom-horizontal { flex-direction: row !important; align-items: center !important; text-align: left !important; gap: 1.5rem; padding: 2rem 1.5rem; background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.05)); border-radius: 1.25rem; border: none !important; max-width: 100%; width: auto; }
.final-wisdom-horizontal .wisdom-icon { font-size: 3rem; flex-shrink: 0; }
.wisdom-content-side { flex: 1; min-width: 0; }
.wisdom-tags { display: flex; gap: 0.5rem; margin-top: 0.875rem; flex-wrap: wrap; }
.wisdom-tag { display: inline-block; padding: 0.25rem 0.75rem; background: rgba(102,126,234,0.15); color: #a5b4fc; border-radius: 1rem; font-size: 0.812rem; font-weight: 500; border: 1px solid rgba(102,126,234,0.2); }

/* ===== 类型匹配-代码标识 ===== */
.compat-code { display: inline-block; padding: 0.125rem 0.5rem; background: rgba(102,126,234,0.15); color: #a5b4fc; border-radius: 0.375rem; font-size: 0.812rem; font-weight: 700; margin-right: 0.25rem; font-family: 'SF Mono', 'Fira Code', monospace; }

/* ===== 问号链接样式 ===== */
.section-help { margin-left: auto; cursor: pointer; opacity: 0.4; transition: opacity 0.2s, transform 0.2s; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; }
.section-help:hover { opacity: 1; transform: scale(1.1); }
.section-help svg { width: 1.75rem; height: 1.75rem; }

/* ===== 页面导航header ===== */
.header { position: fixed; top: 0; left: 0; width: 100%; background: rgba(15,15,35,0.85); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,0.08); z-index: 100; padding: 0 1rem; }
.header-content { max-width: 75rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 3.5rem; }
.logo { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); text-decoration: none; background: linear-gradient(135deg, var(--primary-color), #764ba2); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nav-right { display: flex; align-items: center; gap: 0.5rem; }
.skip-link { position: absolute; top: -100%; left: 0; background: var(--primary-color); color: #fff; padding: 0.5rem 1rem; z-index: 1000; }
.skip-link:focus { top: 0; }
.menu-toggle { width: 2.5rem; height: 2.5rem; border-radius: 50%; background: transparent; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.2rem; transition: all 0.2s; }
.menu-toggle:hover { transform: scale(1.1); }
.menu-icon { display: block; width: 1.125rem; height: 0.125rem; background: #fff; position: relative; transition: all 0.3s; }
.menu-icon::before, .menu-icon::after { content: ''; position: absolute; left: 0; width: 100%; height: 0.125rem; background: #fff; transition: all 0.3s; }
.menu-icon::before { top: -0.375rem; }
.menu-icon::after { top: 0.375rem; }
.header-menu { position: fixed; top: 3.5rem; right: -12.5rem; width: 12.5rem; background: rgba(20,20,40,0.95); border: 1px solid rgba(255,255,255,0.15); border-radius: 0.5rem; box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.2); z-index: 1001; transition: right 0.3s ease; display: flex; flex-direction: column; overflow: hidden; backdrop-filter: blur(10px); }
.header-menu.open { right: 0.5rem; }
.header-menu-item { padding: 0.75rem 1rem; color: rgba(255,255,255,0.85); text-decoration: none; font-size: 0.875rem; transition: background 0.2s; white-space: nowrap; }
.header-menu-item:hover { background: rgba(255,255,255,0.1); }

/* ===== 页面底部footer ===== */
.footer { background: rgba(255,255,255,0.03); border-top: 1px solid rgba(255,255,255,0.08); padding: 2rem 1rem; text-align: center; margin-top: 3rem; }
.footer p { color: rgba(255,255,255,0.4); font-size: 0.875rem; margin-bottom: 0.5rem; }
.footer a { color: rgba(255,255,255,0.5); text-decoration: none; }
.footer a:hover { color: var(--primary-light); }

/* ===== 主题切换器 ===== */
.theme-switcher { display: flex; align-items: center; gap: 0.625rem; margin-right: 0.75rem; }
.switcher-label { font-size: 0.812rem; color: var(--text-muted); font-weight: 500; white-space: nowrap; }
.color-dots { display: flex; gap: 0.375rem; }
.color-dot { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all 0.3s; padding: 0; outline: none; }
.color-dot:hover { transform: scale(1.2); }
.color-dot.active { border-color: #fff; box-shadow: 0 0 0.25rem rgba(255,255,255,0.3); transform: scale(1.15); }

/* ===== 响应式 - 900px ===== */
@media (max-width: 900px) {
.grid-cards.cols-3, .grid-cards.cols-4 { grid-template-columns: repeat(2, 1fr); }
.relationship-grid { grid-template-columns: 1fr; }
.dual-cards { grid-template-columns: 1fr; }
.keyword-cards-row { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.keyword-card { padding: 0.875rem 0.625rem; }
.keyword-card-value { font-size: 0.938rem; }
.m-bar-label { width: 3.5rem; font-size: 0.812rem; }
}

/* ===== 响应式 - 700px ===== */
@media (max-width: 700px) {
.header-hero { flex-direction: column; text-align: center; padding: 1.75rem 1.25rem; gap: 1.25rem; }
.hero-image { order: -1; width: 100%; max-width: 14rem; }
.hero-content { text-align: center; width: 100%; }
.type-code-big { font-size: 3.5rem; letter-spacing: 0.125rem; }
.type-name-big { font-size: 1.75rem; }
.section-card { padding: 1.25rem; border-radius: 1.25rem; margin-bottom: 1.5rem; }
.section-title { font-size: 1.25rem; margin-bottom: 1rem; }
.signature-quote { font-size: 1.062rem; padding: 1.25rem 1.5rem; }
.radar-container { height: 16rem; }
.dimension-bar-item { padding: 0.875rem 1rem; }
.dimension-bar-name { font-size: 0.938rem; }
.dimension-bar-score { font-size: 1.125rem; }
.wrap { padding: 3.75rem 1rem 5rem; }
.final-wisdom-horizontal { flex-direction: column !important; text-align: center !important; padding: 1.5rem; }
.final-wisdom-horizontal .wisdom-icon { font-size: 2.5rem; }
.wisdom-tags { justify-content: center; }
.growth-e-body { padding-left: 0; margin-top: 0.75rem; }
.growth-e-header { flex-wrap: wrap; }
.keyword-cards-row { grid-template-columns: 1fr; }
.keyword-card-value { font-size: 0.938rem; }
.theme-switcher { margin-bottom: 0.5rem; }
.hero-right { width: 100%; }
.hero-chart-wrap { max-width: 200px; margin: 0 auto; }
.compatibility-example { padding: 0.5rem; font-size: 0.812rem; }
.career-timeline { padding-left: 1.5rem; }
.timeline-dot { left:-1.5rem; }
.m-bar-item { flex-wrap: wrap; gap: 0.4rem; }
.m-bar-label { width: auto; text-align: left; }
.desc-portrait-grid { grid-template-columns: repeat(2, 1fr); }
.work-env-text { font-size: 0.938rem; }
}

/* ===== 响应式 - 480px ===== */
@media (max-width: 480px) {
.header-hero { padding: 1.25rem 1rem; border-radius: 1.25rem; margin-bottom: 1.25rem; }
.type-badge { padding: 0.5rem 1rem; font-size: 0.875rem; margin-bottom: 0.75rem; }
.type-code-big { font-size: 2.75rem; letter-spacing: 0.062rem; margin-bottom: 0.5rem; }
.type-name-big { font-size: 1.5rem; margin: 0.5rem 0; }
.type-subtitle { font-size: 1rem; }
.hero-image { max-width: 11rem; }
.section-card { padding: 1rem; border-radius: 1rem; margin-bottom: 1.25rem; }
.section-title { font-size: 1.125rem; margin-bottom: 0.875rem; }
.signature-quote { font-size: 1rem; padding: 1rem 1.25rem; border-radius: 0.875rem; }
.list-item { padding: 0.875rem 1rem; }
.list-item-title { font-size: 1rem; }
.list-item-desc { font-size: 0.875rem; }
.dual-card { padding: 1.25rem; border-radius: 1rem; }
.dual-card-title { font-size: 1.125rem; }
.dual-card-item { font-size: 0.938rem; }
.grid-cards.cols-2, .grid-cards.cols-3, .grid-cards.cols-4 { grid-template-columns: 1fr; }
.grid-card { padding: 1rem; }
.grid-card-icon { font-size: 1.75rem; }
.radar-container { height: 14rem; }
.dimension-bar-item { padding: 0.75rem; border-radius: 0.75rem; }
.dimension-bar-emoji { font-size: 1rem; }
.dimension-bar-name { font-size: 0.875rem; }
.dimension-bar-score { font-size: 1rem; }
.dimension-bar-desc { font-size: 0.812rem; }
.action-section { padding: 1.25rem; }
.action-btn { padding: 0.625rem 1.25rem; font-size: 0.938rem; }
.share-section { padding: 1.25rem; }
.share-title { font-size: 1.125rem; }
.share-btn { padding: 0.5rem 1rem; font-size: 0.875rem; }
.access-card { margin: 2rem 0.5rem; padding: 2rem 1.5rem; }
.access-icon { font-size: 3rem; }
.access-title { font-size: 1.25rem; }
.access-type { font-size: 2.25rem; }
.access-btns { flex-direction: column; }
.access-btn { width: 100%; justify-content: center; }
.wrap { padding: 3rem 0.75rem 4rem; }
.type-sub-low { text-underline-offset: 5px; }
.portrait-header { gap: 0.75rem; }
.portrait-icon-wrap { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; }
.portrait-icon { font-size: 1.25rem; }
.portrait-title { font-size: 1.125rem; }
.core-portrait-card .signature-quote { padding: 1rem; font-size: 1rem; }
.rich-text-content { font-size: 1rem; }
.rt-bold { font-size: 1rem; }
.marriage-insight { flex-direction: column; gap: 0.5rem; }
.insight-num { align-self: flex-start; }
.final-wisdom-horizontal { padding: 1.25rem; }
.desc-portrait-grid { grid-template-columns: 1fr; }
.trait-tags-section { padding: 1rem; }
}

/* ===== 置信度冲突题目详情 ===== */
.cd-conflicts { margin-bottom: 1rem; }
.cd-conflicts-title { font-size: 1rem; font-weight: 700; color: #fbbf24; margin-bottom: 0.75rem; }
.cd-conflicts-intro { color: rgba(255,255,255,0.55); font-size: 0.85em; margin: 0 0 10px; }
.cd-conflict-item { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); border-radius: 0.75rem; padding: 1rem; margin-bottom: 0.75rem; }
.cd-conflict-dim { font-size: 0.875rem; color: #f87171; font-weight: 600; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
.cd-conflict-severity { font-size: 0.75rem; padding: 0.125rem 0.5rem; border-radius: 0.375rem; background: rgba(239,68,68,0.15); color: #fca5a5; font-weight: 500; }
.cd-conflict-pair { display: flex; flex-direction: column; gap: 0.375rem; }
.cd-conflict-q { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; color: rgba(255,255,255,0.8); line-height: 1.5; }
.cd-q-badge { display: inline-block; padding: 0.125rem 0.5rem; background: rgba(102,126,234,0.2); border-radius: 0.375rem; font-size: 0.75rem; color: #a5b4fc; white-space: nowrap; flex-shrink: 0; }
.cd-q-badge-rev { background: rgba(239,68,68,0.15); color: #f87171; }
.cd-q-text { flex: 1; min-width: 0; }
.cd-conflict-ans { padding-left: 1.5rem; font-size: 0.85rem; color: rgba(255,255,255,0.6); margin-bottom: 0.25rem; }
.cd-conflict-ans .cd-ans-label { color: rgba(255,255,255,0.4); }
.cd-conflict-ans .cd-ans-value { color: #fbbf24; font-weight: 600; }
.cd-conflict-why { font-size: 0.812rem; color: rgba(255,255,255,0.65); line-height: 1.6; margin-top: 0.5rem; padding: 0.5rem 0.75rem; background: rgba(251,191,36,0.08); border-radius: 0.375rem; border-left: 2px solid rgba(251,191,36,0.3); }
.cd-conflict-diff { font-size: 0.812rem; color: rgba(255,255,255,0.5); margin-top: 0.375rem; padding-left: 0.25rem; }
.cd-show-more-wrap { text-align: center; margin-top: 0.75rem; }
.cd-show-more-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); padding: 0.5rem 1.25rem; border-radius: 1.25rem; cursor: pointer; font-size: 0.812rem; transition: all 0.2s; }
.cd-show-more-btn:hover { background: rgba(102,126,234,0.1); border-color: rgba(102,126,234,0.3); color: #a5b4fc; }

/* ===== 置信度详情面板完整样式 ===== */
.consistency-detail-inner { background: rgba(255,255,255,0.04); border-radius: 0.75rem; padding: 1.25rem; }
.cd-summary { font-size: 1rem; color: rgba(255,255,255,0.9); margin-bottom: 0.75rem; line-height: 1.6; }
.cd-summary .cd-icon { margin-right: 0.375rem; }
.cd-summary .cd-score { font-weight: 700; }
.cd-explain { font-size: 0.9rem; color: rgba(255,255,255,0.7); line-height: 1.7; margin-bottom: 1rem; padding: 0.75rem 1rem; background: rgba(255,255,255,0.03); border-radius: 0.5rem; border-left: 3px solid rgba(251,191,36,0.4); }
.cd-levels { margin-bottom: 1rem; }
.cd-level-title { font-size: 0.95rem; font-weight: 700; color: rgba(255,255,255,0.85); margin-bottom: 0.5rem; }
.cd-level-item { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: 0.875rem; color: rgba(255,255,255,0.6); }
.cd-level-item:last-child { border-bottom: none; }
.cd-level-label { flex-shrink: 0; font-weight: 600; color: rgba(255,255,255,0.8); min-width: 7rem; }
.cd-level-active .cd-level-label { color: #34d399; }
.cd-level-text { flex: 1; }
.cd-tips { background: rgba(251,191,36,0.08); border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem; }
.cd-tips-title { font-size: 0.95rem; font-weight: 700; color: #fbbf24; margin-bottom: 0.5rem; }
.cd-tips-list { list-style: none; padding: 0; margin: 0; }
.cd-tips-list li { font-size: 0.875rem; color: rgba(255,255,255,0.7); line-height: 1.6; padding: 0.25rem 0; padding-left: 1.25rem; position: relative; }
.cd-tips-list li::before { content: '•'; position: absolute; left: 0; color: #fbbf24; }
.cd-note { font-size: 0.812rem; color: rgba(255,255,255,0.4); line-height: 1.5; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.06); }

/* ===== Hero核心关键词 ===== */
.hero-keywords-wrap { padding: 1.25rem; background: rgba(255,255,255,0.03); border-radius: 1rem; border: 1px solid rgba(255,255,255,0.08); min-width: 220px; }
.hero-keywords-title { font-size: 0.85rem; color: rgba(255,255,255,0.5); margin-bottom: 1rem; text-align: center; letter-spacing: 0.05em; }
.hero-keywords-grid { display: flex; flex-direction: column; gap: 0.6rem; }
.hero-keyword-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.8rem; background: rgba(255,255,255,0.04); border-radius: 0.6rem; transition: all 0.2s; }
.hero-keyword-item:hover { background: rgba(255,255,255,0.08); transform: translateX(4px); }
.hero-keyword-icon { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--kw-color, var(--primary-color)); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.hero-keyword-text { font-size: 0.9rem; color: rgba(255,255,255,0.85); font-weight: 500; }

/* ===== Hero维度图表（已废弃，保留样式供其他页面使用） ===== */
.hero-chart-wrap { position: relative; width: 280px; height: 280px; flex-shrink: 0; }
.hero-ring-chart { width: 100%; height: 100%; }
.hero-ring-chart .ring-svg { width: 100%; height: 100%; }
.hero-ring-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.hero-ring-emoji { font-size: 2rem; line-height: 1; }
.hero-ring-name { font-size: 0.9rem; color: rgba(255,255,255,0.7); margin-top: 0.25rem; white-space: nowrap; }
.ring-segment { transition: stroke-dashoffset 1.2s ease; }
/* Hero雷达图 */
.hero-chart-radar { width: 280px; height: 280px; max-width: 280px; }
.hero-radar-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.hero-chart-radar canvas { width: 100% !important; height: 100% !important; }

/* ===== 婚姻观新版式 ===== */
.marriage-overview { font-size: 0.925rem; color: rgba(255,255,255,0.8); line-height: 1.7; margin-bottom: 1rem; padding: 0.75rem 1rem; background: rgba(255,255,255,0.03); border-radius: 0.5rem; }
.marriage-group { margin-bottom: 0.875rem; padding: 0.625rem 0; border-top: 1px solid rgba(255,255,255,0.04); border-bottom: 1px solid rgba(255,255,255,0.04); margin-top: 0.875rem; }
.marriage-group:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.marriage-group:last-of-type { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.marriage-group-title { font-size: 0.85rem; font-weight: 700; color: rgba(255,255,255,0.7); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.08em; display: flex; align-items: center; gap: 0.375rem; }
.marriage-item { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.5625rem 0.875rem; margin-bottom: 0.4rem; border-radius: 0.5rem; background: rgba(255,255,255,0.02); transition: all 0.2s ease; border: none; }
.marriage-item:hover { background: rgba(255,255,255,0.05); transform: translateX(3px); }
.marriage-item-good { border-left: 3px solid #34d399; }
.marriage-item-warn { border-left: 3px solid #fbbf24; }
.marriage-item-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-top: 0.45rem; flex-shrink: 0; box-shadow: 0 0 6px currentColor; }
.marriage-item-dot.good { background: #34d399; color: #34d399; }
.marriage-item-dot.warn { background: #fbbf24; color: #fbbf24; }
.marriage-item-text { font-size: 0.88rem; color: rgba(255,255,255,0.75); line-height: 1.6; }
.marriage-item-text strong { color: rgba(255,255,255,0.95); font-weight: 600; }
.marriage-advice-box { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.625rem; padding: 0.75rem 1rem; background: linear-gradient(135deg, rgba(251,191,36,0.06), rgba(245,158,11,0.03)); border-radius: 0.5rem; border-left: 3px solid rgba(251,191,36,0.5); transition: background 0.25s ease; }
.marriage-advice-box:hover { background: linear-gradient(135deg, rgba(251,191,36,0.1), rgba(245,158,11,0.06)); }
.marriage-advice-icon { font-size: 1rem; flex-shrink: 0; margin-top: 0.125rem; }
.marriage-advice-text { font-size: 0.88rem; color: rgba(255,255,255,0.78); line-height: 1.65; }

/* ===== 成长建议卡片 ===== */
.growth-card-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.growth-card-item { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.75rem; padding: 1rem; transition: transform 0.2s, border-color 0.2s; }
.growth-card-item:hover { transform: translateY(-2px); border-color: rgba(102,126,234,0.3); }
.growth-card-badge { display: inline-block; padding: 0.125rem 0.5rem; background: rgba(102,126,234,0.15); border-radius: 0.375rem; font-size: 0.75rem; color: #a5b4fc; margin-bottom: 0.5rem; }
.growth-card-content { font-size: 0.925rem; color: rgba(255,255,255,0.85); line-height: 1.6; }
@media (max-width: 600px) { .growth-card-list { grid-template-columns: 1fr; } .hero-chart-wrap { width: 160px; height: 160px; } }

/* ===== 反馈/评论表单增强（迁移自mbti_result.css） ===== */
.comments-list { display: flex; flex-direction: column; gap: 0.938rem; margin-bottom: 1.25rem; }
.comment-item { background: rgba(255,255,255,0.03); border-radius: 0.875rem; padding: 1.125rem; border: 1px solid rgba(255,255,255,0.06); }
.comment-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.625rem; }
.comment-author { display: flex; align-items: center; gap: 0.625rem; }
.comment-avatar { width: 2.5rem; height: 2.5rem; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; color: #fff; }
.comment-name { font-size: 0.938rem; font-weight: 600; color: #fff; }
.comment-time { font-size: 0.812rem; color: rgba(255,255,255,0.4); }
.comment-rating { font-size: 0.875rem; }
.comment-text { font-size: 0.938rem; color: rgba(255,255,255,0.8); line-height: 1.7; }
.feedback-divider { text-align: center; margin: 1.25rem 0; position: relative; }
.feedback-divider::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255,255,255,0.1); }
.feedback-divider span { background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.08)); padding: 0.312rem 1.25rem; font-size: 0.875rem; color: rgba(255,255,255,0.5); position: relative; }
.no-comments { text-align: center; padding: 1.25rem; color: rgba(255,255,255,0.4); font-size: 0.875rem; }
.comment-form { background: rgba(255,255,255,0.03); border-radius: 0.875rem; padding: 1.25rem; }
.feedback-author-input { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; flex-wrap: wrap; }
.author-label { font-size: 0.875rem; color: #94a3b8; white-space: nowrap; }
.feedback-author-field { flex: 1; min-width: 200px; padding: 0.625rem 0.875rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: 0.625rem; color: #e2e8f0; font-size: 0.875rem; transition: all 0.3s; }
.feedback-author-field:focus { outline: none; border-color: #667eea; background: rgba(255,255,255,0.08); }
.feedback-author-field::placeholder { color: #64748b; }
.author-hint { font-size: 0.75rem; color: #64748b; }
.feedback-rating { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.938rem; }
.rating-label { font-size: 0.938rem; color: rgba(255,255,255,0.8); }
.rating-stars { display: flex; gap: 0.312rem; }
.star-btn { background: none; border: none; font-size: 1.25rem; cursor: pointer; opacity: 0.3; transition: all 0.2s; padding: 0.125rem; }
.star-btn:hover, .star-btn.active { opacity: 1; transform: scale(1.1); }
.rating-text { font-size: 0.875rem; color: #fbbf24; margin-left: 0.625rem; }
.feedback-textarea { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: 0.625rem; padding: 0.938rem; color: #fff; font-size: 0.938rem; resize: vertical; min-height: 100px; font-family: inherit; }
.feedback-textarea:focus { outline: none; border-color: #667eea; }
.feedback-textarea::placeholder { color: rgba(255,255,255,0.4); }
.feedback-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0.625rem; }
.feedback-count { font-size: 0.812rem; color: rgba(255,255,255,0.5); }
.feedback-submit { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; padding: 0.625rem 1.562rem; border-radius: 1.25rem; font-size: 0.938rem; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.feedback-submit:hover { color: #fef08a; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(102,126,234,0.4); }
.feedback-toast { margin-top: 0.625rem; padding: 0.625rem 0.938rem; border-radius: 0.625rem; font-size: 0.875rem; text-align: center; opacity: 0; transition: opacity 0.3s; }
.feedback-toast.success { background: rgba(16,185,129,0.2); color: #10b981; border: 1px solid rgba(16,185,129,0.3); opacity: 1; }
.feedback-toast.error { background: rgba(239,68,68,0.2); color: #ef4444; border: 1px solid rgba(239,68,68,0.3); opacity: 1; }

/* ===== 测试说明区域（迁移自mbti_result.css） ===== */
.test-notice { background: rgba(255,255,255,0.02); border-radius: 1.375rem; padding: 2.25rem; border: 1px solid rgba(255,255,255,0.05); margin-top: 1.25rem; }
.test-notice h4 { font-size: 1.25rem; color: #fff; margin-bottom: 1.375rem; font-weight: 600; text-align: center; }
.test-notice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.375rem; }
.test-notice-item { padding: 1.125rem; background: rgba(255,255,255,0.02); border-radius: 0.875rem; }
.test-notice-item h5 { font-size: 1rem; color: #667eea; margin-bottom: 0.625rem; font-weight: 600; }
.test-notice-item p { font-size: 1rem; color: rgba(255,255,255,0.6); line-height: 1.7; }

/* ===== 分享区域增强（覆盖all.css基础版） ===== */
.share-section { background: rgba(255,255,255,0.03); border-radius: 1.75rem; padding: 2.25rem; margin-bottom: 2rem; border: 1px solid rgba(255,255,255,0.06); text-align: center; }
.share-title { font-size: 1.375rem; font-weight: 700; color: #fff; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 0.625rem; }
.share-subtitle { font-size: 0.938rem; color: rgba(255,255,255,0.5); margin-bottom: 1.25rem; }
.share-buttons { display: flex; justify-content: center; gap: 1.25rem; flex-wrap: wrap; }
.share-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 1.25rem; font-size: 0.938rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; border: none; text-decoration: none; }
.share-btn-wechat { background: rgba(7,193,96,0.15); color: #07c160; border: 1px solid rgba(7,193,96,0.3); }
.share-btn-wechat:hover { background: rgba(7,193,96,0.25); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(7,193,96,0.4); }
.share-btn-copy { background: rgba(102,126,234,0.15); color: #a5b4fc; border: 1px solid rgba(102,126,234,0.3); }
.share-btn-copy:hover { background: rgba(102,126,234,0.25); transform: translateY(-2px); }
.share-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.share-btn-icon { font-size: 1rem; }
.share-toast { margin-top: 1.25rem; padding: 0.75rem 1.25rem; border-radius: 0.75rem; font-size: 0.938rem; opacity: 0; transform: translateY(-10px); transition: all 0.3s ease; display: inline-block; }
.share-toast.success { background: rgba(16,185,129,0.2); color: #34d399; border: 1px solid rgba(16,185,129,0.3); opacity: 1; }
.share-toast.error { background: rgba(239,68,68,0.2); color: #f87171; border: 1px solid rgba(239,68,68,0.3); opacity: 1; }

/* ===== 反馈区域增强（覆盖all.css基础版） ===== */
.feedback-section { background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.08)); border-radius: 1rem; padding: 1rem; border: 1px solid rgba(102,126,234,0.2); margin-top: 1.25rem; }
.feedback-title { font-size: 1.25rem; color: #fff; margin-bottom: 1rem; font-weight: 600; }

/* ===== 移动端适配 ===== */
@media (max-width: 768px) { .test-notice-grid { grid-template-columns: 1fr; } .share-buttons { flex-direction: column; align-items: center; } .share-btn { width: 100%; max-width: 17.5rem; justify-content: center; } }
@media (max-width: 480px) { .test-notice { padding: 1.25rem; border-radius: 1.25rem; } .test-notice h4 { margin-bottom: 0.938rem; } .test-notice-grid { gap: 0.938rem; } .test-notice-item { padding: 0.75rem; } .share-section { padding: 1.5rem; } .feedback-author-field { min-width: 150px; } }

/* ===== 人群分布板块 ===== */
.stats-section { background: rgba(255,255,255,0.03); border-radius: 1.25rem; padding: 1rem; margin-bottom: 1.5rem; border: 1px solid rgba(255,255,255,0.06); }
.stats-content { display: flex; flex-direction: column; gap: 1.25rem; }
.stats-chart-wrap { background: rgba(255,255,255,0.02); border-radius: 1rem; padding: 1rem; width: 100%; }
.stats-container { position: relative; height: 220px; max-width: 280px; margin: 0 auto; }
.stats-desc { margin-top: 1rem; padding: 1rem; background: rgba(255,255,255,0.02); border-radius: 0.75rem; }
.stats-detail { padding: 0.25rem 0; }
.stats-rarity { font-size: 0.95rem; font-weight: 700; color: #fbbf24; margin-bottom: 0.5rem; }
.stats-main { font-size: 0.95rem; color: rgba(255,255,255,0.8); line-height: 1.7; margin-bottom: 0.5rem; }
.stats-rank { font-size: 0.85rem; color: rgba(255,255,255,0.6); margin-bottom: 0.5rem; }
.stats-insight { color: rgba(255,255,255,0.65); line-height: 1.7; padding: 0.625rem; background: rgba(255,255,255,0.03); border-radius: 0.5rem; border-left: 3px solid #667eea; font-size: 0.875rem; }
.stats-gender-title { font-size: 0.9rem; font-weight: 600; color: #fff; margin-bottom: 0.5rem; }
.stats-gender-header { font-size: 0.938rem; font-weight: 600; color: #fff; margin-bottom: 0.625rem; display: flex; align-items: center; gap: 0.5rem; }
.gender-icon { font-size: 1.125rem; }
.stats-gender-bar { display: flex; flex-direction: column; gap: 0.312rem; margin-bottom: 0.75rem; }
.gender-bar-row { display: flex; align-items: center; gap: 0.625rem; }
.gender-bar-label-left { width: 50px; text-align: right; font-size: 0.812rem; color: #667eea; font-weight: 600; }
.gender-bar-label-right { width: 50px; text-align: left; font-size: 0.812rem; color: #ec4899; font-weight: 600; }
.gender-bar-track { flex: 1; height: 32px; display: flex; background: rgba(255,255,255,0.05); border-radius: 4px; overflow: hidden; position: relative; }
.gender-bar-male { background: linear-gradient(90deg, #667eea, #764ba2); transition: width 0.6s ease; }
.gender-bar-female { background: linear-gradient(90deg, #ec4899, #f43f5e); transition: width 0.6s ease; }
.gender-bar-center-line { width: 2px; background: rgba(255,255,255,0.3); position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); z-index: 1; }
.gender-bar-values { display: flex; justify-content: space-between; padding: 0 50px; }
.gender-bar-value-left { font-size: 0.875rem; color: #667eea; font-weight: 700; }
.gender-bar-value-right { font-size: 0.875rem; color: #ec4899; font-weight: 700; }
.stats-gender-ratio { font-size: 0.875rem; color: rgba(255,255,255,0.7); margin-bottom: 0.625rem; text-align: center; }

/* ===== 同类型名人板块 ===== */
.famous-section { background: rgba(255,255,255,0.03); border-radius: 1.25rem; padding: 1rem; margin-bottom: 1.5rem; border: 1px solid rgba(255,255,255,0.06); }
.famous-intro { font-size: 0.95rem; color: rgba(255,255,255,0.7); margin-bottom: 1rem; line-height: 1.7; }
.famous-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.famous-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem; background: rgba(255,255,255,0.04); border-radius: 0.75rem; transition: all 0.3s; }
.famous-item:hover { background: rgba(255,255,255,0.08); transform: translateY(-2px); }
.famous-avatar { width: 2.5rem; height: 2.5rem; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; color: #fff; flex-shrink: 0; }
.famous-info { flex: 1; min-width: 0; }
.famous-name { font-weight: 600; font-size: 0.95rem; color: #fff; margin-bottom: 0.25rem; }
.famous-meta { font-size: 0.8rem; color: rgba(255,255,255,0.6); line-height: 1.4; }
.famous-quote { font-size: 0.8rem; color: rgba(255,255,255,0.75); line-height: 1.6; margin-top: 0.5rem; padding: 0.5rem 0.75rem; background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.15)); border-left: 3px solid #667eea; border-radius: 0 0.5rem 0.5rem 0; font-style: italic; }
@media (max-width: 600px) { .famous-list { grid-template-columns: 1fr; } .stats-content { flex-direction: column; } .gender-bar-label-left, .gender-bar-label-right { display: none; } .gender-bar-values { padding: 0; } }