/* 重置样式 */


* {


    margin: 0;


    padding: 0;


    box-sizing: border-box;


}





body {


    font-family: 'Noto Serif SC', 'Noto Sans SC', serif;


    overflow: hidden;


    background: #e5e5e5;


    background-image: repeating-linear-gradient(45deg, #d3cbb8 0, #d3cbb8 1px, #e5e5e5 0, #e5e5e5 50%);


    background-size: 20px 20px;


    color: #2c2c2c;


    height: 100vh;


    height: 100dvh;


    padding-top: env(safe-area-inset-top);


    padding-bottom: env(safe-area-inset-bottom);


    padding-left: env(safe-area-inset-left);


    padding-right: env(safe-area-inset-right);


}





/* 纸张背景 - 增强神秘感 */


.cosmic-background {


    position: fixed;


    top: 0;


    left: 0;


    width: 100%;


    height: 100%;


    background: #f4f1ea;


    background-image: 


        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><filter id="n"><feTurbulence baseFrequency="0.9" numOctaves="2"/><feColorMatrix values="0 0 0 0 0, 0 0 0 0 0, 0 0 0 0 0, 0 0 0 0.03 0"/></filter><rect width="100" height="100" filter="url(%23n)"/></svg>'),


        radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.1) 90%),


        repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(0,0,0,0.02) 1px, rgba(0,0,0,0.02) 2px);


    box-shadow: inset 0 0 100px rgba(0,0,0,0.1); /* 内阴影晕影 */


    z-index: -1;


}





/* 主容器 - 增加立体感 */


.paper-sheet {


    background-color: #fcfbf9;


    box-shadow: 


        0 1px 1px rgba(0,0,0,0.15), 


        0 10px 0 -5px #eee, 


        0 10px 1px -4px rgba(0,0,0,0.15), 


        0 20px 0 -10px #e5e5e5, 


        0 20px 1px -9px rgba(0,0,0,0.15),


        0 0 20px rgba(0,0,0,0.1); /* 堆叠纸张效果 */


    border: 1px solid rgba(0,0,0,0.05);


    transform: rotate(0.5deg); /* 微微倾斜，更像真实文件 */


    transition: transform 0.3s ease;


}





.paper-sheet:hover {


    transform: rotate(0deg) scale(1.005); /* 悬停微动 */


}








@keyframes cosmicMove {


    0%, 100% { 


        transform: translateY(0px) rotate(0deg);


        filter: brightness(1);


    }


    25% { 


        transform: translateY(-10px) rotate(0.5deg);


        filter: brightness(1.05);


    }


    50% { 


        transform: translateY(-15px) rotate(1deg);


        filter: brightness(0.95);


    }


    75% { 


        transform: translateY(-8px) rotate(0.3deg);


        filter: brightness(1.02);


    }


}





/* 真实星空效果 */


.cosmic-background::before {


    content: '';


    position: absolute;


    top: 0;


    left: 0;


    width: 100%;


    height: 100%;


    background-image: 


        /* 大星星 */


        radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.9), transparent),


        radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.8), transparent),


        radial-gradient(1.5px 1.5px at 90px 40px, rgba(255, 255, 255, 0.7), transparent),


        radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 0.6), transparent),


        radial-gradient(2px 2px at 160px 30px, rgba(255, 255, 255, 0.85), transparent),


        /* 中等星星 */


        radial-gradient(1px 1px at 50px 120px, rgba(255, 255, 255, 0.5), transparent),


        radial-gradient(1px 1px at 180px 60px, rgba(255, 255, 255, 0.4), transparent),


        radial-gradient(1px 1px at 30px 150px, rgba(255, 255, 255, 0.6), transparent),


        radial-gradient(1px 1px at 120px 20px, rgba(255, 255, 255, 0.45), transparent),


        /* 小星星 */


        radial-gradient(0.5px 0.5px at 70px 100px, rgba(255, 255, 255, 0.3), transparent),


        radial-gradient(0.5px 0.5px at 150px 140px, rgba(255, 255, 255, 0.25), transparent),


        radial-gradient(0.5px 0.5px at 10px 80px, rgba(255, 255, 255, 0.35), transparent),


        radial-gradient(0.5px 0.5px at 190px 110px, rgba(255, 255, 255, 0.2), transparent);


    background-repeat: repeat;


    background-size: 200px 160px;


    animation: stars 15s linear infinite;


}





/* 添加星星闪烁效果 */


.cosmic-background::after {


    content: '';


    position: absolute;


    top: 0;


    left: 0;


    width: 100%;


    height: 100%;


    background-image: 


        radial-gradient(1px 1px at 25px 45px, rgba(255, 255, 255, 0.8), transparent),


        radial-gradient(1px 1px at 75px 85px, rgba(255, 255, 255, 0.6), transparent),


        radial-gradient(1px 1px at 125px 25px, rgba(255, 255, 255, 0.7), transparent),


        radial-gradient(1px 1px at 175px 125px, rgba(255, 255, 255, 0.5), transparent);


    background-repeat: repeat;


    background-size: 200px 160px;


    animation: twinkle 3s ease-in-out infinite alternate;


}





@keyframes stars {


    0% { transform: translateY(0) translateX(0); }


    100% { transform: translateY(-160px) translateX(-20px); }


}





/* 星星闪烁动画 */


@keyframes twinkle {


    0% { opacity: 0.3; }


    50% { opacity: 1; }


    100% { opacity: 0.4; }


}





/* 流星动画 */


@keyframes meteor {


    0% {


        transform: translateX(-100px) translateY(-100px) rotate(45deg);


        opacity: 0;


    }


    10% {


        opacity: 1;


    }


    90% {


        opacity: 1;


    }


    100% {


        transform: translateX(calc(100vw + 100px)) translateY(calc(100vh + 100px)) rotate(45deg);


        opacity: 0;


    }


}





/* 流星轨迹动画 */


@keyframes meteorTrail {


    0% {


        transform: translateX(-100px) translateY(-100px) rotate(45deg) scaleX(0);


        opacity: 0;


    }


    10% {


        transform: translateX(-50px) translateY(-50px) rotate(45deg) scaleX(1);


        opacity: 0.8;


    }


    90% {


        opacity: 0.3;


    }


    100% {


        transform: translateX(calc(100vw + 50px)) translateY(calc(100vh + 50px)) rotate(45deg) scaleX(0);


        opacity: 0;


    }


}





/* 流星效果 */


.meteor {


    position: fixed;


    width: 2px;


    height: 2px;


    background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 30%, transparent 70%);


    border-radius: 50%;


    pointer-events: none;


    z-index: 5;


    will-change: transform, opacity;


}





.meteor::before {


    content: '';


    position: absolute;


    top: 0;


    left: 0;


    width: 80px;


    height: 1px;


    background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);


    transform-origin: 0 50%;


    border-radius: 1px;


    will-change: transform, opacity;


}





.meteor-1 {


    animation: meteor 8s linear infinite;


    animation-delay: 2s;


}





.meteor-2 {


    animation: meteor 12s linear infinite;


    animation-delay: 6s;


}





.meteor-3 {


    animation: meteor 10s linear infinite;


    animation-delay: 15s;


}





.meteor-4 {


    animation: meteor 9s linear infinite;


    animation-delay: 25s;


}





.meteor-5 {


    animation: meteor 11s linear infinite;


    animation-delay: 35s;


}





/* 屏幕切换 */


.screen {


    position: fixed;


    top: 0;


    left: 0;


    width: 100%;


    height: 100%;


    display: flex;


    align-items: center;


    justify-content: center;


    opacity: 0;


    visibility: hidden;


    transition: all 0.8s ease-in-out;


    z-index: 1;


}





.screen.active {


    opacity: 1;


    visibility: visible;


    z-index: 10;


}





.screen.fade-out {


    opacity: 0;


    transform: scale(0.95);


}





/* 加载屏幕 */


.loading-content {


    text-align: center;


    z-index: 2;


}





.mystical-circle {


    width: 120px;


    height: 120px;


    margin: 0 auto 30px;


    position: relative;


    border: 2px solid rgba(255, 255, 255, 0.3);


    border-radius: 50%;


    animation: rotate 4s linear infinite;


}





.mystical-circle::before {


    content: '';


    position: absolute;


    top: -2px;


    left: -2px;


    width: 120px;


    height: 120px;


    border: 2px solid transparent;


    border-top: 2px solid #7877c6;


    border-right: 2px solid #ff77c6;


    border-radius: 50%;


    animation: rotate 2s linear infinite reverse;


}





.inner-circle {


    position: absolute;


    top: 20px;


    left: 20px;


    width: 80px;


    height: 80px;


    background: radial-gradient(circle, rgba(120, 119, 198, 0.3) 0%, transparent 70%);


    border-radius: 50%;


    animation: pulse 3s ease-in-out infinite;


}





@keyframes rotate {


    0% { transform: rotate(0deg); }


    100% { transform: rotate(360deg); }


}





@keyframes pulse {


    0%, 100% { transform: scale(1); opacity: 0.7; }


    50% { transform: scale(1.1); opacity: 1; }


}





.loading-text {


    font-size: 2rem;


    font-weight: 300;


    margin-bottom: 20px;


    background: linear-gradient(45deg, #7877c6, #ff77c6);


    background-size: 200% 200%;


    -webkit-background-clip: text;


    -webkit-text-fill-color: transparent;


    animation: gradient 3s ease infinite;


}





@keyframes gradient {


    0% { background-position: 0% 50%; }


    50% { background-position: 100% 50%; }


    100% { background-position: 0% 50%; }


}





.loading-dots {


    display: flex;


    justify-content: center;


    gap: 8px;


}





.loading-dots span {


    width: 8px;


    height: 8px;


    background: #7877c6;


    border-radius: 50%;


    animation: loadingDots 1.5s ease-in-out infinite;


}





.loading-dots span:nth-child(2) {


    animation-delay: 0.3s;


}





.loading-dots span:nth-child(3) {


    animation-delay: 0.6s;


}





@keyframes loadingDots {


    0%, 100% { transform: scale(1); opacity: 0.7; }


    50% { transform: scale(1.3); opacity: 1; }


}





/* 选择页面 */


.selection-content {


    text-align: center;


    z-index: 2;


    max-width: 600px;


    padding: 40px;


}





.title {


    font-size: 3rem;


    font-weight: 700;


    margin-bottom: 20px;


    background: linear-gradient(45deg, #7877c6, #ff77c6);


    -webkit-background-clip: text;


    -webkit-text-fill-color: transparent;


}





.subtitle {


    font-size: 1.2rem;


    color: rgba(255, 255, 255, 0.8);


    margin-bottom: 40px;


}





/* 出生信息选择区域 */


.birth-info-section, .birth-place-section {


    margin-bottom: 30px;


}





.section-title {


    font-size: 1.3rem;


    font-weight: 500;


    margin-bottom: 20px;


    color: rgba(255, 255, 255, 0.9);


    text-align: center;


    background: linear-gradient(45deg, #7877c6, #ff77c6);


    -webkit-background-clip: text;


    -webkit-text-fill-color: transparent;


}





/* 滑动选择器容器 */


.date-time-picker, .place-picker {


    display: flex;


    justify-content: center;


    gap: 15px;


    padding: 20px;


    background: rgba(255, 255, 255, 0.05);


    border-radius: 15px;


    border: 1px solid rgba(255, 255, 255, 0.1);


    backdrop-filter: blur(10px);


    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);


    max-width: 500px;


    width: 100%;


    margin: 0 auto;


}





/* 选择器列 */


.picker-column {


    display: flex;


    flex-direction: column;


    align-items: center;


    flex: 1;


    min-width: 0;


}





/* 日期时间选择器的列宽度分配 */


.date-time-picker .picker-column {


    flex: 1;


}





/* 时辰列需要更多空间，并增加左边距 */


.date-time-picker .picker-column:nth-child(4) {


    flex: 1.5;


    margin-left: 10px;


}





/* 地点选择器的列宽度分配 */


.place-picker .picker-column {


    flex: 1;


}





.picker-label {


    font-size: 0.9rem;


    color: rgba(255, 255, 255, 0.8);


    margin-bottom: 10px;


    font-weight: 500;


}





/* 选择器容器 */


.picker-container {


    position: relative;


    height: 120px;


    width: 100%;


    max-width: 80px;


    overflow: hidden;


    border-radius: 10px;


    background: rgba(255, 255, 255, 0.08);


    border: 1px solid rgba(255, 255, 255, 0.15);


}





/* 选择器遮罩 */


.picker-mask {


    position: absolute;


    top: 0;


    left: 0;


    right: 0;


    bottom: 0;


    background: linear-gradient(


        to bottom,


        rgba(16, 33, 62, 0.9) 0%,


        transparent 35%,


        transparent 65%,


        rgba(16, 33, 62, 0.9) 100%


    );


    pointer-events: none;


    z-index: 2;


}





/* 选择器中间高亮区域 */


.picker-mask::after {


    content: '';


    position: absolute;


    top: 40px;


    left: 0;


    right: 0;


    height: 40px;


    background: linear-gradient(45deg, rgba(120, 119, 198, 0.2), rgba(255, 119, 198, 0.2));


    border-top: 1px solid rgba(120, 119, 198, 0.5);


    border-bottom: 1px solid rgba(120, 119, 198, 0.5);


    z-index: 1;


}





/* 选择器滚轮 */


.picker-wheel {


    position: relative;


    height: 100%;


    overflow-y: auto;


    scrollbar-width: none;


    -ms-overflow-style: none;


    cursor: pointer;


    transition: transform 0.3s ease;


}





.picker-wheel::-webkit-scrollbar {


    display: none;


}





/* 选择器选项 */


.picker-option {


    height: 40px;


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 0.9rem;


    color: rgba(255, 255, 255, 0.6);


    cursor: pointer;


    transition: all 0.3s ease;


    padding: 0 10px;


    white-space: nowrap;


    overflow: hidden;


    text-overflow: ellipsis;


}





/* 占位项样式 */


.picker-option.picker-spacer {


    cursor: default;


    color: transparent;


    pointer-events: none;


}





.picker-option:hover {


    color: rgba(255, 255, 255, 0.8);


    background: rgba(255, 255, 255, 0.05);


}





.picker-option.active {


    color: #ffffff;


    font-weight: 500;


    transform: scale(1.05);


}





/* 时辰选择器特殊样式 */


#time-picker .picker-option {


    font-size: 0.8rem;


    line-height: 1.2;


    padding: 5px 8px;


}





/* 时辰选择器容器宽度调整 - 使用更高优先级 */


.date-time-picker .picker-column:nth-child(4) .picker-container {


    max-width: 120px !important;


    width: 120px;


}





#time-picker .picker-option .time-name {


    display: block;


    font-weight: 500;


    color: rgba(255, 255, 255, 0.9);


}





#time-picker .picker-option .time-range {


    display: block;


    font-size: 0.7rem;


    color: rgba(255, 255, 255, 0.6);


    margin-top: 2px;


}





#time-picker .picker-option.active .time-name {


    color: #ff77c6;


}





#time-picker .picker-option.active .time-range {


    color: rgba(255, 119, 198, 0.8);


}





/* 地点选择器特殊样式 */


.place-picker .picker-container {


    max-width: 100px;


}





.place-picker .picker-option {


    font-size: 0.85rem;


}





/* 按钮容器样式调整 */


.button-container {


    display: flex;


    gap: 30px;


    justify-content: center;


    margin-top: 40px;


}





.mystic-button {


    background: linear-gradient(45deg, rgba(120, 119, 198, 0.2), rgba(255, 119, 198, 0.2));


    border: 2px solid rgba(255, 255, 255, 0.3);


    border-radius: 20px;


    padding: 20px 30px;


    color: white;


    font-size: 1.1rem;


    font-weight: 500;


    cursor: pointer;


    transition: all 0.3s ease;


    display: flex;


    flex-direction: column;


    align-items: center;


    gap: 10px;


    min-width: 150px;


    backdrop-filter: blur(10px);


}





.mystic-button:hover {


    transform: translateY(-5px);


    box-shadow: 0 20px 40px rgba(120, 119, 198, 0.3);


    border-color: #7877c6;


}





.mystic-button:active {


    transform: translateY(-2px);


}





.button-icon {


    font-size: 2rem;


}





/* 聊天界面 */


.chat-container {


    width: 100%;


    max-width: 100%;


    height: 100vh;


    height: 100dvh; /* 使用动态视口高度 */


    display: flex;


    flex-direction: column;


    z-index: 2;


    /* 确保在手机端安全区域内正确显示 */


    box-sizing: border-box;


}





.chat-header {


    background: rgba(0, 0, 0, 0.3);


    backdrop-filter: blur(20px);


    padding: 20px;


    display: flex;


    justify-content: space-between;


    align-items: center;


    border-bottom: 1px solid rgba(255, 255, 255, 0.1);


}





.chat-header h2 {


    font-size: 1.5rem;


    background: linear-gradient(45deg, #7877c6, #ff77c6);


    -webkit-background-clip: text;


    -webkit-text-fill-color: transparent;


}





.back-button {


    background: rgba(255, 255, 255, 0.1);


    border: 1px solid rgba(255, 255, 255, 0.3);


    border-radius: 10px;


    padding: 10px 20px;


    color: white;


    cursor: pointer;


    transition: all 0.3s ease;


}





.back-button:hover {


    background: rgba(255, 255, 255, 0.2);


}





.chat-messages {


    flex: 1;


    overflow-y: auto;


    padding: 20px;


    display: flex;


    flex-direction: column;


    gap: 20px;


    /* 手机端滚动优化 */


    -webkit-overflow-scrolling: touch;


    scroll-behavior: smooth;


    /* 确保滚动区域正确显示 */


    position: relative;


}





.message {


    display: flex;


    gap: 15px;


    max-width: 80%;


    animation: messageSlide 0.5s ease-out;


}





@keyframes messageSlide {


    from { opacity: 0; transform: translateY(20px); }


    to { opacity: 1; transform: translateY(0); }


}





.user-message {


    align-self: flex-end;


    flex-direction: row-reverse;


}





.ai-message {


    align-self: flex-start;


}





.message-avatar {


    width: 40px;


    height: 40px;


    border-radius: 50%;


    background: linear-gradient(45deg, #7877c6, #ff77c6);


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 1.2rem;


    flex-shrink: 0;


}





.user-message .message-avatar {


    background: linear-gradient(45deg, #ff77c6, #77dbff);


}





.message-content {


    background: rgba(255, 255, 255, 0.1);


    backdrop-filter: blur(10px);


    border-radius: 20px;


    padding: 15px 20px;


    border: 1px solid rgba(255, 255, 255, 0.2);


}





.user-message .message-content {


    background: rgba(120, 119, 198, 0.2);


}





.message-content p {


    margin: 0;


    line-height: 1.6;


    white-space: pre-wrap; /* 保持换行和空格 */


    word-wrap: break-word; /* 长词换行 */


    color: #e0e0e0;


}





/* 格式化元素样式 */


.message-content strong {


    color: #ffd700;


    font-weight: bold;


}





.message-content em {


    color: #87ceeb;


    font-style: italic;


}





.message-content code {


    background: rgba(255, 255, 255, 0.1);


    color: #90ee90;


    padding: 2px 6px;


    border-radius: 4px;


    font-family: 'Courier New', monospace;


    font-size: 14px;


}





/* 流式输出光标效果 */


.message-content.streaming::after {


    content: '|';


    color: #6366f1;


    animation: blink 1s infinite;


}

/* 展会版：关闭“流式展示”时，彻底去掉闪烁光标效果 */
body.no-streaming .message-content.streaming::after {
    content: '' !important;
    animation: none !important;
    display: none !important;
}





@keyframes blink {


    0%, 50% { opacity: 1; }


    51%, 100% { opacity: 0; }


}





.chat-input-container {


    padding: 20px;


    background: rgba(0, 0, 0, 0.3);


    backdrop-filter: blur(20px);


    border-top: 1px solid rgba(255, 255, 255, 0.1);


    display: flex;


    gap: 15px;


    /* 确保输入区域在手机端键盘弹出时正确显示 */


    position: relative;


    z-index: 10;


}





#user-input {


    flex: 1;


    background: rgba(255, 255, 255, 0.1);


    border: 2px solid rgba(255, 255, 255, 0.3);


    border-radius: 25px;


    padding: 15px 20px;


    color: white;


    font-size: 1rem;


    transition: all 0.3s ease;


    /* 手机端触摸优化 */


    -webkit-appearance: none;


    -webkit-tap-highlight-color: transparent;


    touch-action: manipulation;


}





#user-input:focus {


    outline: none;


    border-color: #7877c6;


    box-shadow: 0 0 20px rgba(120, 119, 198, 0.3);


}





#user-input::placeholder {


    color: rgba(255, 255, 255, 0.6);


}





.send-button {


    background: linear-gradient(45deg, #7877c6, #ff77c6);


    border: none;


    border-radius: 25px;


    padding: 15px 30px;


    color: white;


    font-weight: 500;


    cursor: pointer;


    transition: all 0.3s ease;


    /* 手机端触摸优化 */


    -webkit-appearance: none;


    -webkit-tap-highlight-color: transparent;


    touch-action: manipulation;


    /* 确保触摸区域足够大 */


    min-height: 44px;


}





.send-button:hover:not(:disabled) {


    transform: translateY(-2px);


    box-shadow: 0 10px 20px rgba(120, 119, 198, 0.3);


}





.send-button:disabled {


    opacity: 0.5;


    cursor: not-allowed;


}





/* 响应式设计 */


@media (max-width: 768px) {


    .selection-content {


        padding: 20px 15px; /* 减少顶部padding，避免标题跑出屏幕 */


    }


    


    .title {


        font-size: 2rem;


        margin-bottom: 15px; /* 减少底部间距 */


    }


    


    .subtitle {


        margin-bottom: 25px; /* 减少底部间距 */


    }


    


    .date-time-picker, .place-picker {


        gap: 8px;


        padding: 15px;


        max-width: 420px; /* 增加宽度以适应更宽的时辰选择器 */


    }


    


    .picker-container {


        max-width: 65px;


        height: 100px;


    }


    


    .picker-mask::after {


        top: 35px; /* 调整位置 */


        height: 30px; /* 减少高度，避免覆盖相邻选项 */


    }


    


    .picker-option {


        height: 35px;


        font-size: 0.8rem;


    }


    


    #time-picker .picker-option {


        font-size: 0.7rem;


        padding: 3px 6px;


    }


    


    /* 手机端时辰选择器宽度和间距 */


    .date-time-picker .picker-column:nth-child(4) .picker-container {


        max-width: 110px !important;


        width: 110px;


    }


    


    .date-time-picker .picker-column:nth-child(4) {


        margin-left: 0px; /* 移除额外间距，保持一致 */


    }


    


    .place-picker .picker-container {


        max-width: 75px;


    }


    


    .section-title {


        font-size: 1.1rem;


    }


    


    .picker-label {


        font-size: 0.8rem;


    }


    


    .button-container {


        gap: 20px; /* 保持横排，减少间距 */


        flex-wrap: wrap; /* 如果空间不够可以换行 */


    }


    


    .mystic-button {


        width: 140px; /* 减少按钮宽度以便并排显示 */


        padding: 15px 20px; /* 减少内边距 */


        font-size: 1rem; /* 减少字体大小 */


    }


    


    .button-icon {


        font-size: 1.5rem; /* 减少图标大小 */


    }


    


    /* 手机端聊天界面优化 */


    .chat-container {


        height: 100vh;


        height: 100dvh; /* 使用动态视口高度，适配手机端 */


    }


    


    .chat-header {


        padding: 10px 15px; /* 减少头部padding */


        min-height: 50px; /* 设置最小高度 */


    }


    


    .chat-header h2 {


        font-size: 1.2rem; /* 减少标题大小 */


    }


    


    .back-button {


        padding: 8px 15px; /* 减少按钮padding */


        font-size: 0.9rem;


    }


    


    .chat-messages {


        padding: 10px 12px; /* 减少聊天区域padding */


        gap: 12px; /* 减少消息间距 */


        /* 确保内容不被头部和底部遮挡 */


        padding-top: 5px;


        padding-bottom: 5px;


    }


    


    .message {


        max-width: 95%; /* 增加消息宽度 */


        gap: 8px; /* 减少头像和消息框间距 */


    }


    


    .message-avatar {


        width: 32px; /* 减少头像大小 */


        height: 32px;


        font-size: 0.9rem;


    }


    


    .message-content {


        padding: 10px 14px; /* 减少消息框padding */


        font-size: 0.9rem; /* 稍微减少字体大小 */


    }


    


    .chat-input-container {


        padding: 8px 12px; /* 减少输入区域padding */


        gap: 8px; /* 减少间距 */


        min-height: 60px; /* 设置最小高度 */


    }


    


    #user-input {


        padding: 10px 14px; /* 减少输入框padding */


        font-size: 0.9rem;


        min-height: 40px; /* 设置最小高度 */


    }


    


    .send-button {


        padding: 10px 16px; /* 减少按钮padding */


        font-size: 0.9rem;


        min-width: 55px; /* 确保按钮宽度足够 */


        min-height: 40px; /* 设置最小高度 */


        white-space: nowrap; /* 防止文字换行 */


        display: flex; /* 使用flex布局 */


        align-items: center; /* 垂直居中 */


        justify-content: center; /* 水平居中 */


    }


}





@media (max-width: 480px) {


    .selection-content {


        padding: 15px 10px; /* 进一步减少padding */


    }


    


    .title {


        font-size: 1.8rem; /* 进一步减少标题大小 */


        margin-bottom: 10px;


    }


    


    .subtitle {


        font-size: 1rem;


        margin-bottom: 20px;


    }


    


    .date-time-picker, .place-picker {


        gap: 6px;


        padding: 12px;


        max-width: 335px; /* 增加宽度以适应更宽的时辰选择器 */


    }


    


    .picker-container {


        max-width: 55px;


        height: 90px;


    }


    


    .picker-mask::after {


        top: 30px;


        height: 25px; /* 进一步减少高度 */


    }


    


    .picker-option {


        height: 30px;


        font-size: 0.75rem;


    }


    


    #time-picker .picker-option {


        font-size: 0.65rem;


        padding: 2px 4px;


    }


    


    /* 小屏幕时辰选择器宽度和间距 */


    .date-time-picker .picker-column:nth-child(4) .picker-container {


        max-width: 95px !important;


        width: 95px;


    }


    


    .date-time-picker .picker-column:nth-child(4) {


        margin-left: 0px; /* 移除额外间距，保持一致 */


    }


    


    .place-picker .picker-container {


        max-width: 65px;


    }


    


    .button-container {


        gap: 15px; /* 小屏幕上进一步减少间距 */


    }


    


    .mystic-button {


        width: 130px; /* 小屏幕上进一步减少按钮宽度 */


        padding: 12px 16px;


        font-size: 0.9rem;


    }


    


    .button-icon {


        font-size: 1.3rem;


    }


    


    /* 小屏幕聊天界面进一步优化 */


    .chat-container {


        height: 100vh;


        height: 100dvh; /* 使用动态视口高度 */


    }


    


    .chat-header {


        padding: 8px 10px; /* 进一步减少头部padding */


        min-height: 45px; /* 进一步减少最小高度 */


    }


    


    .chat-header h2 {


        font-size: 1.1rem; /* 进一步减少标题大小 */


    }


    


    .back-button {


        padding: 6px 12px; /* 进一步减少按钮padding */


        font-size: 0.85rem;


    }


    


    .chat-messages {


        padding: 8px 10px; /* 进一步减少聊天区域padding */


        gap: 10px; /* 进一步减少消息间距 */


        /* 确保内容不被头部和底部遮挡 */


        padding-top: 3px;


        padding-bottom: 3px;


    }


    


    .message {


        max-width: 96%; /* 进一步增加消息宽度 */


        gap: 6px; /* 进一步减少头像和消息框间距 */


    }


    


    .message-avatar {


        width: 28px; /* 进一步减少头像大小 */


        height: 28px;


        font-size: 0.8rem;


    }


    


    .message-content {


        padding: 8px 12px; /* 进一步减少消息框padding */


        font-size: 0.85rem; /* 进一步减少字体大小 */


    }


    


    .chat-input-container {


        padding: 6px 10px; /* 进一步减少输入区域padding */


        gap: 6px; /* 进一步减少间距 */


        min-height: 55px; /* 进一步减少最小高度 */


    }


    


    #user-input {


        padding: 8px 12px; /* 进一步减少输入框padding */


        font-size: 0.85rem;


        min-height: 35px; /* 进一步减少最小高度 */


    }


    


    .send-button {


        padding: 8px 14px; /* 进一步减少按钮padding */


        font-size: 0.85rem;


        min-width: 50px; /* 进一步减少最小宽度 */


        min-height: 35px; /* 进一步减少最小高度 */


        white-space: nowrap; /* 防止文字换行 */


        display: flex; /* 使用flex布局 */


        align-items: center; /* 垂直居中 */


        justify-content: center; /* 水平居中 */


    }


}





/* 滚动条样式 */


.chat-messages::-webkit-scrollbar {


    width: 6px;


}





.chat-messages::-webkit-scrollbar-track {


    background: rgba(255, 255, 255, 0.1);


    border-radius: 10px;


}





.chat-messages::-webkit-scrollbar-thumb {


    background: rgba(120, 119, 198, 0.5);


    border-radius: 10px;


}





.chat-messages::-webkit-scrollbar-thumb:hover {


    background: rgba(120, 119, 198, 0.8);


} 





/* 增强的Markdown样式 - 类似GPT官网 */


.message-content h1, .message-content h2, .message-content h3 {


    color: #ffd700;


    margin: 16px 0 12px 0;


    font-weight: 600;


}





.message-content h1 {


    font-size: 1.5rem;


    border-bottom: 2px solid rgba(255, 215, 0, 0.3);


    padding-bottom: 8px;


}





.message-content h2 {


    font-size: 1.3rem;


}





.message-content h3 {


    font-size: 1.1rem;


}





.message-content ul, .message-content ol {


    margin: 12px 0;


    padding-left: 20px;


}





.message-content li {


    margin: 6px 0;


    line-height: 1.6;


    color: #e0e0e0;


}





.message-content ul li {


    list-style-type: disc;


}





.message-content ol li {


    list-style-type: decimal;


}





.message-content pre {


    background: rgba(0, 0, 0, 0.4);


    border: 1px solid rgba(255, 255, 255, 0.2);


    border-radius: 8px;


    padding: 16px;


    margin: 12px 0;


    overflow-x: auto;


    font-family: 'Courier New', monospace;


    font-size: 14px;


    line-height: 1.5;


}





.message-content pre code {


    background: none;


    color: #90ee90;


    padding: 0;


    border-radius: 0;


    font-size: inherit;


}





.message-content .inline-code {


    background: rgba(255, 255, 255, 0.15);


    color: #ff9999;


    padding: 3px 8px;


    border-radius: 6px;


    font-family: 'Courier New', monospace;


    font-size: 0.9rem;


    border: 1px solid rgba(255, 255, 255, 0.1);


}





.message-content blockquote {


    border-left: 4px solid #7877c6;


    margin: 12px 0;


    padding: 12px 16px;


    background: rgba(120, 119, 198, 0.1);


    border-radius: 0 8px 8px 0;


    font-style: italic;


    color: #d0d0d0;


}





.message-content hr {


    border: none;


    height: 1px;


    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);


    margin: 20px 0;


}





.message-content a {


    color: #87ceeb;


    text-decoration: underline;


    transition: color 0.3s ease;


}





.message-content a:hover {


    color: #add8e6;


}





.message-content p {


    margin: 8px 0;


    line-height: 1.7;


}





.message-content strong {


    color: #ffd700;


    font-weight: 600;


}





.message-content em {


    color: #87ceeb;


    font-style: italic;


}





/* 打字机效果优化 */


.message-content.streaming {


    position: relative;


}





.message-content.streaming::after {


    content: '▋';


    color: #6366f1;


    animation: blink 1s infinite;


    font-weight: bold;


}





@keyframes blink {


    0%, 50% { opacity: 1; }


    51%, 100% { opacity: 0; }


} 





/* 滑动选择器动画效果 */


.picker-wheel {


    scroll-behavior: smooth;


}





.picker-option {


    user-select: none;


    -webkit-user-select: none;


    -moz-user-select: none;


    -ms-user-select: none;


}





/* 选择器加载动画 */


.picker-wheel.loading {


    opacity: 0.5;


}





.picker-wheel.loading .picker-option {


    animation: pickerLoading 1s ease-in-out infinite;


}





@keyframes pickerLoading {


    0%, 100% { opacity: 0.5; }


    50% { opacity: 1; }


} 





/* 冥想引导页面样式 */


.meditation-content {


    text-align: center;


    z-index: 2;


    max-width: 700px;


    padding: 40px;


    position: relative;


    display: flex;


    align-items: center;


    justify-content: center;


    min-height: 100vh;


}





.meditation-text-container {


    background: rgba(255, 255, 255, 0.05);


    border-radius: 25px;


    padding: 40px 30px;


    border: 2px solid rgba(255, 255, 255, 0.1);


    backdrop-filter: blur(15px);


    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);


}





.meditation-title {


    font-size: 2.5rem;


    font-weight: 300;


    margin-bottom: 30px;


    background: linear-gradient(45deg, #7877c6, #ff77c6);


    -webkit-background-clip: text;


    -webkit-text-fill-color: transparent;


    text-shadow: 0 0 30px rgba(120, 119, 198, 0.5);


}





.meditation-intro {


    font-size: 1.3rem;


    color: rgba(255, 255, 255, 0.9);


    margin-bottom: 30px;


    line-height: 1.6;


    font-weight: 400;


}





.meditation-prayer {


    background: rgba(255, 255, 255, 0.08);


    border-radius: 20px;


    padding: 35px 25px;


    margin: 30px 0;


    border-left: 4px solid rgba(255, 119, 198, 0.6);


    font-size: 1.2rem;


    line-height: 2;


    color: rgba(255, 255, 255, 0.95);


    font-style: italic;


    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);


}





.meditation-prayer p {


    margin: 8px 0;


    transition: all 0.3s ease;


}





.meditation-prayer p:hover {


    color: #ff77c6;


    text-shadow: 0 0 15px rgba(255, 119, 198, 0.5);


    transform: translateX(5px);


}





.meditation-continue-btn {


    background: linear-gradient(135deg, rgba(120, 119, 198, 0.3), rgba(255, 119, 198, 0.3));


    border: 2px solid rgba(255, 119, 198, 0.5);


    border-radius: 25px;


    padding: 15px 35px;


    font-size: 1.2rem;


    font-weight: 500;


    color: #ffffff;


    cursor: pointer;


    transition: all 0.4s ease;


    margin-top: 35px;


    backdrop-filter: blur(10px);


    display: flex;


    align-items: center;


    justify-content: center;


    gap: 10px;


    margin-left: auto;


    margin-right: auto;


    width: fit-content;


}





.meditation-continue-btn:hover {


    background: linear-gradient(135deg, rgba(120, 119, 198, 0.5), rgba(255, 119, 198, 0.5));


    border-color: rgba(255, 119, 198, 0.8);


    transform: translateY(-3px);


    box-shadow: 0 10px 25px rgba(255, 119, 198, 0.3);


}





.meditation-continue-btn .btn-text {


    font-size: 1.1rem;


    letter-spacing: 1px;


}





.meditation-continue-btn .btn-icon {


    font-size: 1.3rem;


    animation: sparkle 2s ease-in-out infinite;


}





@keyframes sparkle {


    0%, 100% { 


        transform: scale(1) rotate(0deg);


        opacity: 1;


    }


    50% { 


        transform: scale(1.2) rotate(180deg);


        opacity: 0.8;


    }


}





/* 移动端适配 */


@media (max-width: 768px) {


    .meditation-content {


        padding: 30px 20px;


        max-width: 90%;


        min-height: 100vh;


    }


    


    .meditation-text-container {


        padding: 30px 20px;


    }


    


    .meditation-title {


        font-size: 2rem;


        margin-bottom: 25px;


    }


    


    .meditation-intro {


        font-size: 1.1rem;


        margin-bottom: 25px;


    }


    


    .meditation-prayer {


        padding: 25px 20px;


        font-size: 1.1rem;


        line-height: 1.8;


    }


    


    .meditation-continue-btn {


        padding: 12px 25px;


        font-size: 1.1rem;


    }


}





@media (max-width: 480px) {


    .meditation-content {


        padding: 20px 15px;


        min-height: 100vh;


    }


    


    .meditation-text-container {


        padding: 25px 15px;


    }


    


    .meditation-title {


        font-size: 1.8rem;


        margin-bottom: 20px;


    }


    


    .meditation-intro {


        font-size: 1rem;


        margin-bottom: 20px;


    }


    


    .meditation-prayer {


        padding: 20px 15px;


        font-size: 1rem;


        line-height: 1.7;


    }


    


    .meditation-continue-btn {


        padding: 10px 20px;


        font-size: 1rem;


        margin-top: 25px;


    }


}





/* 提问页面样式 */


.question-content {


    text-align: center;


    z-index: 2;


    max-width: 800px;


    padding: 40px;


    position: relative;


    display: flex;


    align-items: center;


    justify-content: center;


    min-height: 100vh;


}





.question-text-container {


    background: rgba(255, 255, 255, 0.05);


    border-radius: 25px;


    padding: 40px 30px;


    border: 2px solid rgba(255, 255, 255, 0.1);


    backdrop-filter: blur(15px);


    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);


    width: 100%;


}





.question-title {


    font-size: 1.8rem;


    font-weight: 400;


    margin-bottom: 40px;


    background: linear-gradient(45deg, #7877c6, #ff77c6, #77dbff);


    -webkit-background-clip: text;


    -webkit-text-fill-color: transparent;


    line-height: 1.4;


    text-shadow: 0 0 30px rgba(120, 119, 198, 0.5);


}





.question-input-container {


    margin: 30px 0 40px 0;


    position: relative;


}





.question-input {


    width: 100%;


    min-height: 120px;


    padding: 20px;


    background: rgba(255, 255, 255, 0.08);


    border: 2px solid rgba(255, 255, 255, 0.2);


    border-radius: 15px;


    color: #ffffff;


    font-size: 1.1rem;


    line-height: 1.6;


    resize: vertical;


    backdrop-filter: blur(10px);


    transition: all 0.3s ease;


    font-family: 'Noto Sans SC', sans-serif;


}





.question-input:focus {


    outline: none;


    border-color: rgba(255, 119, 198, 0.6);


    background: rgba(255, 255, 255, 0.12);


    box-shadow: 0 0 20px rgba(255, 119, 198, 0.3);


}





.question-input::placeholder {


    color: rgba(255, 255, 255, 0.5);


    font-style: italic;


    line-height: 1.6;


}





.question-continue-btn {


    background: linear-gradient(135deg, rgba(120, 119, 198, 0.3), rgba(255, 119, 198, 0.3));


    border: 2px solid rgba(255, 119, 198, 0.5);


    border-radius: 25px;


    padding: 15px 35px;


    font-size: 1.2rem;


    font-weight: 500;


    color: #ffffff;


    cursor: pointer;


    transition: all 0.4s ease;


    backdrop-filter: blur(10px);


    display: flex;


    align-items: center;


    justify-content: center;


    gap: 10px;


    margin-left: auto;


    margin-right: auto;


    width: fit-content;


}





.question-continue-btn:hover {


    background: linear-gradient(135deg, rgba(120, 119, 198, 0.5), rgba(255, 119, 198, 0.5));


    border-color: rgba(255, 119, 198, 0.8);


    transform: translateY(-3px);


    box-shadow: 0 10px 25px rgba(255, 119, 198, 0.3);


}





.question-continue-btn .btn-text {


    font-size: 1.1rem;


    letter-spacing: 1px;


}





.question-continue-btn .btn-icon {


    font-size: 1.3rem;


    animation: mysticalPulse 3s ease-in-out infinite;


}





@keyframes mysticalPulse {


    0%, 100% { 


        transform: scale(1);


        opacity: 1;


    }


    50% { 


        transform: scale(1.1);


        opacity: 0.8;


    }


}





/* 移动端适配 */


@media (max-width: 768px) {


    .question-content {


        padding: 30px 20px;


        max-width: 90%;


        min-height: 100vh;


    }


    


    .question-text-container {


        padding: 30px 20px;


    }


    


    .question-title {


        font-size: 1.5rem;


        margin-bottom: 30px;


    }


    


    .question-input {


        min-height: 100px;


        padding: 15px;


        font-size: 1rem;


    }


    


    .question-continue-btn {


        padding: 12px 25px;


        font-size: 1.1rem;


    }


}





@media (max-width: 480px) {


    .question-content {


        padding: 20px 15px;


        min-height: 100vh;


    }


    


    .question-text-container {


        padding: 25px 15px;


    }


    


    .question-title {


        font-size: 1.3rem;


        margin-bottom: 25px;


    }


    


    .question-input {


        min-height: 80px;


        padding: 12px;


        font-size: 0.95rem;


    }


    


    .question-continue-btn {


        padding: 10px 20px;


        font-size: 1rem;


        margin-top: 25px;


    }


}





/* 词汇选择页面样式 */


.words-content {


    text-align: center;


    z-index: 2;


    max-width: 1400px; /* 进一步增加最大宽度 */


    padding: 40px 15px; /* 减少左右padding让内容更宽 */


    position: relative;


    display: flex;


    align-items: center;


    justify-content: center;


    min-height: 100vh;


    overflow: hidden;


}





.words-container {


    background: rgba(255, 255, 255, 0.05);


    border-radius: 25px;


    padding: 40px 40px;


    border: 2px solid rgba(255, 255, 255, 0.1);


    backdrop-filter: blur(15px);


    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);


    width: 100%;


    max-width: 1100px; /* 增加容器最大宽度 */


}





.words-title {


    font-size: 1.8rem;


    font-weight: 400;


    margin-bottom: 15px;


    background: linear-gradient(45deg, #7877c6, #ff77c6, #77dbff);


    -webkit-background-clip: text;


    -webkit-text-fill-color: transparent;


    line-height: 1.4;


    text-shadow: 0 0 30px rgba(120, 119, 198, 0.5);


}





.words-subtitle {


    font-size: 1.1rem;


    color: rgba(255, 255, 255, 0.8);


    margin-bottom: 40px;


    font-style: italic;


}





/* 词汇网格容器 */


.words-grid-container {


    position: relative;


    margin-bottom: 20px;


}





/* 换一批按钮 - 横排样式 */


.words-refresh-container {


    display: flex;


    justify-content: flex-end;


    margin: 5px 0 0 0;


}





.words-refresh-btn-horizontal {


    background: transparent;


    border: none;


    border-radius: 20px;


    padding: 6px 12px;


    font-size: 0.8rem;


    color: rgba(255, 255, 255, 0.6);


    cursor: pointer;


    transition: all 0.3s ease;


    display: flex;


    align-items: center;


    gap: 4px;


}





.words-refresh-btn-horizontal:hover {


    color: rgba(255, 119, 198, 0.8);


    transform: translateY(-1px);


}





.words-refresh-btn-horizontal .btn-text {


    font-size: 0.8rem;


}





.words-refresh-btn-horizontal .btn-icon {


    font-size: 0.9rem;


}





.words-grid {


    display: grid;


    grid-template-columns: repeat(2, 1fr); /* 确保一排两个词 */


    gap: 15px;


    max-height: 400px;


    overflow-y: auto;


    overflow-x: hidden;


    padding: 20px;


    background: rgba(255, 255, 255, 0.03);


    border-radius: 15px;


    border: 1px solid rgba(255, 255, 255, 0.1);


    scroll-behavior: smooth;


    -webkit-overflow-scrolling: touch;


}





/* 返回按钮样式 - 放在容器内部左上角 */


.words-back-btn {


    position: absolute;


    top: 15px;


    left: 15px;


    width: auto;


    height: auto;


    background: none;


    border: none;


    color: rgba(150, 150, 150, 0.7);


    cursor: pointer;


    transition: all 0.3s ease;


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 1.2rem;


    z-index: 10;


    padding: 5px;


}





.words-back-btn:hover {


    color: rgba(255, 119, 198, 0.9);


    transform: translateX(-3px);


}





/* 小换一批按钮样式 */


.words-refresh-btn-small {


    position: absolute;


    bottom: 15px;


    right: 15px;


    width: 35px;


    height: 35px;


    background: rgba(77, 219, 255, 0.2);


    border: 2px solid rgba(77, 219, 255, 0.4);


    border-radius: 50%;


    color: #ffffff;


    cursor: pointer;


    transition: all 0.3s ease;


    backdrop-filter: blur(10px);


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 0.9rem;


    z-index: 5;


}





.words-refresh-btn-small:hover {


    background: rgba(77, 219, 255, 0.4);


    border-color: rgba(77, 219, 255, 0.8);


    transform: translateY(-2px) scale(1.1);


    box-shadow: 0 5px 15px rgba(77, 219, 255, 0.3);


}





/* 自定义滚动条样式 */


.words-grid::-webkit-scrollbar {


    width: 8px;


}





.words-grid::-webkit-scrollbar-track {


    background: rgba(255, 255, 255, 0.05);


    border-radius: 10px;


}





.words-grid::-webkit-scrollbar-thumb {


    background: linear-gradient(135deg, rgba(120, 119, 198, 0.6), rgba(255, 119, 198, 0.6));


    border-radius: 10px;


    border: 1px solid rgba(255, 255, 255, 0.1);


}





.words-grid::-webkit-scrollbar-thumb:hover {


    background: linear-gradient(135deg, rgba(120, 119, 198, 0.8), rgba(255, 119, 198, 0.8));


}





.word-card {


    background: rgba(255, 255, 255, 0.08);


    border: 2px solid rgba(255, 255, 255, 0.2);


    border-radius: 12px;


    padding: 15px 30px;


    font-size: 1rem;


    font-weight: 500;


    color: #ffffff;


    cursor: pointer;


    transition: all 0.3s ease;


    text-align: center;


    backdrop-filter: blur(5px);


    min-height: 50px;


    display: flex;


    align-items: center;


    justify-content: center;


    position: relative;


    overflow: hidden;


}





.word-card:hover {


    background: rgba(255, 255, 255, 0.15);


    border-color: rgba(255, 119, 198, 0.6);


    transform: translateY(-2px);


    box-shadow: 0 5px 15px rgba(255, 119, 198, 0.3);


}





/* 触摸设备的反馈 */


.word-card:active {


    transform: translateY(0px) scale(0.98);


    transition: all 0.1s ease;


}





.word-card.selected {


    background: linear-gradient(135deg, rgba(120, 119, 198, 0.4), rgba(255, 119, 198, 0.4));


    border-color: rgba(255, 119, 198, 0.8);


    transform: translateY(-3px);


    box-shadow: 0 8px 20px rgba(255, 119, 198, 0.4);


    color: #ffffff;


    font-weight: 600;


}





.word-card.glow {


    animation: wordGlow 1s ease-in-out;


}





@keyframes wordGlow {


    0% {


        box-shadow: 0 0 5px rgba(255, 119, 198, 0.3);


    }


    50% {


        box-shadow: 0 0 20px rgba(255, 119, 198, 0.8), 0 0 30px rgba(120, 119, 198, 0.6);


        transform: translateY(-2px);


    }


    100% {


        box-shadow: 0 0 5px rgba(255, 119, 198, 0.3);


    }


}





.words-actions {


    display: flex;


    flex-direction: column;


    align-items: center;


    gap: 20px;


}





.words-continue-btn, .words-refresh-btn {


    background: linear-gradient(135deg, rgba(120, 119, 198, 0.3), rgba(255, 119, 198, 0.3));


    border: 2px solid rgba(255, 119, 198, 0.5);


    border-radius: 25px;


    padding: 15px 35px;


    font-size: 1.2rem;


    font-weight: 500;


    color: #ffffff;


    cursor: pointer;


    transition: all 0.4s ease;


    backdrop-filter: blur(10px);


    display: flex;


    align-items: center;


    justify-content: center;


    gap: 10px;


    width: fit-content;


}





.words-continue-btn {


    opacity: 0.5;


}





.words-refresh-btn {


    background: linear-gradient(135deg, rgba(77, 219, 255, 0.3), rgba(120, 119, 198, 0.3));


    border-color: rgba(77, 219, 255, 0.5);


    margin-top: 10px;


}





.words-continue-btn:not(:disabled):hover, .words-refresh-btn:hover {


    background: linear-gradient(135deg, rgba(120, 119, 198, 0.5), rgba(255, 119, 198, 0.5));


    border-color: rgba(255, 119, 198, 0.8);


    transform: translateY(-3px);


    box-shadow: 0 10px 25px rgba(255, 119, 198, 0.3);


}





.words-refresh-btn:hover {


    background: linear-gradient(135deg, rgba(77, 219, 255, 0.5), rgba(120, 119, 198, 0.5));


    border-color: rgba(77, 219, 255, 0.8);


    box-shadow: 0 10px 25px rgba(77, 219, 255, 0.3);


}





.words-continue-btn:disabled {


    cursor: not-allowed;


    opacity: 0.5;


}





.words-continue-btn .btn-text, .words-refresh-btn .btn-text {


    font-size: 1.1rem;


    letter-spacing: 1px;


}





.words-continue-btn .btn-icon, .words-refresh-btn .btn-icon {


    font-size: 1.3rem;


    animation: sparkle 2s ease-in-out infinite;


}





@keyframes sparkle {


    0%, 100% { 


        opacity: 1;


        transform: scale(1);


    }


    50% { 


        opacity: 0.7;


        transform: scale(1.2);


    }


}





.words-hint {


    font-size: 1rem;


    color: rgba(255, 255, 255, 0.7);


    margin: 0;


}





/* 摇摆动画 - 用于选择限制提示 */


@keyframes shake {


    0%, 100% { transform: translateX(0); }


    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }


    20%, 40%, 60%, 80% { transform: translateX(5px); }


}





.words-shortcuts {


    font-size: 0.9rem;


    color: rgba(255, 255, 255, 0.5);


    margin: 0;


    font-style: italic;


}





#selected-count {


    color: #ff77c6;


    font-weight: 600;


    font-size: 1.1rem;


}





/* 移动端适配 */


@media (max-width: 768px) {


    .words-content {


        padding: 30px 20px;


        max-width: 100%; /* 确保与桌面版一致的最大宽度 */


        align-items: flex-start;


        justify-content: flex-start;


        overflow-y: auto;


        overflow-x: hidden;


    }


    


    .words-container {


        padding: 30px 20px;


        width: 100%;


        min-height: auto;


        max-width: 1100px; /* 确保与桌面版一致的最大宽度 */


        margin: 0 auto; /* 居中显示 */


    }


    


    .words-title {


        font-size: 1.5rem;


        margin-bottom: 12px;


        position: sticky;


        top: 0;


        background: rgba(0, 0, 0, 0.8);


        padding: 10px 0;


        z-index: 10;


    }


    


    .words-subtitle {


        font-size: 1rem;


        margin-bottom: 30px;


        position: sticky;


        top: 60px;


        background: rgba(0, 0, 0, 0.8);


        padding: 10px 0;


        z-index: 10;


    }


    


    .words-grid {


        grid-template-columns: repeat(2, 1fr); /* 保持与桌面版一致的一行两个词语 */


        gap: 15px; /* 保持与桌面版一致的间距 */


        padding: 20px; /* 保持与桌面版一致的内边距 */


        max-height: 400px;


        overflow-y: auto;


        overflow-x: hidden;


        scroll-behavior: smooth;


        -webkit-overflow-scrolling: touch;


    }


    


    .word-card {


        padding: 12px 8px;


        font-size: 0.9rem;


        min-height: 45px;


    }


    


    .words-continue-btn {


        padding: 12px 25px;


        font-size: 1.1rem;


    }


}





@media (max-width: 480px) {


    .words-content {


        padding: 20px 10px; /* 进一步减少padding让内容更宽 */


        min-height: 100vh;


        display: flex;


        flex-direction: column;


        align-items: flex-start;


        justify-content: flex-start;


        overflow-y: auto;


        overflow-x: hidden;


        max-width: 100%; /* 确保占满屏幕宽度 */


    }


    


    .words-container {


        padding: 25px 10px; /* 减少左右padding */


        flex: 1;


        display: flex;


        flex-direction: column;


        width: 100%;


        min-height: auto;


        max-width: 100%; /* 确保占满屏幕宽度 */


    }


    


    .words-title {


        font-size: 1.3rem;


        margin-bottom: 10px;


        position: sticky;


        top: 0;


        background: rgba(0, 0, 0, 0.9);


        padding: 10px 0;


        z-index: 10;


        width: 100%;


    }


    


    .words-subtitle {


        font-size: 0.95rem;


        margin-bottom: 25px;


        position: sticky;


        top: 50px;


        background: rgba(0, 0, 0, 0.9);


        padding: 10px 0;


        z-index: 10;


        width: 100%;


    }


    


    .words-grid-container {


        width: 100%;


        margin-bottom: 20px; /* 减少底部间距 */


    }


    


    .words-grid {


        grid-template-columns: repeat(2, 1fr); /* 保持一排两个 */


        gap: 10px; /* 增加间距 */


        padding: 15px; /* 增加内边距 */


        max-height: 400px;


        overflow-y: auto;


        overflow-x: hidden;


        flex: 1;


        min-height: 300px;


        scroll-behavior: smooth;


        -webkit-overflow-scrolling: touch;


        width: 100%;


    }


    


    .word-card {


        padding: 12px 8px; /* 增加padding让卡片更大 */


        font-size: 0.85rem; /* 稍微增加字体 */


        min-height: 40px; /* 增加最小高度 */


        word-break: break-word;


        display: flex;


        align-items: center;


        justify-content: center;


    }


    


    .words-back-btn {


        position: absolute;


        top: 15px;


        left: 15px;


        width: auto;


        height: auto;


        background: none;


        border: none;


        color: rgba(150, 150, 150, 0.7);


        cursor: pointer;


        transition: all 0.3s ease;


        display: flex;


        align-items: center;


        justify-content: center;


        font-size: 1.1rem;


        z-index: 15;


        padding: 5px;


    }


    


    .words-back-btn:hover {


        color: rgba(255, 119, 198, 0.9);


        transform: translateX(-3px);


    }


    


    .words-continue-btn {


        padding: 10px 20px;


        font-size: 1rem;


    }


    


    .words-hint {


        font-size: 0.9rem;


    }


    


    .words-shortcuts {


        display: none;


    }


}





/* 超小屏幕优化 */


@media (max-width: 360px) {


    .words-content {


        padding: 15px 10px;


    }


    


    .words-container {


        padding: 20px 10px;


}





    .words-grid {


        grid-template-columns: repeat(2, 1fr); /* 保持一行两个词语 */


        gap: 15px; /* 保持合适的间距 */


        padding: 20px; /* 保持合适的内边距 */


        max-height: 400px; /* 保持与其他屏幕一致的高度 */


    }





    .word-card {


        padding: 12px 20px; /* 保持合适的内边距，不要过度压缩 */


        font-size: 0.9rem; /* 稍微减小字体但保持可读性 */


        min-height: 45px; /* 保持合适的最小高度 */


    }


    


    .words-title {


        font-size: 1.2rem;


        top: 0;


}





    .words-subtitle {


        font-size: 0.9rem;


        top: 45px;


}





    /* 超小屏幕聊天界面优化 */


    .chat-container {


        height: 100vh;


        height: 100dvh;


    }


    


    .chat-header {


        padding: 6px 8px;


        min-height: 40px;


}





    .chat-header h2 {


        font-size: 1rem;


    }


    


    .back-button {


        padding: 5px 10px;


        font-size: 0.8rem;


    }


    


    .chat-messages {


        padding: 6px 8px;


        gap: 8px;


        padding-top: 2px;


        padding-bottom: 2px;


}





    .message {


        max-width: 98%;


        gap: 5px;


    }


    


    .message-avatar {


        width: 25px;


        height: 25px;


        font-size: 0.75rem;


}





    .message-content {


        padding: 6px 10px;


        font-size: 0.8rem;


}





    .chat-input-container {


        padding: 5px 8px;


        gap: 5px;


        min-height: 50px;


}





    #user-input {


        padding: 6px 10px;


        font-size: 0.8rem;


        min-height: 30px;


    }


    


    .send-button {


        padding: 6px 12px;


        font-size: 0.8rem;


        min-width: 45px;


        min-height: 30px;


    }


}





 





/* 阿卡西记录格式样式 */


.akashic-divider {


    width: 90%;


    margin: 32px auto 24px auto;


    border: none;


    border-top: 2px solid rgba(200,200,255,0.18);


    background: linear-gradient(90deg, rgba(200,200,255,0.10) 0%, rgba(200,200,255,0.35) 50%, rgba(200,200,255,0.10) 100%);


    height: 2px;


    border-radius: 2px;


    opacity: 0.8;


}





.akashic-major-section {


    color: #ffd700;


    font-size: 1.3rem;


    font-weight: 600;


    margin: 20px 0 15px 0;


    text-align: center;


    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);


    }





.akashic-past-life-content {


    color: #e0e0e0;


    line-height: 1.8;


    margin: 15px 0;


    }


    


.akashic-section-gap {


    height: 20px;


    }


    


    .akashic-influence-title {


    color: #87ceeb;


        font-size: 1.1rem;


    font-weight: 600;


    margin: 20px 0 10px 0;


    text-align: center;


    }


    


.akashic-influence-list {


    margin: 15px 0;


    padding-left: 20px;


    list-style: none;


    }


    


.akashic-influence-list li {


    color: #d0d0d0;


    margin: 12px 0;


    line-height: 1.8;


    padding: 10px;


    padding-left: 15px;


    border-left: 3px solid #87ceeb;


    background: rgba(135, 206, 235, 0.05);


    border-radius: 4px;


    }


    


    .akashic-poem {


    color: #ffb6c1;


    font-style: italic;


    text-align: center;


    margin: 20px 0;


        font-size: 1.1rem;


    line-height: 1.6;


    text-shadow: 0 0 10px rgba(255, 182, 193, 0.3);


    }


    


.akashic-complete {


    color: rgba(255, 255, 255, 0.4);


    font-size: 0.9rem;


    text-align: center;


    margin: 20px 0;


    font-style: italic;


    }


    


.akashic-field {


    color: #b0b0b0;


    margin: 8px 0;


    line-height: 1.5;


    }





.akashic-field .field-value {


    color: #87ceeb;


    font-weight: 500;


}





    .akashic-record-number {


    color: #ffd700;


        font-size: 1.2rem;


    font-weight: 600;


    text-align: center;


    margin: 20px 0;


    text-shadow: 0 0 15px rgba(255, 215, 0, 0.5);


    }


    


.akashic-record-number .record-id {


    color: #ff77c6;


    font-family: 'Courier New', monospace;


    letter-spacing: 1px;


    }





/* ==================== 近义词高亮显示样式 ==================== */





/* 近义词高亮基础样式 */


.synonym-highlight {


    position: relative;


    display: inline;


    background: linear-gradient(135deg, rgba(138, 43, 226, 0.2), rgba(75, 0, 130, 0.3));


    border: 1px solid rgba(138, 43, 226, 0.4);


    border-radius: 4px;


    padding: 2px 6px;


    margin: 0 1px;


    color: #e6d7ff;


    font-weight: 500;


    cursor: pointer;


    transition: all 0.3s ease;


    box-shadow: 0 0 8px rgba(138, 43, 226, 0.2);


}





/* 悬停效果 */


.synonym-highlight:hover {


    background: linear-gradient(135deg, rgba(138, 43, 226, 0.4), rgba(75, 0, 130, 0.5));


    border-color: rgba(138, 43, 226, 0.7);


    color: #ffffff;


    box-shadow: 0 0 15px rgba(138, 43, 226, 0.4);


    transform: translateY(-1px);


}





/* 不同类型的高亮颜色 */


.synonym-highlight.type-values {


    background: linear-gradient(135deg, rgba(255, 105, 180, 0.2), rgba(199, 21, 133, 0.3));


    border-color: rgba(255, 105, 180, 0.4);


    color: #ffe6f0;


    box-shadow: 0 0 8px rgba(255, 105, 180, 0.2);


}





.synonym-highlight.type-values:hover {


    background: linear-gradient(135deg, rgba(255, 105, 180, 0.4), rgba(199, 21, 133, 0.5));


    border-color: rgba(255, 105, 180, 0.7);


    box-shadow: 0 0 15px rgba(255, 105, 180, 0.4);


}





.synonym-highlight.type-celestial {


    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 165, 0, 0.3));


    border-color: rgba(255, 215, 0, 0.4);


    color: #fff8dc;


    box-shadow: 0 0 8px rgba(255, 215, 0, 0.2);


}





.synonym-highlight.type-celestial:hover {


    background: linear-gradient(135deg, rgba(255, 215, 0, 0.4), rgba(255, 165, 0, 0.5));


    border-color: rgba(255, 215, 0, 0.7);


    box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);


}





.synonym-highlight.type-landscape {


    background: linear-gradient(135deg, rgba(34, 139, 34, 0.2), rgba(0, 100, 0, 0.3));


    border-color: rgba(34, 139, 34, 0.4);


    color: #e6ffe6;


    box-shadow: 0 0 8px rgba(34, 139, 34, 0.2);


}





.synonym-highlight.type-landscape:hover {


    background: linear-gradient(135deg, rgba(34, 139, 34, 0.4), rgba(0, 100, 0, 0.5));


    border-color: rgba(34, 139, 34, 0.7);


    box-shadow: 0 0 15px rgba(34, 139, 34, 0.4);


}





.synonym-highlight.type-shadow {


    background: linear-gradient(135deg, rgba(220, 20, 60, 0.2), rgba(139, 0, 0, 0.3));


    border-color: rgba(220, 20, 60, 0.4);


    color: #ffe6e6;


    box-shadow: 0 0 8px rgba(220, 20, 60, 0.2);


}





.synonym-highlight.type-shadow:hover {


    background: linear-gradient(135deg, rgba(220, 20, 60, 0.4), rgba(139, 0, 0, 0.5));


    border-color: rgba(220, 20, 60, 0.7);


    box-shadow: 0 0 15px rgba(220, 20, 60, 0.4);


}





/* ==================== 悬停浮窗样式 ==================== */





/* 产品浮窗容器 */


.product-popup {


    position: absolute;


    z-index: 10000;


    background: linear-gradient(135deg, rgba(20, 20, 40, 0.95), rgba(30, 30, 60, 0.95));


    border: 1px solid rgba(138, 43, 226, 0.5);


    border-radius: 12px;


    padding: 16px;


    min-width: 280px;


    max-width: 320px;


    box-shadow: 


        0 8px 32px rgba(0, 0, 0, 0.6),


        0 0 20px rgba(138, 43, 226, 0.3),


        inset 0 1px 0 rgba(255, 255, 255, 0.1);


    backdrop-filter: blur(10px);


    opacity: 0;


    transform: translateY(10px) scale(0.95);


    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);


    pointer-events: none;


}





.product-popup.show {


    opacity: 1;


    transform: translateY(0) scale(1);


    pointer-events: auto;


}





/* 浮窗箭头 */


.product-popup::before {


    content: '';


    position: absolute;


    top: -8px;


    left: 50%;


    transform: translateX(-50%);


    width: 0;


    height: 0;


    border-left: 8px solid transparent;


    border-right: 8px solid transparent;


    border-bottom: 8px solid rgba(138, 43, 226, 0.5);


}





.product-popup::after {


    content: '';


    position: absolute;


    top: -7px;


    left: 50%;


    transform: translateX(-50%);


    width: 0;


    height: 0;


    border-left: 7px solid transparent;


    border-right: 7px solid transparent;


    border-bottom: 7px solid rgba(20, 20, 40, 0.95);


}





/* 浮窗标题 */


.popup-title {


    font-size: 14px;


    font-weight: 600;


    color: #e6d7ff;


    margin-bottom: 12px;


    text-align: center;


    border-bottom: 1px solid rgba(138, 43, 226, 0.3);


    padding-bottom: 8px;


}





/* 产品列表 */


.popup-products {


    display: flex;


    flex-direction: column;


    gap: 12px;


}





/* 单个产品项 */


.popup-product {


    display: flex;


    align-items: center;


    gap: 12px;


    padding: 8px;


    background: rgba(255, 255, 255, 0.05);


    border-radius: 8px;


    border: 1px solid rgba(255, 255, 255, 0.1);


    transition: all 0.2s ease;


    cursor: pointer;


}





.popup-product:hover {


    background: rgba(138, 43, 226, 0.2);


    border-color: rgba(138, 43, 226, 0.4);


    transform: translateY(-1px);


}





/* 产品图片 */


.popup-product-image {


    width: 40px;


    height: 40px;


    border-radius: 6px;


    background: linear-gradient(135deg, rgba(138, 43, 226, 0.3), rgba(75, 0, 130, 0.3));


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 18px;


    flex-shrink: 0;


}





/* 产品信息 */


.popup-product-info {


    flex: 1;


    min-width: 0;


}





.popup-product-name {


    font-size: 13px;


    font-weight: 500;


    color: #ffffff;


    margin-bottom: 2px;


    white-space: nowrap;


    overflow: hidden;


    text-overflow: ellipsis;


}





.popup-product-desc {


    font-size: 11px;


    color: #cccccc;


    line-height: 1.3;


    margin-bottom: 4px;


}





.popup-product-price {


    font-size: 12px;


    font-weight: 600;


    color: #ffd700;


}





/* 移动端适配 */


@media (max-width: 768px) {


    .product-popup {


        min-width: 260px;


        max-width: 300px;


        padding: 14px;


    }


    


    .popup-product {


        gap: 10px;


        padding: 6px;


    }


    


    .popup-product-image {


        width: 36px;


        height: 36px;


        font-size: 16px;


    }


    


    .popup-product-name {


        font-size: 12px;


    }


    


    .popup-product-desc {


        font-size: 10px;


    }


    


    .popup-product-price {


        font-size: 11px;


    }


}





/* 近义词闪烁提示动画 */


@keyframes synonymGlow {


    0%, 100% {


        box-shadow: 0 0 8px rgba(138, 43, 226, 0.2);


    }


    50% {


        box-shadow: 0 0 20px rgba(138, 43, 226, 0.6);


    }


}





.synonym-highlight.glow-hint {


    animation: synonymGlow 2s ease-in-out infinite;


}





/* ========== Tailwind兼容类 - 让HTML中的Tailwind类生效 ========== */


.flex {


    display: flex !important;


}





.flex-col {


    flex-direction: column !important;


}





.items-center {


    align-items: center !important;


}





.items-start {


    align-items: flex-start !important;


}





.justify-center {


    justify-content: center !important;


}





.justify-between {


    justify-content: space-between !important;


}





.p-4 {


    padding: 1rem !important;


}





.p-8 {


    padding: 2rem !important;


}





.w-full {


    width: 100% !important;


}





.max-w-lg {


    max-width: 32rem !important;


}





.max-w-3xl {


    max-width: 48rem !important;


}





.min-h-\[70vh\] {


    min-height: 70vh !important;


}





.min-h-\[400px\] {


    min-height: 400px !important;


}





.my-4 {


    margin-top: 1rem !important;


    margin-bottom: 1rem !important;


}





.mb-2, .mb-4, .mb-6, .mb-8 {


    margin-bottom: 0.5rem;


}





.mb-4 {


    margin-bottom: 1rem !important;


}





.mb-6 {


    margin-bottom: 1.5rem !important;


}





.mb-8 {


    margin-bottom: 2rem !important;


}





.mt-4, .mt-6, .mt-8, .mt-auto {


    margin-top: 1rem;


}





.mt-6 {


    margin-top: 1.5rem !important;


}





.mt-8 {


    margin-top: 2rem !important;


}





.mt-auto {


    margin-top: auto !important;


}





.overflow-y-auto {


    overflow-y: auto !important;


}





.relative {


    position: relative !important;


}





.text-center {


    text-align: center !important;


}





.text-left {


    text-align: left !important;


}





.text-right {


    text-align: right !important;


}





.space-y-2 > * + * {


    margin-top: 0.5rem !important;


}





.space-y-3 > * + * {


    margin-top: 0.75rem !important;


}





.space-y-6 > * + * {


    margin-top: 1.5rem !important;


}





.gap-2 {


    gap: 0.5rem !important;


}





.gap-4 {


    gap: 1rem !important;


}





.flex-grow {


    flex-grow: 1 !important;


}





/* paper-sheet 纸张容器 */


.paper-sheet {


    background-color: #f4f1ea;


    box-shadow: 2px 4px 15px rgba(0,0,0,0.15);


    border: 1px solid rgba(0,0,0,0.1);


}





/* 档案标签 */


.file-tab {


    position: absolute;


    top: -25px;


    right: 20px;


    width: 100px;


    height: 35px;


    background-color: #e0d8c3;


    border-radius: 8px 8px 0 0;


    z-index: -1;


    box-shadow: 2px -2px 5px rgba(0,0,0,0.1);


    display: flex;


    align-items: center;


    justify-content: center;


    font-size: 10px;


    color: #666;


    font-family: 'Courier New', monospace;


    letter-spacing: 1px;


}





/* 回形针 */


.paperclip {


    position: absolute;


    width: 12px;


    height: 35px;


    border: 2px solid #888;


    border-bottom: none;


    border-radius: 8px 8px 0 0;


    z-index: 10;


}





/* 响应式 */


@media (min-width: 768px) {


    .md\:p-12 {


        padding: 3rem !important;


    }


}




/* 

   ==========================================================================

   _e 
X,pm2t0z (FINAL PATCH) - ɓQxVUtU

m ȓYh͓\!}

   ==========================================================================

*/



/* 1. Y3c͓\!} - [TWib3|'Ʌt */

.retro-btn, button.retro-btn {

    background-color: #2c2c2c !important;

    color: #fdfbf7 !important;

    border: 2px solid #2c2c2c !important;

    padding: 10px 30px !important;

    font-family: 'Noto Serif SC', serif !important;

    text-transform: uppercase !important;

    letter-spacing: 1px !important;

    cursor: pointer !important;

    transition: transform 0.2s ease !important;

    position: relative !important;

    z-index: 1000 !important;

    border-radius: 0 !important; /* o]\_i^xrm]6nUtxO>nYt?*/

    font-size: 1rem !important;

    width: auto !important;

    display: inline-block !important;

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

}



/* 2. Y3cN - YEeoM}m]|ey?*/

.retro-btn:hover, button.retro-btn:hover {

    background-color: #2c2c2c !important;

    color: #fdfbf7 !important;

    transform: scale(1.05) !important;

    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;

}



/* 3. Y3c~zOde5 ?*/

.retro-btn:disabled, button.retro-btn:disabled {

    background-color: #ccc !important;

    border-color: #ccc !important;

    color: #666 !important;

    cursor: not-allowed !important;

    transform: none !important;

}



/* 4. HgdSYU-}V?*/

input, textarea, .question-input, #user-question {

    border: 2px solid #ccc !important;

    background-color: rgba(255, 255, 255, 0.8) !important;

    color: #2c2c2c !important;

    padding: 15px !important;

    font-family: 'Noto Serif SC', serif !important;

    font-size: 1rem !important;

    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.05) !important;

    border-radius: 4px !important;

    width: 100% !important;

    outline: none !important;

    margin-bottom: 20px !important;

}



textarea:focus, input:focus {

    border-color: #2c2c2c !important;

    background-color: #fff !important;

}



/* 5. $i8upo/uQ,w - [TWȕr{5pR_} */

.screen {

    display: none; /* i?j{ŕ/ah */

    padding-top: 10vh !important; /* to$iX4Q 10% Bi:j[ */

    align-items: flex-start !important; /* hP?m“pt`ȕr{ */

    justify-content: center !important; /* YQg^plTQ */

    height: 100vh !important;

    overflow-y: auto !important;

}



.screen.active {

    display: flex !important;

}



/* 6. ~?z6}9pptj^plTQ */

.paper-sheet {

    margin: 0 auto !important;

    max-width: 600px !important;

    width: 90% !important;

    position: relative !important;

    top: 0 !important;

    transform: none !important;

}



/* 7. JZ#buYZc$1hao?*/

.picker-container {

    background: #fff !important;

    border: 2px solid #ccc !important;

    height: 150px !important;

}



.picker-wheel {

    color: #2c2c2c !important;

}



.picker-option {

    color: #666 !important;

}



.picker-option.selected {

    color: #000 !important;

    font-weight: bold !important;

    background: rgba(0,0,0,0.05) !important;

}


/* 
   ==========================================================================
   🔥 终极修复补丁 V2 (FINAL PATCH V2) - 响应用户愤怒的修改
   ==========================================================================
*/

/* 1. 按钮样式 - 放弃治疗黑底白字，保持现状但禁止一切动画 */
.retro-btn, button.retro-btn {
    /* 保持现有样式 (既然用户说现在是白底黑字下划线，那就顺着这个来，或者强制设为用户目前看到的样式以防万一) */
    background-color: transparent !important;
    color: #2c2c2c !important;
    border: 2px solid #2c2c2c !important; /* 既然用户看到的是一条线，可能是border-bottom，这里我统一加框或者干脆只留border-bottom */
    /* 为了安全，我这里还是设为全边框，如果用户看到的是底线，可能是其他类名影响，但我必须确保它可点 */
    padding: 10px 30px !important;
    font-family: 'Noto Serif SC', serif !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 1000 !important;
    border-radius: 0 !important;
    font-size: 1rem !important;
    width: auto !important;
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    
    /* 🚫 禁止一切变换 */
    transform: none !important;
    transition: none !important;
    animation: none !important;
    box-shadow: none !important;
}

/* 2. 按钮悬停 - 绝对静止！ */
.retro-btn:hover, button.retro-btn:hover,
.retro-btn:active, button.retro-btn:active,
.retro-btn:focus, button.retro-btn:focus {
    /* 保持与正常状态完全一致 */
    background-color: transparent !important; /* 保持透明/白色 */
    color: #2c2c2c !important; /* 保持黑字 */
    border-color: #2c2c2c !important;
    transform: none !important; /* 禁止变大 */
    box-shadow: none !important;
    outline: none !important;
}

/* 3. 按钮禁用状态 */
.retro-btn:disabled, button.retro-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* 4. 输入框优化 - 保持之前的优化 */
input, textarea, .question-input, #user-question {
    border: 2px solid #ccc !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    color: #2c2c2c !important;
    padding: 15px !important;
    font-family: 'Noto Serif SC', serif !important;
    font-size: 1rem !important;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.05) !important;
    border-radius: 4px !important;
    width: 100% !important;
    outline: none !important;
    margin-bottom: 20px !important;
}

textarea:focus, input:focus {
    border-color: #2c2c2c !important;
    background-color: #fff !important;
}

/* 5. 页面布局 - 保持靠上 */
.screen {
    display: none; /* 默认隐藏 */
    /* 之前的 10vh 在手机端会造成明显“顶部空白” */
    padding-top: max(12px, env(safe-area-inset-top)) !important;
    align-items: flex-start !important;
    justify-content: center !important;
    height: 100vh !important;
    height: 100dvh !important; /* 适配手机动态地址栏 */
    overflow-y: auto !important;
}

.screen.active {
    display: flex !important;
}

/* 封面页：手机端也要真正居中，不要被全局 padding-top 影响 */
#loading-screen.screen {
    padding-top: 0 !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 6. 纸张容器 - 稍微改大一点，解决调查表格太窄的问题 */
.paper-sheet {
    margin: 0 auto !important;
    max-width: 650px !important; /* 从600增加到650 */
    width: 95% !important; /* 从90%增加到95% */
    padding: 40px 30px !important; /* 调整padding */
    position: relative !important;
    top: 0 !important;
    transform: none !important;
}

/* 7. 滑轮选择器 - 保持修复 */
.picker-container {
    background: #fff !important;
    border: 2px solid #ccc !important;
    height: 150px !important;
}

/* 8. Picker Op�T���[�T�W�m��� */
.picker-option {
    height: 40px !important;
    line-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
}

.picker-option.placeholder {
    height: 40px !important;
    visibility: hidden !important;
}




/* 8. Picker 尺寸强制修正 - 确保滚动计算准确 */
.picker-option {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #666 !important;
    cursor: pointer !important;
}

.picker-option.placeholder {
    height: 40px !important;
    min-height: 40px !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.picker-option.selected {
    color: #000 !important;
    font-weight: bold !important;
    font-size: 16px !important;
}

/* 确保容器允许滚动 */
.picker-wheel {
    overflow-y: auto !important;
    height: 100% !important;
    display: block !important;
}

/* 9. Z��de CSS Scroll Snap */
.picker-container {
    scroll-snap-type: y mandatory !important;
}

.picker-option {
    scroll-snap-align: center !important;
}




/* 10. Word Card 词语卡片终极修复 */
.word-card {
    /* 常态：必须深色文字，否则看不见 */
    color: #2c2c2c !important;
    background-color: rgba(255, 255, 255, 0.5) !important;
    border: 1px solid #ccc !important;
    font-family: 'Noto Serif SC', serif !important;
    padding: 10px 15px !important;
    margin: 5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-size: 14px !important;
    border-radius: 4px !important;
    min-width: 80px !important;
    text-align: center !important;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.05) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.word-card:hover {
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-color: #999 !important;
    transform: translateY(-1px) !important;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1) !important;
}

.word-card.selected {
    /* 选中态：深色背景，浅色文字 */
    background-color: #2c2c2c !important;
    color: #fdfbf7 !important;
    border-color: #2c2c2c !important;
    font-weight: bold !important;
    transform: scale(1.05) !important;
}

/* 确保词语容器布局正常 */
#words-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 10px !important;
    max-height: 400px !important;
    overflow-y: auto !important;
}


/* 11. 修复 Picker 居中对齐 */
.birth-info-section, .birth-place-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
}

.date-time-picker, .place-picker {
    display: flex !important;
    justify-content: center !important; /* Flex子元素居中 */
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: none !important; /* 去掉可能的背景色干扰 */
    border: none !important;
    box-shadow: none !important;
}

.picker-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 强制子元素（文字和滚轮）水平居中 */
    flex: 1 !important;
    min-width: 60px !important;
}

.picker-label {
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 5px !important;
    font-weight: bold !important;
    color: #555 !important;
}

.picker-container {
    margin: 0 auto !important; /* 滚轮容器自身水平居中 */
    width: 100% !important;
    max-width: 80px !important; /* 限制最大宽度，防止撑太开 */
}


/* 12. 修复 Picker 列宽和时辰显示 */
.date-time-picker {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 10px !important; /* 稍微给点内边距 */
    justify-content: space-between !important; /* 使用 space-between 让它们铺满 */
    gap: 5px !important; /* 减小间距 */
}

.date-time-picker .picker-column {
    flex: 1 !important;
    margin: 0 !important; /* 移除所有 margin */
    min-width: 0 !important; /* 允许缩小 */
}

/* 时辰列特殊处理 */
.date-time-picker .picker-column:last-child {
    flex: 1.8 !important; /* 给时辰列更多空间 */
}

/* 修复时辰文字截断问题 */
#time-picker .picker-option {
    font-size: 12px !important; /* 缩小字体 */
    white-space: nowrap !important; /* 不换行 */
    overflow: visible !important; /* 允许溢出显示，或者hidden */
}

/* 确保滚轮容器宽度适应 */
.picker-container {
    width: 100% !important;
    max-width: none !important; /* 移除最大宽度限制，让它自适应列宽 */
}


/* 13. 终极居中修复 - 解决整体偏左问题 */
.birth-info-section, .birth-place-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    text-align: center !important;
}

.date-time-picker, .place-picker {
    display: flex !important;
    width: 100% !important; /* 占满父容器 */
    justify-content: center !important; /* 内容在容器内居中 */
    gap: 8px !important; /* 统一间距 */
    margin: 0 auto !important;
    padding: 0 !important; /* 移除内边距干扰 */
    box-sizing: border-box !important;
}

/* 确保列不会因为 flex-grow 导致左边挤压 */
.date-time-picker .picker-column, 
.place-picker .picker-column {
    flex: 0 1 auto !important; /* 不要强制撑满，由宽度决定 */
    width: 22% !important; /* 大致平均分 */
    max-width: 80px !important; /* 限制最大宽度，防止过宽 */
}

/* 时辰列稍微宽一点 */
.date-time-picker .picker-column:last-child {
    width: 30% !important;
    max-width: 110px !important;
}

/* 标题居中 */
.section-title {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin-bottom: 15px !important;
}


/* 14. 绝对对齐修复 - 确保 Title 和 Picker 同轴 */
.birth-info-section, .birth-place-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
    position: relative !important;
    display: block !important; /* 重置为 block */
}

.section-title {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
}

.date-time-picker, .place-picker {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    justify-content: center !important; /* 内容居中 */
    align-items: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 8px !important;
}

/* 重置列样式 */
.picker-column {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto !important; /* 禁止自动伸缩 */
}

/* 精确控制宽度 */
.date-time-picker .picker-column:not(:last-child) {
    width: 65px !important; /* 固定像素宽度，更可控 */
}

.date-time-picker .picker-column:last-child {
    width: 110px !important; /* 时辰给够空间 */
}

.place-picker .picker-column {
    width: 80px !important; /* 地点三列等宽 */
}

/* 容器样式微调 */
.picker-container {
    width: 100% !important;
    margin: 0 !important;
}