/* ============================================
   中式禅意科技风 - 元素命理网样式系统
   Traditional Zen Tech Style - Elemental Numerology Network
   ============================================ */

/* ============================================
   一、色值系统（传统 + 科技双融合）
   ============================================ */
:root {
    /* 主色调（文化 + 科技） */
    --color-primary-traditional: #8B2323;  /* 深绛红 - 传统命理 */
    --color-primary-tech: #2E4057;         /* 柔和科技靛蓝 - AI 智能 */
    
    /* 背景色（科技+传统融合渐变 - 灰白系） */
    --color-bg-tech-start: #E8F0F6;        /* 淡蓝灰起始 - 科技感 */
    --color-bg-tech-mid: #F0F4F8;         /* 浅灰蓝中间 - 科技感柔和 */
    --color-bg-tech-end: #F5F5F5;         /* 淡灰白结束 - 中性灰白 */
    --color-bg-traditional-start: #F5F5F5; /* 淡灰白起始 - 中性灰白 */
    --color-bg-traditional-mid: #FAFAFA;   /* 灰白中间 - 中性灰白 */
    --color-bg-traditional-end: #F0F4F8;   /* 浅灰蓝结束 - 科技感 */
    
    /* 兼容性：保留原色值用于特殊场景 */
    --color-bg-tech: #F0F4F8;              /* 浅灰蓝 - 科技感柔和底色 */
    --color-bg-traditional: #FAFAFA;       /* 灰白 - 中性灰白 */
    
    /* 强调色（科技亮点） */
    --color-accent-gold-start: #D4AF37;    /* 鎏金渐变起始 */
    --color-accent-gold-end: #F0E68C;       /* 鎏金渐变结束 */
    
    /* 文字色 */
    --color-text-main: #1A1A1A;            /* 墨黑 - 正文 */
    --color-text-ai: #5C6E82;              /* 浅靛蓝 - AI 功能说明 */
    
    /* 科技辅助色 */
    --color-tech-fluorescent: #8CC1E0;     /* 淡蓝荧光 - 数据线条、动效粒子 */
    
    /* 渐变组合 */
    --gradient-primary: linear-gradient(135deg, var(--color-primary-traditional) 0%, var(--color-primary-tech) 100%);
    --gradient-gold: linear-gradient(135deg, var(--color-accent-gold-start) 0%, var(--color-accent-gold-end) 100%);
    
    /* 背景渐变（科技+传统融合） */
    --gradient-bg-main: linear-gradient(180deg, 
        var(--color-bg-tech-start) 0%, 
        var(--color-bg-tech-mid) 30%, 
        var(--color-bg-tech-end) 60%,
        var(--color-bg-traditional-mid) 100%
    );
    
    --gradient-bg-card: linear-gradient(135deg, 
        var(--color-bg-traditional-start) 0%, 
        var(--color-bg-traditional-mid) 50%, 
        var(--color-bg-tech-mid) 100%
    );
    
    --gradient-bg-card-reverse: linear-gradient(225deg, 
        var(--color-bg-tech-start) 0%, 
        var(--color-bg-tech-mid) 50%, 
        var(--color-bg-traditional-mid) 100%
    );
    
    /* 微妙的径向渐变（用于特殊区域 - 灰白系） */
    --gradient-bg-radial: radial-gradient(ellipse at center, 
        rgba(232, 240, 246, 0.8) 0%, 
        rgba(240, 244, 248, 0.6) 40%,
        rgba(245, 245, 245, 0.4) 100%
    );
}

/* ============================================
   二、字体系统（传统与科技字体混搭）
   ============================================ */

/* 引入思源字体 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@400;500;600;700&display=swap');

/* 字体变量 */
:root {
    --font-traditional: 'Noto Serif SC', 'Source Han Serif SC', '思源宋体', serif;
    --font-tech: 'Noto Sans SC', 'Source Han Sans SC', '思源黑体', sans-serif;
}

/* 基础字体设置 */
body {
    font-family: var(--font-traditional);
    color: var(--color-text-main);
    background: var(--gradient-bg-main);
    background-attachment: fixed;
    min-height: 100vh;
    line-height: 1.6;
    position: relative;
}

/* 为body添加微妙的纹理叠加 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        url('data:image/svg+xml,<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="zen-pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="0.5" fill="rgba(139,35,35,0.02)"/><line x1="0" y1="20" x2="40" y2="20" stroke="rgba(46,64,87,0.03)" stroke-width="0.5"/><line x1="20" y1="0" x2="20" y2="40" stroke="rgba(46,64,87,0.03)" stroke-width="0.5"/></pattern></defs><rect width="200" height="200" fill="url(%23zen-pattern)"/></svg>');
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
}

body > * {
    position: relative;
    z-index: 1;
}

/* H1 - 首页大标题（28px 思源宋体 + 鎏金渐变细描边） */
h1, .h1-title {
    font-family: var(--font-traditional);
    font-size: 28px;
    font-weight: 600;
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 2px rgba(212, 175, 55, 0.3);
    letter-spacing: 1px;
}

/* H2 - 板块标题（22px 思源宋体） */
h2, .h2-section {
    font-family: var(--font-traditional);
    font-size: 22px;
    font-weight: 600;
    color: var(--color-primary-traditional);
    letter-spacing: 0.5px;
}

/* AI 功能标题（19px 思源黑体） */
.ai-title, .h3-ai {
    font-family: var(--font-tech);
    font-size: 19px;
    font-weight: 600;
    color: var(--color-primary-tech);
    letter-spacing: 0.3px;
}

/* 正文（传统功能说明 - 16px 思源宋体） */
p, .text-traditional {
    font-family: var(--font-traditional);
    font-size: 16px;
    color: var(--color-text-main);
    line-height: 1.8;
}

/* AI 数据说明（16px 思源黑体） */
.ai-text, .text-ai {
    font-family: var(--font-tech);
    font-size: 16px;
    color: var(--color-text-ai);
    line-height: 1.7;
}

/* 辅助文字（12px 思源黑体） */
.small-text, .text-auxiliary {
    font-family: var(--font-tech);
    font-size: 12px;
    color: var(--color-text-ai);
}

/* ============================================
   三、排版结构（科技模块 + 传统功能区）
   ============================================ */

/* 首屏 - AI 核心展示 */
.ai-hero-section {
    background: var(--gradient-primary);
    padding: 40px 20px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.ai-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(140, 193, 224, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.ai-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.ai-hero-left {
    flex: 1;
    min-width: 300px;
    text-align: center;
}

.ai-hero-right {
    flex: 1;
    min-width: 300px;
}

/* 罗盘图标 + AI 数据流动效 */
.compass-ai-icon {
    position: relative;
    display: inline-block;
    width: 80px;
    height: 80px;
    margin-right: 20px;
}

.compass-ai-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border: 2px solid var(--color-tech-fluorescent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: compass-pulse 2s ease-in-out infinite;
    opacity: 0.6;
}

@keyframes compass-pulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.3;
    }
}

/* 核心功能区 - 科技容器 + 传统图标卡片 */
.zen-tech-card {
    background: var(--gradient-bg-card);
    border: 1px solid transparent;
    border-image: linear-gradient(135deg, var(--color-primary-tech), var(--color-tech-fluorescent)) 1;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(46, 64, 87, 0.08);
}

/* 卡片背景 - 渐变 + 淡水墨纹理 */
.zen-tech-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="ink" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(139,35,35,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23ink)"/></svg>'),
        var(--gradient-bg-card);
    opacity: 0.6;
    pointer-events: none;
    z-index: 0;
}

.zen-tech-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(46, 64, 87, 0.15);
}

/* 卡片 hover 时边缘闪过鎏金渐变光效 */
.zen-tech-card::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: var(--gradient-gold);
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.zen-tech-card:hover::after {
    opacity: 0.3;
    animation: gold-shimmer 1.5s ease-in-out infinite;
}

@keyframes gold-shimmer {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

/* 卡片图标容器 */
.zen-tech-card-icon {
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
}

/* 传统图标 + 半透明科技网格底纹 */
.zen-tech-card-icon img {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 2px 4px rgba(46, 64, 87, 0.1));
}

.zen-tech-card-icon::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background-image: 
        linear-gradient(rgba(140, 193, 224, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(140, 193, 224, 0.1) 1px, transparent 1px);
    background-size: 10px 10px;
    opacity: 0.5;
    z-index: 1;
}

/* 卡片标题 */
.zen-tech-card-title {
    font-family: var(--font-traditional);
    font-size: 22px;
    font-weight: 600;
    color: var(--color-primary-traditional);
    margin-bottom: 10px;
}

/* 卡片描述 */
.zen-tech-card-text {
    font-family: var(--font-traditional);
    font-size: 16px;
    color: var(--color-text-main);
    line-height: 1.8;
}

/* 布局：PC 端 2 列，移动端 1 列 */
.zen-tech-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 20px 0;
}

@media (max-width: 768px) {
    body {
        padding: 3px !important;
    }
    .container {
        padding: 2px !important;
    }
    .zen-tech-grid {
        grid-template-columns: 1fr;
    }
    
    .ai-hero-content {
        flex-direction: column;
    }

    #ResultGrid {
        padding: 5px !important;
    }
    .pagination .page-item .page-link {
        padding: 8px 10px !important;
    }
}

/* ============================================
   四、导航栏样式（绛红→靛蓝弱渐变）
   ============================================ */

/* 导航栏背景渐变 */
.menu_pic_backgrid {
    background: var(--gradient-primary) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(46, 64, 87, 0.1);
}

#nav {
    background: transparent;
}

#nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

#nav li {
    list-style: none;
    float: none;
    flex: 1;
}

#nav li a {
    display: block;
    padding: 12px 10px;
    color: rgba(255, 255, 255, 0.95) !important;
    text-align: center;
    text-decoration: none;
    font-family: var(--font-traditional);
    font-size: 18px;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

#nav li:first-child a {
    border-left: none;
}

#nav li a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-gold);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

#nav li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff !important;
}

#nav li a:hover::before {
    transform: scaleX(1);
}

/* ============================================
   五、AI 融合模块
   ============================================ */

.ai-fusion-section {
    background: var(--gradient-bg-card-reverse);
    padding: 30px;
    margin: 30px 0;
    border-radius: 8px;
    border: 1px solid rgba(140, 193, 224, 0.3);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(46, 64, 87, 0.08);
}

.ai-fusion-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-bg-radial);
    opacity: 0.25;
    pointer-events: none;
    z-index: 0;
}

.ai-fusion-section > * {
    position: relative;
    z-index: 1;
}

/* AI 智能合婚 - 数据可视化图表 */
.ai-marriage-chart {
    background: white;
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
    box-shadow: 0 2px 8px rgba(46, 64, 87, 0.1);
}

/* AI 名字评分 - 鎏金粒子动效 */
.ai-name-rating {
    position: relative;
    padding: 20px;
    background: var(--gradient-bg-card);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(46, 64, 87, 0.08);
}

.ai-name-rating::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    animation: particle-float 3s ease-in-out infinite;
}

@keyframes particle-float {
    0%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.1;
    }
    50% {
        transform: translateY(-10px) scale(1.1);
        opacity: 0.2;
    }
}

/* ============================================
   六、辅助工具区（浅灰蓝科技卡片）
   ============================================ */

.tool-card {
    background: var(--gradient-bg-card-reverse);
    border: 1px solid rgba(140, 193, 224, 0.3);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(46, 64, 87, 0.08);
}

.tool-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-bg-radial);
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}

.tool-card > * {
    position: relative;
    z-index: 1;
}

.tool-card:hover {
    border-color: var(--color-tech-fluorescent);
    box-shadow: 0 4px 12px rgba(140, 193, 224, 0.2);
}

.tool-card-icon {
    position: relative;
    display: inline-block;
    margin-bottom: 10px;
}

/* 古籍 + AI 搜索线条 */
.tool-card-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-tech-fluorescent), transparent);
    transform: translate(-50%, -50%) rotate(45deg);
    opacity: 0.5;
    animation: search-line 2s ease-in-out infinite;
}

@keyframes search-line {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) rotate(45deg) scale(0.8);
    }
    50% {
        opacity: 0.7;
        transform: translate(-50%, -50%) rotate(45deg) scale(1.2);
    }
}

.tool-card-title {
    font-family: var(--font-tech);
    font-size: 19px;
    font-weight: 600;
    color: var(--color-primary-tech);
    margin-bottom: 8px;
}

.tool-card-text {
    font-family: var(--font-tech);
    font-size: 16px;
    color: var(--color-text-ai);
    line-height: 1.7;
}

/* ============================================
   七、视觉细节（科技感 × 传统文化的落地）
   ============================================ */

/* 页面加载动画 - 淡金色粒子组成罗盘轮廓 */
@keyframes page-load {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.page-loading {
    animation: page-load 1s ease-out;
}

/* 功能按钮 - 点击时触发绛红→靛蓝渐变光效扩散 */
.zen-tech-button {
    display: inline-block;
    padding: 12px 24px;
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-family: var(--font-tech);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.zen-tech-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.zen-tech-button:active::before {
    width: 300px;
    height: 300px;
}

.zen-tech-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(46, 64, 87, 0.3);
}

/* AI 解析区 - 展示命理数据时用淡蓝线条模拟数据流动 */
.ai-data-flow {
    position: relative;
    padding: 20px;
    background: var(--gradient-bg-card);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(46, 64, 87, 0.08);
}

.ai-data-flow::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(140, 193, 224, 0.3), transparent);
    animation: data-flow 3s ease-in-out infinite;
}

@keyframes data-flow {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* 装饰元素 - 水墨晕染 + 科技线条做板块分隔 */
.section-divider {
    position: relative;
    margin: 40px 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(139, 35, 35, 0.2) 20%,
        rgba(140, 193, 224, 0.3) 50%,
        rgba(139, 35, 35, 0.2) 80%,
        transparent 100%
    );
}

.section-divider::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--gradient-gold);
    border-radius: 2px;
    opacity: 0.6;
}

/* 图标角落的淡蓝荧光点 */
.zen-tech-icon-dot {
    position: relative;
}

.zen-tech-icon-dot::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 6px;
    height: 6px;
    background: var(--color-tech-fluorescent);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--color-tech-fluorescent);
    animation: dot-pulse 2s ease-in-out infinite;
}

@keyframes dot-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.3);
    }
}

/* 其他系统图标样式优化 */
.other-system-item {
    text-align: center;
    padding: 15px;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.other-system-item:hover {
    background: rgba(140, 193, 224, 0.1);
    transform: translateY(-3px);
}

.other-system-item img {
    filter: drop-shadow(0 2px 4px rgba(46, 64, 87, 0.1));
    transition: filter 0.3s ease;
}

.other-system-item:hover img {
    filter: drop-shadow(0 4px 8px rgba(140, 193, 224, 0.3));
}

/* 热门排盘系统卡片 */
.popular-system-card {
    background: var(--gradient-bg-card);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    padding: 25px;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(46, 64, 87, 0.1);
}

.popular-system-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
    animation: card-glow 4s ease-in-out infinite;
}

@keyframes card-glow {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
}

.popular-system-card-content {
    position: relative;
    z-index: 1;
}

/* 客服中心菜单样式 */
.menu {
    background: var(--gradient-bg-card);
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(46, 64, 87, 0.08);
}

.menu::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-bg-radial);
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}

.menu > * {
    position: relative;
    z-index: 1;
}

.menu h3 {
    font-family: var(--font-traditional);
    font-size: 24px;
    color: var(--color-primary-traditional);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(139, 35, 35, 0.2);
}

.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: none;
}

.menu li {
    margin-bottom: 8px;
}

.menu li a {
    display: block;
    padding: 10px 15px;
    color: var(--color-text-main);
    text-decoration: none;
    font-family: var(--font-traditional);
    font-size: 16px;
    border-radius: 4px;
    transition: all 0.3s ease;
    position: relative;
    padding-left: 35px;
}

.menu li a::before {
    content: '→';
    position: absolute;
    left: 15px;
    color: var(--color-primary-tech);
    transition: transform 0.3s ease;
}

.menu li a:hover {
    background: rgba(140, 193, 224, 0.1);
    color: var(--color-primary-tech);
    padding-left: 40px;
}

.menu li a:hover::before {
    transform: translateX(3px);
}

/* 页脚样式 */
footer {
    background: var(--gradient-bg-card);
    padding: 20px;
    margin-top: 40px;
    border-top: 1px solid rgba(140, 193, 224, 0.2);
    position: relative;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent 0%,
        var(--color-primary-traditional) 20%,
        var(--color-tech-fluorescent) 50%,
        var(--color-primary-traditional) 80%,
        transparent 100%
    );
    opacity: 0.3;
}

/* 响应式优化 */
@media (max-width: 1199px) {
    .zen-tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   八、通用页面样式（表单、标题、按钮等）
   ============================================ */

/* 页面标题样式 */
.contentspan_title {
    font-family: var(--font-traditional);
    font-size: 24px;
    font-weight: 600;
    color: var(--color-primary-traditional);
    padding: 15px 0;
    border-bottom: 2px solid rgba(139, 35, 35, 0.2);
    display: block;
    text-align: center;
    position: relative;
}

.contentspan_title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 2px;
    background: var(--gradient-gold);
}

/* 表单容器样式 */
.tablebg-orangeyellow-font18 {
    background: var(--gradient-bg-card) !important;
    border: 1px solid rgba(140, 193, 224, 0.3) !important;
    border-radius: 8px;
    padding: 20px !important;
    margin: 20px 0 !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(46, 64, 87, 0.08);
}

.tablebg-orangeyellow-font18::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="ink" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(139,35,35,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23ink)"/></svg>');
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
}

.tablebg-orangeyellow-font18 > * {
    position: relative;
    z-index: 1;
}

/* 表单标签样式 */
.col-form-label {
    font-family: var(--font-traditional);
    font-size: 16px;
    color: var(--color-text-main);
    font-weight: 500;
}

legend.col-form-label {
    font-family: var(--font-traditional);
    font-size: 16px;
    color: var(--color-text-main);
}

/* 表单输入框样式 */
.form-control,
.form-select {
    border: 1px solid rgba(140, 193, 224, 0.3);
    border-radius: 4px;
    padding: 8px 12px;
    font-family: var(--font-tech);
    font-size: 14px;
    color: var(--color-text-main);
    transition: all 0.3s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-tech-fluorescent);
    box-shadow: 0 0 0 3px rgba(140, 193, 224, 0.1);
    outline: none;
}

/* 单选按钮和复选框样式 */
.form-check-input {
    border-color: var(--color-primary-tech);
}

.form-check-input:checked {
    background-color: var(--color-primary-traditional);
    border-color: var(--color-primary-traditional);
}

.form-check-label {
    font-family: var(--font-traditional);
    font-size: 16px;
    color: var(--color-text-main);
    margin-left: 5px;
}

/* 提交按钮样式 */
.btn-primary,
input[type="submit"],
button[type="submit"],
#btnok {
    background: var(--gradient-primary) !important;
    border: none !important;
    color: white !important;
    padding: 12px 30px !important;
    font-family: var(--font-tech) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.btn-primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
#btnok:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(46, 64, 87, 0.3);
}

.btn-primary:active,
input[type="submit"]:active,
button[type="submit"]:active,
#btnok:active {
    transform: translateY(0);
}

/* 链接样式 */
a {
    color: var(--color-primary-tech);
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--color-primary-traditional);
    text-decoration: underline;
}

a[href*="login"],
a[href*="register"] {
    color: var(--color-primary-traditional);
    font-weight: 500;
}

/* 系统说明区域 */
.readme_system,
.readme3,
.readme5 {
    background: var(--gradient-bg-card-reverse) !important;
    border: 1px solid rgba(140, 193, 224, 0.3) !important;
    border-radius: 8px;
    padding: 20px !important;
    margin: 20px 0 !important;
    font-family: var(--font-traditional);
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text-main);
    position: relative;
    overflow: hidden;
}

.readme_system::before,
.readme3::before,
.readme5::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-bg-radial);
    opacity: 0.2;
    pointer-events: none;
    z-index: 0;
}

.readme_system > *,
.readme3 > *,
.readme5 > * {
    position: relative;
    z-index: 1;
}

/* 注意事项/备注样式 */
.notes-section,
.remarks-section {
    background: rgba(212, 175, 55, 0.05);
    border-left: 3px solid var(--color-accent-gold-start);
    padding: 15px;
    margin: 20px 0;
    border-radius: 4px;
    font-family: var(--font-traditional);
    font-size: 14px;
    line-height: 1.8;
    color: var(--color-text-main);
}

/* 功能菜单按钮区域 */
.label-buttons {
    display: flex;
    gap: 10px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.label-buttons img {
    transition: transform 0.3s ease;
    border-radius: 4px;
}

.label-buttons img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(46, 64, 87, 0.2);
}

/* 分析内容列表 */
.analysis-content-list {
    background: var(--gradient-bg-card-reverse);
    border: 1px solid rgba(140, 193, 224, 0.3);
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(46, 64, 87, 0.08);
}

.analysis-content-list::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-bg-radial);
    opacity: 0.25;
    pointer-events: none;
    z-index: 0;
}

.analysis-content-list > * {
    position: relative;
    z-index: 1;
}

.analysis-content-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.analysis-content-list li {
    padding: 8px 0;
    padding-left: 25px;
    position: relative;
    font-family: var(--font-traditional);
    font-size: 16px;
    color: var(--color-text-main);
}

.analysis-content-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--color-primary-tech);
}

/* 响应式优化 */
@media (max-width: 767px) {
    h1, .h1-title {
        font-size: 24px;
    }
    
    h2, .h2-section {
        font-size: 20px;
    }
    
    .zen-tech-card {
        padding: 15px;
    }
    
    .ai-hero-section {
        padding: 30px 15px;
    }
    
    .contentspan_title {
        font-size: 20px;
        padding: 10px 0;
    }
    
    .tablebg-orangeyellow-font18 {
        padding: 15px !important;
    }
    
    .col-form-label {
        font-size: 14px;
    }
}

/* ============================================
   九、结果页面样式（Result Pages）
   ============================================ */

/* 结果容器 */
#ResultSec {
    margin: 20px 0;
    padding: 0;
    position: relative;
}

#ResultGrid {
    background: var(--gradient-bg-card);
    border: 1px solid rgba(140, 193, 224, 0.3);
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(46, 64, 87, 0.1);
}

#ResultGrid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="ink" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(139,35,35,0.03)"/></pattern></defs><rect width="100" height="100" fill="url(%23ink)"/></svg>');
    opacity: 0.4;
    pointer-events: none;
    z-index: 0;
}

#ResultGrid > * {
    position: relative;
    z-index: 1;
}

/* 结果内容 */
.ResultContent {
    font-family: var(--font-traditional);
    font-size: 16px;
    line-height: 1.8;
    color: var(--color-text-main);
    margin: 10px 0;
}

/* 分页导航样式 */
.pagination {
    margin: 20px 0;
}

.pagination .page-item .page-link {
    color: var(--color-primary-tech);
    border: 1px solid rgba(140, 193, 224, 0.3);
    padding: 8px 16px;
    margin: 0 2px;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-family: var(--font-traditional);
    font-size: 14px;
}

.pagination .page-item .page-link:hover {
    background: var(--gradient-bg-card-reverse);
    border-color: var(--color-tech-fluorescent);
    color: var(--color-primary-traditional) !important;
    transform: translateY(-2px);
    box-shadow: 0 2px 4px rgba(140, 193, 224, 0.2);
}

.pagination .page-item.disabled .page-link {
    color: var(--color-text-ai);
    background: transparent;
    border-color: rgba(140, 193, 224, 0.2);
    cursor: not-allowed;
}

/* 结果表格样式 */
.result-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(46, 64, 87, 0.1);
}

.result-table th {
    background: var(--gradient-primary);
    color: white;
    padding: 12px;
    text-align: center;
    font-family: var(--font-traditional);
    font-size: 16px;
    font-weight: 600;
}

.result-table td {
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid rgba(140, 193, 224, 0.2);
    font-family: var(--font-traditional);
    font-size: 15px;
    color: var(--color-text-main);
}

.result-table tr:last-child td {
    border-bottom: none;
}

.result-table tr:hover {
    background: rgba(140, 193, 224, 0.05);
}

/* 分析结果卡片 */
.analysis-result-card {
    background: var(--gradient-bg-card-reverse);
    border: 1px solid rgba(140, 193, 224, 0.3);
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
    position: relative;
    box-shadow: 0 2px 6px rgba(46, 64, 87, 0.08);
}

.analysis-result-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-gold);
    border-radius: 4px 0 0 4px;
}

.analysis-result-card h3 {
    font-family: var(--font-traditional);
    font-size: 20px;
    color: var(--color-primary-traditional);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(139, 35, 35, 0.2);
}

/* AI解析按钮 */
.ai-analysis-button {
    background: var(--gradient-gold);
    border: none;
    color: var(--color-text-main);
    padding: 12px 30px;
    font-family: var(--font-tech);
    font-size: 16px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

.ai-analysis-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

/* AI深度推理区域 */
.ai-deep-reasoning {
    background: var(--gradient-bg-card);
    border: 2px solid var(--color-accent-gold-start);
    border-radius: 8px;
    padding: 25px;
    margin: 30px 0;
    position: relative;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.15);
}

.ai-deep-reasoning h3 {
    font-family: var(--font-traditional);
    font-size: 22px;
    color: var(--color-primary-traditional);
    margin-bottom: 15px;
}

.ai-deep-reasoning .ai-intro {
    font-family: var(--font-tech);
    font-size: 16px;
    color: var(--color-text-ai);
    line-height: 1.8;
    margin-bottom: 20px;
    padding: 15px;
    background: rgba(140, 193, 224, 0.05);
    border-radius: 6px;
    border-left: 3px solid var(--color-tech-fluorescent);
}

.ai-deep-reasoning .question-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.ai-deep-reasoning .question-list li {
    padding: 10px 0;
    padding-left: 25px;
    position: relative;
    font-family: var(--font-tech);
    font-size: 15px;
    color: var(--color-text-ai);
    border-bottom: 1px solid rgba(140, 193, 224, 0.2);
}

.ai-deep-reasoning .question-list li::before {
    content: '●';
    position: absolute;
    left: 0;
    color: var(--color-tech-fluorescent);
    font-size: 12px;
}

/* 结果数据高亮 */
.result-highlight {
    color: var(--color-primary-traditional);
    font-weight: 600;
    background: rgba(139, 35, 35, 0.1);
    padding: 2px 6px;
    border-radius: 3px;
}

.result-good {
    color: #47a143;
    font-weight: 600;
}

.result-bad {
    color: #c04845;
    font-weight: 600;
}

/* 结果内容标题样式 */
.ResultContent_title {
    font-family: var(--font-traditional);
    font-size: 20px;
    font-weight: 600;
    color: var(--color-primary-traditional);
    padding: 10px 0;
    border-bottom: 2px solid rgba(139, 35, 35, 0.2);
    display: inline-block;
    margin: 20px 0 15px 0;
    position: relative;
}

.ResultContent_title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: var(--gradient-gold);
}

.ResultContent_title a {
    color: inherit;
    text-decoration: none;
}

.ResultContent_title a:hover {
    color: var(--color-primary-traditional);
    text-decoration: none;
}