/**
 * =============================================
 * 公共样式文件 common.css
 * 用途：定义全局变量、主题色、底部导航、液态玻璃效果等公共样式
 * 作者：AI开发
 * 创建日期：2026-03-06
 * =============================================
 */

/* ===================================
 * CSS变量定义区 - 主题色彩配置
 * =================================== */

:root {
    /* ===== 春天主题配置 ===== */
    /* 主题说明：春天代表生机与活力，使用绿色系 */
    --spring-primary: #4CAF50;        /* 春天主色调 - 绿色，代表生机 */
    --spring-light: #81C784;          /* 春天浅色调 - 柔和绿色 */
    --spring-bg: #F1F8E9;             /* 春天背景色 - 极淡的绿色背景 */
    --spring-bg2: #C8E6C9;            /* 春天第二背景色 - 稍深的绿色背景 */
    --spring-accent: #2E7D32;         /* 春天强调色 - 深绿色，用于按钮、链接 */

    /* ===== 夏天主题配置 ===== */
    /* 主题说明：夏天代表清爽与活力，使用青色系（用户已确认） */
    --summer-primary: #05AFB5;        /* 夏天主色调 - 青色，代表清爽 */
    --summer-light: #6DCFDE;          /* 夏天浅色调 - 淡青色 */
    --summer-bg: #FFFFFF;             /* 夏天背景色 - 纯白色，清爽感 */
    --summer-bg2: #CEEFF0;            /* 夏天第二背景色 - 浅青色背景 */
    --summer-accent: #234C4F;         /* 夏天强调色 - 深青色，用于按钮、链接 */

    /* ===== 秋天主题配置 ===== */
    /* 主题说明：秋天代表收获与温暖，使用橙色系 */
    --autumn-primary: #FF9800;        /* 秋天主色调 - 橙色，代表收获 */
    --autumn-light: #FFB74D;          /* 秋天浅色调 - 柔和橙色 */
    --autumn-bg: #FFF3E0;             /* 秋天背景色 - 极淡的橙色背景 */
    --autumn-bg2: #FFE0B2;            /* 秋天第二背景色 - 稍深的橙色背景 */
    --autumn-accent: #E65100;         /* 秋天强调色 - 深橙色，用于按钮、链接 */

    /* ===== 冬天主题配置 ===== */
    /* 主题说明：冬天代表冷静与宁静，使用蓝色系 */
    --winter-primary: #2196F3;        /* 冬天主色调 - 蓝色，代表冷静 */
    --winter-light: #64B5F6;          /* 冬天浅色调 - 柔和蓝色 */
    --winter-bg: #E3F2FD;             /* 冬天背景色 - 极淡的蓝色背景 */
    --winter-bg2: #BBDEFB;            /* 冬天第二背景色 - 稍深的蓝色背景 */
    --winter-accent: #0D47A1;         /* 冬天强调色 - 深蓝色，用于按钮、链接 */

    /* ===== 当前激活主题 - 默认使用夏天主题 ===== */
    /* 可以通过修改这里的值来切换整个网站的主题 */
    --current-primary: var(--summer-primary);   /* 当前主色调 */
    --current-light: var(--summer-light);      /* 当前浅色调 */
    --current-bg: var(--summer-bg);            /* 当前背景色 */
    --current-bg2: var(--summer-bg2);          /* 当前第二背景色 */
    --current-accent: var(--summer-accent);    /* 当前强调色 */

    /* ===== 液态玻璃效果参数配置 ===== */
    /* 这些参数控制磨砂玻璃效果，可以根据需要调整透明度、模糊度等 */

    /* 玻璃卡片的基础透明度 - 值越小越透明，范围 0-1 */
    /* 建议：主卡片 0.6-0.8，次要卡片 0.4-0.6 */
    --glass-opacity: 0.75;

    /* 玻璃模糊度 - 值越大越模糊，单位px */
    /* 建议：20-30px 效果较好，过大可能影响性能 */
    --glass-blur: 25px;

    /* 玻璃边框透明度 - 用于边框的光泽效果 */
    /* 建议：0.3-0.5，过高会显得太亮 */
    --glass-border-opacity: 0.4;

    /* 玻璃光泽强度 - 用于渐变高光效果 */
    /* 建议：0.1-0.2，过高会有过度的高光 */
    --glass-shine: 0.15;

    /* ===== 间距配置 ===== */
    --spacing-xs: 8px;      /* 超小间距 - 用于紧凑的布局 */
    --spacing-sm: 12px;     /* 小间距 - 用于卡片内元素 */
    --spacing-md: 16px;     /* 中等间距 - 用于卡片之间 */
    --spacing-lg: 24px;     /* 大间距 - 用于区块之间 */
    --spacing-xl: 32px;     /* 超大间距 - 用于主要区块 */

    /* ===== 圆角配置 ===== */
    --radius-sm: 8px;       /* 小圆角 - 用于按钮、标签 */
    --radius-md: 12px;      /* 中等圆角 - 用于卡片 */
    --radius-lg: 16px;      /* 大圆角 - 用于主要卡片 */
    --radius-xl: 24px;      /* 超大圆角 - 用于特殊卡片 */

    /* ===== 字体大小配置 ===== */
    --font-xs: 12px;        /* 超小字体 - 用于辅助说明 */
    --font-sm: 14px;        /* 小字体 - 用于正文 */
    --font-md: 16px;        /* 中等字体 - 用于重要内容 */
    --font-lg: 18px;        /* 大字体 - 用于标题 */
    --font-xl: 22px;        /* 超大字体 - 用于主标题 */

    /* ===== 过渡动画配置 ===== */
    /* 用于所有交互效果的过渡时间 */
    --transition-fast: 0.2s;    /* 快速过渡 - 用于hover效果 */
    --transition-normal: 0.3s;  /* 正常过渡 - 用于页面切换 */
    --transition-slow: 0.5s;   /* 慢速过渡 - 用于大动画 */

    /* ===== 底部导航配置 ===== */
    --bottom-nav-height: 70px;  /* 底部导航高度 - 可根据设计调整 */
    --bottom-nav-bg-opacity: 0.05; /* 底部导航背景透明度 */
    --bottom-nav-blur: 15px;    /* 底部导航模糊度 */

    /* ===== 问AI按钮配置 ===== */
    /* 问AI按钮是底部导航中间的突出圆形按钮 */
    --ai-button-size: 60px;     /* 问AI按钮直径 - 可以调整大小 */
    --ai-button-offset: -20px;  /* 问AI按钮向上偏移量 - 控制突出高度 */
    --ai-button-shadow: 0 8px 20px rgba(5, 175, 181, 0.4); /* 按钮阴影效果 */
    --ai-button-shadow-hover: 0 12px 28px rgba(5, 175, 181, 0.5); /* 按钮hover阴影 */
}

/* ===================================
 * 全局基础样式
 * =================================== */

* {
    /* 重置所有元素的盒模型为border-box */
    /* 这样padding和border不会增加元素的总宽度 */
    box-sizing: border-box;

    /* 移除移动端点击高亮效果 */
    -webkit-tap-highlight-color: transparent;

    /* 移动端默认滚动回弹效果 */
    -webkit-overflow-scrolling: touch;
}

/* HTML根元素 */
html {
    /* 设置基础字体大小 - 用于rem计算 */
    font-size: 16px;

    /* 确保页面占满整个视口高度 */
    height: 100%;
}

/* 页面主体 */
body {
    /* 外边距和内边距为0 */
    margin: 0;
    padding: 0;

    /* 字体设置 - 优先使用系统字体 */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
        'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* 字体大小和颜色 */
    font-size: var(--font-sm);
    color: #333;
    line-height: 1.6;

    /* 背景色 - 使用当前主题的背景色 */
    background: linear-gradient(135deg, var(--current-bg) 0%, var(--current-bg2) 100%);

    /* 最小高度确保占满屏幕 */
    min-height: 100vh;

    /* 底部留出导航栏空间，避免内容被遮挡（高度70+底部间距20+预留20=110px） */
    padding-bottom: 110px;

    /* 平滑过渡背景色变化 */
    transition: background var(--transition-normal);
}

/* 链接样式重置 */
a {
    text-decoration: none;
    color: inherit;
}

/* 列表样式重置 */
ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 图片样式 */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 按钮样式重置 */
button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
}

/* ===================================
 * 液态玻璃效果通用类
 * =================================== */

/**
 * 玻璃卡片基础样式
 * 使用方法：在元素上添加 class="glass-card"
 *
 * 效果说明：
 * 1. 半透明背景 - 透出底部的渐变色
 * 2. 模糊效果 - 磨砂玻璃质感
 * 3. 微妙的边框 - 增加光泽感
 * 4. 轻微阴影 - 增加层次感
 */
.glass-card {
    /* 背景色 - 使用白色并带有透明度 */
    /* 透明度由 --glass-opacity 变量控制，可在 :root 中调整 */
    background: rgba(255, 255, 255, var(--glass-opacity));

    /* 背景模糊效果 - 这是磨砂玻璃的核心 */
    /* 模糊度由 --glass-blur 变量控制 */
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur)); /* Safari支持 */

    /* 边框 - 半透明白色边框，增加光泽感 */
    border: 1px solid rgba(255, 255, 255, var(--glass-border-opacity));

    /* 圆角 - 玻璃卡片通常有圆润的边角 */
    border-radius: var(--radius-lg);

    /* 阴影 - 轻微的投影增加立体感 */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);

    /* 平滑过渡效果 - 用于hover等交互 */
    transition: all var(--transition-normal) ease;

    /* 防止内容溢出 */
    overflow: hidden;
}

/**
 * 玻璃卡片hover效果
 * 鼠标悬停时增加亮度和轻微放大
 */
.glass-card:hover {
    /* 背景透明度略微增加，更亮 */
    background: rgba(255, 255, 255, 0.85);

    /* 轻微向上移动 */
    transform: translateY(-2px);

    /* 阴影加深，增强立体感 */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/**
 * 玻璃光泽效果
 * 使用方法：在元素上添加 class="glass-shine"
 *
 * 效果说明：
 * 通过伪元素添加一个渐变光泽层，模拟玻璃反光
 */
.glass-shine::before {
    /* 创建伪元素用于光泽效果 */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;

    /* 渐变背景 - 从透明到半透明白色 */
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, var(--glass-shine)),
        transparent
    );

    /* 圆角与父元素一致 */
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;

    /* 指向事件穿透，不影响下层交互 */
    pointer-events: none;
}

/**
 * 渐变玻璃卡片
 * 使用方法：在元素上添加 class="gradient-glass"
 *
 * 效果说明：
 * 在白色玻璃基础上叠加主题色的渐变，更有科技感
 */
.gradient-glass {
    /* 白色半透明背景 */
    background: rgba(255, 255, 255, var(--glass-opacity));

    /* 叠加主题色渐变 */
    background-image: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0.8) 100%
    );

    /* 模糊效果 */
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));

    /* 边框 */
    border: 1px solid rgba(255, 255, 255, var(--glass-border-opacity));

    /* 阴影 */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);

    /* 圆角 */
    border-radius: var(--radius-lg);
}

/* ===================================
 * 底部导航样式
 * =================================== */

/**
 * 底部导航容器
 * 悬浮固定在屏幕底部，使用液态玻璃效果
 */
.bottom-nav {
    /* 固定定位 - 始终在底部 */
    position: fixed;
    bottom: 20px; /* 底部留空20px，实现悬浮效果 */
    left: 16px;   /* 左右各留空16px */
    right: 16px;

    /* 高度 */
    height: var(--bottom-nav-height);

    /* 背景 - 液态玻璃效果 */
    background: rgba(255, 255, 255, var(--bottom-nav-bg-opacity));
    backdrop-filter: blur(var(--bottom-nav-blur));
    -webkit-backdrop-filter: blur(var(--bottom-nav-blur));

    /* 顶部边框 - 增加光泽感 */
    border-top: 1px solid rgba(255, 255, 255, 0.3);

    /* 边框 - 四周都有边框，增强悬浮感 */
    border: 1px solid rgba(255, 255, 255, 0.5);

    /* 阴影 - 增强的投影，营造悬浮感 */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);

    /* 圆角 - 大圆角增强悬浮感 */
    border-radius: 35px;

    /* 内边距 - 两侧留空 */
    padding: 0 var(--spacing-md);

    /* 弹性布局 - 均匀分布导航项 */
    display: flex;
    justify-content: space-around;
    align-items: center; /* 垂直居中，因为问AI按钮要突出显示 */

    /* z-index - 确保在最上层 */
    z-index: 1000;

    /* 安全区域适配 - 适配iPhone X等全面屏设备的底部 */
    padding-bottom: env(safe-area-inset-bottom);

    /* 过渡效果 */
    transition: background var(--transition-normal);
}

/**
 * 底部导航项
 * 单个导航链接的样式
 */
.bottom-nav-item {
    /* 相对定位 - 用于定位图标和文字 */
    position: relative;

    /* 弹性列布局 - 垂直排列图标和文字 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    /* 宽度和高度 */
    flex: 1;
    height: 100%;

    /* 内边距 */
    padding-bottom: 8px;

    /* 颜色 - 默认灰色 */
    color: #999;

    /* 过渡效果 */
    transition: color var(--transition-fast);

    /* 移除下划线 */
    text-decoration: none;
}

/**
 * 底部导航项hover效果
 */
.bottom-nav-item:hover {
    /* hover时颜色变亮 */
    color: var(--current-primary);
}

/**
 * 底部导航项active效果
 * 当前页面的导航项高亮
 */
.bottom-nav-item.active {
    /* 激活状态使用主题色 */
    color: var(--current-primary);
}

/**
 * 导航图标容器
 */
.bottom-nav-icon {
    /* 图标大小 */
    width: 24px;
    height: 24px;

    /* 底部间距 - 与文字分隔 */
    margin-bottom: 4px;

    /* SVG图标样式 */
    fill: currentColor;
    transition: transform var(--transition-fast);
}

/**
 * 导航文字
 */
.bottom-nav-text {
    /* 字体大小 */
    font-size: 10px;

    /* 字重 */
    font-weight: 500;

    /* 字间距 */
    letter-spacing: 0.5px;
}

/* ===================================
 * 问AI按钮样式
 * =================================== */

/**
 * 问AI按钮容器
 * 特殊的突出圆形按钮，位于底部导航正中间
 */
.bottom-nav-item.ai-button {
    /* 相对定位 - 用于定位圆形按钮 */
    position: relative;

    /* 向上突出，高于其他导航项 */
    /* 不再使用 transform，因为圆形按钮已经是绝对定位 */

    /* 弹性布局 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* 高度增加，为圆形按钮和文字留空间 */
    height: calc(var(--bottom-nav-height) + 30px);
}

/**
 * 问AI按钮主体
 * 圆形渐变按钮
 */
.ai-button-circle {
    /* 尺寸 - 圆形 */
    width: var(--ai-button-size);
    height: var(--ai-button-size);

    /* 背景 - 主题色渐变 */
    background: linear-gradient(
        135deg,
        var(--current-primary) 0%,
        var(--current-light) 100%
    );

    /* 圆形 */
    border-radius: 50%;

    /* 阴影 - 营造悬浮感 */
    box-shadow: var(--ai-button-shadow);

    /* 弹性布局 - 居中图标 */
    display: flex;
    align-items: center;
    justify-content: center;

    /* 过渡效果 */
    transition: all var(--transition-fast);

    /* z-index - 确保在导航栏之上 */
    z-index: 10;

    /* 流光效果 - 添加渐变边框 */
    position: relative;
    overflow: hidden;

    /* 相对定位 - 居中显示 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/**
 * 问AI按钮流光动画效果
 */
.ai-button-circle::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transform: rotate(45deg);
    animation: shine 3s infinite;
}

/**
 * 流光动画
 */
@keyframes shine {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

/**
 * 问AI按钮hover效果
 */
.ai-button-circle:hover {
    /* hover时放大 */
    transform: translate(-50%, -50%) scale(1.05);

    /* 阴影增强 */
    box-shadow: var(--ai-button-shadow-hover);
}

/**
 * 问AI按钮active效果
 * 点击时的反馈
 */
.ai-button-circle:active {
    /* 点击时缩小 */
    transform: translate(-50%, -50%) scale(0.95);
}

/**
 * 问AI按钮图标
 */
.ai-button-icon {
    /* 图标颜色 - 白色 */
    width: 28px;
    height: 28px;
    fill: #fff;
}

/**
 * 问AI按钮文字
 */
.ai-button-text {
    /* 字体颜色 - 主题色 */
    color: var(--current-primary);

    /* 字体加粗 */
    font-weight: 600;

    /* 字体大小 */
    font-size: 11px;

    /* 文字居中 */
    text-align: center;

    /* 绝对定位 - 在按钮下方显示 */
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}

/* ===================================
 * 通用容器样式
 * =================================== */

/**
 * 页面容器
 * 用于包裹页面主要内容，控制最大宽度和边距
 */
.container {
    /* 最大宽度 - 手机端通常不需要限制 */
    /* 但为平板和大屏设备预留 */
    max-width: 768px;

    /* 水平居中 */
    margin: 0 auto;

    /* 两侧内边距 */
    padding: 0 var(--spacing-md);
}

/**
 * 页面标题
 * 标准的页面标题样式
 */
.page-title {
    /* 字体大小 */
    font-size: var(--font-xl);

    /* 字重 */
    font-weight: 700;

    /* 颜色 */
    color: var(--current-accent);

    /* 下边距 */
    margin-bottom: var(--spacing-lg);

    /* 内边距 */
    padding: var(--spacing-md) 0;

    /* 文字渐变效果 */
    background: linear-gradient(
        135deg,
        var(--current-primary) 0%,
        var(--current-light) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/**
 * 区块标题
 * 用于内容区块的标题
 */
.section-title {
    /* 字体大小 */
    font-size: var(--font-lg);

    /* 字重 */
    font-weight: 600;

    /* 颜色 */
    color: var(--current-accent);

    /* 下边距 */
    margin-bottom: var(--spacing-md);

    /* 内边距 */
    padding: var(--spacing-sm) 0;

    /* 左侧装饰线 */
    border-left: 4px solid var(--current-primary);

    /* 左侧内边距 - 为装饰线留空间 */
    padding-left: var(--spacing-sm);
}

/* ===================================
 * 按钮样式
 * =================================== */

/**
 * 主按钮
 * 使用主题色的填充按钮，带流光效果
 */
.btn-primary {
    /* 背景色 - 主题色 */
    background: linear-gradient(
        135deg,
        var(--current-primary) 0%,
        var(--current-light) 100%
    );

    /* 文字颜色 - 白色 */
    color: #fff;

    /* 内边距 */
    padding: 12px 24px;

    /* 圆角 */
    border-radius: var(--radius-md);

    /* 字体大小 */
    font-size: var(--font-sm);

    /* 字重 */
    font-weight: 600;

    /* 行高 */
    line-height: 1.5;

    /* 文字居中 */
    text-align: center;

    /* 阴影 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    /* 过渡效果 */
    transition: all var(--transition-fast);

    /* 光标样式 */
    cursor: pointer;

    /* 边框 */
    border: none;

    /* 相对定位 - 用于流光效果 */
    position: relative;
    overflow: hidden;
}

/**
 * 主按钮流光效果
 */
.btn-primary::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transform: rotate(45deg);
    animation: btnShine 3s infinite;
}

/**
 * 按钮流光动画
 */
@keyframes btnShine {
    0% {
        transform: translateX(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) rotate(45deg);
    }
}

/**
 * 主按钮hover效果
 */
.btn-primary:hover {
    /* 向上移动 */
    transform: translateY(-2px);

    /* 阴影增强 */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/**
 * 主按钮active效果
 */
.btn-primary:active {
    /* 向下移动 */
    transform: translateY(0);

    /* 阴影减弱 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/**
 * 次要按钮
 * 空心按钮样式
 */
.btn-secondary {
    /* 背景色 - 透明 */
    background: transparent;

    /* 文字颜色 - 主题色 */
    color: var(--current-primary);

    /* 边框 */
    border: 2px solid var(--current-primary);

    /* 内边距 */
    padding: 10px 22px;

    /* 圆角 */
    border-radius: var(--radius-md);

    /* 字体大小 */
    font-size: var(--font-sm);

    /* 字重 */
    font-weight: 600;

    /* 行高 */
    line-height: 1.5;

    /* 文字居中 */
    text-align: center;

    /* 过渡效果 */
    transition: all var(--transition-fast);

    /* 光标样式 */
    cursor: pointer;
}

/**
 * 次要按钮hover效果
 */
.btn-secondary:hover {
    /* 背景色 - 浅色半透明 */
    background: rgba(93, 207, 222, 0.1);
}

/**
 * 次要按钮active效果
 */
.btn-secondary:active {
    /* 背景色 - 稍深 */
    background: rgba(93, 207, 222, 0.2);
}

/* ===================================
 * 工具类
 * =================================== */

/**
 * 文字居中
 */
.text-center {
    text-align: center;
}

/**
 * 文字颜色 - 主题色
 */
.text-primary {
    color: var(--current-primary);
}

/**
 * 文字颜色 - 强调色
 */
.text-accent {
    color: var(--current-accent);
}

/**
 * 底部间距
 */
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

/**
 * 顶部间距
 */
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

/* ===================================
 * 响应式适配
 * =================================== */

/**
 * 小屏设备适配
 */
@media (max-width: 375px) {
    /* 字体减小 */
    :root {
        --font-xs: 11px;
        --font-sm: 13px;
        --font-md: 15px;
        --font-lg: 17px;
        --font-xl: 20px;
    }

    /* 间距减小 */
    :root {
        --spacing-sm: 10px;
        --spacing-md: 14px;
        --spacing-lg: 20px;
        --spacing-xl: 28px;
    }
}

/**
 * 大屏设备适配（横屏、平板等）
 */
@media (min-width: 768px) {
    /* 页面内容居中显示 */
    .container {
        padding: 0 var(--spacing-lg);
    }

    /* 导航文字可见 */
    .bottom-nav-text {
        font-size: 11px;
    }
}