/* ========== 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);
}

/* ========== 基础重置 ========== */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========== 移动端容器 ========== */
.mobile-container {
    width: 100%;
    max-width: var(--iphone-width);
    margin: 0 auto;
    min-height: 100vh;
    position: relative;
    background-color: var(--bg-primary);
    overflow-x: hidden;
}

/* ========== 内容区域 ========== */
.mobile-content {
    min-height: 100vh;
    padding-top: calc(var(--header-height) + var(--safe-top));
    padding-bottom: var(--footer-total-height);
    background-color: var(--bg-secondary);
}

    .mobile-content.no-header {
        padding-top: var(--safe-top);
    }

.content-wrapper {
    padding: 12px;
}

/* ========== 版本信息 ========== */
.version-info {
    text-align: center;
    padding: 16px 0;
    font-size: 11px;
    color: var(--text-muted);
}


/* ========== 回到顶部按钮 ========== */
.back-to-top {
    position: fixed;
    right: 16px;
    bottom: var(--back-to-top-bottom);
    width: var(--back-to-top-size);
    height: var(--back-to-top-size);
    background: linear-gradient(135deg, var(--tech-blue) 0%, var(--discovery-blue) 100%);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    cursor: pointer;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .back-to-top.visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    .back-to-top:active {
        transform: scale(0.9);
        box-shadow: 0 2px 8px rgba(0, 102, 204, 0.3);
    }

    .back-to-top i {
        transition: transform 0.2s ease;
    }

    .back-to-top:hover i,
    .back-to-top:active i {
        transform: translateY(-2px);
    }

/* 第一屏高度计算：视口高度 - header - footer */
.first-screen {
    min-height: calc(100vh - var(--header-height) - var(--safe-top) - var(--footer-total-height));
}


/* ========== 底部间距 ========== */
.page-bottom-spacer {
    height: 10px;
}

.text-red {color: red;}