/* --- 1. 全局定义与重置 --- */
:root {
    --accent-cyan: #00f3ff;
    --text-main: #ffffff;
    --text-sub: rgba(255, 255, 255, 0.85);
    /* 文字调亮 */
}

/* 星星呼吸动画 */
@keyframes starBreathing {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.3);
    }
}

/* 按钮悬停时的流光动画 */
@keyframes glowPulse {
    0% {
        box-shadow: 0 0 5px inherit;
    }

    50% {
        box-shadow: 0 0 20px inherit;
    }

    100% {
        box-shadow: 0 0 5px inherit;
    }
}

body {
    background-color: #0b1120;
    /* --- 背景亮度最大化 --- */
    /* 颜色透明度调整到了 0.35 - 0.45，非常亮眼 */
    background-image:
        radial-gradient(circle at 15% 20%, rgba(120, 50, 255, 0.4), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(0, 243, 255, 0.4), transparent 45%),
        radial-gradient(circle at 50% 50%, rgba(20, 30, 60, 0.6), transparent 80%);
    min-height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 20px 0;
    position: relative;
}

/* 繁星背景层 (更亮) */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 10% 15%, #fff, transparent),
        radial-gradient(2px 2px at 50% 25%, #fff, transparent),
        radial-gradient(2px 2px at 90% 10%, #fff, transparent),
        radial-gradient(2px 2px at 30% 60%, #fff, transparent),
        radial-gradient(2.5px 2.5px at 70% 80%, #fff, transparent);
    animation: starBreathing 5s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

#J_dotLine {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.9;
}

/* --- 2. 主卡片容器 (极致高透玻璃) --- */
.auth-card {
    /* 背景透明度降低到 0.6，让背景光强烈透过来 */
    background: rgba(10, 15, 25, 0.6);
    backdrop-filter: blur(15px);
    /* 磨砂感稍微减弱，增加通透度 */
    -webkit-backdrop-filter: blur(15px);

    border: 1px solid rgba(255, 255, 255, 0.2);
    /* 强烈的边缘光晕 */
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.6),
        inset 0 0 30px rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    width: 95%;
    max-width: 850px;
    padding: 40px;
    position: relative;
    z-index: 10;
    text-align: center;
}

/* --- 3. 标题区域 --- */
.app-title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 5px;
    letter-spacing: 1px;
    /* 强霓虹发光 */
    text-shadow: 0 0 20px rgba(0, 243, 255, 0.6);
}

.app-subtitle {
    font-size: 0.95rem;
    color: #a5f3fc;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 35px;
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.3);
}

/* --- 4. 区域标题 --- */
.section-label {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 15px;
    padding-left: 5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.section-label i {
    margin-right: 10px;
    color: var(--accent-cyan);
    filter: drop-shadow(0 0 8px var(--accent-cyan));
}

.section-label .tag {
    font-size: 1.1rem;
    background: linear-gradient(90deg, rgba(0, 243, 255, 0.3), rgba(0, 243, 255, 0.1));
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    margin-left: 10px;
    border: 1px solid rgba(0, 243, 255, 0.4);
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

/* --- 5. 主下载按钮 (动态特效回归版) --- */
.software-btn {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.08);
    /* 按钮背景调亮 */
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* 弹性过渡动画 */
    position: relative;
    overflow: hidden;
    height: 100%;
}

.icon-box {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    margin-right: 15px;
    color: #fff;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    /* 图标弹性动画 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.btn-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.btn-text .name {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}

.btn-text .desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

/* --- 关键：主按钮悬停动态特效 --- */

/* 1. ToDesk (蓝色): 悬停时图标放大并向左歪头 */
.group-todesk:hover {
    background: linear-gradient(135deg, rgba(0, 123, 255, 0.3), rgba(0, 123, 255, 0.1));
    border-color: #007bff;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 123, 255, 0.4);
}

.group-todesk:hover .icon-box {
    background: #007bff;
    transform: scale(1.15) rotate(-10deg);
    /* 歪头特效 */
    box-shadow: 0 0 20px rgba(0, 123, 255, 0.8);
}

/* 2. 向日葵 (橙色): 悬停时图标放大并向右旋转 */
.group-sun:hover {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.3), rgba(255, 140, 0, 0.1));
    border-color: #ff8c00;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(255, 140, 0, 0.4);
}

.group-sun:hover .icon-box {
    background: #ff8c00;
    transform: scale(1.15) rotate(20deg);
    /* 旋转特效 */
    box-shadow: 0 0 20px rgba(255, 140, 0, 0.8);
}

/* 3. 连连控 (青色): 悬停时图标单纯放大，光效增强 */
.group-llk:hover {
    background: linear-gradient(135deg, rgba(32, 201, 151, 0.3), rgba(32, 201, 151, 0.1));
    border-color: #20c997;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(32, 201, 151, 0.4);
}

.group-llk:hover .icon-box {
    background: #20c997;
    transform: scale(1.2);
    /* 强力放大 */
    box-shadow: 0 0 20px rgba(32, 201, 151, 0.8);
}

/* 4. 网易UU (紫色): 悬停时图标向上起飞 */
.group-uu:hover {
    background: linear-gradient(135deg, rgba(111, 66, 193, 0.3), rgba(111, 66, 193, 0.1));
    border-color: #6f42c1;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(111, 66, 193, 0.4);
}

.group-uu:hover .icon-box {
    background: #6f42c1;
    transform: scale(1.15) translateY(-5px);
    /* 起飞特效 */
    box-shadow: 0 0 20px rgba(111, 66, 193, 0.8);
}

/* --- 6. 资源分享与技术支持 (高亮版) --- */
.contact-section {
    margin-top: 30px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
}

.service-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.contact-item {
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    padding: 12px 25px;
    border-radius: 50px;
    transition: all 0.3s;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.contact-item:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
}

.contact-item i {
    margin-right: 10px;
    font-size: 1.3rem;
}

.contact-item .action {
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.2);
    color: inherit;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 10px;
    font-weight: bold;
}

.contact-item:hover .action {
    background: #000;
    color: #fff;
}

/* --- 7. 备用下载区 --- */
.backup-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.backup-pill {
    flex: 1 1 calc(25% - 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    /* 加深底色以突出文字 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px;
    border-radius: 10px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s;
    min-width: 120px;
}

.backup-pill i {
    font-size: 1.1rem;
    margin-right: 8px;
    transition: 0.3s;
}

.backup-pill span {
    font-size: 0.95rem;
    font-weight: 500;
}

.backup-pill:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-color: #fff;
    transform: translateY(-2px);
}

.group-todesk.backup-pill:hover i {
    color: #007bff;
    text-shadow: 0 0 10px #007bff;
}

.group-sun.backup-pill:hover i {
    color: #ff8c00;
    text-shadow: 0 0 10px #ff8c00;
}

.group-llk.backup-pill:hover i {
    color: #20c997;
    text-shadow: 0 0 10px #20c997;
}

.group-uu.backup-pill:hover i {
    color: #6f42c1;
    text-shadow: 0 0 10px #6f42c1;
}

/* --- 8. 教程区域 --- */
.guide-container {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.guide-box {
    flex: 1;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 20px;
    text-align: left;
}

.guide-header {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #fff;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 8px;
}

.guide-content li {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
    list-style: none;
    position: relative;
    padding-left: 15px;
}

.guide-content li::before {
    content: "›";
    color: var(--accent-cyan);
    position: absolute;
    left: 0;
    font-weight: bold;
    text-shadow: 0 0 5px var(--accent-cyan);
}

/* 底部版权 */
.footer-copy {
    margin-top: 30px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

/* --- 移动端 --- */
@media (max-width: 768px) {
    .auth-card {
        padding: 30px 15px;
        width: 92%;
    }

    .app-title {
        font-size: 1.8rem;
    }

    .service-bar {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .contact-item {
        width: 100%;
        justify-content: center;
    }

    .backup-pill {
        flex: 1 1 calc(50% - 12px);
    }

    .guide-container {
        flex-direction: column;
    }
}

/* Toast */
.alert-success {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 10px 25px;
    border-radius: 50px;
    background: linear-gradient(90deg, #00f3ff, #007bff);
    color: #fff;
    font-weight: bold;
    box-shadow: 0 10px 30px rgba(0, 123, 255, 0.4);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.alert-success.show {
    opacity: 1;
}

/* =========================================
   移动端深度适配 (Mobile Responsive)
   ========================================= */
@media (max-width: 768px) {

    /* 1. 关键修复：解除垂直居中锁定 */
    body {
        align-items: flex-start;
        /* 关键！防止内容过长时顶部被截断无法滚动 */
        padding: 20px 0;
        /* 增加顶部呼吸空间 */
        height: auto;
        /* 确保高度自适应 */
        background-size: 200% 200%;
        overflow-y: auto;
        /* 强制允许滚动 */
    }

    .auth-card {
        width: 92%;
        padding: 25px 15px;
        margin: 20px auto;
        /* 增加上下外边距，确保底部也能滚到 */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* 2. 字体大小优化 */
    .app-title {
        font-size: 1.6rem;
        margin-bottom: 5px;
    }

    .app-subtitle {
        font-size: 0.8rem;
        letter-spacing: 1px;
        margin-bottom: 25px;
    }

    .section-label {
        font-size: 1rem;
    }

    /* 3. 主下载按钮 (更紧凑) */
    .software-btn {
        padding: 12px 15px;
        flex-direction: row;
    }

    .icon-box {
        width: 38px;
        height: 38px;
        font-size: 18px;
        margin-right: 12px;
    }

    .btn-text .name {
        font-size: 15px;
    }

    .btn-text .desc {
        font-size: 11px;
    }

    /* 4. 备用通道适配 */
    .backup-grid {
        gap: 8px;
    }

    .backup-pill {
        flex: 1 1 calc(50% - 5px);
        min-width: auto;
        padding: 10px 5px;
    }

    .backup-pill span {
        font-size: 0.85rem;
    }

    /* 优化备用通道标题，增加一点呼吸感 */
    .backup-divider {
        margin-top: 10px !important;
        margin-bottom: 15px !important;
        padding-top: 15px;
        border-top: 1px dashed rgba(255, 255, 255, 0.15) !important;
    }

    /* 让备用通道的文字稍微亮一点 */
    .backup-divider span {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    /* 5. 联系方式区域 (改为上下堆叠) */
    .contact-section {
        padding: 15px;
        margin-top: 20px;
    }

    .service-bar {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .contact-item {
        width: 100%;
        justify-content: center;
        padding: 10px;
    }

    /* 6. 教程区域 (改为上下堆叠) */
    .guide-container {
        flex-direction: column;
        gap: 15px;
        margin-top: 20px;
    }

    .guide-box {
        padding: 15px;
    }

    /* 7. 底部版权 */
    .footer-copy {
        margin-top: 20px;
        font-size: 0.75rem;
        padding-bottom: 20px;
        /* 防止被底部导航栏遮挡 */
    }

    /* 8. Toast提示位置调整 */
    .alert-success {
        width: 80%;
        top: 15px;
        font-size: 0.9rem;
    }
}

/* =========================================
   USB 教程弹窗样式 (Modal Styles)
   ========================================= */

/* 1. 入口按钮样式 */
.tutorial-btn {
    width: 100%;
    background: rgba(0, 243, 255, 0.1);
    border: 1px dashed rgba(0, 243, 255, 0.4);
    color: #fff;
    padding: 12px;
    border-radius: 12px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tutorial-btn:hover {
    background: rgba(0, 243, 255, 0.2);
    border-color: #00f3ff;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
}

/* 2. 弹窗遮罩层 */
.usb-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    /* 背景模糊 */
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: none;
    /* 默认隐藏 */
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.usb-modal-overlay.active {
    display: flex;
    opacity: 1;
}

/* 3. 弹窗主体 */
.usb-modal-content {
    background: rgba(13, 17, 23, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 40px rgba(0, 243, 255, 0.15);
    border-radius: 20px;
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    /* 防止太高超出屏幕 */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 4. 弹窗头部 */
.modal-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #fff;
    display: flex;
    align-items: center;
}

.close-btn {
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    transition: 0.2s;
}

.close-btn:hover {
    background: #ff4757;
    transform: rotate(90deg);
}

/* 5. 弹窗内容区 */
.modal-body {
    padding: 20px;
    overflow-y: auto;
    /* 内容过长可滚动 */
}

.important-tip {
    background: rgba(255, 193, 7, 0.15);
    border: 1px solid rgba(255, 193, 7, 0.3);
    color: #ffd700;
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.important-tip i {
    margin-right: 10px;
    font-size: 1.1rem;
}

/* 6. 品牌切换 Tabs */
.brand-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    overflow-x: auto;
    /* 手机端支持横滑 */
    padding-bottom: 5px;
}

/* 隐藏滚动条 */
.brand-tabs::-webkit-scrollbar {
    height: 4px;
}

.brand-tabs::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.tab-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.3s;
}

.tab-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.tab-btn.active {
    background: linear-gradient(90deg, #00f3ff, #007bff);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.4);
    font-weight: bold;
}

/* 7. 具体步骤内容 */
.brand-step {
    display: none;
    /* 默认隐藏 */
    animation: fadeIn 0.4s;
}

.brand-step.active {
    display: block;
}

/* 激活显示 */

.brand-step ol {
    padding-left: 20px;
    margin: 0;
    color: rgba(255, 255, 255, 0.85);
}

.brand-step li {
    margin-bottom: 12px;
    line-height: 1.6;
}

.brand-step strong {
    color: #00f3ff;
}

/* 8. 底部按钮 */
.modal-footer {
    padding: 15px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
}

.done-btn {
    background: #00f3ff;
    color: #000;
    border: none;
    padding: 10px 40px;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.done-btn:hover {
    background: #fff;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 手机适配 */
@media (max-width: 768px) {
    .usb-modal-content {
        height: 80vh;
    }

    .brand-tabs {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* 手机端标签换行 */
    .tab-btn {
        flex: 1 1 40%;
        font-size: 0.85rem;
    }
}

/* =========================================
   视频教程样式 (无缝贴合版 - 修复黑边)
   ========================================= */

/* --- 视频容器优化 --- */
.video-wrapper {
    margin-top: 15px;
    background: transparent;
    /* 关键：背景改透明，去掉黑色底 */
    border: 1px solid rgba(0, 243, 255, 0.2);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    /* 取消 flex 居中，改用 block 让视频自然撑开 */
    display: block;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.05);
    line-height: 0;
    /* 消除视频底部的微小空隙 */
}

.video-wrapper video {
    width: 100%;
    height: auto;
    /* 关键设置：
       cover = 强制填满整个框 (可能会裁切掉边缘，但没有黑边，最好看)
       contain = 保持完整画面 (如果有黑边，因为上面 background 是透明的，所以不会难看)
    */
    object-fit: cover;

    max-height: 60vh;
    /* 限制最大高度 */
    border-radius: 12px;
}

/* 视频左上角的小标签 (保持不变) */
.video-label {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    color: #00f3ff;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.8rem;
    z-index: 10;
    border: 1px solid rgba(0, 243, 255, 0.3);
    pointer-events: none;
    font-weight: bold;
    letter-spacing: 1px;
}

/* --- 移动端专门优化 --- */
@media (max-width: 768px) {
    .video-wrapper {
        min-height: auto;
        /* 手机端取消最小高度限制 */
    }

    .video-wrapper video {
        /* 手机端逻辑反转：
           优先撑满宽度，让用户看得更清楚细节。
           高度允许更高 (最高 80% 屏幕高度)，防止太长溢出。
        */
        width: 100%;
        max-height: 80vh;
        border-radius: 0;
        /* 手机端视频直角显示更沉浸 */
    }
}

/* 视频左上角的小标签 (保持不变) */
.video-label {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #00f3ff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    z-index: 10;
    border: 1px solid rgba(0, 243, 255, 0.3);
    pointer-events: none;
}