/* 1. 全局变量和基础样式 ---------------------------------------- */
:root {
    --tiffany-blue: #81D8D0;    /* 蒂芙尼蓝 - 主色调 */
    --light-tiffany: #A6E3DD;   /* 浅蒂芙尼 - 背景用 */
    --pale-tiffany: #E0F2F1;    /* 极浅蒂芙尼 - 过渡用 */
    --dark-tiffany: #5EBFB7;    /* 深蒂芙尼 - 强调用 */
    --soft-gold: #FFB800;       /* 金色 - 按钮用 */
    --elegant-gold: #D4AF37;    /* 优雅金 */
    --light-gold: #E5C76B;      /* 浅金 - 悬停效果 */
    --dark-gold: #BF9B30;       /* 深金 - 边框用 */
}

html {
    height: 100%; /* 确保html元素占据全部视口高度 */
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit; /* 继承html的box-sizing */
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0; /* 确保body没有外边距 */
    padding: 0; /* 确保body没有内边距 */
    background-color: var(--light-tiffany);
    overflow-x: hidden; /* 只禁止水平滚动 */
}

/* 公共容器样式 */
.container {
    max-width: 1300px;  /* 修改最大宽度 */
    margin: 0 auto;
    padding: 0 40px;
}

.page-content {
    flex: 1 1 auto;
}

.certificate-item {
    background: #E0F2F1; /* pale-tiffany */
    /* 其它样式... */
}