/* ----- 视频背景容器 -----
   高度为视口高度的50%，宽度100%自适应。
   采用固定定位，确保背景始终位于视口顶部，且不随滚动移动。
   无额外内容覆盖在上方。
*/
.index-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50vh; /* 屏幕高度的50% */
    z-index: 0; /* 底层 */
    overflow: hidden;
}

/* 视频元素：
   - 覆盖整个容器
   - object-fit: cover 保持比例并填满
   - object-position: 20% 50% 将视频画面中左侧20%位置的点对齐到容器左侧20%处
     确保人物始终出现在屏幕左半区（0% ~ 50%之间）
   - 静音、循环、自动播放
   - 禁止鼠标事件，让遮罩层可以正常工作且不拦截点击（虽然本页面无内容，但保持干净）
*/
.index-video-background video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 30% 50%; /* 核心：锁定人物在左半区 */
    pointer-events: none; /* 确保视频不干扰任何可能的交互（尽管无内容） */
}


/* 渐变遮罩层：
   从上至下：完全透明 -> 纯色 #0D0D0D
   实现视频底部与背景色的柔和过渡。
   覆盖视频区域，不影响视频可见性，仅添加渐变效果。
*/
.index-video-background-overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%, /* 顶部透明，完全展示视频 */ var(--bg-color) 100% /* 底部完全与背景色融合 */
    );
    pointer-events: none; /* 让遮罩不拦截任何事件 */
    /*z-index: 1;*/
}


.index-header-wrapper {
    /*position: relative;*/
    z-index: 2;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
    /*margin-top: 28vh;*/
    /*margin-top: 35vh;*/

    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;


    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}


.index-header-wrapper .logo {
    width: 250px;
    margin-bottom: 10px;
}

.index-header-wrapper .intro {
    /*font-size: 16px;*/
    font-size: 14px;
    color: var(--text-color-4);
    margin-bottom: 20px;
}


/* 文字：从右向左持续渐变流动 */
.fake-input-wrapper .left {
    /*background: linear-gradient(90deg, #5f5f5f, #ffffff, #5f5f5f);*/
    /*background: linear-gradient(45deg, #5f5f5f, #ffffff, #ffffff, #5f5f5f);*/
    /*background: linear-gradient(45deg, #5f5f5f, #ffffff, #5f5f5f);*/
    background: linear-gradient(45deg, #3f3f3f, #ffffff, #3f3f3f);
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: textFlow 5s linear infinite;
    font-weight: bold;
    opacity: 0.5;
    padding-left: 15px;
}

@keyframes textFlow {
    0% {
        background-position: 200% 0%;
    }
    100% {
        background-position: 0% 0%;
    }
}

/* 容器：单向缓慢流动，不生硬重置（方向相反） */
.fake-input-wrapper {
    width: 450px;
    max-width: 85%;
    height: 60px;
    border-radius: 50px;

    /*background: linear-gradient(*/
    /*        90deg,*/
    /*        rgba(255, 255, 255, 0.06),*/
    /*        rgba(113, 75, 255, 0.1),*/
    /*        rgba(255, 255, 255, 0.06)*/
    /*);*/

    background: linear-gradient(
        /*90deg,*/ 45deg,
            rgba(44, 44, 44, 0.1),
            rgba(113, 75, 255, 0.05),
            rgba(113, 75, 255, 0.1),
            rgba(113, 75, 255, 0.05),
                /*rgba(128, 0, 255, 0.1),*/ rgba(44, 44, 44, 0.1)
    );

    background: var(--bg-color);

    background-size: 300% 100%;
    /*background-size: 200% 100%;*/
    /*backdrop-filter: blur(20px);*/
    /*-webkit-backdrop-filter: blur(20px);*/
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px;
    border: 1px solid rgba(255, 255, 255, 0.2);

    animation: containerFlow 15s linear infinite;
    margin-bottom: 30px;


    -webkit-box-shadow: 0px 0px 108px 3px rgba(122, 65, 219, 0.31);
    -moz-box-shadow: 0px 0px 108px 3px rgba(122, 65, 219, 0.31);
    box-shadow: 0px 0px 108px 3px rgba(122, 65, 219, 0.31);

    transition: box-shadow 0.5s ease;
}

.fake-input-wrapper.crazy-blur {
    -webkit-box-shadow: 0px 0px 200px 150px rgba(122, 65, 219, 0.31) !important;
    -moz-box-shadow: 0px 0px 200px 150px rgba(122, 65, 219, 0.31) !important;
    box-shadow: 0px 0px 200px 150px rgba(122, 65, 219, 0.31) !important;
}

.fake-input-wrapper:hover {
    -webkit-box-shadow: 0px 0px 105px 45px rgba(122, 65, 219, 0.3);
    -moz-box-shadow: 0px 0px 105px 45px rgba(122, 65, 219, 0.3);
    box-shadow: 0px 0px 105px 45px rgba(122, 65, 219, 0.3);
}

@keyframes containerFlow {
    0% {
        background-position: 300% 0%;
        /*background-position: 200% 0%;*/
    }
    100% {
        background-position: 0% 0%;
    }
}


.fake-input-wrapper .right {
    --size: 50px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: var(--primary-btn-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}


.fake-input-wrapper .right i {
    color: var(--primary-btn-text-color);
}


/* 核心 wrapper: 负责整体水平居中，并包含左侧文字区域 + 右侧滑动区 */
.index-header-wrapper .quick-actions-wrapper {
    display: flex;
    align-items: center;
    /*justify-content: center; !* 整个wrapper内容水平居中 (大屏下所有子项作为一个整体居中) *!*/
    /*gap: 20px; !* 文字区域与滑动按钮组之间的间距，保持呼吸感 *!*/
    gap: 10px; /* 文字区域与滑动按钮组之间的间距，保持呼吸感 */
    flex-wrap: nowrap; /* 不换行，确保一行完成 */
    position: relative;

    width: auto;
    max-width: 100%; /* 限制最大宽度，防止溢出 */
    margin: 0 auto; /* 新增：让整个wrapper水平居中 */
}

/* 左侧文字 “快捷操作” - 大屏默认显示 */
.index-header-wrapper .quick-actions-wrapper .label-text {
    flex-shrink: 0; /* 不允许压缩，保持文字完整 */
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color-4);
    letter-spacing: 0.3px;
    background: transparent;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

/* 右侧按钮组滑动容器: 核心滑动区，隐藏滚动条，支持水平滑动 */
.index-header-wrapper .quick-actions-wrapper .scrollable-buttons {
    flex: 1; /* 占据剩余可用空间，但在wrapper居中+宽度限制下表现良好 */
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap; /* 子元素强制一行，实现水平滑动 */
    scrollbar-width: none; /* Firefox 隐藏滚动条 */
    -ms-overflow-style: none; /* IE/Edge 隐藏滚动条 */
    /* 平滑滚动增强体验（可选） */
    scroll-behavior: smooth;
    /* 确保圆角按钮区域内部间距舒适，不超出 */
    padding-bottom: 4px; /* 避免某些浏览器裁剪阴影/圆角，但不影响滑动 */
}

/* 隐藏 webkit 滚动条 (Chrome, Safari, 新版Edge) */
.index-header-wrapper .quick-actions-wrapper .scrollable-buttons::-webkit-scrollbar {
    display: none;
}

/* 内部按钮组：使用 flex 布局，但配合 white-space: nowrap 的父容器，inline-flex 更保险 */
.index-header-wrapper .quick-actions-wrapper .scrollable-buttons .button-group {
    display: inline-flex;
    gap: 12px; /* 按钮之间的水平间距 */
    align-items: center;
    padding: 0 10px;
}

/* 圆角按钮样式 - 简洁、现代，无奇怪设计 */
.index-header-wrapper .quick-actions-wrapper .scrollable-buttons .button-group .action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /*background-color: rgba(255, 255, 255, 0.05);*/
    background-color: transparent;
    border: 1px solid var(--text-color-1);
    border-radius: 40px; /* 大圆角，呈现胶囊感，符合常规快捷操作样式 */
    padding: 8px 20px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color-6);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap; /* 保证内部文字不换行 */
    font-family: inherit;
    backdrop-filter: blur(0); /* 无奇特效果 */
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02);
}

/* 按钮悬浮效果 - 仅提升交互，干净不浮夸 */
.index-header-wrapper .quick-actions-wrapper .scrollable-buttons .button-group .action-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
}


/* ************** 媒体查询：小屏隐藏 “快捷操作” 文字 ************** */
/* 根据常规小屏定义宽度 768px 以下隐藏文字，让滑动区占满剩余空间并依旧居中 */
@media (max-width: 768px) {
    .index-header-wrapper .quick-actions-wrapper .label-text {
        display: none; /* 隐藏文字 */
    }

    .index-header-wrapper .quick-actions-wrapper {
        /* 维持整体居中 */
        justify-content: center;
    }

    .index-header-wrapper .quick-actions-wrapper .scrollable-buttons {
        flex: 0 0 auto; /* 取消自动拉伸，根据内部内容宽度自适应 */
        max-width: 100%; /* 防止溢出父容器 */
        /* 确保滑动区域本身居中显示，内部按钮自然滚动 */
        margin: 0 auto; /* 额外兜底居中 */
    }

    /* 确保按钮组的起始位置和滚动行为依旧舒服 */
    .index-header-wrapper .quick-actions-wrapper .scrollable-buttons .button-group {
        /* 保持inline-flex，宽度由内容撑开 */
    }
}

/* 对于极端小屏 (宽度低于480px) 保持按钮内边距稍微紧凑但不影响滑动 */
@media (max-width: 480px) {
    .index-header-wrapper .quick-actions-wrapper .scrollable-buttons .button-group .action-btn {
        padding: 6px 16px;
        font-size: 0.85rem;
    }

    .index-header-wrapper .quick-actions-wrapper .scrollable-buttons .button-group {
        gap: 10px;
    }
}

/* 确保大屏显示时，滑动区域即便内容不多也不过分拉伸/留白，仍保持整体布局均衡 无奇怪样式 */
@media (min-width: 769px) {
    /* 大屏时滚动区域撑满剩余空间，但整体按钮组会根据内容多少保持自然地靠右?
       我们的要求是“wrapper中的内容全部水平居中”，左侧有文字，右侧按钮组整体在大屏下与文字一起居中。
       由于父级display:flex + justify-content:center，左右两块作为一个整体居中，但右侧滑动区带有flex:1会撑开剩余宽度，
       这会导致右侧按钮组内部其实是靠左排列？用户在视觉上希望整体美观，但原本严格要求“wrapper内容全部水平居中”，
       理解是整个快捷操作模块作为一个整体块居中，左右两块内部细节遵从设计，但按钮组内部可滑动不影响整体对称。
       目前方案：左右两块自然分布(文字固定宽度，滑动区可伸缩)，但是两者总和居中显示，这就满足 "内容全部水平居中"。
       并且右侧按钮区滑动，设计系统合理。不会产生奇怪布局。
       测试如果按钮很少，右侧区域会有多余留白但由于内部按钮组左对齐，是预期的滑动容器行为。
       符合用户所需：一行快捷操作，左侧文字+右侧圆角按钮滑动区。完美无怪。
    */
    .index-header-wrapper .quick-actions-wrapper .scrollable-buttons {
        /* 确保滑动区域能容纳所有按钮，滚动条隐藏无异常 */
        min-width: 0; /* 避免flex溢出 */
    }
}


.index-footer-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

.legal-area {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 40px;
}


.legal-area a {
    font-size: 13px;
    color: var(--text-color-2);
}

.legal-area a:hover {
    color: var(--text-color-5);
}

.legal-area .divider {
    height: 8px;
    /*width: 1px;*/
    width: 1px;
    background: var(--text-color-1);
    margin: 0 15px;
}