/**
 * MBTI结果页面样式
 * 包含所有结果展示相关的CSS样式
 */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { width: 100%; }
body { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%); min-height: 100vh; line-height: 1.7; width: 100%; }

/* 跳过导航链接样式 - 仅在获得焦点时显示 */
.skip-link { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); padding: 0.75rem 1.5rem; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border-radius: 0.75rem; font-weight: 600; z-index: 9999; transition: top 0.3s; text-decoration: none; font-size: 1rem; }
.skip-link:focus { top: 0.625rem; outline: 3px solid #fff; outline-offset: 2px; }

/* 全局焦点样式 - 确保键盘导航可见性 */
*:focus { outline: 2px solid #667eea; outline-offset: 2px; }
*:focus:not(:focus-visible) { outline: none; }
*:focus-visible { outline: 3px solid #667eea; outline-offset: 2px; }
button:focus-visible, a:focus-visible { outline: 3px solid #667eea; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(102,126,234,0.3); }

/* WCAG AA颜色对比度优化 */
/* 确保文本颜色对比度至少4.5:1（普通文本）或3:1（大文本） */
/* 主要文本使用白色 #fff，对比度约9.76:1 ✓ */
/* 次要文本使用 rgba(255,255,255,0.75)，对比度约7.2:1 ✓ */
/* 弱化文本使用 rgba(255,255,255,0.6)，对比度约5.5:1 ✓ */
/* 原来的0.5透明度对比度约4.88:1，刚好达标，提升到0.6更安全 */

.type-selector { position: fixed; bottom: 2.188rem; left: 2.188rem; z-index: 100; background: rgba(30,30,60,0.95); padding: 1.25rem 1.5rem; border-radius: 1rem; border: 1px solid rgba(102,126,234,0.3); display: flex; flex-direction: column; gap: 1rem; box-shadow: 0 0.625rem 2.25rem rgba(0,0,0,0.4); }
.type-selector label { color: #fff; font-size: 1.062rem; text-align: center; }
.type-selector select { padding: 0.875rem 1.25rem; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 0.75rem; color: #fff; font-size: 1.188rem; font-weight: 600; cursor: pointer; min-width: 9.375rem; }
.type-selector select option { background: #1a1a2e; }
.type-selector .preview-badge { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; padding: 0.625rem 1rem; border-radius: 1.25rem; font-size: 0.938rem; font-weight: 600; text-align: center; }

.wrap { max-width: 68.75rem; margin: 0 auto; padding: 4.375rem 1.75rem 8.75rem; width: 100%; }

.header-hero { padding: 2.812rem 2.25rem; background: rgba(255,255,255,0.03); border-radius: 2rem; margin-bottom: 2.25rem; border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 2.812rem; }
.hero-content { flex: 1; min-width: 0; }
.hero-image { flex-shrink: 0; width: 28.75rem; display: flex; align-items: center; justify-content: center; }
.hero-image img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 0.625rem 2.25rem rgba(102,126,234,0.4)); }
.type-badge { display: inline-block; padding: 0.875rem 2rem; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 1.75rem; font-size: 1.125rem; color: rgba(255,255,255,0.95); margin-bottom: 1.375rem; font-weight: 600; }
.user-greeting { font-size: 1.375rem; color: #abdb87; margin-bottom: 0.938rem; font-weight: 600; }
.type-code-big { font-size: 6.25rem; 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.625rem; line-height: 1; margin-bottom: 0.875rem; }
.type-name-big { font-size: 2.5rem; font-weight: 700; color: #fff; margin: 0.875rem 0; }
.type-name-en-inline { font-size: 1.75rem; color: rgba(255,255,255,0.5); font-style: italic; font-weight: 400; margin-left: 0.5rem; }
.type-title-big { font-size: 1.375rem; color: rgba(255,255,255,0.7); margin-bottom: 1.125rem; }

.group-tags-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; margin-top: 0.625rem; }
.group-tag { display: inline-block; padding: 0.875rem 2rem; border-radius: 1.75rem; font-size: 1.188rem; font-weight: 600; margin: 0.625rem 0.312rem; }
.group-analyst { background: rgba(102,126,234,0.2); color: #667eea; border: 1px solid rgba(102,126,234,0.4); }
.group-diplomat { background: rgba(56,178,172,0.2); color: #38b2ac; border: 1px solid rgba(56,178,172,0.4); }
.group-sentinel { background: rgba(66,153,225,0.2); color: #4299e1; border: 1px solid rgba(66,153,225,0.4); }
.group-explorer { background: rgba(237,137,54,0.2); color: #ed8936; border: 1px solid rgba(237,137,54,0.4); }
.group-types-row { display: flex; flex-wrap: nowrap; gap: 0.625rem; margin-top: 0.938rem; justify-content: center; }
.group-type-item { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.25rem; border-radius: 0.75rem; font-size: 1rem; font-weight: 600; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.1); cursor: pointer; transition: all 0.3s; text-decoration: none; min-width: 4.375rem; }
.group-type-item:hover { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.95); transform: translateY(-2px); }
.group-type-item.current { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border-color: transparent; font-weight: 700; box-shadow: 0 0.25rem 0.938rem rgba(102,126,234,0.4); }

.chart-section { background: rgba(255,255,255,0.03); border-radius: 1.75rem; padding: 2.812rem; margin-bottom: 2rem; border: 1px solid rgba(255,255,255,0.06); }
.chart-title { font-size: 1.75rem; font-weight: 700; color: #fff; margin-bottom: 1.75rem; text-align: center; display: flex; align-items: center; justify-content: center; gap: 0.625rem; }
.chart-analysis { background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(118,75,162,0.05)); border-radius: 1.125rem; padding: 1.75rem; margin-bottom: 2.25rem; border: 1px solid rgba(102,126,234,0.2); }
.chart-analysis-title { font-size: 1.375rem; font-weight: 700; color: #667eea; margin-bottom: 1.125rem; display: flex; align-items: center; gap: 0.75rem; }
.chart-analysis-desc { font-size: 1.125rem; color: rgba(255,255,255,0.8); line-height: 1.9; margin-bottom: 1.125rem; }
.chart-analysis-highlight { background: rgba(102,126,234,0.15); padding: 1.125rem 1.375rem; border-radius: 0.875rem; border-left: 0.312rem solid #667eea; display: flex; align-items: flex-start; gap: 0.5rem; }
.chart-analysis-highlight p { font-size: 1.062rem; color: #a5b4fc; line-height: 1.8; }
.chart-analysis-highlight::before { content: '💡'; font-size: 1.125rem; flex-shrink: 0; }

.radar-section { margin-bottom: 2.812rem; }
.radar-container { position: relative; height: 22.5rem; max-width: 28.75rem; margin: 0 auto; }

.dim-analysis { display: flex; flex-direction: column; gap: 2.25rem; }
.dim-row { background: rgba(255,255,255,0.02); border-radius: 1.375rem; padding: 2rem; border: 1px solid rgba(255,255,255,0.05); }
.dim-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.375rem; }
.dim-label-wrap { display: flex; align-items: center; gap: 0.875rem; }
.dim-icon { width: 2rem; height: 2rem; }
.dim-label { font-size: 1.188rem; color: rgba(255,255,255,0.7); font-weight: 500; }
.dim-result { font-size: 1.375rem; font-weight: 700; padding: 0.625rem 1.375rem; border-radius: 1.375rem; }
.dim-result.left { background: rgba(102,126,234,0.2); color: #667eea; }
.dim-result.right { background: rgba(237,137,54,0.2); color: #ed8936; }

.dim-bar-wrap { position: relative; margin-bottom: 1.375rem; padding: 0 4.375rem; }
.dim-bar { position: relative; height: 1.125rem; background: linear-gradient(90deg, #667eea 0%, rgba(255,255,255,0.15) 50%, #ed8936 100%); border-radius: 0.625rem; overflow: visible; }
.dim-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 2.812rem; height: 2.812rem; background: #fff; border-radius: 50%; box-shadow: 0 0.312rem 0.875rem rgba(0,0,0,0.4); transition: left 0.5s ease; z-index: 10; display: flex; align-items: center; justify-content: center; }
.dim-marker-letter { font-size: 1.25rem; font-weight: 800; color: #667eea; }
.dim-marker-letter.right { color: #ed8936; }

.dim-labels { display: flex; justify-content: space-between; position: relative; }
.dim-side { display: flex; align-items: center; gap: 0.75rem; }
.dim-letter { font-size: 2rem; font-weight: 800; }
.dim-side-name { font-size: 1.062rem; color: rgba(255,255,255,0.7); }
.dim-pct { font-size: 1.562rem; font-weight: 700; color: #fff; letter-spacing: 0.1em; }
.dim-pct.left { color: #60a5fa; }
.dim-pct.right { color: #fb923c; }

.dim-desc { display: grid; grid-template-columns: 1fr 1fr; gap: 1.375rem; margin-top: 1.375rem; padding-top: 1.375rem; border-top: 1px solid rgba(255,255,255,0.05); }
.dim-desc-item { padding: 1.125rem; background: rgba(255,255,255,0.02); border-radius: 0.875rem; }
.dim-desc-item.left { border-left: 0.25rem solid #667eea; }
.dim-desc-item.right { border-left: 0.25rem solid #ed8936; }
.dim-desc-text { font-size: 1rem; color: rgba(255,255,255,0.65); line-height: 1.7; }

/* 维度置信度样式 */
.dim-confidence-row { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 0.938rem; padding-top: 0.938rem; border-top: 1px solid rgba(255,255,255,0.05); }
.dim-confidence-bar { width: 11.25rem; height: 0.5rem; background: rgba(255,255,255,0.1); border-radius: 0.25rem; overflow: hidden; flex-shrink: 0; }
.dim-confidence-fill { height: 100%; border-radius: 0.25rem; transition: width 0.5s ease; }
.dim-confidence-fill.very-high { background: linear-gradient(90deg, rgba(16,185,129,0.4), rgba(52,211,153,0.5)); }
.dim-confidence-fill.high { background: linear-gradient(90deg, rgba(56,178,172,0.4), rgba(79,209,197,0.5)); }
.dim-confidence-fill.medium { background: linear-gradient(90deg, rgba(102,126,234,0.4), rgba(129,140,248,0.5)); }
.dim-confidence-fill.low { background: linear-gradient(90deg, rgba(245,158,11,0.4), rgba(251,191,36,0.5)); }
.dim-confidence-fill.very-low { background: linear-gradient(90deg, rgba(239,68,68,0.4), rgba(248,113,113,0.5)); }
.dim-confidence-info { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.dim-confidence-label { font-size: 0.875rem; color: rgba(255,255,255,0.5); }
.dim-confidence-value { font-size: 0.938rem; font-weight: 700; }
.dim-confidence-desc { font-size: 0.938rem; color: #959595; }
.dim-desc { display: flex; gap: 1.25rem; margin-top: 0.938rem; padding-top: 0.938rem; border-top: 1px solid rgba(255,255,255,0.05); }
.dim-desc-item { flex: 1; padding: 0.75rem 0.938rem; background: rgba(255,255,255,0.02); border-radius: 0.625rem; }
.dim-desc-item.left { border-left: 3px solid rgba(102,126,234,0.5); }
.dim-desc-item.right { border-left: 3px solid rgba(237,137,54,0.5); }
.dim-desc-title { font-weight: 600; }
.dim-desc-title.left { color: #667eea; }
.dim-desc-title.right { color: #ed8936; }
.dim-confidence-value.very-high { color: #34d399; }
.dim-confidence-value.high { color: #4fd1c5; }
.dim-confidence-value.medium { color: #818cf8; }
.dim-confidence-value.low { color: #fbbf24; }
.dim-confidence-value.very-low { color: #f87171; }
.dim-confidence-level { font-size: 0.75rem; padding: 0.188rem 0.5rem; border-radius: 0.375rem; font-weight: 500; }
.dim-confidence-level.very-high { background: rgba(16,185,129,0.2); color: #34d399; }
.dim-confidence-level.high { background: rgba(56,178,172,0.2); color: #4fd1c5; }
.dim-confidence-level.medium { background: rgba(102,126,234,0.2); color: #818cf8; }
.dim-confidence-level.low { background: rgba(245,158,11,0.2); color: #fbbf24; }
.dim-confidence-level.very-low { background: rgba(239,68,68,0.2); color: #f87171; }
.dim-edge-badge { font-size: 0.688rem; padding: 0.188rem 0.5rem; background: rgba(245,158,11,0.2); color: #fbbf24; border-radius: 0.375rem; border: 1px solid rgba(245,158,11,0.3); font-weight: 500; }

/* 边缘类型警告样式 */
.edge-warning-section { display: flex; align-items: flex-start; gap: 1.125rem; padding: 1.375rem; background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(245,158,11,0.05)); border-radius: 1.125rem; margin-bottom: 1.75rem; border: 1px solid rgba(245,158,11,0.3); }
.edge-warning-icon { font-size: 1.875rem; flex-shrink: 0; }
.edge-warning-content { flex: 1; }
.edge-warning-title { font-size: 1.188rem; font-weight: 700; color: #fbbf24; margin-bottom: 0.625rem; }
.edge-warning-text { font-size: 0.938rem; color: rgba(255,255,255,0.8); line-height: 1.7; }
.edge-warning-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.625rem; }
.edge-warning-item { padding: 0.625rem 0.875rem; background: rgba(255,255,255,0.05); border-radius: 0.625rem; border-left: 0.188rem solid #f59e0b; }
.edge-warning-item.high { border-left-color: #ef4444; background: rgba(239,68,68,0.1); }
.edge-warning-item strong { color: #fbbf24; }
.edge-warning-tip { padding: 0.75rem 1rem; background: rgba(255,255,255,0.05); border-radius: 0.625rem; font-size: 0.875rem; color: rgba(255,255,255,0.7); line-height: 1.6; }
.edge-warning-tip.success { background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); color: rgba(110,231,183,0.9); }
.edge-warning-tip.warning { background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3); color: rgba(252,211,77,0.9); }

/* 一致性检测样式 */
.consistency-section { padding: 1.25rem; background: linear-gradient(135deg, rgba(102,126,234,0.12), rgba(118,75,162,0.08)); border-radius: 1.375rem; margin-bottom: 1.75rem; border: 1px solid rgba(102,126,234,0.25); }
.consistency-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; padding-bottom: 0.938rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.consistency-header-left { display: flex; align-items: center; gap: 0.75rem; }
.consistency-icon { font-size: 1.75rem; font-weight: 700; }
.consistency-title { font-size: 1.25rem; font-weight: 700; color: #fff; }
.consistency-score-wrap { display: flex; flex-direction: column; align-items: flex-end; }
.consistency-score-label { font-size: 0.812rem; color: rgba(255,255,255,0.6); margin-bottom: 0.188rem; }
.consistency-score { font-size: 2rem; font-weight: 800; line-height: 1; }
.consistency-score.high { color: #34d399; }
.consistency-score.medium { color: #fbbf24; }
.consistency-score.low { color: #fb923c; }
.consistency-score.very-low { color: #f87171; }
.consistency-bar-fill.high { background: linear-gradient(90deg, #34d399, #10b981); }
.consistency-bar-fill.medium { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.consistency-bar-fill.low { background: linear-gradient(90deg, #fb923c, #f97316); }
.consistency-bar-fill.very-low { background: linear-gradient(90deg, #f87171, #ef4444); }
.consistency-body { padding-left: 0.312rem; }
.consistency-bar-wrap { margin-bottom: 1.125rem; }
.consistency-bar { height: 0.75rem; background: rgba(255,255,255,0.1); border-radius: 0.375rem; overflow: hidden; }
.consistency-bar-fill { height: 100%; border-radius: 0.375rem; transition: width 0.5s ease; }
.consistency-message { font-size: 1rem; color: rgba(255,255,255,0.9); line-height: 1.7; margin-bottom: 0.938rem; }
.consistency-info { background: rgba(255,255,255,0.05); border-radius: 0.625rem; padding: 0.75rem 0.938rem; margin-bottom: 0.938rem; }
.consistency-info p { font-size: 0.875rem; color: rgba(255,255,255,0.6); line-height: 1.6; margin: 0; }
.consistency-title-row { margin-bottom: 0.5rem; }
.consistency-title-row strong { color: #a5b4fc; font-size: 1rem; }
.consistency-desc { font-size: 0.875rem; color: rgba(255,255,255,0.7); line-height: 1.7; margin: 0; }
.consistency-detail-toggle { margin-top: 0.938rem; text-align: center; }
.consistency-detail-toggle .toggle-btn { display: inline-block; padding: 0.625rem 1.25rem; background: rgba(255,255,255,0.08); border-radius: 0.625rem; font-size: 0.875rem; color: rgba(255,255,255,0.7); cursor: pointer; transition: all 0.3s; }
.consistency-detail-toggle .toggle-btn:hover { background: rgba(255,255,255,0.15); color: #fff; }
.consistency-detail { margin-top: 0.938rem; }
.consistency-detail-list { display: flex; flex-direction: column; gap: 0.75rem; }
.time-check-section { background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(251,191,36,0.04)); border-radius: 1rem; padding: 1.25rem; margin-bottom: 1.25rem; border: 1px solid rgba(245,158,11,0.2); position: relative; overflow: hidden; }
.time-check-section.success { background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(52,211,153,0.04)); border-color: rgba(16,185,129,0.2); }
.time-check-section::before { content: ''; position: absolute; top: -30px; right: -30px; width: 100px; height: 100px; background: radial-gradient(circle, rgba(245,158,11,0.15) 0%, transparent 70%); pointer-events: none; }
.time-check-section.success::before { background: radial-gradient(circle, rgba(16,185,129,0.15) 0%, transparent 70%); }
.time-check-header { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.75rem; }
.time-check-icon { font-size: 1.375rem; }
.time-check-title { font-size: 1.062rem; font-weight: 700; color: #f59e0b; }
.time-check-section.success .time-check-title { color: #10b981; }
.time-check-content { font-size: 0.938rem; color: rgba(255,255,255,0.85); line-height: 1.8; }
.time-check-content strong { color: #fbbf24; font-weight: 700; }
.time-check-section.success .time-check-content strong { color: #34d399; }
.time-warning { background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.25); border-radius: 0.625rem; padding: 0.938rem; margin-top: 0.625rem; color: #fcd34d; line-height: 1.8; }
.time-success { background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.25); border-radius: 0.625rem; padding: 0.938rem; margin-top: 0.625rem; color: #6ee7b7; line-height: 1.8; }
.time-detail { display: flex; align-items: center; gap: 0.625rem; margin-top: 0.75rem; padding: 0.625rem 0.938rem; background: rgba(255,255,255,0.05); border-radius: 0.5rem; font-size: 0.875rem; color: rgba(255,255,255,0.7); }
.time-detail-icon { font-size: 1rem; }
.time-detail-value { font-weight: 700; color: #f59e0b; }
.time-check-section.success .time-detail-value { color: #10b981; }
.consistency-check-section { margin-top: 0.938rem; padding-top: 0.938rem; border-top: 1px solid rgba(255,255,255,0.08); }
.consistency-check-header { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.75rem; }
.consistency-check-icon { font-size: 1.25rem; }
.consistency-check-title { font-size: 1.062rem; font-weight: 700; color: rgba(255,255,255,0.9); }
.confidence-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.75rem 0; padding: 0.75rem 0.938rem; background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(251,191,36,0.05)); border-radius: 0.625rem; border: 1px solid rgba(245,158,11,0.2); }
.confidence-formula-item { display: flex; align-items: center; gap: 0.312rem; padding: 0.312rem 0.625rem; background: rgba(255,255,255,0.08); border-radius: 0.375rem; font-size: 0.812rem; }
.confidence-formula-item .label { color: rgba(255,255,255,0.6); }
.confidence-formula-item .value { font-weight: 700; color: #fbbf24; }
.confidence-formula-item.result { background: rgba(245,158,11,0.2); }
.confidence-formula-item.result .value { color: #f59e0b; font-size: 0.938rem; }
.confidence-formula-operator { font-size: 0.875rem; color: rgba(255,255,255,0.4); }
.consistency-pair-item { background: rgba(255,255,255,0.05); border-radius: 0.75rem; padding: 0.938rem; border: 1px solid rgba(255,255,255,0.1); }
.consistency-pair-header { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.5rem; font-size: 0.938rem; font-weight: 600; color: rgba(255,255,255,0.9); }
.consistency-pair-dim { display: inline-block; padding: 0.188rem 0.5rem; background: rgba(102,126,234,0.2); color: #a5b4fc; border-radius: 0.312rem; font-size: 0.75rem; font-weight: 500; }
.consistency-pair-reason { font-size: 0.875rem; color: rgba(255,255,255,0.6); line-height: 1.6; }
.consistency-pair-questions { margin: 0.625rem 0; padding: 0.625rem; background: rgba(0,0,0,0.2); border-radius: 0.5rem; }
.consistency-question { padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.consistency-question:last-child { border-bottom: none; }
.consistency-question .q-num { font-size: 0.812rem; font-weight: 600; color: #667eea; }
.consistency-question .q-text { font-size: 0.812rem; color: rgba(255,255,255,0.8); line-height: 1.5; }
.consistency-question .q-answer { font-size: 0.75rem; color: #fbbf24; font-weight: 500; }
.consistency-pair-explain { margin-top: 0.625rem; padding: 0.625rem; background: rgba(251,191,36,0.1); border-left: 3px solid #fbbf24; border-radius: 0 0.5rem 0.5rem 0; font-size: 0.812rem; color: rgba(255,255,255,0.7); line-height: 1.6; }
.pair-header { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.625rem; }
.pair-dimension { display: inline-block; padding: 0.25rem 0.625rem; background: rgba(102,126,234,0.2); color: #a5b4fc; border-radius: 0.375rem; font-size: 0.812rem; }
.pair-dimension strong { color: #667eea; font-weight: 700; }
.pair-reason { font-size: 0.812rem; color: rgba(255,255,255,0.6); }
.pair-questions { display: flex; flex-direction: column; gap: 0.5rem; }
.pair-q { display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.625rem; background: rgba(255,255,255,0.03); border-radius: 0.5rem; }
.q-num { font-size: 0.812rem; font-weight: 600; color: #667eea; min-width: 3.75rem; flex-shrink: 0; }
.q-text { font-size: 0.812rem; color: rgba(255,255,255,0.8); flex: 1; line-height: 1.5; }
.q-answer { font-size: 0.75rem; font-weight: 600; padding: 0.188rem 0.5rem; border-radius: 0.25rem; flex-shrink: 0; }
.q-answer.a { background: rgba(16,185,129,0.2); color: #10b981; }
.q-answer.b { background: rgba(236,72,153,0.2); color: #ec4899; }
.q-answer.scale-7.agree { background: rgba(34,197,94,0.2); color: #22c55e; }
.q-answer.scale-7.disagree { background: rgba(168,85,247,0.2); color: #a855f7; }
.q-answer.scale-7.neutral { background: rgba(107,114,128,0.2); color: #9ca3af; }

.desc-section { background: linear-gradient(135deg, rgba(102,126,234,0.08), rgba(118,75,162,0.05)); border-radius: 1.75rem; padding: 2.812rem; margin-bottom: 2rem; border: 1px solid rgba(102,126,234,0.2); position: relative; overflow: hidden; }
.desc-section::before { content: ''; position: absolute; top: -50%; right: -20%; width: 21.25rem; height: 21.25rem; background: radial-gradient(circle, rgba(102,126,234,0.1) 0%, transparent 70%); pointer-events: none; }
.section-title { font-size: 1.562rem; font-weight: 700; color: #fff; margin-bottom: 0.938rem; display: flex; align-items: center; gap: 0.875rem; }
.section-title-en { font-size: 1rem; font-weight: 500; color: rgba(255,255,255,0.5); font-style: italic; }
.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.5rem; height: 2.5rem; }
.section-help:hover { opacity: 1; transform: scale(1.1); }
.section-help svg { width: 2rem; height: 2rem; }
.desc-portrait { display: grid; grid-template-columns: 1fr 1fr; gap: 1.562rem; margin-bottom: 1.875rem; }
.desc-portrait-item { background: rgba(255,255,255,0.04); border-radius: 1.125rem; padding: 1.375rem; border: 1px solid rgba(255,255,255,0.08); }
.desc-portrait-label { text-align: center; color: #dedfb3; margin-bottom: 0.625rem; text-transform: uppercase; letter-spacing: 0.062rem; }
.desc-portrait-text { font-size: 1rem; color: rgba(255,255,255,0.8); line-height: 1.8; }
.desc-core { background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.1)); padding: 1.562rem; border-radius: 1.125rem; border-left: 0.312rem solid #667eea; margin-bottom: 1.75rem; }
.desc-core-text { font-size: 1.125rem; color: rgba(255,255,255,0.9); line-height: 1.9; }
.desc-scenes { margin-bottom: 1.75rem; }
.desc-scenes-title { font-size: 1.125rem; font-weight: 600; color: #a5b4fc; margin-bottom: 0.938rem; display: flex; align-items: center; gap: 0.625rem; }
.desc-scene-item { display: flex; align-items: flex-start; gap: 1.25rem; padding: 1.25rem; background: rgba(255,255,255,0.04); border-radius: 0.875rem; margin-bottom: 0.938rem; border: 1px solid rgba(255,255,255,0.06); }
.desc-scene-item:last-child { margin-bottom: 0; }
.desc-scene-label { font-size: 1rem; font-weight: 700; color: #38b2ac; min-width: 5.625rem; flex-shrink: 0; padding: 0.5rem 0.75rem; background: rgba(56,178,172,0.1); border-radius: 0.5rem; text-align: center; border: 1px solid rgba(56,178,172,0.2); }
.desc-scene-text { font-size: 1rem; color: rgba(255,255,255,0.8); line-height: 1.8; flex: 1; padding-top: 0.312rem; }
.tags { display: flex; flex-wrap: wrap; gap: 0.875rem; }
.tag { padding: 0.875rem 1.75rem; background: linear-gradient(135deg, rgba(102,126,234,0.3), rgba(118,75,162,0.3)); border: 1px solid rgba(102,126,234,0.5); border-radius: 1.875rem; font-size: 1.062rem; color: #fff; font-weight: 500; }

.cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.card-box { background: rgba(255,255,255,0.03); border-radius: 1.75rem; padding: 1.562rem; border: 1px solid rgba(255,255,255,0.06); }
.card-box.strength { border-top: 0.25rem solid #10b981; background: linear-gradient(180deg, rgba(16,185,129,0.05), transparent); }
.card-box.weakness { border-top: 0.25rem solid #f59e0b; background: linear-gradient(180deg, rgba(245,158,11,0.05), transparent); }
.card-title { font-size: 1.375rem; font-weight: 700; color: #fff; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.875rem; }
.card-box.strength .card-title { color: #10b981; }
.card-box.weakness .card-title { color: #f59e0b; }
.trait-card { background: rgba(255,255,255,0.04); border-radius: 1rem; padding: 1.25rem; margin-bottom: 0.938rem; border: 1px solid rgba(255,255,255,0.08); transition: all 0.3s; }
.trait-card:hover { transform: translateY(-0.125rem); box-shadow: 0 0.312rem 0.938rem rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.15); }
.trait-card:last-child { margin-bottom: 0; }
.trait-card-header { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.75rem; }
.trait-card-icon { font-size: 1.375rem; }
.trait-card-title { font-size: 1.062rem; font-weight: 600; color: #fff; }
.card-box.strength .trait-card { border-left: 0.188rem solid rgba(16,185,129,0.5); }
.card-box.weakness .trait-card { border-left: 0.188rem solid rgba(245,158,11,0.5); }
.card-box.strength .trait-card-title { color: #34d399; }
.card-box.weakness .trait-card-title { color: #fbbf24; }
.trait-card-desc { font-size: 0.938rem; color: rgba(255,255,255,0.75); line-height: 1.7; margin-bottom: 0.75rem; }
.trait-card-detail { background: rgba(255,255,255,0.03); border-radius: 0.625rem; padding: 0.75rem 0.938rem; margin-top: 0.625rem; }
.trait-card-detail-label { font-size: 0.938rem; color: #dbdd8b; margin-bottom: 0.312rem; font-weight: 500; }
.trait-card-detail-text { font-size: 0.938rem; color: rgba(255,255,255,0.7); line-height: 1.6; }
.card-box.strength .trait-card-detail { background: rgba(16,185,129,0.08); border-left: 0.125rem solid rgba(16,185,129,0.3); }
.card-box.weakness .trait-card-detail { background: rgba(245,158,11,0.08); border-left: 0.125rem solid rgba(245,158,11,0.3); }
.list-styled { list-style: none; }
.list-styled li { padding: 1rem 0 1rem 2.5rem; position: relative; font-size: 1.125rem; color: rgba(255,255,255,0.75); line-height: 1.7; border-bottom: 1px solid rgba(255,255,255,0.04); }
.list-styled li:last-child { border-bottom: none; }
.list-styled li::before { content: '✓'; position: absolute; left: 0; color: #10b981; font-weight: 700; font-size: 1.25rem; }
.list-styled.weak li::before { content: '⚠'; color: #f59e0b; font-size: 1.125rem; }

.work-section { background: rgba(255,255,255,0.03); border-radius: 1.75rem; padding: 1.875rem; margin-bottom: 2rem; border: 1px solid rgba(255,255,255,0.06); }
.work-intro { font-size: 1.125rem; color: rgba(255,255,255,0.75); line-height: 2; margin-bottom: 1.875rem; padding: 1.562rem; background: linear-gradient(135deg, rgba(102,126,234,0.12), rgba(102,126,234,0.04)); border-radius: 1.125rem; border-left: 0.25rem solid #667eea; }
.work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-bottom: 1.875rem; }
.work-item { background: rgba(255,255,255,0.04); border-radius: 1rem; padding: 1.375rem; border: 1px solid rgba(255,255,255,0.08); transition: all 0.3s ease; }
.work-item:hover { background: rgba(255,255,255,0.06); transform: translateY(-2px); }
.work-item-title { font-size: 1rem; font-weight: 700; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.625rem; padding-bottom: 0.625rem; border-bottom: 0.062rem solid rgba(255,255,255,0.08); }
.work-item-title.philosophy { color: #818cf8; }
.work-item-title.state { color: #34d399; }
.work-item-title.stress { color: #fbbf24; }
.work-item-title.team { color: #f472b6; }
.work-item-content { font-size: 0.938rem; color: rgba(255,255,255,0.7); line-height: 1.8; }
.work-communication { background: linear-gradient(135deg, rgba(168,85,247,0.08), rgba(168,85,247,0.02)); border-radius: 1.125rem; padding: 1.562rem; margin-bottom: 1.562rem; border: 1px solid rgba(168,85,247,0.15); }
.work-communication-title { font-size: 1.062rem; font-weight: 700; color: #c084fc; margin-bottom: 1.125rem; display: flex; align-items: center; gap: 0.625rem; }
.work-communication-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.938rem; }
.work-comm-item { background: rgba(255,255,255,0.04); border-radius: 0.75rem; padding: 1.125rem; border-left: 0.188rem solid rgba(168,85,247,0.4); }
.work-comm-type { font-size: 0.938rem; font-weight: 600; color: #c084fc; margin-bottom: 0.5rem; }
.work-comm-style { font-size: 0.938rem; color: rgba(255,255,255,0.7); line-height: 1.7; }
.work-tips-box { background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(16,185,129,0.04)); border-radius: 1.125rem; padding: 1.562rem; border: 1px solid rgba(16,185,129,0.2); }
.work-tips-title { font-size: 1.062rem; font-weight: 700; color: #34d399; margin-bottom: 0.938rem; display: flex; align-items: center; gap: 0.625rem; }
.work-tips-list { list-style: none; }
.work-tips-list li { font-size: 0.938rem; color: rgba(255,255,255,0.75); padding: 0.75rem 0 0.75rem 1.562rem; position: relative; line-height: 1.8; border-bottom: 1px solid rgba(255,255,255,0.05); }
.work-tips-list li:last-child { border-bottom: none; }
.work-tips-list li::before { content: '✓'; position: absolute; left: 0; color: #34d399; font-weight: 700; }

.job-section { background: rgba(255,255,255,0.03); border-radius: 1.75rem; padding: 2.5rem; margin-bottom: 2rem; border: 1px solid rgba(255,255,255,0.06); }
.job-intro { font-size: 1.1rem; color: rgba(255,255,255,0.6); margin-bottom: 1.875rem; line-height: 1.8; padding: 1.25rem; background: rgba(255,255,255,0.02); border-radius: 0.875rem; border-left: 0.25rem solid #667eea; }
.job-category { margin-bottom: 2.188rem; }
.job-category:last-child { margin-bottom: 0; }
.job-category-title { font-size: 1.375rem; font-weight: 700; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.75rem; }
.job-category-title.yes { color: #10b981; }
.job-category-title.no { color: #f87171; }
.job-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.job-card { background: rgba(255,255,255,0.04); border-radius: 1.125rem; padding: 1.5rem; border: 1px solid rgba(255,255,255,0.08); transition: all 0.3s; }
.job-card:hover { transform: translateY(-0.188rem); box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.15); }
.job-card-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.job-card-emoji { font-size: 1.75rem; }
.job-card-name { font-size: 1.25rem; font-weight: 700; color: #fff; }
.job-card-match { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.875rem; }
.job-match-bar { flex: 1; height: 0.5rem; background: rgba(255,255,255,0.1); border-radius: 0.25rem; overflow: hidden; }
.job-match-fill { height: 100%; background: linear-gradient(90deg, #10b981, #34d399); border-radius: 0.25rem; }
.job-match-text { font-size: 0.875rem; color: #10b981; font-weight: 600; min-width: 6.25rem; }
.job-card-analysis { font-size: 0.938rem; color: #a5b4fc; margin-bottom: 0.75rem; line-height: 1.7; font-style: italic; }
.job-card-desc { font-size: 1rem; color: rgba(255,255,255,0.75); line-height: 1.8; margin-bottom: 0.875rem; }
.job-card-potential { font-size: 0.938rem; color: rgba(255,255,255,0.7); line-height: 1.7; padding: 0.875rem; background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(102,126,234,0.05)); border-radius: 0.625rem; border-left: 0.188rem solid #667eea; }
.potential-label { display: block; font-size: 0.938rem; color: #667eea; font-weight: 600; margin-bottom: 0.375rem; }
.job-card.avoid { border-left: 0.25rem solid #f87171; }
.job-card.avoid .job-card-desc::before, .job-card.avoid .job-card-desc::after { color: #f87171; }
.job-card.suit { border-left: 0.25rem solid #10b981; }
.job-card.suit .job-card-desc::before, .job-card.suit .job-card-desc::after { color: #10b981; }
.job-card-reason { font-size: 0.938rem; color: rgba(255,255,255,0.7); line-height: 1.7; margin-bottom: 0.75rem; padding: 0.75rem; background: rgba(239,68,68,0.08); border-radius: 0.625rem; }
.job-card-advice { font-size: 0.938rem; color: rgba(255,255,255,0.75); line-height: 1.7; margin-bottom: 0.75rem; padding: 0.75rem; background: rgba(16,185,129,0.08); border-radius: 0.625rem; }
.job-card-example { font-size: 0.875rem; color: rgba(255,255,255,0.6); line-height: 1.6; padding: 0.75rem; background: rgba(102,126,234,0.08); border-radius: 0.625rem; font-style: italic; }
.reason-label, .advice-label, .example-label { display: block; font-size: 0.938rem; font-weight: 600; margin-bottom: 0.375rem; }
.reason-label { color: #ef4444; }
.advice-label { color: #10b981; }
.example-label { color: #667eea; }
.job-hope { background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(245,158,11,0.05)); border-radius: 0.875rem; padding: 1.125rem; margin-top: 1rem; border: 1px solid rgba(245,158,11,0.3); }
.job-hope-title { font-size: 0.938rem; color: #fbbf24; margin-bottom: 0.625rem; font-weight: 600; display: flex; align-items: center; gap: 0.5rem; }
.job-hope-text { font-size: 0.938rem; color: rgba(255,255,255,0.7); line-height: 1.7; }
.job-counter-example { margin-top: 0.75rem; padding: 0.75rem 1rem; background: rgba(255,255,255,0.05); border-radius: 0.625rem; }
.job-counter-example p { font-size: 0.875rem; color: rgba(255,255,255,0.6); line-height: 1.6; }
.job-counter-example strong { color: #fbbf24; }

.love-section { background: rgba(255,255,255,0.03); border-radius: 1.75rem; padding: 1.875rem; margin-bottom: 2rem; border: 1px solid rgba(255,255,255,0.06); }
.love-theme { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.562rem; padding: 0.938rem 1.25rem; background: linear-gradient(135deg, rgba(236,72,153,0.2), rgba(236,72,153,0.08)); border-radius: 0.875rem; border-left: 0.25rem solid #ec4899; }
.love-theme-icon { font-size: 1.375rem; }
.love-theme-text { font-size: 1.25rem; font-weight: 700; color: #fff; letter-spacing: 0.062rem; }
.love-intro { font-size: 1.125rem; color: rgba(255,255,255,0.75); line-height: 2; margin-bottom: 1.875rem; padding: 1.562rem; background: rgba(255,255,255,0.03); border-radius: 0.875rem; border: 1px solid rgba(255,255,255,0.06); }
.love-style-card { background: linear-gradient(135deg, rgba(236,72,153,0.12), rgba(236,72,153,0.04)); border-radius: 1.125rem; padding: 1.562rem; margin-bottom: 1.875rem; border: 1px solid rgba(236,72,153,0.2); }
.love-style-card.marriage { background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(59,130,246,0.04)); border: 1px solid rgba(59,130,246,0.25); }
.love-style-card.marriage .love-style-title { color: #60a5fa; }
.love-style-card.marriage .love-style-trait { background: rgba(59,130,246,0.35); }
.love-style-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.938rem; flex-wrap: wrap; gap: 0.625rem; }
.love-style-title { font-size: 1.188rem; font-weight: 700; color: #ec4899; display: flex; align-items: center; gap: 0.5rem; }
.love-style-title::before { content: '💕'; font-size: 1.125rem; }
.love-style-card.marriage .love-style-title::before { content: '💒'; }
.love-style-trait { font-size: 0.875rem; color: #fff; background: rgba(236,72,153,0.3); padding: 0.312rem 0.75rem; border-radius: 1.25rem; }
.love-style-desc { font-size: 1.031rem; color: rgba(255,255,255,0.8); line-height: 1.9; }
.love-indices { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px dashed rgba(255,255,255,0.15); }
.love-indices-title { font-size: 0.938rem; color: rgba(255,255,255,0.5); margin-bottom: 0.938rem; display: flex; align-items: center; gap: 0.5rem; }
.love-indices-title::before { content: '📊'; }
.love-index-row { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.75rem; }
.love-index-icon { font-size: 0.938rem; width: 1.375rem; text-align: center; flex-shrink: 0; }
.love-index-label { font-size: 0.875rem; color: rgba(255,255,255,0.75); width: 4.062rem; flex-shrink: 0; }
.love-index-bar { flex: 1; height: 0.438rem; background: rgba(255,255,255,0.1); border-radius: 0.25rem; overflow: hidden; min-width: 5rem; }
.love-index-fill { height: 100%; border-radius: 0.25rem; transition: width 0.6s ease; }
.love-index-value { font-size: 0.812rem; font-weight: 700; width: 2.188rem; text-align: right; flex-shrink: 0; }
.love-index-level { font-size: 0.688rem; padding: 0.094rem 0.312rem; border-radius: 0.188rem; margin-left: 0.188rem; white-space: nowrap; }
.love-indices-desc { margin-top: 0.938rem; padding: 0.75rem 0.938rem; background: rgba(255,255,255,0.03); border-radius: 0.625rem; }
.love-indices-desc-item { color: rgba(255,255,255,0.7); line-height: 1.7; margin-bottom: 0.5rem; padding-left: 0.75rem; position: relative; }
.love-indices-desc-item:last-child { margin-bottom: 0; }
.love-indices-desc-item::before { content: '•'; position: absolute; left: 0; color: #ec4899; font-weight: 700; }
.love-style-card.marriage .love-indices-desc-item::before { color: #60a5fa; }
.index-level-very-low { background: rgba(239,68,68,0.25); color: #f87171; }
.index-level-low { background: rgba(249,115,22,0.25); color: #fb923c; }
.index-level-medium { background: rgba(234,179,8,0.25); color: #facc15; }
.index-level-high { background: rgba(34,197,94,0.25); color: #4ade80; }
.index-level-very-high { background: rgba(59,130,246,0.25); color: #60a5fa; }
.index-fill-very-low { background: linear-gradient(90deg, #ef4444, #f87171); }
.index-fill-low { background: linear-gradient(90deg, #f97316, #fb923c); }
.index-fill-medium { background: linear-gradient(90deg, #eab308, #facc15); }
.index-fill-high { background: linear-gradient(90deg, #22c55e, #4ade80); }
.index-fill-very-high { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.index-level-risk-very-low { background: rgba(34,197,94,0.25); color: #4ade80; }
.index-level-risk-low { background: rgba(6,182,212,0.25); color: #22d3ee; }
.index-level-risk-medium { background: rgba(234,179,8,0.25); color: #facc15; }
.index-level-risk-high { background: rgba(249,115,22,0.25); color: #fb923c; }
.index-level-risk-very-high { background: rgba(239,68,68,0.25); color: #f87171; }
.index-fill-risk-very-low { background: linear-gradient(90deg, #22c55e, #4ade80); }
.index-fill-risk-low { background: linear-gradient(90deg, #06b6d4, #22d3ee); }
.index-fill-risk-medium { background: linear-gradient(90deg, #eab308, #facc15); }
.index-fill-risk-high { background: linear-gradient(90deg, #f97316, #fb923c); }
.index-fill-risk-very-high { background: linear-gradient(90deg, #ef4444, #f87171); }
.love-section-title { font-size: 1.188rem; font-weight: 700; color: #fff; margin-bottom: 1.125rem; padding-bottom: 0.625rem; border-bottom: 0.125rem solid rgba(236,72,153,0.3); }
.love-needs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.938rem; }
.love-need-item { background: rgba(255,255,255,0.04); border-radius: 0.875rem; padding: 1.25rem; border: 1px solid rgba(255,255,255,0.08); transition: all 0.3s ease; }
.love-need-item:hover { background: rgba(255,255,255,0.06); transform: translateY(-2px); }
.love-need-name { font-size: 1rem; font-weight: 600; color: #f472b6; margin-bottom: 0.5rem; }
.love-need-desc { font-size: 0.938rem; color: rgba(255,255,255,0.65); line-height: 1.7; }
.love-strengths-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.938rem; }
.love-strength-item { background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(16,185,129,0.04)); border-radius: 0.875rem; padding: 1.25rem; border: 1px solid rgba(16,185,129,0.2); text-align: center; }
.love-strength-name { font-size: 0.938rem; font-weight: 600; color: #10b981; margin-bottom: 0.5rem; }
.love-strength-desc { font-size: 0.875rem; color: rgba(255,255,255,0.65); line-height: 1.6; }
.love-challenges-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.938rem; }
.love-challenge-item { background: rgba(255,255,255,0.04); border-radius: 0.875rem; padding: 1.25rem; border-left: 0.25rem solid #f59e0b; }
.love-challenge-name { font-size: 0.938rem; font-weight: 600; color: #fbbf24; margin-bottom: 0.5rem; }
.love-challenge-desc { font-size: 0.938rem; color: rgba(255,255,255,0.65); line-height: 1.7; margin-bottom: 0.625rem; }
.love-challenge-advice { font-size: 0.875rem; color: rgba(255,255,255,0.75); padding: 0.625rem 0.75rem; background: rgba(16,185,129,0.1); border-radius: 0.5rem; line-height: 1.6; }
.love-match-group { margin-bottom: 1.562rem; }
.love-match-group:last-child { margin-bottom: 0; }
.love-match-label { font-size: 1rem; font-weight: 700; margin-bottom: 0.75rem; display: inline-block; padding: 0.375rem 0.875rem; border-radius: 1.25rem; }
.love-match-label.best { background: rgba(102,126,234,0.2); color: #818cf8; }
.love-match-label.good { background: rgba(16,185,129,0.2); color: #34d399; }
.love-match-label.challenge { background: rgba(245,158,11,0.2); color: #fbbf24; }
.love-match-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.938rem; }
.love-match-card { background: rgba(255,255,255,0.04); border-radius: 0.875rem; padding: 1.25rem; border: 1px solid rgba(255,255,255,0.08); transition: all 0.3s ease; }
.love-match-card:hover { background: rgba(255,255,255,0.06); transform: translateY(-2px); }
.love-match-card.best { border-left: 0.188rem solid #667eea; }
.love-match-card.good { border-left: 0.188rem solid #10b981; }
.love-match-card.challenge { border-left: 0.188rem solid #f59e0b; }
.love-match-header { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.625rem; }
.love-match-code { font-size: 1.062rem; font-weight: 700; color: #fff; background: rgba(255,255,255,0.1); padding: 0.188rem 0.5rem; border-radius: 0.312rem; }
.love-match-name { font-size: 0.875rem; color: rgba(255,255,255,0.6); }
.love-match-reason { font-size: 0.938rem; color: rgba(255,255,255,0.7); line-height: 1.7; }
.love-advice { display: flex; gap: 0.938rem; padding: 1.562rem; background: linear-gradient(135deg, rgba(236,72,153,0.15), rgba(236,72,153,0.05)); border-radius: 1.125rem; margin-top: 1.562rem; border: 1px solid rgba(236,72,153,0.2); }
.love-advice-icon { font-size: 1.562rem; flex-shrink: 0; }
.love-advice-text { font-size: 1.062rem; color: rgba(255,255,255,0.85); line-height: 1.9; font-style: italic; }

.growth-section { background: rgba(255,255,255,0.03); border-radius: 1.75rem; padding: 2.5rem; margin-bottom: 2rem; border: 1px solid rgba(255,255,255,0.06); }
.growth-theme { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.562rem; padding: 0.938rem 1.25rem; background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(16,185,129,0.08)); border-radius: 0.875rem; border-left: 0.25rem solid #10b981; }
.growth-theme-icon { font-size: 1.375rem; }
.growth-theme-text { font-size: 1.25rem; font-weight: 700; color: #fff; letter-spacing: 0.062rem; }
.growth-intro { font-size: 1.125rem; color: rgba(255,255,255,0.75); line-height: 2; margin-bottom: 1.875rem; padding: 1.562rem; background: rgba(255,255,255,0.03); border-radius: 0.875rem; border: 1px solid rgba(255,255,255,0.06); }
.growth-section-inner { margin-bottom: 1.875rem; }
.growth-section-inner:last-child { margin-bottom: 0; }
.growth-section-title { font-size: 1.188rem; font-weight: 700; color: #fff; margin-bottom: 1.125rem; padding-bottom: 0.625rem; border-bottom: 0.125rem solid rgba(16,185,129,0.3); }
.growth-gifts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.938rem; }
.growth-gift-item { background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(16,185,129,0.04)); border-radius: 0.875rem; padding: 1.25rem; border: 1px solid rgba(16,185,129,0.2); text-align: center; transition: all 0.3s ease; }
.growth-gift-item:hover { transform: translateY(-3px); box-shadow: 0 0.312rem 1.25rem rgba(16,185,129,0.2); }
.growth-gift-name { font-size: 1rem; font-weight: 600; color: #34d399; margin-bottom: 0.5rem; }
.growth-gift-desc { font-size: 0.938rem; color: rgba(255,255,255,0.65); line-height: 1.6; }
.growth-challenges-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.938rem; }
.growth-challenge-item { background: rgba(255,255,255,0.04); border-radius: 0.875rem; padding: 1.25rem; border-left: 0.25rem solid #f59e0b; }
.growth-challenge-name { font-size: 1rem; font-weight: 600; color: #fbbf24; margin-bottom: 0.5rem; }
.growth-challenge-desc { font-size: 0.938rem; color: rgba(255,255,255,0.65); line-height: 1.7; margin-bottom: 0.625rem; }
.growth-challenge-advice { font-size: 0.875rem; color: rgba(255,255,255,0.75); padding: 0.625rem 0.75rem; background: rgba(16,185,129,0.1); border-radius: 0.5rem; line-height: 1.6; }
.growth-path-timeline { position: relative; padding-left: 1.812rem; }
.growth-path-timeline::before { content: ''; position: absolute; left: 0.5rem; top: 0; bottom: 0; width: 0.188rem; background: linear-gradient(180deg, #10b981, #059669); border-radius: 0.125rem; }
.growth-path-item { position: relative; margin-bottom: 1.25rem; padding: 1.125rem 1.25rem; background: rgba(255,255,255,0.04); border-radius: 0.75rem; transition: all 0.3s ease; }
.growth-path-item:hover { background: rgba(255,255,255,0.06); }
.growth-path-item::before { content: ''; position: absolute; left: -1.75rem; top: 1.375rem; width: 0.75rem; height: 0.75rem; background: #10b981; border-radius: 50%; border: 0.188rem solid rgba(16,185,129,0.3); }
.growth-path-stage { font-size: 1rem; color: #34d399; margin-bottom: 0.312rem; font-weight: 600; }
.growth-path-desc { font-size: 0.938rem; color: rgba(255,255,255,0.75); line-height: 1.7; }
.growth-advice { display: flex; gap: 0.938rem; padding: 1.562rem; background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(16,185,129,0.05)); border-radius: 1.125rem; margin-top: 1.562rem; border: 1px solid rgba(16,185,129,0.2); }
.growth-advice-icon { font-size: 1.562rem; flex-shrink: 0; }
.growth-advice-text { font-size: 1.062rem; color: rgba(255,255,255,0.85); line-height: 1.9; font-style: italic; }

.advice-section { background: rgba(255,255,255,0.03); border-radius: 1.75rem; padding: 2.5rem; margin-bottom: 2rem; border: 1px solid rgba(255,255,255,0.06); }
.advice-intro { font-size: 1.125rem; color: rgba(255,255,255,0.6); margin-bottom: 1.375rem; line-height: 1.8; padding: 1.125rem; background: rgba(255,255,255,0.02); border-radius: 0.875rem; border-left: 0.25rem solid #667eea; }
.advice-content { font-size: 1.188rem; line-height: 2; color: rgba(255,255,255,0.8); margin-bottom: 1.75rem; }
.advice-tips { background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(118,75,162,0.05)); border-radius: 1.125rem; padding: 1.75rem; border: 1px solid rgba(102,126,234,0.2); }
.advice-tips h5 { font-size: 1.188rem; color: #667eea; margin-bottom: 1.125rem; font-weight: 600; display: flex; align-items: center; gap: 0.625rem; }
.advice-tips ul { list-style: none; }
.advice-tips li { font-size: 1.125rem; color: rgba(255,255,255,0.75); padding: 0.875rem 0 0.875rem 2rem; position: relative; line-height: 1.7; border-bottom: 1px solid rgba(255,255,255,0.04); }
.advice-tips li:last-child { border-bottom: none; }
.advice-tips li::before { content: '→'; position: absolute; left: 0; color: #667eea; font-weight: 700; }
.advice-tip-highlight { background: rgba(102,126,234,0.15); padding: 0.188rem 0.625rem; border-radius: 0.312rem; color: #a5b4fc; }

.cognitive-section { background: rgba(255,255,255,0.03); border-radius: 1.75rem; padding: 2.5rem; margin-bottom: 2rem; border: 1px solid rgba(255,255,255,0.06); }
.cognitive-intro { font-size: 1.062rem; color: rgba(255,255,255,0.55); margin-bottom: 1.75rem; line-height: 1.8; }
.cognitive-stack { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.375rem; }
.cognitive-card { background: rgba(255,255,255,0.04); border-radius: 1.25rem; padding: 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.125rem; transition: all 0.3s; position: relative; overflow: hidden; }
.cognitive-card:hover { transform: translateY(-0.312rem); box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,0.2); }
.cognitive-card.dominant { background: linear-gradient(135deg, rgba(102,126,234,0.25), rgba(118,75,162,0.15)); border: 0.188rem solid #667eea; padding: 2.5rem; }
.cognitive-card.auxiliary { background: linear-gradient(135deg, rgba(56,178,172,0.2), rgba(56,178,172,0.1)); border: 0.156rem solid #38b2ac; padding: 2.25rem; }
.cognitive-card.tertiary { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.15); padding: 2rem; }
.cognitive-card.inferior { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); padding: 1.75rem; opacity: 0.85; }
.cognitive-rank { width: 3.125rem; height: 3.125rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.375rem; font-weight: 700; flex-shrink: 0; position: absolute; top: 1.125rem; right: 1.125rem; }
.cognitive-card.dominant .cognitive-rank { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; width: 3.438rem; height: 3.438rem; font-size: 1.562rem; }
.cognitive-card.auxiliary .cognitive-rank { background: linear-gradient(135deg, #38b2ac, #319795); color: #fff; width: 3.125rem; height: 3.125rem; font-size: 1.375rem; }
.cognitive-card.tertiary .cognitive-rank { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); width: 2.812rem; height: 2.812rem; font-size: 1.25rem; }
.cognitive-card.inferior .cognitive-rank { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); width: 2.812rem; height: 2.812rem; font-size: 1.25rem; }
.cognitive-main { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.cognitive-label { font-size: 0.875rem; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.094rem; }
.cognitive-code { font-size: 3.438rem; font-weight: 900; color: #667eea; line-height: 1; }
.cognitive-card.auxiliary .cognitive-code { color: #38b2ac; font-size: 3.125rem; }
.cognitive-card.tertiary .cognitive-code { color: rgba(255,255,255,0.85); font-size: 2.812rem; }
.cognitive-card.inferior .cognitive-code { color: rgba(255,255,255,0.65); font-size: 2.5rem; }
.cognitive-name { font-size: 1.625rem; color: #fff; font-weight: 700; }
.cognitive-card.auxiliary .cognitive-name { font-size: 1.5rem; }
.cognitive-card.tertiary .cognitive-name { font-size: 1.375rem; }
.cognitive-card.inferior .cognitive-name { font-size: 1.25rem; }
.cognitive-desc { font-size: 1rem; color: rgba(255,255,255,0.65); line-height: 1.8; margin-top: 0.312rem; }
.cognitive-insight { font-size: 1rem; color: rgba(255,255,255,0.75); line-height: 1.8; margin-top: 0.75rem; padding: 0.75rem 0.938rem; background: rgba(255,255,255,0.05); border-radius: 0.625rem; border-left: 3px solid rgba(102,126,234,0.5); font-style: italic; }
.cognitive-card.inferior .cognitive-desc { font-size: 0.938rem; }

.compatibility-section { background: rgba(255,255,255,0.03); border-radius: 1.75rem; padding: 1.875rem; margin-bottom: 2rem; border: 1px solid rgba(255,255,255,0.06); }
.compatibility-intro { font-size: 1.062rem; color: rgba(255,255,255,0.55); margin-bottom: 1.75rem; line-height: 1.8; }
.compatibility-list { display: flex; flex-direction: column; gap: 1.125rem; }
.compat-category:last-child { margin-bottom: 0; }
.compat-category-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.125rem; padding: 0.875rem 1.375rem; border-radius: 0.875rem; }
.compat-category-title.best { background: linear-gradient(135deg, rgba(16,185,129,0.2), rgba(16,185,129,0.1)); color: #10b981; }
.compat-category-title.good { background: linear-gradient(135deg, rgba(102,126,234,0.2), rgba(102,126,234,0.1)); color: #667eea; }
.compat-category-title.challenge { background: linear-gradient(135deg, rgba(245,158,11,0.2), rgba(245,158,11,0.1)); color: #f59e0b; }
.compatibility-item { background: rgba(255,255,255,0.04); border-radius: 1.125rem; padding: 1.375rem 1.75rem; display: flex; align-items: center; gap: 1.375rem; border: 1px solid rgba(255,255,255,0.06); transition: all 0.3s; margin-bottom: 0.75rem; }
.compatibility-item:hover { background: rgba(255,255,255,0.06); transform: translateX(0.312rem); }
.compatibility-item.star-5 { border-left: 0.312rem solid #10b981; }
.compatibility-item.star-4 { border-left: 0.312rem solid #667eea; }
.compatibility-item.star-3 { border-left: 0.312rem solid #38b2ac; }
.compatibility-item.star-2 { border-left: 0.312rem solid #f59e0b; }
.compatibility-item.star-1 { border-left: 0.312rem solid #ef4444; }
.compat-type-code { font-size: 1.75rem; font-weight: 800; color: #fff; min-width: 5rem; }
.compat-type-info { font-size: 0.875rem; color: rgba(255,255,255,0.5); margin-top: -0.312rem; }
.compat-stars { display: flex; gap: 0.312rem; min-width: 6.875rem; }
.compat-star { font-size: 1.125rem; }
.compat-star.filled { color: #fbbf24; }
.compat-intro { font-size: 1.125rem; color: rgba(255,255,255,0.75); line-height: 2; margin-bottom: 1.562rem; padding: 1.25rem; background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(118,75,162,0.05)); border-radius: 0.875rem; border-left: 0.25rem solid #667eea; }
.compat-reason { margin-bottom: 1.25rem; padding: 1.25rem; border-radius: 0.875rem; }
.compat-reason.best { background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.03)); border: 1px solid rgba(16,185,129,0.2); }
.compat-reason.good { background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(102,126,234,0.03)); border: 1px solid rgba(102,126,234,0.2); }
.compat-reason.challenge { background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(245,158,11,0.03)); border: 1px solid rgba(245,158,11,0.2); }
.compat-reason-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.625rem; }
.compat-reason.best .compat-reason-title { color: #34d399; }
.compat-reason.good .compat-reason-title { color: #818cf8; }
.compat-reason.challenge .compat-reason-title { color: #fbbf24; }
.compat-reason-text { font-size: 0.938rem; color: rgba(255,255,255,0.75); line-height: 1.8; }
.compat-star.empty { color: rgba(255,255,255,0.2); }
.compat-desc { flex: 1; font-size: 1.062rem; color: rgba(255,255,255,0.7); line-height: 1.6; }

.identity-section { background: rgba(255,255,255,0.03); border-radius: 1.75rem; padding: 1.875rem; margin-bottom: 2rem; border: 1px solid rgba(255,255,255,0.06); }
.identity-explain { background: linear-gradient(135deg, rgba(102,126,234,0.1), rgba(118,75,162,0.05)); border-radius: 1.125rem; padding: 1.75rem; margin-bottom: 1.75rem; border: 1px solid rgba(102,126,234,0.2); }
.identity-explain h4 { font-size: 1.25rem; color: #fff; margin-bottom: 0.875rem; font-weight: 600; }
.identity-explain p { font-size: 1.062rem; color: rgba(255,255,255,0.7); line-height: 1.8; }
.identity-question { background: rgba(102,126,234,0.15); padding: 1.125rem 1.375rem; border-radius: 0.875rem; margin-top: 1.125rem; }
.identity-question p { font-size: 1.062rem; color: #a5b4fc; font-weight: 500; }
.identity-tendency { background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.1)); border-radius: 1.125rem; padding: 1.75rem 2rem; margin-bottom: 1.75rem; border: 1px solid rgba(102,126,234,0.3); }
.identity-tendency::before { content: '🔮 '; font-size: 1.25rem; }
.identity-tendency p { font-size: 1.125rem; color: rgba(255,255,255,0.85); line-height: 1.8; display: inline; }
.identity-chart { background: rgba(255,255,255,0.03); border-radius: 1.125rem; padding: 1.75rem; margin-bottom: 1.75rem; }
.identity-chart-title { font-size: 1.125rem; font-weight: 600; color: #fff; margin-bottom: 1.25rem; text-align: center; }
.identity-bar-row { display: flex; align-items: center; margin-bottom: 1.125rem; }
.identity-bar-label { width: 5.625rem; font-size: 0.938rem; color: rgba(255,255,255,0.7); text-align: right; padding-right: 0.75rem; }
.identity-bar-track { flex: 1; height: 0.75rem; background: rgba(255,255,255,0.1); border-radius: 0.375rem; position: relative; overflow: hidden; }
.identity-bar-fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 0.375rem; transition: width 0.5s ease; }
.identity-bar-fill.assertive { background: linear-gradient(90deg, #10b981, #34d399); }
.identity-bar-fill.turbulent { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.identity-bar-value { width: 3.125rem; font-size: 0.875rem; color: rgba(255,255,255,0.8); text-align: left; padding-left: 0.625rem; font-weight: 600; }
.identity-bar-legend { display: flex; justify-content: center; gap: 1.875rem; margin-top: 0.938rem; }
.identity-legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: rgba(255,255,255,0.7); }
.identity-legend-dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; }
.identity-legend-dot.assertive { background: #10b981; }
.identity-legend-dot.turbulent { background: #f59e0b; }
.identity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
.identity-box { background: rgba(255,255,255,0.04); border-radius: 1.125rem; padding: 2rem; }
.identity-box.assertive { border-left: 0.312rem solid #10b981; }
.identity-box.turbulent { border-left: 0.312rem solid #f59e0b; }
.identity-box h4 { font-size: 1.25rem; margin-bottom: 1.125rem; font-weight: 600; display: flex; align-items: center; gap: 0.625rem; }
.identity-box.assertive h4 { color: #10b981; }
.identity-box.turbulent h4 { color: #f59e0b; }
.identity-type-en { font-size: 0.875rem; font-weight: 500; color: rgba(255,255,255,0.5); font-style: italic; }
.identity-box p { font-size: 1.062rem; color: rgba(255,255,255,0.7); line-height: 1.8; }
.identity-traits { margin-top: 1.125rem; display: flex; flex-wrap: wrap; gap: 0.625rem; }
.identity-trait { padding: 0.5rem 0.875rem; background: rgba(255,255,255,0.06); border-radius: 1.375rem; font-size: 0.938rem; color: rgba(255,255,255,0.6); }

.stats-section { background: rgba(255,255,255,0.03); border-radius: 1.75rem; padding: 2.5rem; margin-bottom: 2rem; border: 1px solid rgba(255,255,255,0.06); }
.stats-title { font-size: 1.562rem; font-weight: 700; color: #fff; margin-bottom: 1.75rem; text-align: center; }
.stats-content { display: flex; flex-direction: column; gap: 1.75rem; }
.stats-chart-wrap { background: rgba(255,255,255,0.02); border-radius: 1.125rem; padding: 1.75rem; width: 100%; }
.stats-container { position: relative; height: 20rem; max-width: 27.5rem; margin: 0 auto; }
.stats-desc { margin-top: 1.375rem; padding: 1.375rem; background: rgba(255,255,255,0.02); border-radius: 0.875rem; }
.stats-desc p { font-size: 1.062rem; color: rgba(255,255,255,0.65); line-height: 1.8; }
.stats-highlight { color: #667eea; font-weight: 600; }
.stats-detail { padding: 0.312rem 0; }
.stats-rarity { font-size: 1rem; font-weight: 700; color: #fbbf24; margin-bottom: 0.625rem; }
.stats-main { font-size: 1rem; color: rgba(255,255,255,0.8); line-height: 1.8; margin-bottom: 0.5rem; }
.stats-rank { font-size: 0.875rem; color: rgba(255,255,255,0.6); margin-bottom: 0.625rem; }
.stats-insight { color: rgba(255,255,255,0.65); line-height: 1.8; padding: 0.75rem; background: rgba(255,255,255,0.03); border-radius: 0.625rem; border-left: 0.188rem solid #667eea; }
.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; }
.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: relative; 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.75rem; padding: 2.5rem; margin-bottom: 2rem; border: 1px solid rgba(255,255,255,0.06); }
.famous-intro { font-size: 1.125rem; color: rgba(255,255,255,0.6); margin-bottom: 1.75rem; line-height: 1.7; }
.famous-list { display: flex; flex-direction: column; gap: 1.125rem; }
.famous-item { background: rgba(255,255,255,0.04); border-radius: 1.125rem; padding: 1.375rem 1.75rem; display: flex; align-items: flex-start; gap: 1.375rem; border: 1px solid rgba(255,255,255,0.06); transition: all 0.3s; }
.famous-item:hover { background: rgba(255,255,255,0.06); transform: translateX(0.312rem); }
.famous-avatar { width: 4.375rem; height: 4.375rem; border-radius: 1.125rem; background: linear-gradient(135deg, #667eea, #764ba2); display: flex; align-items: center; justify-content: center; font-size: 1.75rem; color: #fff; font-weight: 700; flex-shrink: 0; }
.famous-info { flex: 1; }
.famous-name { font-size: 1.25rem; font-weight: 600; color: #fff; margin-bottom: 0.312rem; }
.famous-meta { font-size: 0.938rem; color: rgba(255,255,255,0.5); margin-bottom: 0.625rem; }
.famous-bio { font-size: 1rem; color: rgba(255,255,255,0.65); line-height: 1.6; }

.quote-section { background: linear-gradient(135deg, rgba(102,126,234,0.12), rgba(118,75,162,0.08)); border-radius: 1.75rem; padding: 2.5rem; margin-bottom: 2rem; border: 1px solid rgba(102,126,234,0.2); }
.quote-card { display: flex; align-items: flex-start; gap: 1.25rem; }
.quote-icon { font-size: 2.5rem; flex-shrink: 0; opacity: 0.8; }
.quote-text { font-size: 1.25rem; color: rgba(255,255,255,0.9); line-height: 1.9; font-style: italic; position: relative; }
.quote-text::before { content: '"'; font-size: 2.5rem; color: rgba(102,126,234,0.3); position: absolute; left: -1.25rem; top: -0.625rem; font-family: Georgia, serif; }

.btn-row { display: flex; gap: 1.375rem; justify-content: center; flex-wrap: wrap; margin-top: 2.812rem; margin-bottom: 2.812rem; }
.btn-action { padding: 0.75rem 3.125rem; border-radius: 2.188rem; font-size: 1.188rem; font-weight: 600; cursor: pointer; text-decoration: none; transition: all 0.3s; display: inline-flex; align-items: center; gap: 0.75rem; }
.btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; box-shadow: 0 0.625rem 2rem rgba(102,126,234,0.4); }
.btn-primary:hover { color: #fef08a; transform: translateY(-3px); box-shadow: 0 0.938rem 2.5rem rgba(102,126,234,0.5); }
.btn-secondary { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.btn-secondary:hover { color: #fbbf24; border-color: rgba(102,126,234,0.5); background: rgba(255,255,255,0.12); transform: translateY(-2px); }

.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; }

.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; }
.feedback-intro { font-size: 0.938rem; color: rgba(255,255,255,0.6); margin-bottom: 1.25rem; }
.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; }
.feedback-hint { text-align: center; padding: 0.938rem; background: rgba(255,255,255,0.03); border-radius: 0.625rem; color: rgba(255,255,255,0.5); font-size: 0.875rem; margin-top: 0.938rem; }
.no-comments { text-align: center; padding: 1.25rem; color: rgba(255,255,255,0.4); font-size: 0.875rem; }
.feedback-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; }

@media (max-width: 700px) {
    html, body { width: 100%; overflow-x: hidden; }
    .type-selector { bottom: 1.125rem; left: 1.125rem; padding: 1rem 1.125rem; }
    .wrap { padding: 1.75rem 1.125rem 7.5rem; width: 100%; }
    .header-hero { flex-direction: column; text-align: center; padding: 2rem 1.375rem; gap: 1.375rem; }
    .hero-image { order: -1; }
    .hero-content { text-align: center; width: 100%; }
    .group-type-item { padding: 0.375rem 0.75rem; font-size: 0.812rem; }
    .chart-section, .desc-section, .advice-section, .cognitive-section, .compatibility-section, .identity-section, .stats-section, .famous-section { padding: 1.375rem; border-radius: 1.375rem; }
    .chart-analysis { padding: 1.125rem; }
    .chart-analysis-desc { font-size: 1rem; }
    .cards-row, .job-grid, .test-notice-grid { grid-template-columns: 1fr; }
    .cognitive-stack { grid-template-columns: 1fr; gap: 1rem; }
    .cognitive-card { padding: 1.375rem !important; }
    .cognitive-card.dominant { padding: 1.75rem !important; }
    .cognitive-rank { top: 0.75rem; right: 0.75rem; width: 2.5rem !important; height: 2.5rem !important; font-size: 1.125rem !important; }
    .cognitive-code { font-size: 2.5rem !important; }
    .cognitive-card.auxiliary .cognitive-code { font-size: 5rem !important; }
    .cognitive-name { font-size: 1.25rem !important; }
    .cognitive-desc { font-size: 1.125rem; }
    .compat-type-code { font-size: 1.375rem; }
    .compat-type-info { font-size: 1rem; }
    .compat-stars { min-width: auto; }
    .identity-grid { grid-template-columns: 1fr; }
    .identity-chart { padding: 1.125rem; }
    .identity-bar-label { width: 4.375rem; font-size: 1rem; }
    .identity-bar-value { width: 2.5rem; font-size: 1rem; }
    .dim-desc { grid-template-columns: 1fr; }
    .dim-bar-wrap { padding: 0 2.812rem; }
    .stats-container { height: 15rem; }
    .famous-item { flex-direction: column; align-items: center; text-align: center; }
    .famous-avatar { width: 3.75rem; height: 3.75rem; font-size: 1.5rem; }
    .btn-row { flex-direction: column; align-items: center; }
    .btn-action { width: 100%; justify-content: center; }
    .job-cards { grid-template-columns: 1fr; }
    .job-card { padding: 1.125rem; }
    .job-card-name { font-size: 1.1rem; }
    .job-card-desc { font-size: 0.9rem; }
    .love-needs-grid { grid-template-columns: 1fr; }
    .love-strengths-grid { grid-template-columns: 1fr; }
    .love-challenges-grid { grid-template-columns: 1fr; }
    .love-match-cards { grid-template-columns: 1fr; }
    .love-theme-text { font-size: 1.1rem; }
    .love-style-title { font-size: 1rem; }
    .love-style-desc { font-size: 1rem; }
    .growth-gifts-grid { grid-template-columns: 1fr; }
    .growth-challenges-grid { grid-template-columns: 1fr; }
    .growth-theme-text { font-size: 1.1rem; }
    .growth-section-title { font-size: 1rem; }
    .growth-advice-text { font-size: 1rem; }
    .desc-portrait { grid-template-columns: 1fr; }
    .work-grid { grid-template-columns: 1fr; }
    .work-communication-grid { grid-template-columns: 1fr; }
    .trait-card { padding: 1rem; }
    .trait-card-detail { padding: 0.625rem 0.75rem; }
    .trait-card-detail-label { font-size: 0.9rem; }
    .trait-card-detail-text { font-size: 1rem; }
    .card-box { padding: 1.5rem; }
}

/* 回到顶部按钮 */
#back-to-top { position: fixed; bottom: 2.188rem; right: 2.188rem; width: 3.125rem; height: 3.125rem; border-radius: 50%; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; border: none; font-size: 1.5rem; font-weight: 700; cursor: pointer; opacity: 0; visibility: hidden; transition: all 0.3s ease; box-shadow: 0 0.312rem 1.25rem rgba(102,126,234,0.5); z-index: 99; display: flex; align-items: center; justify-content: center; }
#back-to-top.show { opacity: 1; visibility: visible; }
#back-to-top:hover { transform: translateY(-3px); box-shadow: 0 0.5rem 1.562rem rgba(102,126,234,0.6); }
@media (max-width: 768px) {
    #back-to-top { bottom: 1.25rem; right: 1.25rem; width: 2.812rem; height: 2.812rem; font-size: 1.25rem; }
}

/* 分享功能样式 */
.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-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:disabled { opacity: 0.6; cursor: not-allowed; }
.share-copy { background: rgba(102,126,234,0.15); color: #a5b4fc; border: 1px solid rgba(102,126,234,0.3); }
.share-copy:hover:not(:disabled) { color: #fef08a; background: rgba(102,126,234,0.25); transform: translateY(-2px); }
.share-image { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.15); }
.share-image:hover:not(:disabled) { color: #fbbf24; background: rgba(255,255,255,0.1); transform: translateY(-2px); }
.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); }
.share-toast.error { background: rgba(239,68,68,0.2); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
@media (max-width: 768px) {
    .share-section { padding: 1.5rem; }
    .share-buttons { flex-direction: column; align-items: center; }
    .share-btn { width: 100%; max-width: 17.5rem; justify-content: center; }
}

/* 加载状态指示器 */
.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: #667eea; animation-delay: 0s; }
.spinner-ring:nth-child(2) { width: 4.062rem; height: 4.062rem; border-right-color: #764ba2; animation-delay: 0.15s; animation-direction: reverse; }
.spinner-ring:nth-child(3) { width: 3.125rem; height: 3.125rem; border-bottom-color: #a5b4fc; animation-delay: 0.3s; }
.loading-text { margin-top: 3.75rem; font-size: 1.125rem; color: rgba(255,255,255,0.8); 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; } }

/* 打印友好样式 */
@media print {
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    body { background: #fff !important; font-size: 12pt !important; line-height: 1.5 !important; color: #333 !important; }
    .wrap { max-width: 100% !important; padding: 20pt !important; margin: 0 !important; }
    .loading-overlay, .type-selector, .btn-row, #back-to-top, .group-nav { display: none !important; }
    .header-hero { background: #f8f9fa !important; border: 1px solid #ddd !important; border-radius: 8pt !important; padding: 20pt !important; margin-bottom: 20pt !important; flex-direction: row !important; page-break-inside: avoid; }
    .hero-image { width: 150pt !important; }
    .hero-image img { filter: none !important; max-width: 150pt !important; }
    .type-badge { background: #667eea !important; color: #fff !important; font-size: 10pt !important; padding: 6pt 12pt !important; }
    .type-code-big { font-size: 36pt !important; color: #667eea !important; -webkit-text-fill-color: #667eea !important; background: none !important; }
    .type-name-big { font-size: 16pt !important; color: #333 !important; }
    .type-name-en-inline { color: #666 !important; }
    .type-title-big { color: #555 !important; }
    .group-tag { font-size: 10pt !important; padding: 4pt 10pt !important; border-radius: 12pt !important; }
    .group-analyst { background: rgba(102,126,234,0.2) !important; color: #667eea !important; border-color: #667eea !important; }
    .group-diplomat { background: rgba(56,178,172,0.2) !important; color: #38b2ac !important; border-color: #38b2ac !important; }
    .group-sentinel { background: rgba(66,153,225,0.2) !important; color: #4299e1 !important; border-color: #4299e1 !important; }
    .group-explorer { background: rgba(237,137,54,0.2) !important; color: #ed8936 !important; border-color: #ed8936 !important; }
    .chart-section, .desc-section, .cards-row, .work-section, .job-section, .love-section, .growth-section, .cognitive-section, .compatibility-section, .identity-section, .stats-section, .famous-section, .test-notice { background: #fff !important; border: 1px solid #ddd !important; border-radius: 8pt !important; padding: 15pt !important; margin-bottom: 15pt !important; page-break-inside: avoid; }
    .section-title, .chart-title, .stats-title { color: #333 !important; font-size: 14pt !important; border-bottom: 1px solid #eee !important; padding-bottom: 8pt !important; }
    .chart-analysis, .work-intro, .job-intro, .love-intro, .growth-intro { background: #f8f9fa !important; border: 1px solid #eee !important; }
    .card-box, .trait-card, .job-card, .love-match-card, .cognitive-card, .famous-item { background: #f8f9fa !important; border: 1px solid #ddd !important; }
    .radar-section, .radar-container { height: 200pt !important; max-width: 250pt !important; }
    .dim-row { background: #f8f9fa !important; border: 1px solid #ddd !important; page-break-inside: avoid; }
    .dim-bar { background: linear-gradient(90deg, #667eea 0%, #ddd 50%, #ed8936 100%) !important; }
    .dim-marker { background: #fff !important; border: 2px solid #667eea !important; box-shadow: none !important; }
    .dim-result { font-size: 11pt !important; padding: 4pt 10pt !important; }
    .dim-result.left { background: rgba(102,126,234,0.2) !important; color: #667eea !important; }
    .dim-result.right { background: rgba(237,137,54,0.2) !important; color: #ed8936 !important; }
    .cards-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 15pt !important; }
    .card-box.strength { border-top: 3pt solid #10b981 !important; }
    .card-box.weakness { border-top: 3pt solid #f59e0b !important; }
    .tag { background: #667eea !important; color: #fff !important; border: none !important; font-size: 9pt !important; padding: 4pt 10pt !important; }
    .cognitive-stack { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 10pt !important; }
    .cognitive-card.dominant { background: rgba(102,126,234,0.15) !important; border: 2pt solid #667eea !important; }
    .cognitive-card.auxiliary { background: rgba(56,178,172,0.15) !important; border: 2pt solid #38b2ac !important; }
    .cognitive-code { color: #667eea !important; }
    .compatibility-item { border-left: 3pt solid #10b981 !important; background: #f8f9fa !important; }
    .stats-container { height: 150pt !important; }
    .famous-item { page-break-inside: avoid; }
    .test-notice { page-break-before: always; }
    .test-notice-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10pt !important; }
    a { color: #667eea !important; text-decoration: underline !important; }
    .btn-action { display: none !important; }
}

/* 移动端优化 */
@media (max-width: 480px) {
    body {line-height: 1.6; }
    .wrap { padding: 4.688rem 0.938rem 6.25rem; }
    .header-hero { padding: 1.25rem 0.938rem; border-radius: 1.25rem; }
    .group-type-item { padding: 0.375rem 0.625rem; min-width: 3.438rem; }
    .chart-section, .desc-section, .work-section, .job-section, .love-section, .growth-section, .cognitive-section, .compatibility-section, .identity-section, .stats-section, .famous-section, .test-notice { padding: 1.125rem; border-radius: 1.125rem; margin-bottom: 1.25rem; }
    .section-title, .chart-title, .stats-title { font-size: 1.188rem; margin-bottom: 1.125rem; }
    .chart-analysis { padding: 0.938rem; margin-bottom: 1.25rem; }
    .chart-analysis-highlight { padding: 0.75rem 0.938rem; }
    .radar-container { height: 22.5rem; max-width: 25rem; }
    .dim-row { padding: 1.125rem; border-radius: 0.938rem; margin-bottom: 0.938rem; }
    .dim-header { margin-bottom: 0.938rem; flex-wrap: wrap; gap: 0.625rem; }
    .dim-result { padding: 0.375rem 0.75rem; }
    .dim-bar-wrap { padding: 0 2.188rem; margin-bottom: 0.938rem; }
    .dim-bar { height: 0.875rem; }
    .dim-marker { width: 2.188rem; height: 2.188rem; }
    .dim-letter { font-size: 1.5rem; }
    .dim-pct { font-size: 1.125rem; }
    .dim-desc { grid-template-columns: 1fr; gap: 0.625rem; margin-top: 0.938rem; padding-top: 0.938rem; }
    .dim-desc-item { padding: 0.75rem; }
    .dim-desc-title { margin-bottom: 0.375rem; }
    .dim-desc-text { line-height: 1.6; }
    .dim-confidence-row { flex-direction: column; align-items: stretch; gap: 0.625rem; margin-top: 0.938rem; padding-top: 0.938rem; }
    .dim-confidence-bar { width: 100%; height: 0.5rem; }
    .dim-confidence-info { justify-content: flex-start; flex-wrap: wrap; gap: 0.375rem; }
    .dim-confidence-level { padding: 0.125rem 0.375rem; }
    .dim-confidence-desc { width: 100%; }
    .dim-desc { flex-direction: column; gap: 0.625rem; }
    .dim-desc-item { padding: 0.625rem 0.75rem; }
    .dim-desc-text { font-size: 0.938rem; }
    .edge-warning-section { flex-direction: column; padding: 0.938rem; gap: 0.625rem; }
    .edge-warning-icon { font-size: 1.375rem; }
    .edge-warning-item { padding: 0.5rem 0.625rem; }
    .edge-warning-tip { padding: 0.625rem; }
    .desc-portrait { grid-template-columns: 1fr; gap: 0.938rem; }
    .desc-portrait-item { padding: 0.938rem; }
    .desc-portrait-label { font-size:1.125rem; }
    .desc-core { padding: 1.125rem; margin-bottom: 1.25rem; }
    .desc-scene-item { flex-direction: column; gap: 0.625rem; padding: 0.938rem; }
    .desc-scene-label { min-width: auto; }
    .desc-scene-text { padding-top: 0; }
    .tags { gap: 0.625rem; }
    .tag { padding: 0.5rem 0.938rem; }
    .cards-row { grid-template-columns: 1fr; gap: 1.25rem; }
    .card-box { padding: 1.125rem; border-radius: 1.25rem; }
    .card-title { font-size: 1.25rem; margin-bottom: 0.938rem; }
    .trait-card { padding: 0.75rem; margin-bottom: 0.625rem; border-radius: 0.75rem; }
    .trait-card-icon { font-size: 1.125rem; }
    .trait-card-desc { margin-bottom: 0.625rem; }
    .trait-card-detail { padding: 0.5rem 0.625rem; border-radius: 0.5rem; }
    .work-intro { padding: 0.938rem; margin-bottom: 1.25rem; font-size: 1rem;}
    .work-grid { grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: 1.25rem; }
    .work-item { padding: 0.938rem; border-radius: 0.75rem; }
    .work-item-title { margin-bottom: 0.5rem; }
    .work-communication { padding: 0.938rem; margin-bottom: 0.938rem; }
    .work-communication-title { margin-bottom: 0.625rem; }
    .work-communication-grid { grid-template-columns: 1fr; gap: 0.625rem; }
    .work-comm-item { padding: 0.625rem; }
    .work-tips-box { padding: 0.938rem; }
    .work-tips-title { margin-bottom: 0.625rem; }
    .work-tips-list li { padding: 0.5rem 0 0.5rem 1.25rem; }
    .job-intro { padding: 0.938rem; margin-bottom: 1.25rem; }
    .job-category { margin-bottom: 1.562rem; }
    .job-category-title { font-size: 1.062rem; margin-bottom: 0.938rem; }
    .job-cards { grid-template-columns: 1fr; gap: 0.938rem; }
    .job-card { padding: 0.938rem; border-radius: 0.938rem; }
    .job-card-header { margin-bottom: 0.625rem; }
    .job-card-emoji { font-size: 1.25rem; }
    .job-card-match { margin-bottom: 0.625rem; }
    .job-match-text { min-width: 5rem; }
    .job-card-analysis { margin-bottom: 0.625rem; }
    .job-card-desc { margin-bottom: 0.625rem; font-size: 1rem;}
    .job-card-potential { padding: 0.625rem; font-size: 1rem;}
    .job-card-reason, .job-card-advice, .job-card-example { padding: 0.625rem; margin-bottom: 0.625rem; font-size: 1rem;}
    .love-theme { padding: 0.625rem 0.938rem; margin-bottom: 1.25rem; font-size: 1rem;}
    .love-theme-icon { font-size: 1.125rem; }
    .love-intro { padding: 0.938rem; margin-bottom: 1.25rem; }
    .love-style-card { padding: 0.938rem; margin-bottom: 1.25rem; }
    .love-style-title { margin-bottom: 0.312rem; }
    .love-style-trait { padding: 0.188rem 0.5rem; }
    .love-indices { margin-top: 0.938rem; padding-top: 0.938rem; }
    .love-index-row { gap: 0.375rem; margin-bottom: 0.625rem; }
    .love-index-icon { font-size: 0.812rem; width: 1.125rem; }
    .love-index-label { font-size: 0.812rem; width: 3.438rem; }
    .love-index-bar { min-width: 3.125rem; }
    .love-index-value { font-size: 0.75rem; width: 1.875rem; }
    .love-index-level { font-size: 0.625rem; }
    .love-indices-desc { padding: 0.625rem; }
    .love-section-title { margin-bottom: 0.75rem; }
    .love-needs-grid, .love-strengths-grid, .love-challenges-grid, .love-match-cards { grid-template-columns: 1fr; gap: 0.625rem; }
    .love-need-item, .love-strength-item, .love-challenge-item, .love-match-card { padding: 0.938rem; border-radius: 0.75rem; }
    .love-need-desc, .love-strength-desc, .love-challenge-desc, .love-match-reason { font-size: 1rem; }
    .love-challenge-advice { font-size: 0.875rem; padding: 0.5rem 0.625rem; }
    .love-match-header { margin-bottom: 0.5rem; }
    .love-match-name { font-size: 0.938rem; }
    .love-advice { padding: 0.938rem; margin-top: 1.25rem;}
    .love-advice-icon { font-size: 1.25rem; }
    .growth-theme { padding: 0.625rem 0.938rem; margin-bottom: 1.25rem; }
    .growth-theme-icon { font-size: 1.125rem; }
    .growth-intro { padding: 0.938rem; margin-bottom: 1.25rem; }
    .growth-section-inner { margin-bottom: 1.25rem; }
    .growth-section-title { margin-bottom: 0.75rem; }
    .growth-gifts-grid, .growth-challenges-grid { grid-template-columns: 1fr; gap: 0.625rem; }
    .growth-gift-item, .growth-challenge-item { padding: 0.938rem; border-radius: 0.75rem; }
    .growth-gift-desc, .growth-challenge-desc { font-size: 1rem; }
    .growth-challenge-advice { font-size: 0.938rem; padding: 0.5rem 0.625rem; }
    .growth-path-timeline { padding-left: 1.562rem; }
    .growth-path-item { padding: 0.75rem 0.938rem; margin-bottom: 0.938rem; }
    .growth-path-item::before { left: -1.438rem; width: 0.625rem; height: 0.625rem; }
    .growth-advice { padding: 0.938rem; margin-top: 1.25rem; flex-direction: column; align-items: flex-start; }
    .growth-advice-icon { font-size: 1.25rem; }
    .cognitive-intro { margin-bottom: 1.25rem; }
    .cognitive-stack { grid-template-columns: 1fr; gap: 0.75rem; }
    .cognitive-card { padding: 1.125rem !important; border-radius: 0.938rem; }
    .cognitive-card.dominant { padding: 1.25rem !important; }
    .cognitive-rank { top: 0.625rem; right: 0.625rem; width: 2.188rem !important; height: 2.188rem !important; font-size: 0.938rem !important; }
    .cognitive-code { font-size: 5rem !important; }
    .cognitive-name { font-size: 1.562rem !important; }
    .compatibility-intro { margin-bottom: 1.25rem; }
    .compat-category-title { padding: 0.625rem 0.938rem; margin-bottom: 0.75rem; }
    .compat-type-code {min-width: 3.75rem; }
    .compat-stars { min-width: 5rem; }
    .compat-intro { padding: 0.938rem; margin-bottom: 0.938rem; }
    .compat-reason { padding: 0.75rem; margin-bottom: 0.938rem; }
    .compat-reason-title { margin-bottom: 0.5rem; }
    .identity-explain { padding: 0.938rem; margin-bottom: 1.25rem; }
    .identity-explain h4 { margin-bottom: 0.625rem; }
    .identity-question { padding: 0.75rem 0.938rem; margin-top: 0.75rem; }
    .identity-tendency { padding: 0.938rem 1.125rem; margin-bottom: 1.25rem; }
    .identity-chart { padding: 0.938rem; margin-bottom: 1.25rem; }
    .identity-chart-title { margin-bottom: 0.938rem; }
    .identity-bar-row { margin-bottom: 0.75rem; }
    .identity-bar-label { width: 4.375rem; padding-right: 0.5rem; }
    .identity-bar-track { height: 0.625rem; }
    .identity-bar-value { width: 2.188rem; }
    .identity-bar-legend { gap: 1.25rem; margin-top: 0.625rem; }
    .identity-legend-dot { width: 0.625rem; height: 0.625rem; }
    .identity-grid { grid-template-columns: 1fr; gap: 0.938rem; }
    .identity-box { padding: 1.125rem; border-radius: 0.938rem; }
    .identity-box h4 { margin-bottom: 0.75rem; }
    .identity-traits { gap: 0.5rem; margin-top: 0.75rem; }
    .identity-trait { padding: 0.312rem 0.625rem; }
    .stats-container { height: 12.5rem; }
    .stats-desc { margin-top: 1rem; padding: 0; background: none; }
    .stats-rarity { font-size: 1rem; margin-bottom: 0.5rem; }
    .stats-main { font-size: 0.938rem; margin-bottom: 0.375rem; }
    .stats-rank { font-size: 0.938rem; margin-bottom: 0.5rem; }
    .stats-insight {padding: 0.625rem; font-size: 1rem;}
    .stats-gender-header { margin-bottom: 0.5rem; }
    .gender-icon { font-size: 0.938rem; }
    .stats-gender-bar { margin-bottom: 0.5rem; }
    .gender-bar-label-left, .gender-bar-label-right { width: 0.625rem; font-size: 0.75rem; }
    .gender-bar-track { height: 24px; }
    .gender-bar-value-left, .gender-bar-value-right { font-size: 0.75rem; }
    .gender-bar-values { padding: 0 35px; }
    .stats-gender-ratio { font-size: 0.75rem; margin-bottom: 0.5rem; }
    .famous-intro { margin-bottom: 1.25rem; }
    .famous-list { gap: 0.75rem; }
    .famous-item { padding: 0.938rem; border-radius: 0.938rem; flex-direction: column; text-align: center; }
    .famous-avatar { width: 3.125rem; height: 3.125rem; font-size: 1.25rem; border-radius: 0.75rem; }
    .famous-name { margin-bottom: 0.188rem; }
    .famous-meta { margin-bottom: 0.5rem; }
    .btn-row { flex-direction: column; gap: 0.938rem; margin-top: 1.875rem; margin-bottom: 1.875rem; }
    .btn-action { width: 100%; padding: 0.938rem 1.875rem; border-radius: 1.875rem; justify-content: center; }
    .test-notice { padding: 1.25rem; border-radius: 1.25rem; }
    .test-notice h4 { margin-bottom: 0.938rem; }
    .test-notice-grid { grid-template-columns: 1fr; gap: 0.938rem; }
    .test-notice-item { padding: 0.75rem; }
    #back-to-top { bottom: 0.938rem; right: 0.938rem; width: 2.5rem; height: 2.5rem; font-size: 1.125rem; }
    .type-selector { bottom: 0.938rem; left: 0.938rem; padding: 0.75rem 0.938rem; gap: 0.625rem; }
    .type-selector select { padding: 0.625rem 0.938rem; min-width: 7.5rem; }
    .type-selector .preview-badge { padding: 0.375rem 0.625rem; }
}

/* 触摸交互优化 */
@media (hover: none) and (pointer: coarse) {
    .group-type-item, .btn-action, .trait-card, .job-card, .love-match-card, .famous-item, .compatibility-item, .growth-gift-item, .growth-path-item { transition: none; }
    .group-type-item:active, .btn-action:active { transform: scale(0.98); }
    .trait-card:active, .job-card:active, .love-match-card:active, .famous-item:active, .compatibility-item:active { transform: scale(0.99); background: rgba(255,255,255,0.08); }
    .dim-marker { transition: none; }
    #back-to-top:active { transform: scale(0.95); }
}

/* 页面导航组件 */
.page-nav { position: fixed; bottom: 6.25rem; right: 2.188rem; z-index: 98; font-size: 0.812rem; }
.page-nav-container { background: rgba(26,26,46,0.95); border-radius: 1rem; padding: 0.75rem; border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 0.312rem 1.25rem rgba(0,0,0,0.3); backdrop-filter: blur(10px); max-height: 70vh; overflow-y: auto; transition: all 0.3s ease; }
.page-nav-container::-webkit-scrollbar { width: 4px; }
.page-nav-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }
.page-nav-header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.375rem 0.5rem; margin-bottom: 0.5rem; border-bottom: 1px solid rgba(255,255,255,0.1); }
.page-nav-title { font-size: 0.875rem; font-weight: 600; color: rgba(255,255,255,0.9); }
.page-nav-toggle { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.8); cursor: pointer; font-size: 0.875rem; width: 1.5rem; height: 1.5rem; border-radius: 0.375rem; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; }
.page-nav-toggle:hover { background: rgba(255,255,255,0.2); color: #fff; }
.page-nav-list { list-style: none; padding: 0; margin: 0; }
.page-nav-item { margin-bottom: 0.188rem; }
.page-nav-item:last-child { margin-bottom: 0; }
.page-nav-link { display: block; padding: 0.5rem 0.75rem; color: rgba(255,255,255,0.7); text-decoration: none; border-radius: 0.625rem; transition: all 0.2s ease; white-space: nowrap; }
.page-nav-link:hover { background: rgba(102,126,234,0.2); color: #a5b4fc; }
.page-nav-link.active { background: rgba(102,126,234,0.25); color: #a5b4fc; border-left: 3px solid #667eea; }
.page-nav-trigger { position: fixed; bottom: 6.25rem; right: 2.188rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: linear-gradient(135deg, #10b981, #059669); color: #fff; border: none; font-size: 1.125rem; cursor: pointer; box-shadow: 0 0.312rem 1.25rem rgba(16,185,129,0.5); z-index: 97; transition: all 0.3s ease; display: none; align-items: center; justify-content: center; }
.page-nav-trigger:hover { transform: translateY(-3px); box-shadow: 0 0.5rem 1.562rem rgba(16,185,129,0.6); }
.page-nav.collapsed .page-nav-container { display: none; }
.page-nav.collapsed .page-nav-trigger { display: flex; }
.page-nav.hidden { display: none; }
.page-nav.mobile-show .page-nav-trigger { display: flex; }
@media (max-width: 768px) {
    .page-nav { bottom: 5rem; right: 1.25rem; }
    .page-nav-container { padding: 0.625rem; max-height: 60vh; }
    .page-nav-link { padding: 0.438rem 0.625rem; font-size: 0.75rem; }
    .page-nav-trigger { bottom: 5rem; right: 1.25rem; width: 2.25rem; height: 2.25rem; font-size: 1rem; }
    .page-nav { display: none; }
    .page-nav.mobile-show { display: block; }
    .page-nav.mobile-show .page-nav-trigger { display: flex; }
    .page-nav.mobile-open .page-nav-container { display: block; }
    .page-nav.mobile-open .page-nav-trigger { display: none; }
}
@media (max-width: 480px) {
    .page-nav { bottom: 4.375rem; right: 0.938rem; }
    .page-nav-trigger { bottom: 4.375rem; right: 0.938rem; width: 2.125rem; height: 2.125rem; font-size: 0.875rem; }
}
@media print {
    .page-nav, .page-nav-trigger { display: none !important; }
}