* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'STKaiti', 'KaiTi', '楷体', 'SimKai', serif;
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    min-height: 100vh;
    color: #d4af37;
    overflow-x: hidden;
    position: relative;
}

/* 背景装饰元素 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 20%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 215, 0, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 70%, rgba(184, 134, 11, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: -2;
}

/* 添加八卦背景图案 */
body::after {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="bagua" patternUnits="userSpaceOnUse" width="100" height="100"><circle cx="50" cy="50" r="45" fill="none" stroke="rgba(212,175,55,0.1)" stroke-width="1"/><circle cx="50" cy="50" r="35" fill="none" stroke="rgba(212,175,55,0.08)" stroke-width="0.5"/><circle cx="50" cy="50" r="25" fill="none" stroke="rgba(212,175,55,0.06)" stroke-width="0.5"/><circle cx="50" cy="50" r="15" fill="none" stroke="rgba(212,175,55,0.04)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23bagua)"/></svg>') center/contain no-repeat;
    opacity: 0.3;
    pointer-events: none;
    z-index: -1;
    animation: slowRotate 120s linear infinite;
}

@keyframes slowRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

.container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

/* 语言切换按钮 */
.language-switch {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    background: rgba(26, 26, 46, 0.9);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 25px;
    padding: 5px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}

.lang-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
    color: #d4af37;
    font-family: inherit;
}

.lang-btn.active {
    background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
    color: #1a1a2e;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.4);
    font-weight: bold;
}

/* 标题区域 */
.header {
    text-align: center;
    margin: 60px 0 40px 0;
    color: #d4af37;
    position: relative;
}

.header::before {
    content: '☯';
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    opacity: 0.6;
    animation: gentle-pulse 3s ease-in-out infinite alternate;
}

@keyframes gentle-pulse {
    from { opacity: 0.4; transform: translateX(-50%) scale(1); }
    to { opacity: 0.8; transform: translateX(-50%) scale(1.1); }
}

.header h1 {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    background: linear-gradient(135deg, #ffd700 0%, #d4af37 50%, #b8860b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 3px;
}

.subtitle {
    font-size: 16px;
    opacity: 0.9;
    font-weight: 300;
    color: #e6d16f;
    letter-spacing: 1px;
}

/* 输入区域 */
.input-section {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.9) 100%);
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 20px;
    padding: 30px 25px;
    margin-bottom: 25px;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(212, 175, 55, 0.2);
    backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
}

.input-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.05) 0%, transparent 70%);
    animation: subtle-float 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes subtle-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(180deg); }
}

.input-group {
    margin-bottom: 25px;
    position: relative;
}

.input-group label {
    display: block;
    margin-bottom: 12px;
    font-weight: 600;
    color: #d4af37;
    font-size: 16px;
    letter-spacing: 1px;
}



/* 表单选择器样式 */
.form-select {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    font-size: 16px;
    background: rgba(26, 26, 46, 0.8);
    color: #d4af37;
    transition: all 0.3s ease;
    outline: none;
    font-family: inherit;
    cursor: pointer;
}

.form-select:focus {
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
    background: rgba(26, 26, 46, 0.95);
}

.form-select option {
    background: #1a1a2e;
    color: #d4af37;
    padding: 10px;
}

/* 日期选择器 */
.date-selectors {
    display: flex;
    gap: 10px;
}

.date-select {
    flex: 1;
    padding: 15px 20px;
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    font-size: 16px;
    background: rgba(26, 26, 46, 0.8);
    color: #d4af37;
    transition: all 0.3s ease;
    outline: none;
    font-family: inherit;
    cursor: pointer;
}

.date-select:focus {
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
    background: rgba(26, 26, 46, 0.95);
}

.date-select option {
    background: #1a1a2e;
    color: #d4af37;
    padding: 10px;
}

/* 时间选择器 */
.time-select {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    font-size: 16px;
    background: rgba(26, 26, 46, 0.8);
    color: #d4af37;
    transition: all 0.3s ease;
    outline: none;
    font-family: inherit;
    cursor: pointer;
}

.time-select:focus {
    border-color: #d4af37;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
    background: rgba(26, 26, 46, 0.95);
}

.time-select option {
    background: #1a1a2e;
    color: #d4af37;
    padding: 10px;
}

.query-btn {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, #d4af37 0%, #b8860b 50%, #8b6914 100%);
    color: #1a1a2e;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
    font-family: inherit;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.query-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s;
}

.query-btn:hover::before {
    left: 100%;
}

.query-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.6);
}

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

/* 结果区域 */
.result-section {
    animation: fadeInUp 0.8s ease;
}

.result-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.9) 100%);
    border: 2px solid rgba(212, 175, 55, 0.4);
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(212, 175, 55, 0.2);
    backdrop-filter: blur(15px);
    position: relative;
}

.result-card::before {
    content: '※';
    position: absolute;
    top: 15px;
    right: 20px;
    color: rgba(212, 175, 55, 0.3);
    font-size: 20px;
}

.result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.result-item:last-child {
    border-bottom: none;
}

.result-label {
    font-weight: 600;
    color: #d4af37;
    flex: 1;
    font-size: 15px;
}

.result-item span:last-child {
    font-weight: 600;
    color: #ffd700;
    text-align: right;
    flex: 1;
    font-size: 15px;
}

.query-again-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #8b6914 0%, #b8860b 50%, #d4af37 100%);
    color: #1a1a2e;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(139, 105, 20, 0.4);
    font-family: inherit;
    letter-spacing: 1px;
}

.query-again-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 105, 20, 0.6);
}

/* 详批页面 */
.detail-section {
    animation: fadeInUp 0.8s ease;
    color: #d4af37;
}

.detail-header {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
}

.detail-header::before {
    content: '✦ ◆ ✦';
    display: block;
    color: rgba(212, 175, 55, 0.5);
    font-size: 16px;
    margin-bottom: 15px;
    letter-spacing: 8px;
}

.detail-header h2 {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 15px;
    background: linear-gradient(45deg, #ffd700, #d4af37, #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 4px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* 覆盖详批页面标题配色 */
.detail-header h2 {
    background: linear-gradient(135deg, var(--hx-accent-2), var(--hx-accent-1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.detail-subtitle {
    font-size: 16px;
    opacity: 0.9;
    font-weight: 300;
    color: #e6d16f;
    letter-spacing: 2px;
}

.user-info-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.9) 100%);
    border: 2px solid rgba(212, 175, 55, 0.4);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 25px;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(212, 175, 55, 0.2);
    backdrop-filter: blur(15px);
    position: relative;
}

.user-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
}

/* 覆盖卡片顶部装饰线配色 */
.user-info-card::before {
    background: linear-gradient(90deg, transparent, var(--hx-accent-1), transparent);
}

.card-header {
    background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
    color: #1a1a2e;
    padding: 20px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 2px;
    position: relative;
}

/* 覆盖卡片头部配色 */
.card-header {
    background: linear-gradient(135deg, var(--hx-accent-2), var(--hx-accent-1));
    color: #0b1220;
}

.card-header::after {
    content: '◆';
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
}

.card-header::before {
    content: '◆';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
}

/* 覆盖卡片头部装饰图标配色 */
.card-header::after,
.card-header::before {
    color: #0b1220;
}

.info-content {
    padding: 25px;
    color: #d4af37;
}

/* 覆盖信息内容区域配色 */
.info-content {
    color: var(--hx-text-1);
}

.info-row {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    flex-wrap: wrap;
    gap: 10px;
}

.info-row:last-child {
    border-bottom: none;
}

.info-row span:first-child {
    font-weight: 600;
    color: #d4af37;
    min-width: 80px;
    font-size: 15px;
}

/* 覆盖信息行标签配色 */
.info-row span:first-child {
    color: var(--hx-text-2);
}

.edit-btn, .copy-btn {
    padding: 8px 15px;
    background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
    color: #1a1a2e;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: auto;
    font-family: inherit;
    font-weight: bold;
}

.edit-btn:hover, .copy-btn:hover {
    background: linear-gradient(135deg, #ffd700 0%, #d4af37 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(212, 175, 55, 0.3);
}

/* 分析区域 */
.analysis-section {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.9) 100%);
    border: 2px solid rgba(212, 175, 55, 0.4);
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(212, 175, 55, 0.2);
    backdrop-filter: blur(15px);
    color: #d4af37;
}

.analysis-section h3 {
    color: #ffd700;
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 2px;
    position: relative;
}

/* 覆盖分析区域标题配色 */
.analysis-section h3 {
    color: var(--hx-accent-1);
}

.analysis-section h3::before,
.analysis-section h3::after {
    content: '※';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(212, 175, 55, 0.5);
    font-size: 16px;
}

/* 覆盖分析区域装饰图标配色 */
.analysis-section h3::before,
.analysis-section h3::after {
    color: rgba(96, 165, 250, 0.5);
}

.analysis-section h3::before {
    left: -30px;
}

.analysis-section h3::after {
    right: -30px;
}

.analysis-content {
    line-height: 1.8;
    font-size: 16px;
}

.analysis-item {
    margin-bottom: 20px;
    padding: 20px;
    background: rgba(26, 26, 46, 0.6);
    border-radius: 12px;
    border-left: 4px solid #d4af37;
    border-right: 4px solid #d4af37;
    position: relative;
}

/* 覆盖分析项目边框配色 */
.analysis-item {
    border-left: 4px solid var(--hx-accent-1);
    border-right: 4px solid var(--hx-accent-1);
}

.analysis-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
}

/* 覆盖分析项目顶部装饰线配色 */
.analysis-item::before {
    background: linear-gradient(90deg, transparent, var(--hx-accent-1), transparent);
}

.analysis-title {
    font-weight: bold;
    color: #ffd700;
    margin-bottom: 12px;
    font-size: 18px;
    letter-spacing: 1px;
}

/* 覆盖分析项目标题配色 */
.analysis-title {
    color: var(--hx-accent-1);
}

.back-btn {
    width: 100%;
    padding: 18px;
    background: rgba(26, 26, 46, 0.3);
    color: #d4af37;
    border: 2px solid rgba(212, 175, 55, 0.5);
    border-radius: 12px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    font-family: inherit;
    letter-spacing: 1px;
}

.back-btn:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: #d4af37;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}

/* 模态框 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    backdrop-filter: blur(10px);
}

.modal-content {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.9) 100%);
    border: 2px solid rgba(212, 175, 55, 0.5);
    border-radius: 20px;
    padding: 30px;
    max-width: 350px;
    width: 90%;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    animation: modalSlideIn 0.4s ease;
    color: #d4af37;
}

.modal-content h3 {
    margin-bottom: 20px;
    color: #ffd700;
    text-align: center;
    font-size: 20px;
    letter-spacing: 1px;
}



/* 工具类 */
.hidden {
    display: none !important;
}

/* 动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 响应式设计 */
@media (max-width: 480px) {
    .container {
        padding: 15px;
    }
    
    .header h1 {
        font-size: 28px;
        letter-spacing: 2px;
    }
    
    .input-section {
        padding: 25px 20px;
    }
    
    .language-switch {
        top: 15px;
        right: 15px;
    }
    
    .lang-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .detail-header h2 {
        font-size: 28px;
        letter-spacing: 2px;
    }

    /* 移动端日期选择器调整 */
    .date-selectors {
        flex-direction: column;
        gap: 15px;
    }

    .date-select {
        width: 100%;
    }
}

/* 金币飘落效果 */
@keyframes coinFall {
    0% {
        transform: translateY(-100vh) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

.coin-animation {
    position: fixed;
    top: -10px;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #ffd700 30%, #d4af37 70%);
    border-radius: 50%;
    z-index: 10;
    animation: coinFall 3s linear infinite;
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* 添加古文装饰 */
.traditional-ornament {
    font-family: 'STZhongsong', '华文中宋', serif;
    color: rgba(212, 175, 55, 0.3);
    font-size: 12px;
    text-align: center;
    margin: 10px 0;
    letter-spacing: 2px;
}

/* 特殊文字效果 */
.golden-text {
    background: linear-gradient(135deg, #ffd700 0%, #d4af37 50%, #b8860b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: bold;
}

 

/* 结果页面标题 */
.result-header {
    text-align: center;
    margin-bottom: 25px;
}

.result-header h2 {
    font-size: 28px;
    font-weight: bold;
    margin: 15px 0 10px 0;
    letter-spacing: 2px;
}

.result-actions {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.view-detail-btn {
    flex: 1;
    padding: 16px;
    background: linear-gradient(135deg, #d4af37 0%, #b8860b 50%, #8b6914 100%);
    color: #1a1a2e;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
    font-family: inherit;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
}

.view-detail-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.6s;
}

.view-detail-btn:hover::before {
    left: 100%;
}

.view-detail-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
}

.query-again-btn {
    flex: 1;
}

/* 八卦符号装饰 */
.bagua-symbol {
    font-size: 48px;
    color: rgba(212, 175, 55, 0.8);
    text-align: center;
    margin-bottom: 20px;
    animation: gentle-pulse 4s ease-in-out infinite alternate;
}

/* 运势建议区域 */
.fortune-section {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.9) 100%);
    border: 2px solid rgba(212, 175, 55, 0.4);
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(212, 175, 55, 0.2);
    backdrop-filter: blur(15px);
    color: #d4af37;
}

.fortune-section h3 {
    color: #ffd700;
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 2px;
    position: relative;
}

/* 覆盖运势建议标题配色 */
.fortune-section h3 {
    color: var(--hx-accent-1);
}

.fortune-section h3::before,
.fortune-section h3::after {
    content: '✦';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(212, 175, 55, 0.5);
    font-size: 16px;
}

/* 覆盖运势建议装饰图标配色 */
.fortune-section h3::before,
.fortune-section h3::after {
    color: rgba(96, 165, 250, 0.5);
}

.fortune-section h3::before {
    left: -30px;
}

.fortune-section h3::after {
    right: -30px;
}

.fortune-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.fortune-item {
    background: rgba(26, 26, 46, 0.6);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
}

.fortune-item:hover {
    border-color: rgba(212, 175, 55, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(212, 175, 55, 0.2);
}

.fortune-icon {
    font-size: 24px;
    margin-bottom: 10px;
}

.fortune-title {
    color: #d4af37;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 14px;
}

.fortune-content {
    color: #ffd700;
    font-weight: bold;
    font-size: 16px;
}

/* 覆盖运势建议项目标题和内容配色 */
.fortune-title {
    color: var(--hx-text-2);
}

.fortune-content {
    color: var(--hx-accent-1);
}

/* 加载动画 */
.loading-content {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.9) 100%);
    border: 2px solid rgba(212, 175, 55, 0.5);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    color: #d4af37;
    max-width: 300px;
    animation: modalSlideIn 0.4s ease;
}

/* 覆盖加载动画配色 */
.loading-content {
    background: linear-gradient(180deg, var(--hx-glass-strong), rgba(2,6,23,.68));
    border: 1px solid var(--hx-stroke);
    color: var(--hx-text-1);
}

.bagua-loader {
    margin-bottom: 25px;
}

.rotating {
    animation: slowRotate 3s linear infinite;
    font-size: 48px;
    color: #d4af37;
    display: inline-block;
}

/* 覆盖旋转八卦符号配色 */
.rotating {
    color: var(--hx-accent-1);
}

.loading-text {
    font-size: 18px;
    font-weight: bold;
    color: #ffd700;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

/* 覆盖加载文字配色 */
.loading-text {
    color: var(--hx-accent-1);
}

.loading-steps {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

.step {
    font-size: 12px;
    color: rgba(212, 175, 55, 0.5);
    padding: 8px 12px;
    border-radius: 20px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    transition: all 0.3s ease;
}

.step.active {
    background: rgba(212, 175, 55, 0.2);
    color: #ffd700;
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
}

/* 覆盖步骤按钮配色 */
.step {
    color: var(--hx-muted);
    border: 1px solid var(--hx-stroke);
}

.step.active {
    background: rgba(96,165,250,0.15);
    color: var(--hx-accent-1);
    border-color: rgba(96,165,250,0.45);
    box-shadow: 0 0 10px rgba(96,165,250,0.25);
}

/* 响应式设计优化 */
@media (max-width: 480px) {
    .result-actions {
        flex-direction: column;
    }
    
    .fortune-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .bagua-symbol {
        font-size: 36px;
    }
    
    .loading-steps {
        flex-direction: column;
        gap: 10px;
    }
    
    .step {
        text-align: center;
    }
}

/* 添加更多装饰动画 */
@keyframes floating {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}



/* 金色粒子效果 */
.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, #ffd700, #d4af37);
    border-radius: 50%;
    animation: particle-float 8s linear infinite;
    pointer-events: none;
}

@keyframes particle-float {
    0% {
        transform: translateY(100vh) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) rotate(360deg);
        opacity: 0;
    }
} 

/* 生辰综合详批页面 */
.comprehensive-section {
    animation: fadeInUp 0.8s ease;
    color: #d4af37;
}

.comprehensive-header {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
}

.comprehensive-header h2 {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 15px;
    background: linear-gradient(45deg, #ffd700, #d4af37, #b8860b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 4px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* 覆盖综合详批标题配色 */
.comprehensive-header h2 {
    background: linear-gradient(135deg, var(--hx-accent-2), var(--hx-accent-1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.comprehensive-subtitle {
    font-size: 16px;
    opacity: 0.9;
    font-weight: 300;
    color: #e6d16f;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

/* 个人信息卡片 */
.person-info-card {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.9) 100%);
    border: 2px solid rgba(212, 175, 55, 0.4);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 25px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.person-info-content {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 15px;
}

.info-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.info-label {
    color: #d4af37;
    font-size: 14px;
    font-weight: 600;
}

/* 十二宫位星盘 */
.star-chart {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.9) 100%);
    border: 3px solid rgba(212, 175, 55, 0.5);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(212, 175, 55, 0.2);
    backdrop-filter: blur(15px);
}

.chart-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    gap: 2px;
    aspect-ratio: 1;
    max-width: 500px;
    margin: 0 auto;
}

/* 宫位基础样式 */
.palace {
    background: rgba(26, 26, 46, 0.9);
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    font-size: 11px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.palace:hover {
    border-color: rgba(212, 175, 55, 0.6);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
    transform: translateY(-2px);
}

.palace-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    padding-bottom: 3px;
}

.palace-name {
    color: #ffd700;
    font-weight: bold;
    font-size: 12px;
}

.palace-element {
    background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
    color: #1a1a2e;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
}

.palace-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.palace-desc {
    color: #e6d16f;
    text-align: center;
    line-height: 1.3;
    font-size: 10px;
}

/* 宫位位置布局 */
.palace-top {
    grid-row: 1;
}

.palace-bottom {
    grid-row: 4;
}

.palace-left {
    grid-column: 1;
}

.palace-right {
    grid-column: 4;
}

/* 特定宫位位置 */
.palace[data-palace="命宫"] { grid-column: 4; grid-row: 4; }
.palace[data-palace="兄弟宫"] { grid-column: 4; grid-row: 3; }
.palace[data-palace="夫妻宫"] { grid-column: 4; grid-row: 2; }
.palace[data-palace="子女宫"] { grid-column: 4; grid-row: 1; }
.palace[data-palace="财帛宫"] { grid-column: 3; grid-row: 1; }
.palace[data-palace="疾厄宫"] { grid-column: 2; grid-row: 1; }
.palace[data-palace="迁移宫"] { grid-column: 1; grid-row: 1; }
.palace[data-palace="奴仆宫"] { grid-column: 1; grid-row: 2; }
.palace[data-palace="官禄宫"] { grid-column: 1; grid-row: 3; }
.palace[data-palace="田宅宫"] { grid-column: 1; grid-row: 4; }
.palace[data-palace="福德宫"] { grid-column: 2; grid-row: 4; }
.palace[data-palace="父母宫"] { grid-column: 3; grid-row: 4; }

/* 中央信息区域 */
.center-info {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(255, 215, 0, 0.05) 100%);
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    position: relative;
}

.center-palace {
    text-align: center;
    color: #ffd700;
}

.center-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.center-elements {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.element-item {
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: 6px;
    padding: 8px;
    font-size: 14px;
    font-weight: bold;
    color: #ffd700;
}

/* 宫位分析区域 */
.palace-analysis {
    background: linear-gradient(135deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.9) 100%);
    border: 2px solid rgba(212, 175, 55, 0.4);
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(212, 175, 55, 0.2);
    backdrop-filter: blur(15px);
    color: #d4af37;
}

.palace-analysis h3 {
    color: #ffd700;
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 2px;
    position: relative;
}

/* 覆盖宫位分析标题配色 */
.palace-analysis h3 {
    color: var(--hx-accent-1);
}

.palace-analysis h3::before,
.palace-analysis h3::after {
    content: '✦';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(212, 175, 55, 0.5);
    font-size: 16px;
}

/* 覆盖宫位分析装饰图标配色 */
.palace-analysis h3::before,
.palace-analysis h3::after {
    color: rgba(96, 165, 250, 0.5);
}

.palace-analysis h3::before {
    left: -30px;
}

.palace-analysis h3::after {
    right: -30px;
}

.palace-analysis-content {
    line-height: 1.8;
    font-size: 16px;
}

.palace-analysis-item {
    margin-bottom: 20px;
    padding: 20px;
    background: rgba(26, 26, 46, 0.6);
    border-radius: 12px;
    border-left: 4px solid #d4af37;
    border-right: 4px solid #d4af37;
    position: relative;
}

/* 覆盖宫位分析项目边框配色 */
.palace-analysis-item {
    border-left: 4px solid var(--hx-accent-1);
    border-right: 4px solid var(--hx-accent-1);
}

.palace-analysis-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #d4af37, transparent);
}

/* 覆盖宫位分析项目装饰线配色 */
.palace-analysis-item::before {
    background: linear-gradient(90deg, transparent, var(--hx-accent-1), transparent);
}

.palace-analysis-title {
    font-weight: bold;
    color: #ffd700;
    margin-bottom: 12px;
    font-size: 18px;
    letter-spacing: 1px;
}

/* 覆盖宫位分析项目标题配色 */
.palace-analysis-title {
    color: var(--hx-accent-1);
}

/* 操作按钮区域 */
.comprehensive-actions {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.back-detail-btn, .back-query-btn {
    flex: 1;
    padding: 16px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    letter-spacing: 1px;
}

.back-detail-btn {
    background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
    color: #1a1a2e;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.back-detail-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6);
}

.back-query-btn {
    background: rgba(26, 26, 46, 0.8);
    color: #d4af37;
    border: 2px solid rgba(212, 175, 55, 0.5);
}

.back-query-btn:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: #d4af37;
    transform: translateY(-2px);
}

/* 响应式设计 */
@media (max-width: 480px) {
    .chart-grid {
        max-width: 350px;
        gap: 1px;
    }
    
    .palace {
        padding: 6px;
        font-size: 10px;
    }
    
    .palace-name {
        font-size: 11px;
    }
    
    .palace-element {
        font-size: 9px;
        padding: 1px 4px;
    }
    
    .palace-desc {
        font-size: 9px;
    }
    
    .center-title {
        font-size: 12px;
    }
    
    .element-item {
        font-size: 12px;
        padding: 6px;
    }
    
    .comprehensive-actions {
        flex-direction: column;
    }
    
    .person-info-content {
        justify-content: center;
        gap: 10px;
    }
    
    .comprehensive-header h2 {
        font-size: 28px;
        letter-spacing: 2px;
    }
}

/* 宫位特殊效果 */
@keyframes palace-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.3); }
    50% { box-shadow: 0 0 15px rgba(212, 175, 55, 0.6); }
}

.palace.active {
    animation: palace-glow 2s ease-in-out infinite;
    border-color: #ffd700;
} 

.view-comprehensive-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #8b6914 0%, #b8860b 50%, #d4af37 100%);
    color: #1a1a2e;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(139, 105, 20, 0.4);
    font-family: inherit;
    letter-spacing: 1px;
    margin-top: 15px;
}

.view-comprehensive-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 105, 20, 0.6);
} 

/* ===================== Advanced Motion Layers (Non-intrusive) ===================== */
/* 1) 斜向流光带（蓝紫青混合，柔和扫动） */
.container::before {
    content: '';
    position: fixed;
    top: -25%;
    left: -25%;
    width: 150%;
    height: 150%;
    pointer-events: none;
    z-index: 0; /* 在内容之下，保留交互 */
    transform: rotate(10deg);
    background: linear-gradient(100deg,
        rgba(0,0,0,0) 0%,
        rgba(99,102,241,0.06) 36%,
        rgba(125,211,252,0.22) 50%,
        rgba(99,102,241,0.06) 64%,
        rgba(0,0,0,0) 100%);
    filter: blur(22px) saturate(120%);
    mix-blend-mode: screen;
    animation: ribbonSweep 20s cubic-bezier(.4,.0,.2,1) infinite;
}

/* ===================== High-end Indigo Palette Overrides ===================== */
/* 说明：以下仅为配色覆盖，统一去金黄，改为深靛蓝 + 青蓝高光 */
:root {
    --hx-bg-0: #0b1220;
    --hx-bg-1: #0f1b33;
    --hx-bg-2: #0e2247;
    --hx-text-1: #e6e9ef;
    --hx-text-2: #a5b4fc;
    --hx-muted: #94a3b8;
    --hx-accent-1: #7dd3fc;
    --hx-accent-2: #60a5fa;
    --hx-glass: rgba(15, 23, 42, 0.78);
    --hx-glass-strong: rgba(17, 24, 39, 0.9);
    --hx-stroke: rgba(148, 163, 184, 0.22);
}

body { color: var(--hx-text-1); background: radial-gradient(1000px 700px at 20% 10%, rgba(96,165,250,0.08), transparent 60%), radial-gradient(900px 700px at 80% 85%, rgba(125,211,252,0.08), transparent 60%), linear-gradient(160deg, var(--hx-bg-0), var(--hx-bg-1) 55%, var(--hx-bg-2)); }

.language-switch { background: rgba(2,6,23,0.6); border: 1px solid var(--hx-stroke); box-shadow: 0 8px 28px rgba(2,6,23,.6); }
.lang-btn { color: var(--hx-text-2); }
.lang-btn.active { background: linear-gradient(135deg, rgba(96,165,250,0.22), rgba(125,211,252,0.22)); color: var(--hx-text-1); box-shadow: 0 2px 10px rgba(96,165,250,0.3); }

.header { color: var(--hx-text-1); }
.header h1 { background: linear-gradient(135deg, var(--hx-accent-2), var(--hx-accent-1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 6px 30px rgba(2,6,23,.9); }
.subtitle { color: var(--hx-muted); }

.input-section, .result-card, .analysis-section, .fortune-section, .palace-analysis, .user-info-card, .star-chart { background: linear-gradient(180deg, var(--hx-glass-strong), rgba(2,6,23,.68)); border: 1px solid var(--hx-stroke); box-shadow: 0 16px 46px rgba(2,6,23,.65), inset 0 1px 0 rgba(255,255,255,0.02); color: var(--hx-text-1); }
.input-group label { color: var(--hx-text-2); }
.form-select, .date-select, .time-select { background: var(--hx-glass); border: 1px solid var(--hx-stroke); color: var(--hx-text-1); }
.form-select:focus, .date-select:focus, .time-select:focus { border-color: var(--hx-accent-2); box-shadow: 0 0 0 3px rgba(96,165,250,.22); background: rgba(15,23,42,.92); }
.form-select option, .date-select option, .time-select option { background: var(--hx-bg-0); color: var(--hx-text-1); }

.query-btn, .view-detail-btn, .query-again-btn, .back-detail-btn, .view-comprehensive-btn { background: linear-gradient(135deg, var(--hx-accent-2), var(--hx-accent-1)); color: #0b1220; box-shadow: 0 10px 26px rgba(96,165,250,.32); }
.query-btn:hover, .view-detail-btn:hover, .query-again-btn:hover, .back-detail-btn:hover, .view-comprehensive-btn:hover { box-shadow: 0 14px 36px rgba(96,165,250,.44); }
.back-btn, .back-query-btn { background: rgba(2,6,23,.35); color: var(--hx-text-1); border: 1px solid var(--hx-stroke); }
.back-btn:hover, .back-query-btn:hover { background: rgba(96,165,250,.12); border-color: var(--hx-accent-2); box-shadow: 0 10px 22px rgba(2,6,23,.6); }

.result-label { color: var(--hx-text-2); }
.result-item span:last-child { color: var(--hx-accent-1); }
.golden-text { background: linear-gradient(135deg, var(--hx-accent-2), var(--hx-accent-1)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.bagua-symbol { color: var(--hx-accent-1); }
.traditional-ornament { color: rgba(148,163,184,.42); }

/* 星盘宫位与中心信息去金黄描边，改冷色 */
.palace { background: rgba(15,23,42,0.86); border: 1px solid var(--hx-stroke); }
.palace:hover { border-color: var(--hx-accent-2); box-shadow: 0 4px 16px rgba(96,165,250,0.2); }
.palace-name { color: var(--hx-accent-1); }
.palace-element { background: linear-gradient(135deg, rgba(96,165,250,0.22), rgba(125,211,252,0.22)); color: var(--hx-text-1); }
.palace-desc { color: #9fb5ff; }
.center-info { background: linear-gradient(135deg, rgba(96,165,250,0.10), rgba(125,211,252,0.08)); border: 1px solid var(--hx-stroke); }
.center-palace { color: var(--hx-accent-1); }
.element-item { background: rgba(96,165,250,0.12); border: 1px solid rgba(96,165,250,0.3); color: var(--hx-text-1); }

/* 2) 视差星场（两层不同速度 + 轻微闪烁） */
.container::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg fill='%23bfe3ff' fill-opacity='0.75'%3E%3Ccircle cx='12' cy='18' r='1.0'/%3E%3Ccircle cx='40' cy='60' r='0.9'/%3E%3Ccircle cx='90' cy='30' r='1.1'/%3E%3Ccircle cx='130' cy='80' r='0.9'/%3E%3Ccircle cx='170' cy='18' r='0.8'/%3E%3Ccircle cx='200' cy='70' r='1.0'/%3E%3Ccircle cx='30' cy='140' r='1.1'/%3E%3Ccircle cx='80' cy='110' r='0.9'/%3E%3Ccircle cx='120' cy='150' r='1.0'/%3E%3Ccircle cx='160' cy='120' r='0.9'/%3E%3Ccircle cx='210' cy='160' r='0.8'/%3E%3Ccircle cx='50' cy='200' r='1.0'/%3E%3Ccircle cx='100' cy='190' r='0.9'/%3E%3Ccircle cx='150' cy='210' r='1.1'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cg fill='%23ffffff' fill-opacity='0.45'%3E%3Ccircle cx='25' cy='45' r='1.2'/%3E%3Ccircle cx='140' cy='30' r='1.0'/%3E%3Ccircle cx='210' cy='120' r='1.3'/%3E%3Ccircle cx='290' cy='50' r='1.0'/%3E%3Ccircle cx='60' cy='260' r='1.2'/%3E%3Ccircle cx='110' cy='180' r='1.0'/%3E%3Ccircle cx='180' cy='260' r='1.1'/%3E%3Ccircle cx='250' cy='230' r='1.0'/%3E%3Ccircle cx='300' cy='190' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 220px 220px, 320px 320px;
    background-repeat: repeat, repeat;
    mix-blend-mode: screen;
    opacity: 0.6;
    animation: starDrift 140s linear infinite, starTwinkle 4s ease-in-out infinite;
}

/* 3) 卡片流动描边高光（极细，环绕旋转） */
.input-section,
.result-card,
.analysis-section,
.fortune-section,
.palace-analysis,
.user-info-card,
.star-chart {
    position: relative;
    overflow: hidden;
}

.input-section::after,
.result-card::after,
.analysis-section::after,
.fortune-section::after,
.palace-analysis::after,
.user-info-card::after,
.star-chart::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: conic-gradient(from 0deg,
      rgba(96,165,250,0), rgba(96,165,250,0), rgba(96,165,250,0.35), rgba(96,165,250,0));
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    padding: 1px;
    filter: blur(0.5px);
    opacity: .55;
    pointer-events: none;
    animation: borderSheen 8s linear infinite;
}

/* 4) 文本微光（高亮数值与 golden-text 做细微流动） */
.golden-text {
    background-size: 200% auto;
    animation: textSheen 6s ease-in-out infinite;
}

/* Motion keyframes */
@keyframes ribbonSweep {
    0% { background-position: -180% 0; opacity: .5; }
    50% { background-position: 0% 0; opacity: .7; }
    100% { background-position: 180% 0; opacity: .5; }
}

@keyframes starDrift {
    0% { background-position: 0 0, 0 0; }
    100% { background-position: -900px -700px, -450px -350px; }
}

@keyframes starTwinkle {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.7; }
}

@keyframes borderSheen {
    to { transform: rotate(360deg); }
}

@keyframes textSheen {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}