/* ==========================================
   1. 基础苹果风样式重置 (Shared Base)
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: #000000;
    color: #f5f5f7;
    overflow-x: hidden;
}

/* 鼠标悬停变手指 */
.clickable {
    cursor: pointer;
    transition: color 0.3s ease;
}

/* ==========================================
   2. 导航栏组件 (Navigation)
   ========================================== */
.apple-nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: 44px;
    background: rgba(22, 22, 23, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 9999;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-content {
    width: 100%;
    max-width: 1024px;
    display: flex;
    justify-content: space-between;
    padding: 0 22px;
    font-size: 12px;
    color: #cccccc;
}
.nav-content span { cursor: pointer; transition: color 0.3s; }
.nav-content span:hover { color: #ffffff; }

/* 副导航栏 */
.sub-nav {
    position: fixed;
    top: 44px;
    width: 100%;
    height: 52px;
    background: rgba(22, 22, 23, 0.7);
    backdrop-filter: blur(20px);
    z-index: 999;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sub-nav-content {
    width: 100%;
    max-width: 1024px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 22px;
}
.sub-nav-title { font-size: 21px; font-weight: 600; color: #f5f5f7; }

/* 概览页按钮 */
.sub-nav-btn {
    background: #0071e3;
    color: white;
    padding: 4px 11px;
    border-radius: 980px;
    font-size: 12px;
    cursor: pointer;
}

/* 公告页菜单 */
.sub-nav-menu { display: flex; gap: 24px; font-size: 12px; color: #a1a1a6; }
.sub-nav-menu span { cursor: pointer; transition: color 0.3s; }
.sub-nav-menu span.active, .sub-nav-menu span:hover { color: #f5f5f7; }

/* ==========================================
   3. 核心滚轴框架 (Sticky Scroll Track)
   ========================================== */
.scroll-track {
    position: relative;
    width: 100%;
}
.sticky-view {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* ==========================================
   4. 页面 1：产品概览页专属样式
   ========================================== */
#track-hero { height: 250vh; }
.hero-title {
    font-size: 96px;
    font-weight: 700;
    text-align: center;
    background: linear-gradient(90deg, #ff7e5f, #feb47b, #86a8e7, #7f7fd5);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    z-index: 10;
    transform: scale(1);
    transition: transform 0.1s linear;
    margin-bottom: 20px;
}
.hero-subtitle { font-size: 32px; font-weight: 500; color: #86868b; z-index: 10; }
.hero-macbook-container {
    position: absolute;
    bottom: -10%;
    width: 80%;
    max-width: 1000px;
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, #2c3e50, #000000);
    border: 4px solid #333;
    border-radius: 24px;
    transform: scale(0.6) translateY(100px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.wallpaper-bg { width: 100%; height: 100%; background: radial-gradient(circle at center, #7f7fd5, #86a8e7, #111); opacity: 0.8; }

#track-narrative { height: 350vh; background-color: #000; }
.narrative-box { position: relative; width: 100%; max-width: 800px; height: 100%; display: flex; justify-content: center; align-items: center; }
.fade-text { position: absolute; font-size: 48px; font-weight: 600; text-align: center; line-height: 1.3; padding: 0 40px; opacity: 0; transform: translateY(40px); pointer-events: none; }
.highlight-blue { color: #2997ff; }
.highlight-purple { color: #bf40bf; }
.highlight-orange { color: #f56300; }

#track-continuity { height: 200vh; background: #050505; }
.continuity-wrapper { display: flex; justify-content: center; align-items: center; gap: 100px; width: 100%; max-width: 1200px; }
.mock-mac { width: 500px; height: 320px; background: #222; border-radius: 12px; border: 3px solid #444; display: flex; justify-content: center; align-items: center; transform: translateX(-100px); opacity: 0; }
.mock-phone { width: 160px; height: 320px; background: #111; border-radius: 24px; border: 3px solid #444; display: flex; justify-content: center; align-items: center; transform: translateX(100px); opacity: 0; }
.card-graphic-1 { width: 100%; height: 140px; background: linear-gradient(45deg, #1e3c72, #2a5298); margin-top: 20px; border-radius: 14px; box-shadow: inset 0 0 20px rgba(255,255,255,0.1); }
.card-graphic-2 { position: absolute; right: -30px; bottom: -30px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(#bf40bf, transparent 70%); opacity: 0.5; }

/* ==========================================
   5. 页面 2：公告中心页专属样式
   ========================================== */
#track-hero-announcement { height: 200vh; background-color: #000; }
.hero-header-box { text-align: center; z-index: 10; margin-bottom: 40px; }
.hero-tag { font-size: 14px; font-weight: 600; color: #ff9f0a; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px;}
.hero-announcement-title { font-size: 72px; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(180deg, #ffffff 0%, #a1a1a6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.announcement-plate { width: 85%; max-width: 900px; height: 400px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 32px; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); padding: 60px; box-shadow: 0 40px 100px rgba(0,0,0,0.6); transform: scale(0.5) translateY(300px); opacity: 0; display: flex; flex-direction: column; justify-content: space-between; }
.plate-date { font-size: 14px; color: #86868b; }
.plate-title { font-size: 36px; font-weight: 600; color: #fff; margin-top: 10px; line-height: 1.2;}
.plate-body { font-size: 18px; color: #a1a1a6; line-height: 1.6; margin-top: 20px;}
.plate-footer { font-size: 14px; color: #0071e3; cursor: pointer; font-weight: 500;}

#track-timeline { height: 400vh; background-color: #0b0b0c; }
.timeline-container { position: relative; width: 100%; max-width: 800px; height: 80%; display: flex; flex-direction: column; justify-content: space-between; padding-left: 60px; }
.timeline-line { position: absolute; left: 20px; top: 0; width: 2px; height: 100%; background: rgba(255, 255, 255, 0.1); }
.timeline-progress-line { position: absolute; left: 20px; top: 0; width: 2px; height: 0%; background: linear-gradient(180deg, #0071e3, #30d158); transition: height 0.1s linear; }
.timeline-node { position: relative; opacity: 0.15; transform: translateY(30px); transition: opacity 0.4s, transform 0.4s; }
.node-dot { position: absolute; left: -50px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #86868b; border: 2px solid #0b0b0c; transition: background 0.3s, transform 0.3s; }
.timeline-node.active { opacity: 1; transform: translateY(0); }
.timeline-node.active .node-dot { background: #0071e3; transform: scale(1.3); box-shadow: 0 0 10px #0071e3; }
.node-date { font-size: 14px; color: #30d158; font-weight: 600; margin-bottom: 6px; }
.node-title { font-size: 24px; font-weight: 600; color: #f5f5f7; margin-bottom: 8px;}
.node-desc { font-size: 16px; color: #86868b; line-height: 1.5; }

/* ==========================================
   6. 统一便当盒网格 (Bento Box Grid Layout)
   ========================================== */
.bento-section { padding: 100px 20px; max-width: 1100px; margin: 0 auto; }
.bento-title { font-size: 48px; font-weight: 600; margin-bottom: 60px; text-align: left; }
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bento-card { background: #161617; border-radius: 24px; padding: 36px; min-height: 280px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255,255,255,0.01); opacity: 0; transform: translateY(50px); transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.bento-card:hover { transform: translateY(-5px) !important; border-color: rgba(255,255,255,0.08); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }

/* 飞入激活状态 */
.bento-card.reveal { opacity: 1; transform: translateY(0); }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }

.card-tag { font-size: 14px; font-weight: 600; color: #86868b; text-transform: uppercase; margin-bottom: 10px; }
.card-heading { font-size: 24px; font-weight: 600; line-height: 1.2; color: #f5f5f7; }
.card-meta { display: flex; justify-content: space-between; font-size: 12px; color: #86868b; margin-bottom: 16px; }
.card-badge { background: rgba(255,255,255,0.1); color: #fff; padding: 2px 8px; border-radius: 4px; }
.card-summary { font-size: 14px; color: #86868b; line-height: 1.5; margin-top: 12px; }
.card-action { font-size: 14px; color: #2997ff; margin-top: 20px; cursor: pointer; }

/* ==========================================
   7. 统一页脚 (Apple Universal Footer)
   ========================================== */
.apple-footer { background: #161617; color: #86868b; padding: 60px 20px; font-size: 12px; line-height: 1.6; border-top: 1px solid #333; }
.footer-content { max-width: 1024px; margin: 0 auto; }
.footer-text { padding-bottom: 20px; border-bottom: 1px solid #424245; margin-bottom: 20px; }
.footer-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-bottom: 40px; }
.footer-col h4 { color: #f5f5f7; margin-bottom: 10px; }
.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: 8px; cursor: pointer; }
.footer-col ul li:hover { color: #f5f5f7; }
/* 全局丝滑切页基础样式 */
body {
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
/* 激活状态 */
body.page-visible {
    opacity: 1;
}

/* 隐藏原生鼠标 */
html, body {
    cursor: none !important;
}
a, button, span, .clickable {
    cursor: none !important; /* 悬停时也隐藏原生鼠标 */
}

/* 外圈圆环样式 */
.custom-cursor {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none; /* 核心：让鼠标穿透，否则点不到网页上的按钮 */
    z-index: 10000000;
    /* 关键：用 transform 实现丝滑移动，给 scale 加过渡 */
    transition: width 0.2s, height 0.2s, background-color 0.2s, border-color 0.2s;
}

/* 中心实心小点 */
.custom-cursor-dot {
    width: 4px;
    height: 4px;
    background-color: #ffffff;
    border-radius: 50%;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10000001;
}

/* 当鼠标悬停在可点击元素上时的膨胀特效 */
.custom-cursor.hovered {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.8);
}
/* 右键自定义提示框基础样式 */
.right-click-alert {
    position: fixed;
    top: 50%;
    left: 50%;
    /* 核心：默认缩小到 0.8 倍并隐藏 */
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
    pointer-events: none; /* 隐藏时不允许鼠标互动 */
    
    background: rgba(30, 30, 31, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 30px 40px;
    width: 320px;
    text-align: center;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
    z-index: 999999; /* 确保在最上层 */
    
    /* 丝滑过渡动效 */
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 激活显示状态：恢复 1 倍大小并淡入 */
.right-click-alert.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

/* 提示框内部精细微调 */
.alert-icon { font-size: 32px; color: #fff; margin-bottom: 12px; }
.alert-title { font-size: 18px; font-weight: 600; color: #f5f5f7; margin-bottom: 8px; }
.alert-desc { font-size: 13px; color: #86868b; line-height: 1.5; }
/* ==========================================
   8. 苹果风毛玻璃登录弹窗
   ========================================== */
/* 全局全屏遮罩 */
.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    opacity: 0;
    pointer-events: none;
    z-index: 100000; /* 确保在最上层，但在鼠标下方 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 遮罩自身的淡入和毛玻璃渐变 */
    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
                backdrop-filter 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 遮罩激活状态 */
.login-overlay.show {
    opacity: 1;
    pointer-events: auto;
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
}

/* 登录卡片基础样式 */
.login-modal {
    background: rgba(30, 30, 31, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    width: 100%;
    max-width: 440px;
    padding: 40px;
    position: relative;
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.8);
    
    /* 核心：默认缩小到 0.85 倍，制造一种从深处弹出的高级感 */
    transform: scale(0.85);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 激活时卡片恢复 1 倍大小 */
.login-overlay.show .login-modal {
    transform: scale(1);
}

/* 内部细节组件 */
.login-close { position: absolute; top: 24px; right: 24px; color: #86868b; font-size: 16px; }
.login-close:hover { color: #f5f5f7; }
.login-header { text-align: center; margin-bottom: 30px; }
.login-logo { font-size: 40px; color: #fff; margin-bottom: 10px; }
.login-header h2 { font-size: 24px; font-weight: 600; color: #f5f5f7; }
.login-subtitle { font-size: 13px; color: #86868b; margin-top: 6px; }

/* 苹果风浮动标签输入框 (Floating Labels) */
.login-form { display: flex; flex-direction: column; gap: 20px; }
.input-group { position: relative; width: 100%; }
.input-group input {
    width: 100%;
    padding: 16px 14px 8px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}
/* 输入框聚焦时的蓝色光晕 */
.input-group input:focus {
    border-color: #0071e3;
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.3);
}
/* 标签定位 */
.input-group label {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #86868b;
    font-size: 15px;
    pointer-events: none;
    transition: all 0.2s ease;
}
/* 核心联动：当输入框聚焦，或者里面有文字时，标签往上提并变小 */
.input-group input:focus ~ label,
.input-group input:not(:placeholder-shown) ~ label {
    top: 12px;
    font-size: 11px;
    color: #0071e3;
}

/* 登录按钮 */
.login-submit-btn {
    background: #0071e3;
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    margin-top: 10px;
    transition: background 0.2s;
}
.login-submit-btn:hover { background: #147ce5; }
.login-footer { text-align: center; margin-top: 20px; font-size: 13px; color: #0071e3; }
/* ==========================================
   9. INFO 页面专属便当盒栅格
   ========================================== */
.info-hero-box {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 40px;
}
.info-main-title {
    font-size: 56px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    background: linear-gradient(180deg, #fff 0%, #a1a1a6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: 12px;
}
.info-lead-text {
    font-size: 21px;
    line-height: 1.5;
    color: #86868b;
    margin-top: 24px;
    font-weight: 400;
}
.info-grid {
    grid-template-columns: repeat(3, 1fr) !important; /* 强制Info页为标准三列便当盒 */
}
.long-card {
    grid-column: span 2; /* 简介卡片横跨两列 */
}
.badge {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    color: #f5f5f7;
}
/* ==========================================
   10. 苹果风移动端响应式适配 (屏幕小于 768px 自动触发)
   ========================================== */
@media (max-width: 768px) {
    
    /* 1. 核心：在手机端彻底隐藏自定义鼠标，恢复手机原生触控 */
    html, body, a, button, span, .clickable, [onclick] {
        cursor: auto !important;
    }
    .custom-cursor, .custom-cursor-dot {
        display: none !important; /* 隐藏小圆圈和中心点 */
    }

    /* 2. 缩减大字号，防止手机端标题换行错乱 */
    .info-main-title {
        font-size: 32px !important; /* 56px 变 32px，更适合手机 */
        line-height: 1.2;
    }
    .info-lead-text {
        font-size: 16px !important;
        margin-top: 16px;
    }
    .info-hero-box {
        padding: 0 20px; /* 缩小两侧留白 */
    }

    /* 3. 便当盒重构：从 3 列并排 变成 单列垂直大卡片 */
    .info-grid {
        grid-template-columns: 1fr !important; /* 强行变为单列 */
        gap: 16px !important; /* 缩小卡片间距 */
        padding: 0 20px;
    }
    .long-card {
        grid-column: span 1 !important; /* 原本横跨两列的卡片恢复单列 */
    }
    .bento-card {
        padding: 24px !important; /* 减小卡片内边距 */
    }

    /* 4. 导航栏适配：仿苹果官网的横向丝滑滚动 */
    .sub-nav-content {
        padding: 0 20px !important;
    }
    .sub-nav-menu {
        gap: 20px !important;
        display: flex !important;
        overflow-x: auto !important; /* 允许左右滑动查看“概览/updates/简介” */
        white-space: nowrap;
        -webkit-overflow-scrolling: touch; /* 开启 iOS 系统的硬件加速级丝滑滚动 */
        padding-bottom: 4px;
    }
    /* 隐藏手机端菜单底部丑陋的滚动条 */
    .sub-nav-menu::-webkit-scrollbar {
        display: none;
    }
    
    /* 5. 统一缩减大遮罩弹窗（如登录框）的内边距，防止超出手机屏幕 */
    .login-modal {
        padding: 30px 20px !important;
        margin: 0 20px;
        border-radius: 20px;
    }
}
/* ==========================================
   11. SOCIAL 页面专属社交名片与矩阵
   ========================================== */
.social-header-section {
    text-align: center;
    padding: 60px 20px 40px 20px;
}
.profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.profile-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 100%);
    border: 2px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    margin-bottom: 20px;
}
.avatar-logo {
    font-size: 36px;
    color: #fff;
}
.profile-name {
    font-size: 32px;
    font-weight: 600;
    color: #f5f5f7;
    letter-spacing: -0.01em;
}
.profile-bio {
    font-size: 15px;
    color: #86868b;
    margin-top: 8px;
    max-width: 500px;
    line-height: 1.5;
}

/* 社交卡片增强动效 */
.social-grid {
    grid-template-columns: repeat(2, 1fr) !important; /* PC端双列对齐，大气沉稳 */
    max-width: 800px;
    margin: 0 auto;
}
.social-card {
    display: flex;
    align-items: center;
    padding: 30px !important;
    position: relative;
    background: rgba(30, 30, 31, 0.6);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                background 0.3s cubic-bezier(0.25, 1, 0.5, 1),
                border-color 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
/* 悬浮轻微浮起，并让暗黑背景微亮 */
.social-card:hover {
    transform: translateY(-4px);
    background: rgba(45, 45, 46, 0.8);
    border-color: rgba(255, 255, 255, 0.25);
}
.social-icon {
    font-size: 40px;
    margin-right: 24px;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2));
}
.social-info h3 {
    font-size: 19px;
    font-weight: 600;
    color: #f5f5f7;
}
.social-status {
    font-size: 13px;
    color: #0071e3; /* 苹果标志性蓝色 */
    margin-top: 2px;
    font-family: monospace;
}
.social-tag {
    display: block;
    font-size: 13px;
    color: #86868b;
    margin-top: 8px;
}
.arrow-go {
    position: absolute;
    right: 30px;
    top: 30px;
    color: #424245;
    font-size: 16px;
    transition: color 0.3s, transform 0.3s;
}
.social-card:hover .arrow-go {
    color: #fff;
    transform: translate(2px, -2px); /* 箭头右上轻微位移 */
}

/* 手机端媒体查询适配追加 */
@media (max-width: 768px) {
    .social-grid {
        grid-template-columns: 1fr !important; /* 手机端强制单列卡片 */
        padding: 0 20px;
    }
    .social-card {
        padding: 20px !important;
    }
    .profile-name {
        font-size: 26px;
    }
}
/* ==========================================
   12. TIMELINE 社交主页双栏核心布局 (已隔离，防止污染 updates 页面)
   ========================================== */
.social-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex !important;            /* 🔍 仅对社交页强制开启弹性盒 */
    flex-direction: row !important;      /* 🔍 仅对社交页强制左右横向排布 */
    align-items: flex-start;             
    gap: 32px;                           
    padding: 120px 20px 60px 20px;
}

.social-container .feed-area {
    flex: 1;                             
    max-width: 640px;                    
    min-width: 0;                        
}

.social-container .widgets-sidebar {
    width: 300px;                        
    flex-shrink: 0;                      
    display: flex;
    flex-direction: column;
    gap: 20px;                           
}

/* 手机端崩溃防御同样进行精准隔离 */
@media (max-width: 768px) {
    .social-container { 
        flex-direction: column !important; /* 手机端切回单列 */
    }
    .social-container .widgets-sidebar { 
        display: none !important; /* 手机端隐藏右栏 */
    }
}
/* ==========================================
   13. 左侧动态流组件 (发帖框 & 推文卡片)
   ========================================== */
.feed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 20px;
}
.feed-header h2 { font-size: 22px; font-weight: 600; color: #f5f5f7; }

/* 丝滑刷新按钮 */
.refresh-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    color: #0071e3;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s, transform 0.2s;
}
.refresh-btn:hover { background: rgba(255, 255, 255, 0.1); }
.refresh-btn:active { transform: scale(0.95); }
.refresh-icon { display: inline-block; transition: transform 0.5s ease; font-size: 15px; }
.refresh-btn.spinning .refresh-icon { transform: rotate(360deg); }

/* 发帖框 */
.composer-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}
.composer-avatar, .tweet-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #fff;
    flex-shrink: 0;
}
.composer-body { flex: 1; }
.composer-body textarea {
    width: 100%;
    height: 60px;
    background: transparent;
    border: none;
    resize: none;
    color: #fff;
    font-size: 16px;
    outline: none;
    font-family: inherit;
}
.composer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    padding-top: 12px;
}
.media-icons { display: flex; gap: 14px; font-size: 18px; color: #86868b; }
.post-submit-btn {
    background: #0071e3;
    color: #fff;
    border: none;
    padding: 6px 18px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 500;
}

/* 推文卡片与进场动画 */
.tweet-card {
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    opacity: 0;
    transform: translateY(-15px);
    animation: slideInPost 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideInPost { to { opacity: 1; transform: translateY(0); } }
.tweet-card:hover {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.1);
}
.tweet-main { flex: 1; min-width: 0; }
.tweet-user-info { margin-bottom: 4px; }
.tweet-name { font-weight: 600; color: #f5f5f7; margin-right: 6px; }
.tweet-handle { font-size: 13px; color: #86868b; }
.tweet-content { font-size: 15px; color: #e8e8ed; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

/* 互动按钮 */
.tweet-actions { display: flex; justify-content: space-between; max-width: 360px; margin-top: 14px; color: #86868b; font-size: 13px; }
.action-item { transition: color 0.2s; }
.clickable-like:hover { color: #ff453a; }
.liked { color: #ff453a !important; font-weight: bold; }

/* ==========================================
   14. 右侧个人名片卡高级拟物样式
   ========================================== */
.widget-box { 
    background: rgba(255, 255, 255, 0.02); 
    border: 1px solid rgba(255, 255, 255, 0.05); 
    border-radius: 16px; 
    padding: 20px; 
}
.profile-widget {
    padding: 0 !important; /* 让背景横幅撑满卡片边缘 */
    overflow: hidden;
}
.profile-bg-banner {
    height: 85px;
    background: linear-gradient(135deg, #2c2c2e 0%, #0a0a0c 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.profile-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 16px;
    margin-top: -30px; /* 头像往上提，压住黑横幅 */
    margin-bottom: 12px;
}
.profile-widget-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ff9500;
    border: 4px solid #1e1e1f; /* 用深色边框制造视觉隔离线 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.profile-edit-btn {
    background: #f5f5f7;
    color: #1c1c1e;
    border: none;
    padding: 5px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    transition: background 0.2s, transform 0.2s;
}
.profile-edit-btn:hover { background: #e8e8ed; }
.profile-edit-btn:active { transform: scale(0.95); }

.profile-widget-info { padding: 0 16px; }
.profile-widget-name { font-size: 17px !important; font-weight: 600; color: #f5f5f7; }
.profile-widget-handle { font-size: 12px; color: #86868b; font-family: monospace; margin-bottom: 10px; }
.profile-widget-bio { font-size: 13px; color: #d2d2d7; line-height: 1.4; margin-bottom: 16px; }

.profile-widget-stats {
    display: flex;
    gap: 20px;
    padding: 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(255, 255, 255, 0.005);
}
.stat-item { display: flex; flex-direction: column; }
.stat-num { font-size: 14px; font-weight: 600; color: #f5f5f7; }
.stat-label { font-size: 11px; color: #86868b; }

/* 趋势组件 */
.widget-box h3 { font-size: 16px; color: #f5f5f7; margin-bottom: 14px; font-weight: 600; }
.trend-item { padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.trend-item:last-child { border: none; }
.trend-meta { font-size: 11px; color: #86868b; }
.trend-item h4 { font-size: 13px; color: #f5f5f7; margin: 3px 0; }

/* ==========================================
   15. 手机端崩溃防御 (响应式)
   ========================================== */
@media (max-width: 768px) {
    .timeline-container { 
        flex-direction: column !important; /* 手机端切回单列上下排列 */
        padding-top: 100px; 
    }
    .widgets-sidebar { 
        display: none !important; /* 手机端自动隐藏右侧侧边栏，聚焦中间信息流 */
    }
}
/* ==========================================
   16. 全局提示框 / 弹窗毛玻璃（Glassmorphism）完美升级
   ========================================== */
.right-click-alert, 
.login-modal, 
.custom-alert { /* 🔍 包含右键提示、登录框，以及你未来可能加的任何自定义提示框 */
    
    /* 1. 核心：半透明底色与强力毛玻璃（加入190%饱和度提升，色彩透出更高级） */
    background: rgba(28, 28, 30, 0.55) !important; 
    backdrop-filter: blur(20px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(190%) !important; /* 适配 Safari 浏览器 */

    /* 2. 边缘微光：1px 的半透明白色边框，这是毛玻璃显现“厚度”的灵魂 */
    border: 1px solid rgba(255, 255, 255, 0.12) !important;

    /* 3. 拟物阴影：外层大沉淀阴影 + 内部微弱高光（inset） */
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5), 
                inset 0 1px 1px rgba(255, 255, 255, 0.1) !important;

    /* 4. 细节微调：文字防模糊 */
    color: #f5f5f7 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    
    /* 5. 确保层级在网页上方，但依然在你的自定义鼠标（一千万层级）下方 */
    z-index: 999999; 
}

/* 提示框内的次要描述文本颜色同步优化 */
.right-click-alert .alert-desc, 
.login-modal p {
    color: #a1a1a6 !important;
}

/* 如果你的提示框里有输入框（如登录框），让输入框也带一点微弱的毛玻璃感 */
.login-modal input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    color: #fff !important;
}
.login-modal input:focus {
    border-color: #0071e3 !important; /* 聚焦时变成苹果蓝 */
    background: rgba(255, 255, 255, 0.08) !important;
}
/* ==========================================
   17. 自定义弹窗的定位与丝滑入场动画
   ========================================== */
.custom-alert {
    position: fixed;
    top: 50px;                     /* 固定在屏幕上方顶部 */
    left: 50%;
    transform: translateX(-50%) translateY(-20px); /* 默认往上缩进去 */
    opacity: 0;
    pointer-events: none;          /* 隐藏时不允许鼠标互动 */
    padding: 20px 40px !important;
    border-radius: 20px;
    text-align: center;
    min-width: 300px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* 当被 JS 注入 .show 类名时，丝滑坠落显现 */
.custom-alert.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.custom-alert .alert-icon {
    font-size: 24px;
    margin-bottom: 8px;
}
.custom-alert .alert-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}
/* ==========================================
   18. 苹果科技暗黑风 - 全局霓虹发光鼠标
   ========================================== */
/* 🔍 核心：在有鼠标的设备上，强行隐藏系统原本丑陋的白色箭头 */
@media (pointer: fine) {
    body, a, button, .clickable, textarea, input {
        cursor: none !important;
    }
}

/* 外层：柔和跟随的发光光晕 */
.custom-cursor {
    width: 40px;
    height: 40px;
    background: rgba(0, 113, 227, 0.04);       /* 极淡的极光蓝底色 */
    border: 1px solid rgba(0, 113, 227, 0.4);   /* 亮蓝色微光外框 */
    border-radius: 50%;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;                       /* 🔍 关键：允许鼠标事件穿透，不影响网页点击 */
    z-index: 99999999;                          /* 确保在全站最顶层（甚至在毛玻璃弹窗上方） */
    
    /* 核心发光灵魂：三层不同半径的阴影交织，模拟真实物理光源的色散 */
    box-shadow: 0 0 15px rgba(0, 113, 227, 0.6),
                0 0 35px rgba(0, 113, 227, 0.3),
                inset 0 0 10px rgba(0, 113, 227, 0.2);
    
    /* 高刷缓动曲线：让外圈产生大约 0.08 秒的“果冻尾随感”，鼠标甩动时极其丝滑 */
    transition: transform 0.08s cubic-bezier(0.25, 1, 0.5, 1),
                width 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                height 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                background 0.3s, border-color 0.3s;
}

/* 内层：绝对精准的实心定位核心点 */
.custom-cursor-dot {
    width: 6px;
    height: 6px;
    background: #0071e3;                        /* 核心高亮蓝点 */
    border-radius: 50%;
    position: fixed;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 100000000;                         /* 永远比外圈高一层 */
    
    /* 中心点微弱的高亮激光 */
    box-shadow: 0 0 10px #0071e3, 0 0 20px rgba(0, 113, 227, 0.8);
    transition: transform 0.1s;
}

/* ==========================================
   19. 交互吸附态：当鼠标移入按钮、链接、输入框时
   ========================================== */
/* 当 body 带有 cursor-hover 类时，外圈发光暴增、体积放大，形成“聚焦吸附”视觉 */
body.cursor-hover .custom-cursor {
    width: 56px;
    height: 56px;
    background: rgba(0, 113, 227, 0.12);
    border-color: rgba(0, 113, 227, 0.9);
    box-shadow: 0 0 25px rgba(0, 113, 227, 0.9),
                0 0 60px rgba(0, 113, 227, 0.5);
}

/* 此时中心点瞬间收缩并变成耀眼的纯白，极具破坏力与科技感 */
body.cursor-hover .custom-cursor-dot {
    transform: translate(-50%, -50%) scale(0.6);
    background: #ffffff;
    box-shadow: 0 0 15px #ffffff;
}
/* ==========================================
   21. APPLE INTELLIGENCE 风格自动流光线条
   ========================================== */
/* 背景舱：依旧压入 Z 轴深处 -80px */
.hero-3d-bg-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    border-radius: 32px;
    transform: translateZ(-80px) scale(1.05);
    pointer-events: none;
    z-index: 1;
}

/* SVG 容器：撑满背景，并加入超大范围的霓虹发光滤镜（Drop Shadow） */
.glowing-lines {
    width: 110%;
    height: 110%;
    position: absolute;
    top: -5%;
    left: -5%;
    /* 🔍 核心：利用硬件加速的多重高斯模糊阴影，把细线条晕染成梦幻的极光流 */
    filter: drop-shadow(0 0 25px rgba(0, 193, 255, 0.4)) 
            drop-shadow(0 0 50px rgba(110, 64, 255, 0.25));
    opacity: 0.8;
}

/* 所有的线条基础设定 */
.stream-line {
    stroke-linecap: round;
    /* 引入两组不同的循环动画：一组控制光流前进，一组控制线条自身柔和扭动 */
    animation: flow-dash 12s linear infinite, 
               wave-pulse 8s ease-in-out infinite alternate;
}

/* 让不同线条的动画错开时间，避免动作僵硬同步 */
.line-1 {
    animation-duration: 14s, 7s;
}
.line-2 {
    animation-duration: 18s, 10s;
    opacity: 0.8;
}
.line-3 {
    animation-duration: 10s, 6s;
    opacity: 0.5;
}

/* ==========================================
   22. 纯 CSS 硬件加速动画：全自动光流解算
   ========================================== */
/* 动画 1：利用虚线偏移差，让线条上的高亮渐变色无限向前流淌 */
@keyframes flow-dash {
    0% {
        stroke-dasharray: 0 1500;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 600 800; /* 流动过程中光带拉长 */
    }
    100% {
        stroke-dasharray: 0 1500;
        stroke-dashoffset: -1400;  /* 彻底流过全场 */
    }
}

/* 动画 2：微弱的空间呼吸感，模拟液态光纤的不规则舒张 */
@keyframes wave-pulse {
    0% {
        transform: scale(0.98) translate(-5px, -5px);
        stroke-width: 1.5px;
    }
    100% {
        transform: scale(1.02) translate(5px, 5px);
        stroke-width: 3.5px; /* 线条粗细随呼吸发生微调 */
    }
}
/* ==========================================
   23. MACBOOK 屏幕壁纸高刷性能优化
   ========================================== */
.wallpaper-bg {
    /* 1. 填入你的照片路径（相对路径或网络链接） */
    background-image: url('wp7542064.jpg');
    
    /* 2. 核心裁剪：让图片完美等比例撑满屏幕，绝不拉伸变形 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* 3. 尺寸对齐：确保壁纸铺满整个屏幕容器 */
    width: 100%;
    height: 100%;
    
    /* 4. 性能与视觉微调：
          如果你的 MacBook 模型有圆角，记得给壁纸也加上对应的内圆角，防止照片边缘溢出黑框 */
    border-radius: 12px; 
    
    /* 5. 3D 兼容：让照片和屏幕合为一体，跟着外层一起倾斜 */
    transform: translateZ(0); 
    will-change: transform;
}