* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #0a192f, #112240, #0a192f);
            color: #e6f1ff;
            min-height: 100vh;
            overflow-x: hidden;
            position: relative;
            cursor: default;
        }
        
        /* 背景粒子效果 */
        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(64, 224, 208, 0.1) 0%, transparent 20%),
                radial-gradient(circle at 90% 80%, rgba(32, 178, 170, 0.1) 0%, transparent 20%),
                radial-gradient(circle at 50% 50%, rgba(0, 206, 209, 0.05) 0%, transparent 50%);
            z-index: -1;
        }
        
        /* 流星雨Canvas */
        #meteorCanvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
        
        /* 新增：螺旋粒子容器 */
        #spiralParticles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0; /* 介于背景和内容之间 */
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
            z-index: 1;
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
            position: relative;
        }
        
        h1 {
            font-size: 3.5rem;
            font-weight: bold;
            color: #64ffda;
            text-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
            margin-bottom: 10px;
            letter-spacing: 2px;
        }
        
        .subtitle {
            font-size: 1.2rem;
            color: #8892b0;
            margin-bottom: 30px;
        }
        
        /* 2D/3D切换按钮 */
        .view-toggle {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(10, 25, 47, 0.7);
            border: 1px solid #64ffda;
            border-radius: 30px;
            padding: 8px 16px;
            color: #64ffda;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            box-shadow: 0 0 10px rgba(100, 255, 218, 0.3);
            z-index: 100;
        }
        
        .view-toggle:hover {
            background: rgba(100, 255, 218, 0.1);
            transform: translateY(-2px);
            box-shadow: 0 0 15px rgba(100, 255, 218, 0.5);
        }
        
        /* 左上角返回主页按钮样式 */
        .home-button {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(10, 25, 47, 0.7);
            border: 1px solid #ffaa66;
            border-radius: 30px;
            padding: 8px 16px;
            color: #ffddbb;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
            box-shadow: 0 0 10px rgba(255, 170, 102, 0.3);
            z-index: 100;
            backdrop-filter: blur(5px);
            font-size: 14px;
        }
        
        .home-button:hover {
            background: rgba(255, 136, 77, 0.8);
            color: white;
            border-color: white;
            transform: translateY(-2px);
            box-shadow: 0 0 15px rgba(255, 136, 77, 0.6);
        }
        
        /* 族序数容器 */
        .group-numbers {
            display: grid;
            grid-template-columns: repeat(18, 1fr);
            gap: 8px;
            margin-bottom: 10px;
            perspective: 1200px;
            transform-style: preserve-3d;
        }
        
        .group-number {
            text-align: center;
            padding: 8px 0;
            font-weight: bold;
            color: #64ffda;
            background: rgba(23, 42, 69, 0.5);
            border-radius: 4px;
            border: 1px solid rgba(100, 255, 218, 0.3);
            transition: all 0.3s ease;
        }
        
        .group-number:hover {
            background: rgba(100, 255, 218, 0.1);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(100, 255, 218, 0.2);
        }
        
        /* 周期表容器 */
        .periodic-table {
            display: grid;
            grid-template-columns: repeat(18, 1fr);
            grid-template-rows: repeat(10, 1fr);
            gap: 8px;
            perspective: 1200px;
            transform-style: preserve-3d;
            transition: transform 0.8s ease;
            margin-bottom: 40px;
        }
        
        /* 2D视图 */
        .periodic-table.flat {
            transform: rotateX(0) rotateY(0) rotateZ(0);
        }
        
        /* 3D视图 */
        .periodic-table.three-d {
            transform: rotateX(30deg) rotateY(0deg);
        }
        
        /* 元素单元格 */
        .element {
            position: relative;
            background: rgba(23, 42, 69, 0.7);
            border-radius: 6px;
            padding: 12px 6px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid rgba(100, 255, 218, 0.2);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transform-style: preserve-3d;
            overflow: hidden;
            min-height: 90px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        /* 元素悬停效果 */
        .element:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 20px rgba(100, 255, 218, 0.4);
            z-index: 10;
            border-color: #64ffda;
        }
        
        /* 3D视图中的悬停凹陷效果 */
        .periodic-table.three-d .element:hover {
            transform: translateZ(-20px) scale(0.95);
            box-shadow: 0 0 30px rgba(100, 255, 218, 0.6);
        }
        
        /* 拖尾效果 */
        .element::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 100%;
            height: 10px;
            background: linear-gradient(to top, rgba(100, 255, 218, 0.4), transparent);
            border-radius: 50%;
            filter: blur(5px);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .element:hover::after {
            opacity: 1;
        }
        
        /* 点击突出效果 */
        .element.active {
            transform: translateZ(40px) scale(1.1);
            box-shadow: 0 0 40px rgba(100, 255, 218, 0.8);
            z-index: 20;
            border-color: #64ffda;
        }
        
        /* 原子序数 */
        .atomic-number {
            position: absolute;
            top: 5px;
            left: 5px;
            font-size: 0.8rem;
            color: #ffffff;
        }
        
        /* 元素符号 */
        .symbol {
            font-size: 1.6rem;
            font-weight: bold;
            margin-bottom: 5px;
            color: #e6f1ff;
        }
        
        /* 元素名称 */
        .name {
            font-size: 1.0rem;
            color: #ffffff;
            margin-bottom: 5px;
        }
        
        /* 原子量 */
        .atomic-mass {
            font-size: 0.7rem;
            color: #8892b0;
        }
        
        /* 元素分区颜色 */
        .s-block { background: rgba(253, 255, 137, 0.792); }
        .p-block { background: rgb(124, 203, 245); }
        .ds-block { background: rgba(255, 100, 100, 0.379); }
        .d-block { background: rgba(255, 100, 100, 0.2); }
        .f-block { background: rgba(255, 200, 100, 0.2); }
        .o-block { background: rgb(255, 158, 202); }
        
        /* 详细信息卡片 单击元素卡片后的弹窗*/
        .info-card {
            position: fixed;
            width: 320px;
            background: rgba(23, 42, 69, 0.9);
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(100, 255, 218, 0.3);
            backdrop-filter: blur(10px);
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.5s ease;
        }
        
        .info-card.active {
            opacity: 1;
            visibility: visible;
        }
        
        .info-card h2 {
            color: #64ffda;
            margin-bottom: 15px;
            text-align: center;
            border-bottom: 1px solid rgba(100, 255, 218, 0.3);
            padding-bottom: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .info-card h2:hover {
            color: #ffffff;
            text-shadow: 0 0 10px rgba(100, 255, 218, 0.7);
        }
        
        .property {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            padding: 5px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .property-label {
            color: #8892b0;
        }
        
        .property-value {
            color: #e6f1ff;
            font-weight: 500;
        }
        
        /* 电子排布和晶体类型交互 */
        .property.interactive {
            cursor: pointer;
            transition: all 0.3s ease;
            border-radius: 4px;
            padding: 5px 10px;
        }
        
        .property.interactive:hover {
            background: rgba(100, 255, 218, 0.1);
        }
        
        .sub-info-card {
            position: absolute;
            right: -320px;
            top: 0;
            width: 300px;
            background: rgba(10, 25, 47, 0.95);
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(100, 255, 218, 0.3);
            backdrop-filter: blur(10px);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 1001;
        }
        
        /* 当info-card在右侧时，sub-info-card显示在左侧 */
        .info-card.right-edge .sub-info-card {
            right: auto;
            left: -320px;
        }
        
        .property.interactive:hover .sub-info-card {
            opacity: 1;
            visibility: visible;
        }
        
        .sub-info-card h3 {
            color: #64ffda;
            text-align: center;
            margin-bottom: 10px;
            font-size: 1.1rem;
        }
        
        .electron-config {
            font-family: monospace;
            background: rgba(0, 0, 0, 0.3);
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 10px;
        }
        
        /* 电子排布图容器 */
        .electron-config-diagram {
            width: 100%;
            height: 160px;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 5px;
            margin-bottom: 10px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(100, 255, 218, 0.2);
        }
        
        /* 路易斯电子点式图容器 */
        .lewis-dot-container {
            width: 100%;
            height: 120px;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 5px;
            margin-bottom: 10px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(100, 255, 218, 0.2);
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.3s ease;
        }
        
        .lewis-dot-container.active {
            opacity: 1;
            transform: translateY(0);
        }
        
        /* 路易斯电子点式图 */
        .lewis-dot {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            width: 150px;
            height: 100px;
        }
        
        .lewis-symbol {
            font-size: 32px;
            font-weight: bold;
            color: #64ffda;
            text-align: center;
            z-index: 2;
            text-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
        }
        
        /* 电子点 */
        .lewis-electron {
            position: absolute;
            width: 14px;
            height: 14px;
            background: #ffffff;
            border-radius: 50%;
            box-shadow: 0 0 8px rgba(100, 255, 218, 0.8), 0 0 15px rgba(100, 255, 218, 0.4);
            z-index: 1;
            transition: all 0.2s ease;
            border: 2px solid rgba(100, 255, 218, 0.6);
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .lewis-dot-container {
                height: 80px;
            }
            
            .lewis-dot {
                width: 100px;
                height: 60px;
            }
            
            .lewis-symbol {
                font-size: 20px;
            }
            
            .lewis-electron {
                width: 8px;
                height: 8px;
            }
        }
        
        .electron-config-diagram svg {
            width: 100%;
            height: 100%;
        }
        
        /* 晶体结构3D容器 */
        .crystal-structure {
            width: 100%;
            height: 180px;
            background: rgba(0, 0, 0, 0.4);
            border-radius: 5px;
            margin-bottom: 10px;
            position: relative;
            cursor: grab;
            overflow: hidden;
            border: 1px solid rgba(100, 255, 218, 0.2);
        }
        
        .crystal-structure:active {
            cursor: grabbing;
        }
        
        .crystal-3d-container {
            width: 100%;
            height: 100%;
            position: relative;
        }
        
        .crystal-3d-container canvas {
            width: 100% !important;
            height: 100% !important;
        }
        
        /* 旧的CSS 3D样式保留兼容 */
        .crystal-3d-wrapper {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            perspective: inherit;
            transform-style: preserve-3d;
        }
        
        .crystal-3d {
            width: 140px;
            height: 140px;
            transform-style: preserve-3d;
            transition: transform 0.05s ease-out;
            position: relative;
        }
        
        .crystal-face {
            position: absolute;
            width: 60px;
            height: 60px;
            background: rgba(100, 255, 218, 0.4);
            border: 1px solid rgba(100, 255, 218, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #64ffda;
            font-size: 0.7rem;
            font-weight: 600;
            backface-visibility: hidden;
            transform-origin: center center;
            left: 50%;
            top: 50%;
            margin-left: -30px;
            margin-top: -30px;
        }
        
        .crystal-face-hex {
            width: 50px;
            height: 50px;
        }
        
        /* 新增：详细元素信息弹窗 */
        /* 修改详细元素信息弹窗 */
        .element-detail-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .element-detail-modal.active {
            opacity: 1;
            visibility: visible;
        }

        .element-detail-content {
            width: 900px; /* 增加宽度 */
            height: 750px; /* 增加高度 */
            max-width: 90%;
            max-height: 85%;
            background: rgba(23, 42, 69, 0.95);
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(100, 255, 218, 0.3);
            backdrop-filter: blur(10px);
            transform: translateY(20px);
            transition: transform 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .element-detail-modal.active .element-detail-content {
            transform: translateY(0);
        }

        .element-detail-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            background: rgba(10, 25, 47, 0.8);
            border-bottom: 1px solid rgba(100, 255, 218, 0.2);
            flex-shrink: 0; /* 防止头部被压缩 */
        }

        .element-detail-title {
            font-size: 1.5rem;
            color: #64ffda;
            font-weight: bold;
        }

        .element-detail-close {
            background: none;
            border: none;
            color: #8892b0;
            font-size: 1.5rem;
            cursor: pointer;
            transition: color 0.3s ease;
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
        }

        .element-detail-close:hover {
            color: #64ffda;
            background: rgba(100, 255, 218, 0.1);
        }

        .element-detail-body {
            display: flex;
            padding: 20px;
            flex: 1; /* 占据剩余空间 */
            overflow: hidden; /* 防止内容溢出 */
        }

        .element-detail-image {
            flex: 0 0 40%;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 20px;
            min-height: 200px;
            border: 2px dashed rgba(100, 255, 218, 0.3);
            overflow: hidden;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            height: auto;
            max-height: 300px;
            padding: 10px;
        }

        .element-detail-image:hover {
            border-color: #64ffda;
            box-shadow: 0 0 15px rgba(100, 255, 218, 0.5);
        }

        .element-detail-image img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            transition: transform 0.3s ease;
        }

        .element-detail-image:hover img {
            transform: scale(1.05);
        }

        .element-detail-info {
            flex: 1;
            color: #e6f1ff;
            display: flex;
            flex-direction: column;
            overflow: hidden; /* 防止内容溢出 */
        }

        .element-detail-basic {
            margin-bottom: 15px;
            flex-shrink: 0; /* 防止基本信息被压缩 */
        }

        .element-detail-property {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            padding: 5px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .element-detail-label {
            color: #8892b0;
        }

        .element-detail-value {
            color: #e6f1ff;
            font-weight: 500;
        }

        .element-detail-description {
            line-height: 1.6;
            font-size: 1rem;
            color: #e6f1ff;
            flex: 1; /* 占据剩余空间 */
            overflow-y: auto; /* 添加垂直滚动条 */
            padding-right: 10px;
            min-height: 200px; /* 设置最小高度 */
        }

        /* 响应式设计调整 */
        @media (max-width: 1200px) {
            .element-detail-content {
                width: 750px;
                height: 550px;
            }
        }

        @media (max-width: 768px) {
            .element-detail-content {
                width: 95%;
                height: 80%;
            }
            
            .element-detail-body {
                flex-direction: column;
                padding: 15px;
            }
            
            .element-detail-image {
                margin-right: 0;
                margin-bottom: 20px;
                min-height: 150px;
                flex: 0 0 auto; /* 在移动端取消固定比例 */
            }
            
            .element-detail-description {
                min-height: 150px;
                max-height: 300px; /* 在移动端限制最大高度 */
            }
}
        
        /* 新增：图片放大模态框 */
        .image-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 3000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        
        .image-modal.active {
            opacity: 1;
            visibility: visible;
        }
        
        .image-modal-content {
            max-width: 90%;
            max-height: 90%;
            position: relative;
            transform: scale(0.8);
            transition: transform 0.3s ease;
        }
        
        .image-modal.active .image-modal-content {
            transform: scale(1);
        }
        
        .image-modal-content img {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }
        
        /* ========== [自定义修改] 钙元素两步揭秘交互效果 ========== */
        
        /* 遮罩层 */
        .calcium-reveal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.85);
            backdrop-filter: blur(5px);
            z-index: 2500;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease, visibility 0.4s ease;
        }

        .calcium-reveal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* 关闭按钮 */
        .calcium-reveal-close {
            position: absolute;
            top: 20px;
            right: 30px;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border: none;
            border-radius: 50%;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 2501;
        }

        .calcium-reveal-close:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: rotate(90deg);
        }

        /* 透视容器 */
        .calcium-reveal-perspective {
            perspective: 1200px;
            width: 90%;
            max-width: 900px;
            height: 80vh;
            max-height: 600px;
        }

        /* 翻转卡片容器 */
        .calcium-reveal-card {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.5s ease-in-out;
            transform-style: preserve-3d;
            cursor: pointer;
        }

        .calcium-reveal-card.flipped {
            transform: rotateY(180deg);
        }

        /* 卡片正面（日常认知） */
        .calcium-card-front {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            background: #1a1a2e;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
        }

        /* 正面背景图 */
        .calcium-front-image {
            width: 100%;
            height: 100%;
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            background-color: #1a1a2e;
            min-height: 200px;
        }

        /* 正面渐变遮罩 */
        .calcium-front-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40%;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding: 30px;
        }

        /* 正面提示文字 */
        .calcium-front-hint {
            color: #64ffda;
            font-size: 1.2rem;
            font-weight: 500;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        /* 卡片背面（科学真相） */
        .calcium-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            transform: rotateY(180deg);
            background: rgba(10, 25, 47, 0.95);
            border-radius: 16px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        /* 背面内容容器 */
        .calcium-back-content {
            flex: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            padding: 20px;
            overflow: hidden;
        }

        /* 背面图片区域 */
        .calcium-back-image-container {
            background: #1a1a2e;
            border-radius: 10px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .calcium-back-image-container img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }

        /* 背面信息区域 */
        .calcium-back-info {
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        /* 元素基本信息 */
        .calcium-element-header {
            text-align: center;
            padding-bottom: 15px;
            border-bottom: 1px solid rgba(100, 255, 218, 0.2);
            margin-bottom: 15px;
        }

        .calcium-element-symbol {
            font-size: 3.5rem;
            font-weight: 700;
            color: #64ffda;
            margin-bottom: 5px;
        }

        .calcium-element-name {
            font-size: 1.5rem;
            color: #e6f1ff;
            margin-bottom: 10px;
        }

        /* 属性列表 */
        .calcium-properties {
            flex: 0 0 auto;
            margin-bottom: 15px;
        }

        .calcium-property {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .calcium-property-label {
            color: #8892b0;
            font-size: 0.95rem;
        }

        .calcium-property-value {
            color: #e6f1ff;
            font-weight: 500;
            font-size: 0.95rem;
        }

        /* 描述区域 */
        .calcium-description {
            flex: 1;
            overflow-y: auto;
            padding-right: 10px;
            color: #ccd6f6;
            font-size: 0.95rem;
            line-height: 1.6;
        }

        .calcium-description.loading {
            color: #8892b0;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 背面提示 */
        .calcium-back-hint {
            text-align: center;
            padding: 15px;
            background: rgba(100, 255, 218, 0.1);
            color: #64ffda;
            font-size: 0.9rem;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .calcium-reveal-perspective {
                width: 95%;
                height: 90vh;
            }

            .calcium-back-content {
                grid-template-columns: 1fr;
                grid-template-rows: 1fr 1.2fr;
            }

            .calcium-element-symbol {
                font-size: 2.5rem;
            }

            .calcium-reveal-close {
                top: 15px;
                right: 15px;
                width: 35px;
                height: 35px;
            }
        }

        /* ========== 图片模态框关闭按钮 ========== */
        .image-modal-close {
            position: absolute;
            top: -40px;
            right: -40px;
            background: rgba(10, 25, 47, 0.8);
            border: none;
            color: #8892b0;
            font-size: 2rem;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s ease;
        }
        
        .image-modal-close:hover {
            color: #64ffda;
            background: rgba(100, 255, 218, 0.1);
            transform: rotate(90deg);
        }
        
        /* 服务器提示样式 */
        .server-hint {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(23, 42, 69, 0.95);
            border: 2px solid #64ffda;
            border-radius: 10px;
            padding: 15px 20px;
            color: #e6f1ff;
            z-index: 10000;
            max-width: 80%;
            text-align: center;
            box-shadow: 0 5px 20px rgba(0,0,0,0.5);
            backdrop-filter: blur(10px);
        }
        
        .server-hint h4 {
            color: #64ffda;
            margin-bottom: 10px;
        }
        
        .server-hint code {
            display: block;
            font-size: 0.9rem;
            background: rgba(0,0,0,0.3);
            padding: 10px;
            border-radius: 5px;
            margin-bottom: 10px;
            text-align: left;
        }
        
        .server-hint button {
            background: #64ffda;
            color: #0a192f;
            border: none;
            padding: 5px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
        }
        
        /* 响应式设计 */
        @media (max-width: 1200px) {
            .periodic-table {
                grid-template-columns: repeat(18, 1fr);
                gap: 5px;
            }
            
            .element {
                min-height: 70px;
                padding: 8px 4px;
            }
            
            .symbol {
                font-size: 1.2rem;
            }
            
            .name {
                font-size: 0.7rem;
            }
            
            .info-card {
                width: 280px;
            }
            
            .element-detail-content {
                width: 600px;
            }
            
            .home-button {
                top: 8px;
                left: 8px;
                padding: 6px 14px;
                font-size: 12px;
            }
        }
        
        @media (max-width: 768px) {
            .periodic-table {
                grid-template-columns: repeat(9, 1fr);
                gap: 4px;
            }
            
            .element {
                min-height: 60px;
                padding: 6px 2px;
            }
            
            .symbol {
                font-size: 1rem;
            }
            
            .name {
                font-size: 0.6rem;
            }
            
            .info-card {
                position: relative;
                width: 100%;
                margin-top: 20px;
                right: 0;
                transform: none;
            }
            
            .view-toggle {
                position: relative;
                top: 0;
                right: 0;
                margin-bottom: 20px;
            }
            
            .element-detail-body {
                flex-direction: column;
            }
            
            .element-detail-image {
                margin-right: 0;
                margin-bottom: 20px;
                min-height: 150px;
            }
            
            .image-modal-close {
                top: -30px;
                right: -30px;
                width: 30px;
                height: 30px;
                font-size: 1.5rem;
            }
            
            .home-button {
                top: 6px;
                left: 6px;
                padding: 5px 12px;
                font-size: 11px;
            }
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease forwards;
        }
        
        /* 空单元格 */
        .empty {
            background: transparent;
            border: none;
            box-shadow: none;
            cursor: default;
        }
        
        .empty:hover {
            transform: none;
            box-shadow: none;
            border: none;
        }
        
        /* 底部信息 */
        footer {
            text-align: center;
            margin-top: 40px;
            color: #8892b0;
            font-size: 0.9rem;
            padding: 20px 0;
            border-top: 1px solid rgba(100, 255, 218, 0.1);
        }
        
        /* 电子轨道动画样式 - 优化 */
        @keyframes electronOrbit {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .electron-orbit {
            position: absolute;
            top: 50%;
            left: 50%;
            transform-origin: 0 0;
            border-radius: 50%;
            border: 1px dashed rgba(100, 255, 218, 0.5);
        }
        
        .electron {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #64ffda;
            box-shadow: 0 0 12px rgba(100, 255, 218, 0.9);
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            animation: electronPulse 2s infinite alternate;
        }
        
        @keyframes electronPulse {
            0% { box-shadow: 0 0 8px rgba(100, 255, 218, 0.8); }
            100% { box-shadow: 0 0 16px rgba(100, 255, 218, 1); }
        }
        
        /* 不同轨道的旋转速度 */
        .electron-orbit-1 { animation: electronOrbit 6s linear infinite; }
        .electron-orbit-2 { animation: electronOrbit 4s linear infinite; }
        .electron-orbit-3 { animation: electronOrbit 3s linear infinite; }
        .electron-orbit-4 { animation: electronOrbit 2s linear infinite; }
        .electron-orbit-5 { animation: electronOrbit 1.5s linear infinite; }
        
        /* 原子核样式 */
        .nucleus {
            fill: #ff6b6b;
            filter: drop-shadow(0 0 8px rgba(255, 107, 107, 0.7));
        }
        
        /* 加载动画 */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 螺旋粒子样式 */
        .spiral-particle {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            z-index: 0;
        }
        
        /* --- 3D 元素周期表样式 --- */
        #3d-view-container {
            position: relative;
            z-index: 1;
        }
        
        #app {
            display: flex;
            flex-direction: column;
            height: 100vh;
            align-items: center;
            padding: 10px 20px;
        }
        
        #app header {
            width: 100%;
            text-align: center;
            margin-bottom: 10px;
            position: relative;
        }
        
        #app h1 {
            font-size: 2em;
            font-weight: 300;
            letter-spacing: 2px;
            margin-bottom: 10px;
        }
        
        #app .controls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            flex-wrap: wrap;
            margin-bottom: 15px;
        }
        
        #app #temp-input {
            background-color: #333;
            color: #f0f0f0;
            border: 1px solid #555;
            border-radius: 4px;
            padding: 4px 6px;
            width: 80px;
            text-align: center;
        }
        
        #app #temp-celsius {
            color: #aaa;
            min-width: 80px;
            text-align: left;
        }
        
        #app #temp-slider { width: 200px; }
        
        #app .legend-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            font-size: 12px;
            background-color: rgba(0, 0, 0, 0.2);
            padding: 10px 15px;
            border-radius: 8px;
            border: 1px solid #333;
            flex-wrap: wrap;
            align-items: flex-start;
        }
        
        #app .legend-section { display: flex; flex-direction: column; gap: 8px; }
        #app .legend-title { font-weight: bold; color: #ddd; margin-bottom: 4px; text-align: center; }
        #app .legend-grid { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 4px 15px; }
        #app .legend-grid.small { grid-template-columns: 1fr; }
        #app .legend-item { display: flex; align-items: center; gap: 6px; }
        #app .color-swatch {
            width: 12px;
            height: 12px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 2px;
            flex-shrink: 0;
        }
        
        #app .legend-explanation .legend-title { text-align: left; }
        #app .explanation-content {
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(0, 0, 0, 0.3);
            padding: 5px 10px;
            border-radius: 5px;
        }
        
        #app .explanation-text { color: #ccc; }
        #app .arrow { font-size: 16px; color: #888; }
        
        #app .legend-example-element {
            position: relative;
            width: 65px;
            height: 65px;
            border: 1px solid #888;
            border-radius: 4px;
            background-color: rgba(45, 45, 50, 0.8);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 10px;
            overflow: hidden;
        }
        
        #app .legend-example-element::before, #app .legend-example-element::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 5px;
        }
        
        #app .legend-example-element::before { left: 0; background-color: #f6e58d; }
        #app .legend-example-element::after { right: 0; background-color: #88aacc; }
        #app .legend-example-element .number { position: absolute; top: 4px; left: 8px; font-size: 9px; opacity: 0.7; }
        #app .legend-example-element .symbol { font-size: 20px; font-weight: bold; }
        #app .legend-example-element .name { font-size: 9px; text-align: center; margin-bottom: 2px; }
        #app .legend-example-element .atomic-mass { font-size: 8px; opacity: 0.8; }
        
        #table-container {
            flex-grow: 1;
            display: grid;
            place-items: center;
            width: 100%;
            perspective: 2000px;
            pointer-events: none;
        }
        
        #periodic-table {
            display: grid;
            grid-template-columns: repeat(18, 65px);
            grid-template-rows: repeat(10, 65px);
            gap: 5px;
            transform-style: preserve-3d;
            transform: rotateX(50deg) rotateZ(-15deg) scale(1.0);
            transition: transform 0.1s linear;
            pointer-events: auto;
            cursor: grab;
        }
        
        #periodic-table:active { cursor: grabbing; }
        
        #app .loading { grid-column: 5 / 14; grid-row: 4; color: #888; font-size: 1.5em; }
        
        .element-cell {
            position: relative;
            border: 1px solid #444;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 4px;
            font-size: 10px;
            background-color: rgba(45, 45, 50, 0.8);
            backdrop-filter: blur(5px);
            transition: transform 0.2s, box-shadow 0.2s;
            overflow: hidden;
        }
        
        .element-cell::before, .element-cell::after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            width: 5px;
            transition: background 0.4s ease, background-color 0.4s ease;
        }
        
        .element-cell::before { left: 0; }
        .element-cell::after { right: 0; }
        
        .element-cell:hover {
            transform: translateZ(25px) scale(1.1);
            border-color: #fff;
            box-shadow: 0 0 20px rgba(127, 255, 212, 0.5);
        }
        
        .element-cell .number { position: absolute; top: 4px; left: 8px; font-size: 9px; opacity: 0.7; }
        .element-cell .symbol { font-size: 20px; font-weight: bold; }
        .element-cell .name { font-size: 9px; text-align: center; margin-bottom: 2px; }
        .element-cell .atomic-mass { font-size: 8px; opacity: 0.7; position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; }
        
        /* --- 元素类别颜色 --- */
        .alkali-metal::before, .color-swatch.alkali-metal { background-color: #ff3838; }
        .alkaline-earth-metal::before, .color-swatch.alkaline-earth-metal { background-color: #ff9f1a; }
        .lanthanide::before, .color-swatch.lanthanide { background-color: #fffa65; }
        .actinide::before, .color-swatch.actinide { background-color: #dff9fb; }
        .transition-metal::before, .color-swatch.transition-metal { background-color: #f0e68c; }
        .other-metal::before, .color-swatch.other-metal { background-color: #a4b0be; }
        .metalloid::before, .color-swatch.metalloid { background-color: #2bcbba; }
        .other-nonmetal::before, .color-swatch.other-nonmetal { background-color: #2ed573; }
        .halogen::before, .color-swatch.halogen { background-color: #be2edd; }
        .noble-gas::before, .color-swatch.noble-gas { background-color: #1e90ff; }
        .unknown-category::before, .color-swatch.unknown-category { background-color: #636e72; }
        
        /* --- 元素物态颜色 --- */
        .solid::after { background-color: #88aacc; }
        .liquid::after { background-color: #55ee77; }
        .gas::after { background-color: #ffaa55; }
        .unknown::after { background: linear-gradient(180deg, #7ed6df, #e056fd, #f6e58d); }
        
        /* --- 弹窗样式 --- */
        .modal-hidden { display: none; }
        .modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px); z-index: 999; }
        .modal-content {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #2c2c2e;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            z-index: 1000;
            width: 90%;
            max-width: 850px;
            max-height: 90vh;
            overflow-y: auto;
        }
        
        .modal-close-btn { position: absolute; top: 10px; right: 15px; background: none; border: none; color: #aaa; font-size: 28px; cursor: pointer; }
        
        #modal-body {
            display: grid;
            grid-template-columns: 250px 1fr;
            grid-template-rows: auto 1fr;
            gap: 20px;
        }
        
        .modal-title {
            grid-column: 1 / -1;
            grid-row: 1;
            margin-bottom: 0;
            font-size: 2em;
            font-weight: 300;
        }
        
        .visuals-container {
            grid-column: 1;
            grid-row: 2;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .info-container {
            grid-column: 2;
            grid-row: 2;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }
        
        .visuals-container .placeholder {
            width: 100%;
            height: 200px;
            background-color: #222;
            border: 1px dashed #444;
            border-radius: 8px;
            display: grid;
            place-items: center;
            color: #888;
        }
        
        model-viewer {
            width: 100%;
            height: 250px;
            border-radius: 8px;
        }
        
        .image-wrapper {
            text-align: center;
        }
        
        .image-label {
            font-size: 0.8em;
            color: #aaa;
            margin-bottom: 5px;
        }
        
        .visuals-container img {
            max-width: 100%;
            border-radius: 5px;
            background: #111;
            border: 1px solid #444;
        }
        
        .details-text {
            font-size: 0.9em;
        }
        
        .details-text p { margin-bottom: 8px; line-height: 1.6; }
        .details-text a { color: #7ed6df; }
        
        /* --- 维基百科内容样式 --- */
        .wiki-container {
            margin-top: 20px;
            border-top: 1px solid #444;
            padding-top: 15px;
            display: flex;
            flex-direction: column;
            min-height: 0;
            flex-grow: 1;
        }
        
        .wiki-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .wiki-header h3 {
            margin: 0;
            font-size: 1.1em;
            font-weight: 500;
        }
        
        .lang-btn {
            background: #444;
            color: #eee;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            transition: background 0.2s;
            font-size: 0.8em;
        }
        
        .lang-btn:hover { background: #555; }
        
        #wiki-content-target {
            overflow-y: auto;
            padding-right: 10px;
        }
        
        /* 美化 details/summary 折叠面板 */
        .wiki-section {
            border-bottom: 1px solid #3a3a3c;
            margin-bottom: 10px;
        }
        
        .wiki-section:last-child {
            border-bottom: none;
        }
        
        .wiki-section summary {
            cursor: pointer;
            font-weight: bold;
            padding: 10px 5px;
            list-style: none;
            position: relative;
        }
        
        .wiki-section summary::-webkit-details-marker {
            display: none;
        }
        
        /* 使用 ::before 添加自定义箭头 */
        .wiki-section summary::before {
            content: '▶';
            position: absolute;
            left: -5px;
            font-size: 0.8em;
            transform: rotate(0deg);
            transition: transform 0.2s;
        }
        
        .wiki-section[open] > summary::before {
            transform: rotate(90deg);
        }
        
        .wiki-section-content {
            padding: 0 5px 15px 15px;
            opacity: 0.9;
            font-size: 0.9em;
            line-height: 1.7;
        }
        
        /* 确保维基百科内容中的各种标签有基本样式 */
        .wiki-section-content p { margin-bottom: 1em; }
        .wiki-section-content ul, .wiki-section-content ol { padding-left: 20px; margin-bottom: 1em; }
        .wiki-section-content li { margin-bottom: 0.5em; }
        .wiki-section-content a { color: #88d1df; text-decoration: none; }
        .wiki-section-content a:hover { text-decoration: underline; }
        .wiki-section-content table { border-collapse: collapse; margin: 1em 0; background: #222; width: 100%;}
        .wiki-section-content th, .wiki-section-content td { border: 1px solid #444; padding: 8px; text-align: left;}
        .wiki-section-content th { background: #333;}
        .wiki-section-content img { max-width: 100%; height: auto; border-radius: 4px; }
        
        #app .controls button {
            background-color: #333;
            color: #f0f0f0;
            border: 1px solid #555;
            border-radius: 4px;
            padding: 4px 10px;
            cursor: pointer;
            transition: background-color 0.2s;
            font-size: 14px;
        }
        
        #app .controls button:hover {
            background-color: #444;
        }
        
        .drag-hint {
            color: #aaa;
            font-size: 12px;
            margin-top: 10px;
        }
        
        /* 无选择文本 */
        .no-select { user-select: none; }

        /* ====== 横屏模式提示遮罩 ====== */
        .landscape-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            min-height: -webkit-fill-available;
            min-height: 100vh;
            background: linear-gradient(135deg, rgba(10, 25, 47, 0.98) 0%, rgba(17, 34, 64, 0.98) 100%);
            z-index: 9999;
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 2rem;
            box-sizing: border-box;
            backdrop-filter: blur(10px);
            overflow: hidden;
            transform: none;
            -webkit-transform: none;
        }

        .landscape-overlay.show {
            display: flex;
        }

        .landscape-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            width: 100%;
            max-width: 400px;
        }

        .landscape-icon {
            font-size: 6rem;
            animation: rotateDevice 2s ease-in-out infinite;
            margin-bottom: 1.5rem;
            line-height: 1;
        }

        @keyframes rotateDevice {
            0%, 100% { transform: rotate(0deg); }
            25% { transform: rotate(-90deg); }
            50% { transform: rotate(-90deg); }
            75% { transform: rotate(0deg); }
        }

        .landscape-title {
            font-size: 2rem;
            color: #64ffda;
            margin-bottom: 1rem;
            text-align: center;
            text-shadow: 0 0 10px rgba(100, 255, 218, 0.5);
            width: 100%;
        }

        .landscape-message {
            font-size: 1.1rem;
            color: #8892b0;
            text-align: center;
            max-width: 300px;
            line-height: 1.6;
            margin-bottom: 2rem;
            width: 100%;
        }

        .landscape-hint {
            font-size: 0.9rem;
            color: #64ffda;
            opacity: 0.8;
            animation: pulseHint 1.5s ease-in-out infinite;
        }

        @keyframes pulseHint {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }

        /* 移动端横屏提示优化 */
        @media (max-width: 768px) {
            .landscape-overlay {
                width: 100vw;
                height: 100vh;
                min-height: 100vh;
                padding: 1.5rem;
            }
            
            .landscape-icon {
                font-size: 5rem;
                margin-bottom: 1.2rem;
            }
            
            .landscape-title {
                font-size: 1.6rem;
            }
            
            .landscape-message {
                font-size: 1rem;
                max-width: 280px;
            }
            
            .landscape-hint {
                font-size: 0.8rem;
            }
        }

        /* 小屏幕优化 */
        @media (max-width: 480px) {
            .landscape-overlay {
                padding: 1rem;
            }
            
            .landscape-icon {
                font-size: 4rem;
            }
            
            .landscape-title {
                font-size: 1.4rem;
            }
            
            .landscape-message {
                font-size: 0.9rem;
                max-width: 250px;
            }
        }

        /* 移动端按钮优化 */
        .home-button, .view-toggle {
            min-height: 44px;
            min-width: 80px;
        }

        /* 安全区域适配 */
        @supports (padding: env(safe-area-inset-bottom)) {
            .container {
                padding-left: max(20px, env(safe-area-inset-left));
                padding-right: max(20px, env(safe-area-inset-right));
            }
            .home-button {
                left: max(10px, env(safe-area-inset-left));
            }
        }