:root {
    --primary-color: #476852;
    --primary-light: #678b73;
    --primary-dark: #324e3c;
    --secondary-color: #c47c48;
    --secondary-light: #e09d6e;
    --success-color: #5b9279;
    --danger-color: #c86350;
    --warning-color: #d89648;
    --light-color: #f7f4ed;
    --dark-color: #2c332e;
    --gray-color: #707872;
    --gray-light: #e8e4dc;
    --bg-page: #faf7f2;
    --border-radius: 16px;
    --box-shadow: 0 10px 30px rgba(71, 104, 82, 0.07);
    --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;

}



body {
    background: #faf7f2;
    min-height: 100vh;
    color: var(--dark-color);
    line-height: 1.7;
    padding: 20px 15px 60px;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 780px;
    margin: 0 auto;
}



/* 头部样式 */

.header {

    text-align: center;

    margin-bottom: 40px;

    padding: 20px;

    background: white;

    border-radius: var(--border-radius);

    box-shadow: var(--box-shadow);

    animation: fadeInDown 0.8s ease;

}



.header h1 {

    color: var(--primary-color);

    font-size: 2.5rem;

    margin-bottom: 10px;

    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.header p {

    color: var(--gray-color);

    font-size: 1.1rem;

    max-width: 800px;

    margin: 0 auto;

}



/* 页面容器 */

.page-container {

    display: flex;

    flex-direction: column;

    gap: 30px;

}



.page {

    background: white;

    border-radius: var(--border-radius);

    box-shadow: var(--box-shadow);

    padding: 40px;

    animation: fadeInUp 0.8s ease;

    display: none;

}



.page.active {

    display: block;

    animation: fadeIn 0.5s ease;

}



/* 介绍页面样式 */

.intro-content {

    display: flex;

    flex-direction: column;

    gap: 30px;

}



.intro-section {

    background: var(--light-color);

    border-radius: var(--border-radius);

    padding: 25px;

    border-left: 5px solid var(--primary-color);

    transition: var(--transition);

}



.intro-section:hover {

    transform: translateY(-5px);

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);

}



.section-title {

    color: var(--primary-color);

    font-size: 1.8rem;

    margin-bottom: 15px;

    display: flex;

    align-items: center;

    gap: 10px;

}



.section-title i {

    font-size: 1.5rem;

}



.dimensions-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

    gap: 20px;

    margin-top: 20px;

}



.dimension-card {

    background: white;

    border-radius: 10px;

    padding: 20px;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

    transition: var(--transition);

    border-top: 4px solid var(--primary-color);

}



.dimension-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);

}



.dimension-card h4 {

    color: var(--primary-color);

    margin-bottom: 10px;

    font-size: 1.2rem;

}



.dimension-card p {

    color: var(--gray-color);

    font-size: 0.95rem;

}



.example-results {

    display: flex;

    flex-direction: column;

    gap: 20px;

    margin-top: 20px;

}



.radar-example {

    height: 300px;

    margin: 20px 0;

}



.legend {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 20px;

}



.legend-item {

    display: flex;

    align-items: center;

    gap: 8px;

}



.legend-color {

    width: 20px;

    height: 20px;

    border-radius: 4px;

}



.legend-color.normal {
    background-color: #9eef9e;
}

.legend-color.mild {
    background-color: #aadf44;
}

.legend-color.moderate {
    background-color: orange;
}

.legend-color.severe {
    background-color: red;
}



/* 测试页面样式 */

.test-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 30px;

    padding-bottom: 20px;

    border-bottom: 2px solid var(--gray-light);

}



.progress-container {

    width: 100%;

    background-color: var(--gray-light);

    border-radius: 10px;

    margin: 20px 0;

    overflow: hidden;

    height: 12px;

}



.progress-bar {

    height: 100%;

    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));

    border-radius: 10px;

    width: 0%;

    transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);

    position: relative;

    overflow: hidden;

}



.progress-bar::after {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    background-image: linear-gradient(45deg,

            rgba(255, 255, 255, 0.15) 25%,

            transparent 25%,

            transparent 50%,

            rgba(255, 255, 255, 0.15) 50%,

            rgba(255, 255, 255, 0.15) 75%,

            transparent 75%,

            transparent);

    background-size: 1rem 1rem;

    animation: progressAnimation 1s linear infinite;

}



.question-counter {

    font-size: 1.2rem;

    font-weight: bold;

    color: var(--primary-color);

}



.question-container {
    position: relative;
    margin-bottom: 30px;
    padding-top: 15px;
}

/* 伴读安睡小猫挂件 (Asset B) */
.companion-cat-badge {
    position: absolute;
    top: -42px;
    right: 15px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.companion-cat-bubble {
    background: rgba(255, 255, 255, 0.96);
    border: 1.5px solid #fed7aa;
    color: #9a3412;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(251, 146, 60, 0.15);
    margin-bottom: 4px;
    margin-right: 6px;
    white-space: nowrap;
    position: relative;
    pointer-events: none;
    transition: all 0.3s ease;
    animation: catBubbleFloat 3.5s ease-in-out infinite;
}

.companion-cat-bubble::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 28px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #fed7aa;
}

.companion-cat-bubble.bubble-pop {
    animation: catBubblePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.companion-cat-img {
    width: 84px;
    height: auto;
    display: block;
    filter: drop-shadow(0 8px 16px rgba(180, 83, 9, 0.18));
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: catBreathe 4s ease-in-out infinite;
}

.companion-cat-badge:hover .companion-cat-img {
    transform: scale(1.08) rotate(-2deg);
}

.companion-cat-badge:active .companion-cat-img {
    transform: scale(0.95);
}

.companion-cat-badge.cat-bounce .companion-cat-img {
    animation: catMeowBounce 0.48s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes catMeowBounce {
    0% { transform: scale(1) rotate(0deg); }
    22% { transform: scale(1.18, 0.88) rotate(-5deg); }
    50% { transform: scale(0.92, 1.14) rotate(4deg) translateY(-6px); }
    75% { transform: scale(1.06, 0.96) rotate(-2deg) translateY(-2px); }
    100% { transform: scale(1) rotate(0deg) translateY(0); }
}

@keyframes catBreathe {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

@keyframes catBubbleFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

@keyframes catBubblePop {
    0% {
        transform: scale(0.85);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .companion-cat-badge {
        top: -36px;
        right: 8px;
    }
    .companion-cat-img {
        width: 68px;
    }
    .companion-cat-bubble {
        font-size: 0.72rem;
        padding: 4px 9px;
        max-width: 180px;
        white-space: normal;
        line-height: 1.3;
    }
}



.question-text {

    font-size: 1.4rem;

    color: var(--dark-color);

    margin-bottom: 30px;

    line-height: 1.5;

    /* 右侧留出伴读小猫挂件的宽度，避免长题干换行后文字被小猫遮挡 */
    padding-right: 108px;

}



.options-container {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

    gap: 15px;

}



.option {
    background: var(--light-color);
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 1.5px solid transparent;
    text-align: center;
    font-weight: 500;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    user-select: none;
}

.option-warmth-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    flex-shrink: 0;
    transition: transform 0.22s ease, opacity 0.22s ease;
    opacity: 0.8;
}

/* 自然心境色温 1: 微风初绿 */
.option.temp-breeze-green {
    background: #f4f9f5;
    border-color: #d3e8dc;
    color: #244b30;
}
.option.temp-breeze-green .option-warmth-dot {
    background: #52c41a;
}
.option.temp-breeze-green:hover {
    background: #eaf5ec;
    border-color: #85cc99;
    box-shadow: 0 6px 16px rgba(82, 196, 26, 0.14);
    transform: translateY(-2px);
}
.option.temp-breeze-green.selected {
    background: linear-gradient(135deg, #e3f4e8 0%, #d2eedb 100%);
    border-color: #388e53;
    color: #164322;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(56, 142, 83, 0.22), inset 0 1px 1px rgba(255,255,255,0.9);
    animation: stickerBreatheGreen 2.4s ease-in-out infinite;
}

/* 自然心境色温 2: 柠檬暖米 */
.option.temp-warm-lemon {
    background: #fdfbf2;
    border-color: #ede3c3;
    color: #5e4d1f;
}
.option.temp-warm-lemon .option-warmth-dot {
    background: #d4a017;
}
.option.temp-warm-lemon:hover {
    background: #faf5de;
    border-color: #deb841;
    box-shadow: 0 6px 16px rgba(212, 160, 23, 0.14);
    transform: translateY(-2px);
}
.option.temp-warm-lemon.selected {
    background: linear-gradient(135deg, #fbf4d4 0%, #f6e9b2 100%);
    border-color: #bfa12b;
    color: #4b3c0e;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(191, 161, 43, 0.22), inset 0 1px 1px rgba(255,255,255,0.9);
    animation: stickerBreatheLemon 2.4s ease-in-out infinite;
}

/* 自然心境色温 3: 落日暖杏 */
.option.temp-sunset-apricot {
    background: #fdf7f2;
    border-color: #f2dac5;
    color: #6b3d22;
}
.option.temp-sunset-apricot .option-warmth-dot {
    background: #e67e22;
}
.option.temp-sunset-apricot:hover {
    background: #faede1;
    border-color: #e6995a;
    box-shadow: 0 6px 16px rgba(230, 126, 34, 0.14);
    transform: translateY(-2px);
}
.option.temp-sunset-apricot.selected {
    background: linear-gradient(135deg, #fde9d7 0%, #fad4b5 100%);
    border-color: #d46b2b;
    color: #5c2a0f;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(212, 107, 43, 0.22), inset 0 1px 1px rgba(255,255,255,0.9);
    animation: stickerBreatheApricot 2.4s ease-in-out infinite;
}

/* 自然心境色温 4: 暮山淡紫 */
.option.temp-mountain-mauve {
    background: #f8f4f9;
    border-color: #e5d5e9;
    color: #563b5e;
}
.option.temp-mountain-mauve .option-warmth-dot {
    background: #9254de;
}
.option.temp-mountain-mauve:hover {
    background: #f2e8f5;
    border-color: #b37feb;
    box-shadow: 0 6px 16px rgba(146, 84, 222, 0.14);
    transform: translateY(-2px);
}
.option.temp-mountain-mauve.selected {
    background: linear-gradient(135deg, #f1e2f6 0%, #e3cbf0 100%);
    border-color: #8b4ea8;
    color: #431e54;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(139, 78, 168, 0.22), inset 0 1px 1px rgba(255,255,255,0.9);
    animation: stickerBreatheMauve 2.4s ease-in-out infinite;
}

/* 自然心境色温 5: 晚霞陶土 */
.option.temp-dusk-clay {
    background: #faf2f0;
    border-color: #ebd0cb;
    color: #6b3731;
}
.option.temp-dusk-clay .option-warmth-dot {
    background: #c86350;
}
.option.temp-dusk-clay:hover {
    background: #f5e4e1;
    border-color: #d9857a;
    box-shadow: 0 6px 16px rgba(200, 99, 80, 0.14);
    transform: translateY(-2px);
}
.option.temp-dusk-clay.selected {
    background: linear-gradient(135deg, #f7dfdb 0%, #eec4be 100%);
    border-color: #b85145;
    color: #4d1e18;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(184, 81, 69, 0.22), inset 0 1px 1px rgba(255,255,255,0.9);
    animation: stickerBreatheClay 2.4s ease-in-out infinite;
}

/* 浮雕贴纸轻柔呼吸动效 */
@keyframes stickerBreatheGreen {
    0%, 100% { box-shadow: 0 8px 20px rgba(56, 142, 83, 0.22), 0 0 0 0 rgba(82, 196, 26, 0); }
    50% { box-shadow: 0 10px 24px rgba(56, 142, 83, 0.3), 0 0 0 4px rgba(82, 196, 26, 0.18); }
}

@keyframes stickerBreatheLemon {
    0%, 100% { box-shadow: 0 8px 20px rgba(191, 161, 43, 0.22), 0 0 0 0 rgba(212, 160, 23, 0); }
    50% { box-shadow: 0 10px 24px rgba(191, 161, 43, 0.3), 0 0 0 4px rgba(212, 160, 23, 0.18); }
}

@keyframes stickerBreatheApricot {
    0%, 100% { box-shadow: 0 8px 20px rgba(212, 107, 43, 0.22), 0 0 0 0 rgba(230, 126, 34, 0); }
    50% { box-shadow: 0 10px 24px rgba(212, 107, 43, 0.3), 0 0 0 4px rgba(230, 126, 34, 0.18); }
}

@keyframes stickerBreatheMauve {
    0%, 100% { box-shadow: 0 8px 20px rgba(139, 78, 168, 0.22), 0 0 0 0 rgba(146, 84, 222, 0); }
    50% { box-shadow: 0 10px 24px rgba(139, 78, 168, 0.3), 0 0 0 4px rgba(146, 84, 222, 0.18); }
}

@keyframes stickerBreatheClay {
    0%, 100% { box-shadow: 0 8px 20px rgba(184, 81, 69, 0.22), 0 0 0 0 rgba(200, 99, 80, 0); }
    50% { box-shadow: 0 10px 24px rgba(184, 81, 69, 0.3), 0 0 0 4px rgba(200, 99, 80, 0.18); }
}

.option-label {
    font-weight: bold;
    font-size: 1.05rem;
    margin-right: 6px;
}

.option.temp-breeze-green .option-label { color: #246b38; }
.option.temp-warm-lemon .option-label { color: #8c6f14; }
.option.temp-sunset-apricot .option-label { color: #a84815; }
.option.temp-mountain-mauve .option-label { color: #6b3184; }
.option.temp-dusk-clay .option-label { color: #8a3126; }

.option-text {
    font-size: 0.95rem;
}



.test-controls {

    display: flex;

    justify-content: space-between;

    margin-top: 40px;

}



.btn {

    padding: 14px 30px;

    border-radius: 50px;

    border: none;

    font-weight: 600;

    font-size: 1rem;

    cursor: pointer;

    transition: var(--transition);

    display: flex;

    align-items: center;

    gap: 10px;

    /* iOS Safari 必需：没有它，浏览器会等约 300ms 区分「点按」与「双击缩放/滚动」，
       这期间首次点按只表现为选中(hover/focus)而不激活，表现为「点了没反应」。
       页面能正常滚动、唯独按钮不响应，就是这个原因。见 issue #4693 同类问题。 */
    touch-action: manipulation;

    -webkit-tap-highlight-color: transparent;

}

/* 触摸设备没有真正的 hover。iOS 首次点按会触发 :hover，若 :hover 里带 transform 位移，
   元素会从指尖下移走，click 随之丢失。故触摸端不施加 hover 位移。 */
@media (hover: none) {

    .btn:hover {

        transform: none !important;

    }

}

/* 自定义可点元素（非 button/a）同样需要，并补 cursor 以确保 iOS 识别为可点 */
button,

.verify-btn,

.alias-chip,

.weather-card,

.no-check-item,

.noCheck-open-close,

[onclick] {

    touch-action: manipulation;

    -webkit-tap-highlight-color: transparent;

}

.noCheck-open-close,

.no-check-item {

    cursor: pointer;

}



.btn-primary {

    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));

    color: white;

}



.btn-primary:hover {

    transform: translateY(-3px);

    box-shadow: 0 10px 20px rgba(90, 120, 204, 0.25);

}



.btn-secondary {

    background: var(--gray-light);

    color: var(--dark-color);

}



.btn-secondary:hover {

    background: #d1d9e6;

    transform: translateY(-3px);

}



.btn:disabled {

    opacity: 0.5;

    cursor: not-allowed;

    transform: none !important;

    box-shadow: none !important;

}

/* 就绪门控：替代 disabled 属性，观感与 .btn:disabled 一致，
   并在脚本就绪前不接受点按（iOS Safari 兼容，见 index.html 注释） */
.btn-pending {

    opacity: 0.5;

    cursor: not-allowed;

    transform: none !important;

    box-shadow: none !important;

    pointer-events: none;

}



/* 鼓励提示 */

.encouragement {

    text-align: center;

    color: var(--primary-color);

    font-style: italic;

    margin: 20px 0;

    padding: 10px;

    background-color: rgba(90, 120, 204, 0.1);

    border-radius: 10px;

}



/* 结果页面样式 */

.results-container {

    display: flex;

    flex-direction: column;

    gap: 30px;

}



.results-header {

    text-align: center;

    padding: 20px;

    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));

    border-radius: var(--border-radius);

    color: white;

}



.results-header h2 {

    font-size: 2.2rem;

    margin-bottom: 10px;

}



.total-score-container {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 16px;

    margin-top: 20px;

}

.score-card {

    background: white;

    border-radius: var(--border-radius);

    padding: 25px;

    text-align: center;

    box-shadow: var(--box-shadow);

    width: 100%;

    max-width: 420px;

}

/* 分数正下方的专属手帐画报生成按钮 */
.score-poster-action {
    width: 100%;
    max-width: 420px;
    display: flex;
    justify-content: center;
}

.score-poster-action .btn-poster {
    width: 100%;
    justify-content: center;
    padding: 16px 24px;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 16px;
    background: linear-gradient(135deg, #c58a3c 0%, #a86c22 100%);
    box-shadow: 0 8px 24px rgba(168, 108, 34, 0.32), 0 2px 6px rgba(168, 108, 34, 0.15);
    letter-spacing: 0.04em;
    color: #ffffff;
    border: none;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.score-poster-action .btn-poster:hover {
    background: linear-gradient(135deg, #d89b48 0%, #b8782a 100%);
    box-shadow: 0 10px 28px rgba(168, 108, 34, 0.42);
    transform: translateY(-2px);
}

.score-poster-action .btn-poster:active {
    transform: translateY(0);
}




.score-card h3 {

    color: var(--gray-color);

    font-size: 1.2rem;

    margin-bottom: 10px;

}



.score-value {

    font-size: 3rem;

    font-weight: bold;

    margin: 10px 0;

}

.score-value.pingjun {

    font-size: 1.3rem;

}



.score-value.normal {
    color: #9eef9e;
}

.score-value.mild {
    color: #aadf44;
}

.score-value.moderate {
    color: orange;
}

.score-value.severe {
    color: red;
}



.score-label {
    font-size: 1.25rem;
    padding: 8px 26px;
    border-radius: 20px;
    font-weight: 600;
    display: inline-block;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.score-label.normal {
    background-color: #eaf5ec;
    color: #256134;
    border-color: #b7dfc3;
}

.score-label.mild {
    background-color: #fbf6df;
    color: #7a5a12;
    border-color: #ebd99b;
}

.score-label.moderate {
    background-color: #fef0e7;
    color: #a34914;
    border-color: #f6c8aa;
}

.score-label.severe {
    background-color: #faeceb;
    color: #992822;
    border-color: #f2b5b1;
}



.chart-container {

    background: white;

    border-radius: var(--border-radius);

    padding: 30px;

    box-shadow: var(--box-shadow);

    height: 400px;

}



/* 因子得分表格样式 */

.factor-table-container {

    background: white;

    border-radius: var(--border-radius);

    padding: 30px;

    box-shadow: var(--box-shadow);

    margin-top: 20px;
    overflow-x: auto;
}

/* ================= 因子维度详情表（截图清单样式） ================= */
.dimt-card {
    background: #ffffff;
    border: 1px solid #E6E2D6;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 2px 10px rgba(75,67,59,.04);
    margin-top: 10px;
}

.dimt-legend {
    background: #FBF9F4;
    border-radius: 12px;
    padding: 14px 16px 16px;
    margin-bottom: 18px;
    text-align: center;
}
.dimt-legend-title {
    font-size: 16px;
    font-weight: 700;
    color: #2F3A44;
    letter-spacing: 2px;
    margin-bottom: 10px;
}
.dimt-legend-row {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    gap: 10px 34px;
    font-size: 14px;
    color: #4B433B;
}
.dimt-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    justify-self: start;
    white-space: nowrap;
}
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.dot-normal { background: #57BB6A; }
.dot-mild { background: #F6E05E; }
.dot-moderate { background: #F6AD3B; }
.dot-severe { background: #EE5A4E; }

.dimt-table-wrap { overflow-x: auto; }
.dimt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    color: #2F3A44;
}
.dimt-table th {
    text-align: center;
    font-weight: 700;
    color: #4B433B;
    padding: 12px 8px;
    border-bottom: 2px solid #EFEAE0;
    border-radius: 8px 8px 0 0;
    background: #FBF9F4;
    font-size: 14px;
    white-space: nowrap;
}
.dimt-table th:first-child { text-align: left; padding-left: 14px; }
.dimt-table td {
    padding: 13px 8px;
    border-bottom: 1px solid #F2EDE3;
    text-align: center;
}
.dimt-table td:first-child { text-align: left; padding-left: 14px; }
.dimt-name { font-weight: 700; color: #2F3A44; }
.dimt-raw { color: #4B433B; }
.dimt-avg { font-weight: 700; }
.dimt-tag {
    display: inline-block;
    min-width: 48px;
    white-space: nowrap;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
}
.dimt-tag-normal { background: #57BB6A; }
.dimt-tag-mild { background: #F6E05E; color: #6B5E12; }
.dimt-tag-moderate { background: #F6AD3B; }
.dimt-tag-severe { background: #EE5A4E; }

@media (max-width: 480px) {
    .dimt-table { font-size: 13.5px; }
    .dimt-table th, .dimt-table td { padding: 11px 5px; }
    .dimt-tag { min-width: 40px; padding: 4px 10px; font-size: 12px; }
    .dimt-legend-row { gap: 8px 14px; font-size: 12.5px; }
}

/* ================= 因子解读与建议（森系手帐便签风 · 自然心境色阶） ================= */
.fi-wrap {
    margin-top: 24px;
}

.fi-section-header {
    margin-bottom: 18px;
}

.fi-section-subtitle {
    font-size: 0.88rem;
    color: #78716c;
    margin-top: 4px;
    line-height: 1.5;
}

.fi-cards-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* 核心便签卡片基座 */
.fi-card {
    position: relative;
    border-radius: 18px;
    padding: 20px 22px 18px;
    box-sizing: border-box;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}

.fi-card:hover {
    transform: translateY(-2px);
}

/* 4 阶心境色温与氛围光晕 */
.fi-card-normal {
    background: linear-gradient(165deg, #f7faf8 0%, #ffffff 42%, #ffffff 100%);
    border: 1.5px solid #d4e8dc;
    box-shadow: 0 4px 18px rgba(71, 104, 82, 0.07);
}
.fi-card-normal:hover {
    box-shadow: 0 8px 24px rgba(71, 104, 82, 0.12);
    border-color: #aed6bc;
}

.fi-card-mild {
    background: linear-gradient(165deg, #fdfcf4 0%, #ffffff 42%, #ffffff 100%);
    border: 1.5px solid #ede3c3;
    box-shadow: 0 4px 18px rgba(212, 160, 23, 0.07);
}
.fi-card-mild:hover {
    box-shadow: 0 8px 24px rgba(212, 160, 23, 0.13);
    border-color: #dfce9b;
}

.fi-card-moderate {
    background: linear-gradient(165deg, #fdf8f0 0%, #ffffff 42%, #ffffff 100%);
    border: 1.5px solid #f6d8be;
    box-shadow: 0 4px 18px rgba(217, 119, 6, 0.08);
}
.fi-card-moderate:hover {
    box-shadow: 0 8px 24px rgba(217, 119, 6, 0.14);
    border-color: #eec19b;
}

.fi-card-severe {
    background: linear-gradient(165deg, #fdf4f2 0%, #ffffff 42%, #ffffff 100%);
    border: 1.5px solid #f8cdcb;
    box-shadow: 0 4px 20px rgba(220, 38, 38, 0.09);
}
.fi-card-severe:hover {
    box-shadow: 0 8px 26px rgba(220, 38, 38, 0.15);
    border-color: #f1a9a6;
}

/* 顶部和纸贴胶纹理 */
.fi-card-top-tape {
    position: absolute;
    top: 0;
    left: 24px;
    width: 64px;
    height: 5px;
    border-radius: 0 0 4px 4px;
    opacity: 0.85;
}
.fi-card-normal .fi-card-top-tape { background: #52c41a; }
.fi-card-mild .fi-card-top-tape { background: #d4a017; }
.fi-card-moderate .fi-card-top-tape { background: #e07a1f; }
.fi-card-severe .fi-card-top-tape { background: #dc2626; }

/* 头部排版 */
.fi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(230, 222, 210, 0.65);
    margin-bottom: 14px;
}

.fi-header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    flex: 1;
}

.fi-header-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fi-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.fi-name {
    font-size: 1.22rem;
    font-weight: 700;
    color: #2c332e;
    margin: 0;
    letter-spacing: 0.5px;
}

/* 诗意状态标签 (如: 微澜泛起 🍃 / 平静安宁 🌿) */
.fi-poetic-status {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 6px;
    line-height: 1.4;
    letter-spacing: 0.2px;
}
.fi-poetic-normal { color: #2e7d32; background: rgba(82, 196, 26, 0.12); }
.fi-poetic-mild { color: #b78103; background: rgba(250, 173, 20, 0.14); }
.fi-poetic-moderate { color: #d46b08; background: rgba(250, 140, 22, 0.14); }
.fi-poetic-severe { color: #cf1322; background: rgba(245, 34, 45, 0.14); }

/* 状态药丸标签 */
.fi-severity-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

.fi-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.fi-pill-normal { background: #eaf5ec; color: #276738; border: 1px solid #b7dfc3; }
.fi-pill-normal .fi-pulse-dot { background: #52c41a; }

.fi-pill-mild { background: #fdf8e6; color: #856404; border: 1px solid #eedc9f; }
.fi-pill-mild .fi-pulse-dot { background: #d4a017; }

.fi-pill-moderate { background: #fef3e9; color: #9c4200; border: 1px solid #f9ccaa; }
.fi-pill-moderate .fi-pulse-dot { background: #e07a1f; }

.fi-pill-severe { background: #feebeb; color: #a51d24; border: 1px solid #fca5a5; }
.fi-pill-severe .fi-pulse-dot { background: #dc2626; }

/* 因子手绘图腾隐喻副标题标签 */
.fi-metaphor-tag {
    font-size: 0.8rem;
    color: #736e65;
    background: rgba(245, 239, 230, 0.75);
    padding: 3px 10px;
    border-radius: 10px;
    font-weight: 500;
    letter-spacing: 0.2px;
    border: 1px solid rgba(220, 212, 198, 0.5);
}

/* 头部右侧：图腾徽章 + 均分数值 */
.fi-header-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.fi-badge-sticker {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(71, 104, 82, 0.12);
    border: 1px solid rgba(215, 203, 187, 0.7);
    transform: rotate(-3deg);
    transition: transform 0.25s ease;
}
.fi-badge-sticker:hover {
    transform: rotate(0deg) scale(1.08);
}
.fi-badge-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.fi-score-box {
    text-align: right;
    line-height: 1;
}

.fi-score-num {
    font-size: 1.85rem;
    font-weight: 800;
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    letter-spacing: -0.5px;
}
.fi-score-normal { color: #3fa34d; }
.fi-score-mild { color: #c9a000; }
.fi-score-moderate { color: #e07a1f; }
.fi-score-severe { color: #dc2626; }

.fi-score-unit {
    display: block;
    font-size: 0.7rem;
    color: #9c9284;
    margin-top: 3px;
    font-weight: 600;
}

/* 维度定义与临床释义导语（原上方卡片核心定义） */
.fi-dimension-desc {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    background: rgba(246, 243, 236, 0.75);
    border-radius: 11px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 0.87rem;
    line-height: 1.65;
    color: #5c5549;
    border-left: 3.5px solid #c2b9a7;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02);
}
.fi-desc-icon {
    color: #8c8273;
    font-size: 0.84rem;
    margin-top: 3px;
    flex-shrink: 0;
}

/* 便签主体双卡容器 */
.fi-body-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fi-note {
    border-radius: 14px;
    padding: 14px 16px;
    box-sizing: border-box;
}

/* 🪞 近期感知便签（情绪镜子 · 柔和淡米纸） */
.fi-note-state {
    background: rgba(251, 248, 242, 0.9);
    border: 1px solid #ebd9c8;
}

/* 🌱 自愈小方便签（行动锦囊 · 清爽微风绿） */
.fi-note-action {
    background: linear-gradient(135deg, rgba(244, 249, 245, 0.95) 0%, rgba(236, 246, 238, 0.95) 100%);
    border: 1.2px dashed #aed6bc;
}

.fi-note-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.fi-note-icon {
    font-size: 1.05rem;
    line-height: 1;
}

.fi-note-heading {
    font-size: 0.92rem;
    font-weight: 700;
    color: #2c332e;
}

.fi-note-subtag {
    font-size: 0.7rem;
    padding: 1px 7px;
    border-radius: 8px;
    font-weight: 600;
}
.fi-note-state .fi-note-subtag {
    background: #eef2f6;
    color: #3b7dd8;
}
.fi-note-action .fi-note-subtag {
    background: #e4f2e7;
    color: #2e7d32;
}

.fi-note-text {
    font-size: 0.9rem;
    line-height: 1.75;
    margin: 0;
    text-align: justify;
}
.fi-note-state .fi-note-text {
    color: #4b433b;
}
.fi-note-action .fi-note-text {
    color: #244b30;
}

/* 治愈微语暖心收尾（原上方卡片黄色核心寄语） */
.fi-whisper-footer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 11px 15px;
    background: linear-gradient(135deg, #fdfbf5 0%, #faf5ea 100%);
    border-radius: 12px;
    border: 1px solid #ebd9c8;
    border-left: 4px solid #d4934b;
    box-shadow: 0 2px 8px rgba(180, 130, 70, 0.05);
}
.fi-whisper-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    line-height: 1.2;
}
.fi-whisper-text {
    font-size: 0.86rem;
    line-height: 1.65;
    color: #635035;
    font-weight: 500;
}

/* 底部温暖守望安全卡片 */
.fi-safety-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(248, 244, 238, 0.85);
    border: 1px dashed #d5c8b6;
    border-radius: 12px;
    padding: 12px 16px;
    margin-top: 18px;
    font-size: 0.82rem;
    color: #78716c;
    line-height: 1.6;
}
.fi-safety-card i {
    color: #e07a1f;
    font-size: 1rem;
    flex-shrink: 0;
}
.fi-safety-card strong {
    color: #c2410c;
}

/* 移动端窄屏适配优化 (<= 480px) */
@media (max-width: 480px) {
    .fi-card {
        padding: 16px 14px 14px;
        border-radius: 15px;
    }
    .fi-header {
        align-items: flex-start;
        padding-bottom: 12px;
        margin-bottom: 12px;
        gap: 10px;
    }
    .fi-name {
        font-size: 1.05rem;
    }
    .fi-metaphor-tag {
        font-size: 0.74rem;
        padding: 2px 7px;
    }
    .fi-badge-sticker {
        width: 36px;
        height: 36px;
    }
    .fi-badge-img {
        width: 28px;
        height: 28px;
    }
    .fi-score-num {
        font-size: 1.5rem;
    }
    .fi-note {
        padding: 12px 13px;
        border-radius: 12px;
    }
    .fi-note-heading {
        font-size: 0.86rem;
    }
    .fi-note-text {
        font-size: 0.84rem;
        line-height: 1.68;
    }
    .fi-dimension-desc {
        padding: 8px 11px;
        font-size: 0.81rem;
        margin-bottom: 11px;
    }
    .fi-whisper-footer {
        padding: 9px 12px;
        font-size: 0.81rem;
        margin-top: 11px;
    }
}

/* ================= 小红书爆款手帐风：9大身心能量切片 ================= */
.factor-slices-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.factor-slice-capsule {
    background: #ffffff;
    border: 1px solid #ebd9c8;
    border-radius: 16px;
    padding: 16px 18px;
    position: relative;
    box-shadow: 0 4px 14px rgba(90, 75, 55, 0.05);
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.factor-slice-capsule:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(90, 75, 55, 0.1);
    border-color: #dfc5af;
}

.capsule-washi-tape {
    position: absolute;
    top: -6px;
    right: 16px;
    width: 44px;
    height: 14px;
    background: linear-gradient(135deg, rgba(245, 236, 222, 0.9) 0%, rgba(230, 216, 198, 0.78) 100%);
    border-left: 1.5px dashed rgba(160, 135, 110, 0.35);
    border-right: 1.5px dashed rgba(160, 135, 110, 0.35);
    border-radius: 1px;
    transform: rotate(1.5deg);
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(60, 45, 30, 0.06);
}

.capsule-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.capsule-badge-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.capsule-badge-img {
    width: 46px;
    height: 46px;
    object-fit: contain;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.08));
    flex-shrink: 0;
}

.capsule-title-col {
    display: flex;
    flex-direction: column;
}

.capsule-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #2c332e;
    line-height: 1.25;
}

.capsule-metaphor {
    font-size: 0.78rem;
    color: #8c8275;
    margin-top: 3px;
    font-weight: 500;
}

.capsule-rating-pill {
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 12px;
    line-height: 1.3;
    white-space: nowrap;
    border: 1px solid transparent;
}

.capsule-rating-pill.normal {
    background: #eaf5ec;
    color: #256134;
    border-color: #b7dfc3;
}

.capsule-rating-pill.mild {
    background: #fbf6df;
    color: #7a5a12;
    border-color: #ebd99b;
}

.capsule-rating-pill.moderate {
    background: #fef0e7;
    color: #a34914;
    border-color: #f6c8aa;
}

.capsule-rating-pill.severe {
    background: #faeceb;
    color: #992822;
    border-color: #f2b5b1;
}

.capsule-track-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.capsule-track-bar {
    width: 100%;
    height: 8px;
    background: #f3ece2;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.capsule-track-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.capsule-track-fill.normal {
    background: linear-gradient(90deg, #73d13d 0%, #52c41a 100%);
}

.capsule-track-fill.mild {
    background: linear-gradient(90deg, #ffc53d 0%, #faad14 100%);
}

.capsule-track-fill.moderate {
    background: linear-gradient(90deg, #ffa940 0%, #fa8c16 100%);
}

.capsule-track-fill.severe {
    background: linear-gradient(90deg, #ff7875 0%, #f5222d 100%);
}

.capsule-score-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    color: #78716c;
}

.capsule-avg-label strong {
    font-size: 1rem;
    color: #2c332e;
    font-weight: 700;
}



.factor-table {

    width: 100%;

    border-collapse: collapse;

    margin-top: 20px;

}



.factor-table th {

    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));

    color: white;

    padding: 15px;

    text-align: center;

    font-weight: 600;

}



.factor-table td {

    padding: 15px;

    text-align: center;

    border-bottom: 1px solid var(--gray-light);

}



.factor-table tr:hover {

    background-color: rgba(90, 120, 204, 0.05);

}



.factor-table tr:nth-child(even) {

    background-color: #f9f9f9;

}



.factor-table tr:nth-child(even):hover {

    background-color: rgba(90, 120, 204, 0.05);

}



.severity-badge {

    padding: 6px 12px;

    border-radius: 20px;

    font-size: 0.9rem;

    font-weight: 600;

    display: inline-block;

    min-width: 80px;

    color: #fff;

}



.severity-badge.normal {

    /* background-color: rgba(158, 239, 158, 0.2); */

    background-color: #9eef9e;

}



.severity-badge.mild {

    /* background-color: rgba(170, 223, 68, 0.2); */

    background-color: #aadf44;

}



.severity-badge.moderate {

    /* background-color: rgba(255, 165, 0, 0.2); */

    background-color: orange;

}



.severity-badge.severe {

    /* background-color: rgba(255, 0, 0, 0.2); */

    background-color: red;

}



.dimensions-details {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

    gap: 20px;

}



.dimension-detail-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border-top: 4px solid;
    border-left: 1px solid rgba(0, 0, 0, 0.05);
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    overflow: hidden;
}

.dimension-detail-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09);
}

.dimension-card-inner {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.dimension-badge-col {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 86px;
}

.dimension-badge-img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.1));
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dimension-detail-card:hover .dimension-badge-img {
    transform: scale(1.08) rotate(3deg);
}

.dimension-badge-metaphor {
    font-size: 0.72rem;
    font-weight: 600;
    color: #78716c;
    text-align: center;
    margin-top: 8px;
    line-height: 1.25;
    background: #fbf7f5;
    border: 1px solid #f2e8e5;
    padding: 3px 6px;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}

.dimension-info-col {
    flex: 1;
    min-width: 0;
}

.dimension-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    gap: 8px;
}

.dimension-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1c1917;
}

.dimension-score {
    font-size: 0.95rem;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 20px;
}

.dimension-description {
    color: #57534e;
    line-height: 1.6;
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.dimension-healing-quote {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-left: 3.5px solid #f59e0b;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.88rem;
    color: #92400e;
    line-height: 1.55;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.dimension-healing-quote .quote-icon {
    font-size: 1.05rem;
    flex-shrink: 0;
    line-height: 1.3;
}

@media (max-width: 600px) {
    .dimension-card-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
    }
    .dimension-badge-col {
        width: 100%;
        margin-bottom: 4px;
    }
    .dimension-header {
        justify-content: center;
    }
    .dimension-description {
        text-align: left;
    }
    .dimension-healing-quote {
        text-align: left;
    }
}



.recommendations {

    background: linear-gradient(135deg, #f8f9fa, #e9ecef);

    border-radius: var(--border-radius);

    padding: 30px;

    margin-top: 20px;

}



.recommendations h3 {

    color: var(--primary-color);

    font-size: 1.6rem;

    margin-bottom: 20px;

}



.recommendation-list {

    display: flex;

    flex-direction: column;

    gap: 15px;

}



.recommendation-item {

    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 15px;

    background: white;

    border-radius: 10px;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);

}



.recommendation-item i {

    color: var(--primary-color);

    font-size: 1.2rem;

    margin-top: 3px;

}



.result-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 36px auto 0;
    flex-wrap: wrap;
}

.btn-poster {
    background: linear-gradient(135deg, #d97706, #b45309);
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(180, 83, 9, 0.28);
    border: none;
    padding: 16px 32px;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: var(--border-radius);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.btn-poster:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(180, 83, 9, 0.38);
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
}

.btn-poster:active {
    transform: translateY(0);
}

.restart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 16px 32px;
    font-size: 1.05rem;
}



/* 导航样式 */

.nav-buttons {

    display: flex;

    justify-content: center;

    gap: 20px;

    margin-top: 30px;

}



.nav-dot {

    width: 12px;

    height: 12px;

    border-radius: 50%;

    background-color: var(--gray-light);

    cursor: pointer;

    transition: var(--transition);

}



.nav-dot.active {

    background-color: var(--primary-color);

    transform: scale(1.2);

}



/* 动画 */

@keyframes fadeIn {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}



@keyframes fadeInDown {

    from {

        opacity: 0;

        transform: translateY(-20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(20px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



@keyframes pulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }

}



@keyframes progressAnimation {

    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 1rem 0;
    }

}



/* 响应式设计 */

@media (max-width: 768px) {
    .header {
        padding-top: 40px;
    }

    .header h1 {

        font-size: 2rem;

    }



    .page {

        padding: 25px;

    }



    .dimensions-grid {

        grid-template-columns: 1fr;

    }



    .options-container {

        grid-template-columns: 1fr;

    }



    .question-text {

        font-size: 1.2rem;

        /* 移动端小猫宽 68px、右偏 8px，同步收窄右侧避让宽度 */
        padding-right: 84px;

    }



    .test-controls {

        flex-direction: column;

        gap: 15px;

    }



    /* 固定 250px 只针对首页「开始测试」主按钮。
       此前这条写成不带限定的 .btn，≤768px 时页面上**所有** .btn 都被撑成 250px：
       草稿提示条里两个按钮合计 508px，超出卡片内容宽度，"重新开始"被挤出并裁掉。
       注意 .test-controls .btn 已由下一条 width:100% 单独处理，导航按钮不依赖本条。 */
    #startBtn {

        width: 250px;

        justify-content: center;

    }

    .test-controls .btn {

        width: 100%;

    }



    .total-score-container {

        flex-direction: column;

        gap: 20px;

    }



    .score-card {

        width: 100%;

    }



    .dimensions-details {

        grid-template-columns: 1fr;

    }



    .chart-container {

        height: 300px;

    }



    .results-header h2 {

        font-size: 1.8rem;

    }



    .factor-table-container {

        padding: 20px;

    }



    .factor-table th,
    .factor-table td {

        padding: 10px 8px;

        font-size: 0.9rem;

    }



    .severity-badge {

        padding: 4px 8px;

        font-size: 0.8rem;

        min-width: 70px;

    }



}



@media (max-width: 480px) {

    body {

        padding: 10px;

    }

    .header {
        padding: 38px 16px 20px;
    }

    .page {

        padding: 20px;

    }



    .section-title {

        font-size: 1.5rem;

    }



    .dimension-card {

        padding: 15px;

    }



    .factor-table th,
    .factor-table td {

        padding: 8px 6px;

        font-size: 0.8rem;

    }



    .severity-badge {

        padding: 3px 6px;

        font-size: 0.75rem;

        min-width: 60px;

    }

}

.btn-box {

    display: flex;

    justify-content: center;

}

.tips {
    font-size: 14px;
    color: #4b524d;
    margin-top: 15px;
    background: #f7f4ee;
    padding: 14px 18px;
    border-radius: 12px;
    border-left: 4px solid var(--primary-color);
    line-height: 1.6;
}

/* ================== 治愈系新视觉组件 ================== */

/* 1. 首页情绪避风港 Hero 卡片 */
.healing-hero-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(71, 104, 82, 0.08);
    margin-bottom: 25px;
    border: 1px solid rgba(71, 104, 82, 0.08);
    transition: var(--transition);
}

.healing-hero-img-wrap {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
}

.healing-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transition: transform 0.6s ease;
}

.healing-hero-card:hover .healing-hero-img {
    transform: scale(1.02);
}

.healing-hero-badge {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    color: var(--primary-dark);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    letter-spacing: 0.5px;
}

.healing-hero-text {
    padding: 24px;
    text-align: center;
}

.healing-hero-text h2 {
    color: var(--primary-dark);
    font-size: 1.45rem;
    margin-bottom: 8px;
    font-weight: 700;
}

.healing-hero-text p {
    color: var(--gray-color);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* 2. 本地草稿恢复提示条 */
.draft-resume-banner {
    background: #fdfbf7;
    border: 1px solid #e8dec8;
    border-radius: 14px;
    padding: 14px 18px;
    margin-bottom: 20px;
    box-shadow: 0 4px 16px rgba(196, 124, 72, 0.08);
    animation: fadeInDown 0.4s ease;
}

.draft-resume-banner.hidden {
    display: none;
}

.draft-banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.draft-banner-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.draft-banner-icon {
    font-size: 1.5rem;
}

.draft-banner-info strong {
    display: block;
    color: var(--secondary-color);
    font-size: 0.95rem;
}

.draft-banner-info p {
    margin: 0;
    color: var(--gray-color);
    font-size: 0.85rem;
}

.draft-banner-actions {
    display: flex;
    gap: 8px;
    /* 极窄屏上宁可让两个按钮换行，也不要横向溢出卡片 */
    flex-wrap: wrap;
}

.btn-sm {
    padding: 6px 14px !important;
    font-size: 0.85rem !important;
    border-radius: 20px !important;
}

.btn-outline {
    background: transparent !important;
    border: 1px solid var(--gray-light) !important;
    color: var(--gray-color) !important;
}

.btn-outline:hover {
    background: #f0ebe2 !important;
}

/* 3. 答题页面章节标签 */
.test-chapter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eef4f0;
    color: var(--primary-color);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.chapter-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-color);
}

.btn-block {
    width: 100%;
}

/* 5. 结果页私密印章与高质感报告头 */
.confidential-seal {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fbf8f2;
    border: 1.5px dashed #ded4c3;
    border-radius: 16px;
    padding: 18px 90px 18px 20px;
    margin-bottom: 25px;
    box-shadow: 0 4px 16px rgba(71, 104, 82, 0.04);
    overflow: hidden;
}

.confidential-wax-stamp {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) rotate(8deg);
    width: 68px;
    height: auto;
    filter: drop-shadow(0 6px 14px rgba(71, 104, 82, 0.22));
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.confidential-wax-stamp:hover {
    transform: translateY(-50%) rotate(3deg) scale(1.12);
}

.confidential-wax-stamp.seal-stamp-pop {
    animation: sealPopAnim 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes sealPopAnim {
    0% { transform: translateY(-50%) rotate(8deg) scale(1); }
    40% { transform: translateY(-50%) rotate(-4deg) scale(1.22); }
    100% { transform: translateY(-50%) rotate(8deg) scale(1); }
}

.badge-seal-tag {
    cursor: pointer;
    background: #fbf3e6;
    border: 1px dashed #d4b896;
    color: #8c531b;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    user-select: none;
    white-space: nowrap;
}

.badge-seal-tag:hover {
    background: #f3dfc5;
    border-color: #b4783b;
    transform: translateY(-1px);
}

.seal-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.seal-text {
    flex: 1;
    min-width: 0;
}

.seal-title {
    font-weight: 700;
    color: var(--primary-dark);
    font-size: 0.98rem;
    margin-bottom: 3px;
}

.seal-subtitle {
    color: var(--gray-color);
    font-size: 0.82rem;
    letter-spacing: 0.5px;
    word-break: break-word;
}

/* 选项手感与微动效提升 */
.option {
    border-radius: 14px;
    padding: 14px 18px;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
}

.option:active {
    transform: scale(0.985);
}

.option-label {
    font-weight: 700;
}

/* 进度条美化 */
.progress-container {
    height: 8px !important;
    border-radius: 10px !important;
    background: #ebe6dc !important;
}

.progress-bar {
    background: linear-gradient(90deg, var(--primary-light), var(--primary-color)) !important;
    border-radius: 10px !important;
    transition: width 0.3s ease !important;
}

/* 结果卡片美化 */
.score-card {
    background: #ffffff !important;
    border-radius: 18px !important;
    border: 1px solid var(--gray-light) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04) !important;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* ================= 小红书 3:4 手帐画报弹窗 ================= */
.poster-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    transition: opacity 0.3s ease;
}

.poster-modal.hidden {
    display: none;
}

.poster-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(28, 25, 23, 0.72);
    backdrop-filter: blur(6px);
}

.poster-modal-dialog {
    position: relative;
    z-index: 10;
    background: #ffffff;
    border-radius: 20px;
    max-width: 520px;
    width: 100%;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: modalPopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalPopIn {
    0% { transform: scale(0.92); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.poster-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #f2ece4;
    background: #faf7f2;
}

.poster-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    color: #2c3e30;
}

.poster-modal-title i {
    color: #b45309;
}

.poster-close-btn {
    background: transparent;
    border: none;
    font-size: 1.6rem;
    color: #78716c;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    transition: color 0.2s;
}

.poster-close-btn:hover {
    color: #1c1917;
}

.poster-modal-body {
    padding: 18px 22px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fdfbf7;
}

.poster-preview-container {
    width: 100%;
    max-width: 360px;
    aspect-ratio: 3 / 4;
    background: #f5efe6;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(60, 50, 40, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    border: 1px solid #e7dfd3;
}

.poster-preview-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-touch-callout: default; /* 允许 iOS 微信长按保存 */
}

.poster-preview-img.hidden {
    display: none;
}

.poster-loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #78716c;
    font-size: 0.9rem;
}

.poster-spin-icon {
    width: 36px;
    height: 36px;
    border: 3px solid #e7dfd3;
    border-top-color: #b45309;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.poster-modal-tips {
    margin-top: 14px;
    background: #fffbeb;
    border: 1px solid #fef3c7;
    border-left: 3.5px solid #d97706;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.82rem;
    color: #92400e;
    line-height: 1.45;
    width: 100%;
    box-sizing: border-box;
}

.poster-modal-footer {
    padding: 14px 22px;
    border-top: 1px solid #f2ece4;
    background: #faf7f2;
}

@media (max-width: 480px) {
    .poster-modal-dialog {
        max-width: 95vw;
    }
    .poster-preview-container {
        max-width: 280px;
    }
}

/* ================= 手帐装帧与纸质细节 (和纸胶带与柔光卡角) ================= */
.washi-card {
    position: relative;
    border: 1px solid #ebd9c8 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 20px -2px rgba(90, 75, 55, 0.08), 0 2px 6px -1px rgba(90, 75, 55, 0.04) !important;
}

/* 四角半透明和纸胶带柔光固定装帧细节 */
.washi-card::before,
.washi-card::after {
    content: '';
    position: absolute;
    width: 34px;
    height: 12px;
    background: linear-gradient(135deg, rgba(238, 228, 212, 0.8) 0%, rgba(222, 208, 188, 0.65) 100%);
    border-left: 1px dashed rgba(160, 140, 120, 0.35);
    border-right: 1px dashed rgba(160, 140, 120, 0.35);
    border-radius: 1px;
    pointer-events: none;
    z-index: 4;
    box-shadow: 0 1px 2px rgba(60, 45, 30, 0.04);
}

.washi-card::before {
    top: -4px;
    left: 14px;
    transform: rotate(-16deg);
}

.washi-card::after {
    top: -4px;
    right: 14px;
    transform: rotate(16deg);
}

.washi-tape-strip.top-tape {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%) rotate(-0.8deg);
    width: 120px;
    height: 22px;
    background: linear-gradient(180deg, rgba(242, 233, 218, 0.92) 0%, rgba(228, 215, 196, 0.8) 100%);
    border-left: 2px dashed rgba(160, 140, 120, 0.4);
    border-right: 2px dashed rgba(160, 140, 120, 0.4);
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(70, 50, 30, 0.08);
    pointer-events: none;
    z-index: 5;
    backdrop-filter: blur(1px);
}

.seal-profile-badge {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 12px;
    margin-top: 8px;
    padding: 6px 12px;
    background: rgba(245, 239, 230, 0.85);
    border: 1px dashed #d8c7b4;
    border-radius: 12px;
    font-size: 0.82rem;
    color: #44403c;
    max-width: 100%;
    box-sizing: border-box;
}

.seal-profile-badge strong {
    color: #2c4a34;
    font-weight: 700;
}

.seal-profile-badge .badge-alias,
.seal-profile-badge .badge-weather {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
    line-height: 1.4;
}

/* 电脑端专属手机模拟器入口悬浮按钮 */
/* 未解锁兜底页：卡密弹窗被关闭后显示，按钮重新唤起同一个弹窗 */
.lock-screen {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: linear-gradient(160deg, #eef8ff 0%, #dceeff 100%);
}

.lock-screen.hidden {
    display: none;
}

.lock-card {
    width: 100%;
    max-width: 340px;
    background: #fff;
    border-radius: 20px;
    padding: 34px 24px 30px;
    text-align: center;
    box-shadow: 0 10px 34px rgba(75, 155, 247, 0.16);
}

.lock-icon {
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.lock-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #1E293B;
    margin: 0 0 8px;
}

.lock-card p {
    font-size: 0.86rem;
    color: #64748B;
    margin: 0 0 22px;
    line-height: 1.6;
}

.lock-card .btn {
    width: 100%;
    background: linear-gradient(135deg, #5FD6CF 0%, #4B9BF7 100%);
    color: #FFFFFF;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(75, 155, 247, 0.28);
}

/* ================= 避风港长篇身心手书结语信笺 ================= */
.healing-epilogue-card {
    background: #fffdfa;
    border: 1px solid #ebd9c8;
    border-radius: 20px;
    padding: 36px 32px 28px;
    margin-top: 24px;
    position: relative;
    box-shadow: 0 8px 30px rgba(90, 75, 55, 0.06);
    background-image: radial-gradient(#f0e6d8 0.75px, transparent 0.75px);
    background-size: 20px 20px;
    animation: fadeIn 0.4s ease;
}

.healing-epilogue-card .top-tape {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(-0.5deg);
    width: 120px;
    height: 24px;
    background: linear-gradient(135deg, rgba(245, 236, 222, 0.95) 0%, rgba(225, 210, 190, 0.85) 100%);
    border-left: 2px dashed rgba(160, 135, 110, 0.4);
    border-right: 2px dashed rgba(160, 135, 110, 0.4);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    z-index: 2;
    pointer-events: none;
}

.epilogue-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px dashed #e8dccf;
}

.epilogue-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.epilogue-badge.tier-normal {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.epilogue-badge.tier-mild {
    background: #fefce8;
    color: #854d0e;
    border: 1px solid #fef08a;
}

.epilogue-badge.tier-moderate {
    background: #fff1f2;
    color: #be123c;
    border: 1px solid #fecdd3;
}

.epilogue-badge.tier-severe {
    background: #fdf2f8;
    color: #9d174d;
    border: 1px solid #fbcfe8;
}

.epilogue-receiver {
    font-size: 0.95rem;
    font-weight: 600;
    color: #6b5c4d;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Segoe UI", Roboto, sans-serif;
}

.epilogue-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: #2b241d;
    line-height: 1.5;
    margin: 10px 0 20px;
    letter-spacing: 0.3px;
    position: relative;
    padding-left: 14px;
    border-left: 4px solid #b45309;
}

.epilogue-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: #38332c;
    font-size: 0.98rem;
    line-height: 1.85;
    letter-spacing: 0.2px;
}

.epilogue-paragraph {
    margin: 0;
    text-align: justify;
    text-indent: 2em;
}

.epilogue-prescription-box {
    margin-top: 26px;
    background: #fdfaf5;
    border: 1.5px dashed #dbcab5;
    border-radius: 16px;
    padding: 20px 22px;
    box-shadow: 0 4px 12px rgba(90, 75, 55, 0.03);
    position: relative;
}

.prescription-box-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.02rem;
    font-weight: 700;
    color: #78350f;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee4d8;
}

.prescription-box-title .pin-icon {
    font-size: 1.15rem;
}

.prescription-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.prescription-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.92rem;
    line-height: 1.65;
    color: #4b4238;
}

.prescription-dot {
    color: #b45309;
    font-size: 0.9rem;
    margin-top: 1px;
    flex-shrink: 0;
}

.epilogue-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px dashed #e8dccf;
}

.epilogue-mascot {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(245, 237, 226, 0.5);
    padding: 10px 16px;
    border-radius: 30px;
    width: fit-content;
    max-width: 100%;
}

.epilogue-cat-avatar {
    width: 36px;
    height: 36px;
    object-fit: contain;
    flex-shrink: 0;
}

.epilogue-whisper {
    font-size: 0.85rem;
    color: #786551;
    font-style: italic;
}

@media (max-width: 480px) {
    .healing-epilogue-card {
        padding: 26px 16px 20px;
        margin-top: 18px;
        border-radius: 16px;
    }
    .epilogue-title {
        font-size: 1.2rem;
        padding-left: 10px;
    }
    .epilogue-body {
        font-size: 0.92rem;
        line-height: 1.75;
    }
    .epilogue-prescription-box {
        padding: 16px 14px;
    }
    .epilogue-mascot {
        width: 100%;
    }
    .epilogue-whisper {
        font-size: 0.8rem;
    }
}




.clinical-summary-card {
  margin: 1.5rem auto;
  max-width: 600px;
  background: rgba(255, 255, 255, 0.95);
  padding: 1.5rem;
  border-left: 4px solid #a8c3a6;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(71, 104, 82, 0.05);
  box-sizing: border-box;
}
.clinical-title {
  color: #557c55;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.clinical-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #444;
}
.clinical-body ul {
  padding-left: 1.5rem;
  margin-top: 0.8rem;
  margin-bottom: 0.8rem;
}
.clinical-body li {
  margin-bottom: 0.5rem;
}
.clinical-body strong.severe { color: #f5222d; }
.clinical-body strong.moderate { color: #fa8c16; }
.clinical-body strong.mild { color: #faad14; }
.clinical-body strong.normal { color: #52c41a; }

/* ================= 核心情绪预警 (手账仪表盘) ================= */
.core-alert-dashboard {
  margin: 1.5rem auto;
  max-width: 600px;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.95);
  position: relative;
  border-radius: 12px;
  box-sizing: border-box;
}
.core-alert-dashboard.hidden {
  display: none !important;
}
.alert-title {
  font-size: 1.1rem;
  color: #557c55;
  margin-bottom: 1rem;
}
.alert-item {
  display: flex;
  align-items: center;
  margin-bottom: 0.8rem;
  gap: 10px;
  font-size: 0.9rem;
}
.alert-label {
  /* 不锁死窄宽: 中文因子名最长 6 字 (人际关系敏感)，需给足空间且禁止换行 */
  flex: 0 0 auto;
  min-width: 96px;
  max-width: 132px;
  text-align: right;
  color: #444;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alert-bar-track {
  flex: 1 1 auto;
  min-width: 60px;
  height: 12px;
  background: #f0f0f0;
  border-radius: 6px;
  overflow: hidden;
}
.alert-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.5s ease;
}
.alert-bar-fill.severe {
  background: #ff7875;
}
.alert-bar-fill.moderate {
  background: #ff9c6e;
}
.alert-bar-fill.mild {
  background: #ffd666;
}
.alert-tag {
  /* 标签不参与压缩，避免把进度条挤成 0 宽 */
  flex: 0 0 auto;
  min-width: 42px;
  text-align: center;
  font-weight: bold;
  white-space: nowrap;
}
.alert-tag.severe {
  color: #ff7875;
}
.alert-tag.moderate {
  color: #ff9c6e;
}
.alert-tag.mild {
  color: #ffd666;
}

/* ================= 移动端窄屏适配优化 (<= 480px) ================= */
@media (max-width: 480px) {
    /* 私密防伪印章卡片响应式压缩，防止火漆戳挤占过多空间 */
    .confidential-seal {
        padding: 14px 68px 14px 14px;
        gap: 10px;
        align-items: flex-start;
    }

    .confidential-wax-stamp {
        width: 50px;
        right: 8px;
    }

    .seal-icon {
        font-size: 1.5rem;
        margin-top: 2px;
    }

    .seal-title {
        font-size: 0.92rem;
        line-height: 1.35;
    }

    .seal-subtitle {
        font-size: 0.76rem;
        line-height: 1.4;
    }

    .seal-profile-badge {
        gap: 6px 8px;
        padding: 6px 10px;
        font-size: 0.78rem;
        width: 100%;
    }

    .badge-seal-tag {
        font-size: 0.76rem;
        padding: 2px 8px;
    }

    /* 临床评估摘要卡片移动端优化 */
    .clinical-summary-card {
        padding: 1.1rem 1rem;
        margin: 1.2rem auto;
    }

    .clinical-title {
        font-size: 1.05rem;
        margin-bottom: 0.75rem;
    }

    .clinical-body {
        font-size: 0.88rem;
        line-height: 1.55;
    }

    .clinical-body ul {
        padding-left: 1.2rem;
        margin-top: 0.6rem;
        margin-bottom: 0.6rem;
    }

    /* 核心情绪预警仪表盘移动端优化 */
    .core-alert-dashboard {
        padding: 1.1rem 1rem;
        margin: 1.2rem auto;
    }

    .alert-title {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .alert-item {
        gap: 8px;
        font-size: 0.82rem;
        margin-bottom: 0.65rem;
    }

    /* 窄屏: 缩小最小宽度但保持单行，进度条仍有可读宽度 */
    .alert-label {
        min-width: 84px;
        max-width: 100px;
        font-size: 0.82rem;
    }

    .alert-bar-track {
        min-width: 40px;
    }

    .alert-tag {
        min-width: 38px;
        font-size: 0.82rem;
    }
}

/* 超窄屏 (<= 360px): 因子名与状态标签换行排布，进度条独占一行保持可见 */
@media (max-width: 360px) {
    .alert-item {
        flex-wrap: wrap;
        row-gap: 5px;
    }

    .alert-label {
        min-width: 0;
        max-width: none;
        flex: 1 1 auto;
        text-align: left;
    }

    .alert-tag {
        min-width: 0;
        text-align: right;
    }

    .alert-bar-track {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* 开始测试按钮移动端触控优化与点击即时动效 */
#startBtn {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(71, 104, 82, 0.2);
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}
#startBtn:active {
    transform: scale(0.96) !important;
    box-shadow: 0 4px 10px rgba(71, 104, 82, 0.2) !important;
}
/* 就绪门控：脚本未加载完成前的加载态（仅首屏初始化前短暂出现） */
#startBtn:disabled {
    cursor: progress;
    opacity: 0.68;
    filter: saturate(0.6);
}
#startBtn:disabled:active {
    transform: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   SCL-90 纯净直接出图高转化结果页 (对标爆款视频真实布局)
   ========================================================================== */

.classic-clean-results {
    max-width: 520px;
    margin: 0 auto;
}

/* 结果页首屏要把分数和雷达一起塞进一屏：容器内边距与卡片间距整体收紧 */
#resultPage {
    padding: 14px 12px 20px;
}

#resultPage .classic-clean-results {
    gap: 10px;
}

/* 顶部薄荷青→亮蓝渐变测试结果分析横幅 */
.result-hero-banner {
    background: linear-gradient(135deg, #5FD6CF 0%, #4B9BF7 100%);
    border-radius: 14px;
    padding: 11px 16px;
    text-align: center;
    color: #FFFFFF;
    margin-bottom: 10px;
    box-shadow: 0 6px 18px rgba(75, 155, 247, 0.22);
}

.result-hero-banner h2 {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 3px;
    letter-spacing: 0.5px;
}

.result-hero-banner p {
    font-size: 0.76rem;
    opacity: 0.95;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
}

/* ① 居中直接展示分数卡片 */
.clean-score-card {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 16px 20px 16px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid #EEF2F6;
    margin-bottom: 12px;
}

.clean-score-title {
    font-size: 0.88rem;
    color: #64748B;
    font-weight: 600;
    margin-bottom: 4px;
}

.clean-score-number {
    font-size: 2.9rem;
    font-weight: 900;
    line-height: 1.05;
    color: #E11D48;
    margin-bottom: 8px;
    font-feature-settings: "tnum";
    letter-spacing: -1px;
}

.clean-score-number,
.clean-level-badge {
    display: inline-block;
    vertical-align: middle;
}

.clean-score-number {
    margin-right: 10px;
}

.clean-score-number.normal {
    color: #10B981;
}

.clean-score-number.mild {
    color: #F59E0B;
}

.clean-score-number.moderate {
    color: #EA580C;
}

.clean-score-number.severe {
    color: #DC2626;
}

/* 红色矩形实心/圆角等级指示徽章 (重度 / 中度 / 轻度 / 正常) */
.clean-level-badge {
    display: inline-block;
    padding: 4px 16px;
    font-size: 0.92rem;
    font-weight: 800;
    color: #FFFFFF;
    background: #E11D48;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.25);
    letter-spacing: 2px;
}

.clean-level-badge.level-normal {
    background: #10B981;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.clean-level-badge.level-mild {
    background: #F59E0B;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}

.clean-level-badge.level-moderate {
    background: #EA580C;
    box-shadow: 0 4px 12px rgba(234, 88, 12, 0.25);
}

.clean-level-badge.level-severe {
    background: #DC2626;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}

/* 居中平均分文字行 */
.clean-avg-row {
    font-size: 0.95rem;
    color: #475569;
    font-weight: 600;
}

.clean-avg-val {
    font-size: 1.25rem;
    font-weight: 800;
    color: #E11D48;
    margin-left: 2px;
}

/* 总分刻度条：90–450 区间四段分级 + 当前值指针 */
.clean-score-scale {
    margin-top: 10px;
    padding: 0 4px;
}

.clean-scale-bar {
    position: relative;
    display: flex;
    height: 8px;
    border-radius: 99px;
    overflow: visible;
}

.clean-scale-seg {
    height: 100%;
}

.clean-scale-seg:first-child {
    border-radius: 99px 0 0 99px;
}

.clean-scale-seg:last-child {
    border-radius: 0 99px 99px 0;
}

/* 分段宽度按阈值划分：≤160 / 161–200 / 201–300 / 301+ (上限按 450 归一) */
.seg-normal   { flex: 70 0 0; background: #10B981; }
.seg-mild     { flex: 40 0 0; background: #F59E0B; }
.seg-moderate { flex: 100 0 0; background: #EA580C; }
.seg-severe   { flex: 150 0 0; background: #DC2626; }

.clean-scale-pointer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 3px solid #1E293B;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.35);
    transition: left 0.5s cubic-bezier(0.34, 1.4, 0.64, 1);
    z-index: 2;
}

.clean-scale-labels {
    display: flex;
    margin-top: 8px;
    font-size: 0.7rem;
    color: #94A3B8;
    font-weight: 600;
}

.clean-scale-labels span {
    text-align: center;
}

.clean-scale-labels span:nth-child(1) { flex: 70 0 0; }
.clean-scale-labels span:nth-child(2) { flex: 40 0 0; }
.clean-scale-labels span:nth-child(3) { flex: 100 0 0; }
.clean-scale-labels span:nth-child(4) { flex: 150 0 0; }

/* 常模对照一句话 */
.clean-norm-row {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #E2E8F0;
    font-size: 0.78rem;
    color: #64748B;
    line-height: 1.6;
}

.clean-norm-row strong {
    color: #1E293B;
    font-weight: 800;
}

/* 底部免责声明 */
.result-disclaimer {
    margin: 22px 4px 0;
    font-size: 0.72rem;
    line-height: 1.7;
    color: #94A3B8;
    text-align: center;
}

/* ② 独立 9 维全景雷达图卡片 */
.clean-radar-card {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 8px 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid #EEF2F6;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}

#radarChart {
    width: 100% !important;
    height: 218px !important;
    min-height: 218px;
    margin: 0 auto;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* 统一临床卡片容器 */
.clinical-card {
    background: #FFFFFF;
    border: 1px solid #EEF2F6;
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.c-card-header {
    border-bottom: 1px solid #F1F5F9;
    padding-bottom: 10px;
    margin-bottom: 14px;
}

.c-card-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #1E293B;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

/* 维度明细临床双栏行 */
.c-dim-details-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.c-dim-detail-row {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 14px 16px;
}

.c-dim-row-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 10px;
}

.c-dim-title-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.c-dim-name {
    font-size: 1rem;
    font-weight: 800;
    color: #0F172A;
    white-space: nowrap;
    flex-shrink: 0;
}

.c-dim-tag-flag {
    font-size: 0.7rem;
    font-weight: 800;
    color: #DC2626;
    background: #FEE2E2;
    border: 1px solid #FECACA;
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}

.c-dim-scores {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-self: flex-start;
}

.c-dim-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    padding: 2px 10px;
    line-height: 1.5;
}

.c-dim-stat-k {
    font-size: 0.72rem;
    color: #94A3B8;
    white-space: nowrap;
}

.c-dim-stat-v {
    font-size: 0.92rem;
    font-weight: 800;
    color: #1E293B;
    font-variant-numeric: tabular-nums;
}

.c-highlight-score {
    font-size: 0.95rem;
    font-weight: 800;
}

.c-dim-desc {
    font-size: 0.82rem;
    color: #64748B;
    line-height: 1.5;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed #E2E8F0;
}

.c-dim-dual-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.c-dim-analysis-box,
.c-dim-advice-box {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 9px 11px;
}

.c-dim-box-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.c-dim-box-p {
    font-size: 0.82rem;
    color: #334155;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 600px) {
    .c-dim-dual-grid {
        grid-template-columns: 1fr;
    }
}








/* ==========================================================================

   答题页（对标壹点心理版式）— 2026-10-24 替换

   作用域限定在 #testPage，不影响介绍页与结果页

   ========================================================================== */



/* 页面外框退掉原来的白卡内边距，交给 .ans-card 自己撑 */

.page#testPage {

    background: transparent;

    box-shadow: none;

    padding: 0;

    border-radius: 0;

}



#testPage.answer-page {

    /* 顶部蓝色渐变背景图（750x500），高度随宽度等比缩放 */

    background-image: url('./assets/answer_bg_blue.webp');

    background-repeat: no-repeat;

    background-position: top center;

    background-size: 100% auto;

    background-color: #f2f8ff;

    border-radius: 18px;

    padding: 0 0 26px;

    overflow: hidden;

    position: relative;

    /* 版心收窄：原站是移动端 H5 版式，宽屏铺开会让卡片压住标题 */

    width: 100%;

    max-width: 460px;

    margin: 0 auto;

}



/* ---------- 顶部插画左侧标题 ---------- */

#testPage .ans-hero-title {
    position: absolute;
    top: 58px;
    left: 24px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    pointer-events: none;
    z-index: 2;
}

#testPage .ans-hero-main {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0.5px;
    color: #2E6FBF;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

#testPage .ans-hero-sub {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 3px;
    color: #5D8FC7;
}

/* ---------- 答题卡片 ---------- */

#testPage .ans-card {

    width: calc(100% - 32px);

    max-width: 420px;

    /* 背景图 750x359，人物位于上部约 33% 处；卡片上边距取 38%，
       让人物完整落在卡片上方，同时留出呼吸感 */

    margin: 38% auto 0;

    background: #fff;

    border-radius: 15px;

    box-shadow: 0 4px 9px rgba(195, 195, 195, 0.30), 0 6px 20px rgba(0, 0, 0, 0.06);

    padding: 0 0 22px;

}



#testPage .ans-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 20px 22px 0;

}



#testPage .ans-head-tip {

    width: 75px;

    height: auto;

    display: block;

}



#testPage .ans-counter {

    font-size: 1.19rem;

    color: #333;

    line-height: 1.2;

    white-space: nowrap;

}



#testPage .ans-counter span {

    font-size: 1.19rem;

}



/* ---------- 进度条 ---------- */

#testPage .ans-progress {

    height: 11px;

    margin: 14px 22px 0;

    background: #e3efff;

    border-radius: 99px;

    overflow: hidden;

}



#testPage .ans-progress-fill {

    height: 100%;

    width: 0;

    background: #5b9bf8;

    border-radius: 99px;

    transition: width 0.28s ease;

}



/* ---------- 题面 ---------- */

#testPage .ans-question {

    margin: 20px 22px 18px;

    font-size: 1.06rem;

    font-weight: 900;

    line-height: 1.55;

    color: #333;

    min-height: 3rem;

}



/* ---------- 选项 ---------- */

#testPage .ans-options {

    padding: 0 22px;

}



#testPage .ans-option {

    width: 100%;

    box-sizing: border-box;

    background: #eeeff0;

    color: #333;

    font-size: 0.94rem;

    font-weight: 500;

    text-align: center;

    padding: 12px 10px;

    margin-bottom: 13px;

    border-radius: 104px;

    box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);

    cursor: pointer;

    user-select: none;

    transition: background-color 0.16s ease, color 0.16s ease, transform 0.12s ease;

}



#testPage .ans-option:last-child {

    margin-bottom: 0;

}



#testPage .ans-option:hover {

    background: #e6e8ea;

}



#testPage .ans-option:active {

    transform: scale(0.985);

}



#testPage .ans-option.checked {

    background: #5b9bf8;

    color: #fff;

}



/* ---------- 翻页按钮 ---------- */

#testPage .ans-controls {

    display: flex;

    gap: 24px;

    justify-content: center;

    align-items: center;

    margin: 26px auto 0;

    width: calc(100% - 32px);

    max-width: 420px;

}



#testPage .ans-btn {

    flex: 1 1 0;

    border: none;

    background: transparent;

    padding: 0;

    cursor: pointer;

    line-height: 0;

    border-radius: 10px;

    transition: opacity 0.16s ease, transform 0.12s ease;

}



#testPage .ans-btn img {

    width: 100%;

    height: auto;

    display: block;

    pointer-events: none;

}



#testPage .ans-btn:active:not(:disabled) {

    transform: scale(0.97);

}



#testPage .ans-btn:disabled {

    opacity: 0.45;

    cursor: not-allowed;

}



/* ---------- 评测须知 ---------- */

#testPage .ans-notice {

    width: calc(100% - 32px);

    max-width: 420px;

    margin: 22px auto 0;

    padding: 0 6px;

}



#testPage .ans-notice h3 {

    font-size: 0.86rem;

    font-weight: 700;

    color: #3a5a86;

    margin: 0 0 10px;

}



#testPage .ans-notice p {

    font-size: 0.78rem;

    color: #7b93b3;

    line-height: 1.7;

    margin: 0 0 4px;

}



/* ---------- 调试入口 ---------- */

/* ---------- 移动端微调 ---------- */

@media (max-width: 480px) {

    #testPage .ans-card,

    #testPage .ans-controls,

    #testPage .ans-notice {

        width: calc(100% - 24px);

    }







    #testPage .ans-head {

        padding: 16px 18px 0;

    }



    #testPage .ans-progress {

        margin: 12px 18px 0;

    }



    #testPage .ans-question {

        margin: 16px 18px 15px;

        font-size: 1rem;

    }



    #testPage .ans-options {

        padding: 0 18px;

    }



    #testPage .ans-option {

        font-size: 0.9rem;

        padding: 11px 8px;

        margin-bottom: 11px;

    }



    #testPage .ans-controls {

        gap: 16px;

    }

}