/* ========== CSS变量定义 - 科技蓝主题 ========== */

:root {
    /* 主色调 - 科技蓝 */
    --tech-blue: #0066cc;
    --explore-blue: #0077cc;
    --discovery-blue: #0088dd;
    --light-blue: #e6f2ff;
    --lighter-blue: #f0f8ff;
    --dark-blue: #004499;
    --deep-blue: #003366;
    --tech-green: #00cc66;
    --discovery-green: #00ff99;
    /* 辅助色 */
    --accent-cyan: #00aaff;
    --accent-sky: #66ccff;
    --gradient-start: #0066cc;
    --gradient-end: #0088dd;
    /* 背景色 */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f0f4f8;
    /* 文字色 */
    --text-primary: #1a1a2e;
    --text-secondary: #4a4a6a;
    --text-muted: #8a8aa8;
    --text-inverse: #ffffff;
    /* 边框和分割线 */
    --border-color: #e8ecf1;
    --border-light: #f0f2f5;
    --divider-color: #e8ecf1;
    /* 状态色 */
    --success: #28a745;
    --warning: #ffc107;
    --danger: #dc3545;
    --info: #17a2b8;
    /* 阴影 */
    --shadow-sm: 0 1px 3px rgba(0, 102, 204, 0.1);
    --shadow-md: 0 4px 12px rgba(0, 102, 204, 0.15);
    --shadow-lg: 0 8px 24px rgba(0, 102, 204, 0.2);
    --shadow-glow: 0 0 20px rgba(0, 170, 255, 0.3);
    /* iPhone 17 Pro Max 尺寸参考 */
    --iphone-width: 440px;
    --iphone-height: 956px;
    --safe-top: env(safe-area-inset-top, 47px);
    --safe-bottom: env(safe-area-inset-bottom, 34px);
    /* 导航栏高度 */
    --header-height: 56px;
    --footer-height: 90px;
    --footer-total-height: calc(var(--footer-height) + var(--safe-bottom));
    /* 导航项宽度范围：1/6 ~ 1/4 屏幕宽度（最多4.5个可见） */
    --nav-item-min-width: calc(100vw / 6);
    --nav-item-max-width: calc(100vw / 5);
    --nav-item-width: clamp(63px, calc(100vw / 5.75), 110px);
    /* 回到顶部按钮 */
    --back-to-top-size: 44px;
    --back-to-top-bottom: calc(var(--footer-total-height) + 20px);
}

.text-truncate-1 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* 限制行数 */
    overflow: hidden;
}
.text-truncate-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* 限制行数 */
    overflow: hidden;
}
.text-truncate-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 限制行数 */
    overflow: hidden;
}