/*!
 * frontuser - 前台会员与资源保护样式
 * 视觉基准：企业蓝 #1E6FBF 主色 + 绿蓝渐变 #51EC8B → #20ABEF 强调色，圆角卡片、轻阴影、遮罩虚化。
 * 所有类名统一 fu- 前缀，避免影响站点既有样式。
 */

:root {
    --fu-blue: #1E6FBF;
    --fu-blue-2: #20ABEF;
    --fu-green: #51EC8B;
    --fu-bg: #FFFFFF;
    --fu-bg-2: #F5F8FB;
    --fu-text: #333333;
    --fu-text-2: #666666;
    --fu-danger: #E74C3C;
    --fu-radius: 14px;
    --fu-shadow: 0 18px 50px rgba(15, 23, 42, .22);
    --fu-grad: linear-gradient(135deg, #20ABEF 0%, #51EC8B 100%);
}

/* ============ 通用遮罩与动画 ============ */

.fu-mask,
.fu-vmask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .58);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-sizing: border-box;
}

/* 视频播放层 */
.fu-vmask {
    z-index: 99998;
}

/* 登录 / 注册弹窗：必须盖在视频播放层之上——
   在视频弹层里点「保存视频 / 复制视频地址」且未登录时，登录框要从弹层上方唤出 */
.fu-mask {
    z-index: 100000;
}

.fu-mask.fu-show,
.fu-vmask.fu-show {
    display: flex;
    animation: fuFadeIn .18s ease;
}

@keyframes fuFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fuRise {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============ 登录 / 注册弹窗 ============ */

.fu-dialog {
    width: 100%;
    max-width: 400px;
    background: var(--fu-bg);
    border-radius: var(--fu-radius);
    box-shadow: var(--fu-shadow);
    overflow: hidden;
    animation: fuRise .22s cubic-bezier(.16, 1, .3, 1);
    font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    color: var(--fu-text);
}

.fu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 0;
}

.fu-brand {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .5px;
    background: var(--fu-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--fu-blue);
}

.fu-close {
    width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center;
    font-size: 22px;
    color: #9aa4b2;
    text-decoration: none;
    border-radius: 50%;
    transition: all .18s ease;
}

.fu-close:hover {
    background: var(--fu-bg-2);
    color: var(--fu-text);
    transform: rotate(90deg);
}

.fu-tabs {
    display: flex;
    gap: 26px;
    padding: 6px 20px 0;
    border-bottom: 1px solid #eef2f7;
}

.fu-tab {
    position: relative;
    padding: 10px 2px 12px;
    font-size: 16px;
    font-weight: 500;
    color: var(--fu-text-2);
    text-decoration: none;
    transition: color .18s ease;
}

.fu-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--fu-grad);
    transform: scaleX(0);
    transition: transform .22s ease;
}

.fu-tab.fu-on {
    color: var(--fu-blue);
}

.fu-tab.fu-on::after {
    transform: scaleX(1);
}

.fu-body {
    padding: 20px;
}

/* 通用隐藏类：.fu-tabs / .fu-tab 等自身声明了 display，这里用 !important 保证覆盖 */
.fu-hide {
    display: none !important;
}

.fu-form.fu-hide {
    display: none;
}

/* 「修改密码」模式的标题（该模式下登录 / 注册 tab 栏整条隐藏） */
.fu-pass-head {
    position: relative;
    padding: 14px 20px 10px;
    font-size: 16px;
    font-weight: 500;
    color: var(--fu-text);
}

.fu-pass-head::before {
    content: "";
    position: absolute;
    left: 20px;
    bottom: 0;
    width: 30px;
    height: 2px;
    border-radius: 2px;
    background: var(--fu-grad);
}

.fu-field {
    margin-bottom: 14px;
}

.fu-field input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    font-size: 14px;
    color: var(--fu-text);
    background: var(--fu-bg-2);
    border: 1px solid #e6ecf3;
    border-radius: 10px;
    outline: none;
    box-sizing: border-box;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.fu-field input:focus {
    background: #fff;
    border-color: var(--fu-blue-2);
    box-shadow: 0 0 0 3px rgba(32, 171, 239, .14);
}

.fu-field input.fu-bad {
    border-color: var(--fu-danger);
    box-shadow: 0 0 0 3px rgba(231, 76, 60, .12);
}

/* 「记住我」与「忘记密码」并排一行 */
.fu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 2px 0 12px;
}

.fu-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--fu-text-2);
    cursor: pointer;
    user-select: none;
}

.fu-remember input {
    width: 15px;
    height: 15px;
    accent-color: var(--fu-blue);
    cursor: pointer;
}

.fu-forgot {
    font-size: 13px;
    color: var(--fu-blue);
    text-decoration: none;
    white-space: nowrap;
}

.fu-forgot:hover {
    text-decoration: underline;
}

/* 「忘记密码」的提示块（非错误，用信息蓝） */
.fu-hint {
    display: none;
    margin-bottom: 10px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.6;
    color: #1E6FBF;
    background: rgba(32, 171, 239, .09);
    border-radius: 8px;
    word-break: break-all;
}

.fu-hint.fu-show {
    display: block;
    animation: fuFadeIn .16s ease;
}

.fu-hint b {
    color: #1467b3;
}

.fu-err {
    display: none;
    margin-bottom: 10px;
    padding: 9px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--fu-danger);
    background: rgba(231, 76, 60, .08);
    border-radius: 8px;
}

.fu-err.fu-show {
    display: block;
    animation: fuFadeIn .16s ease;
}

.fu-submit {
    width: 100%;
    height: 46px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2px;
    color: #fff;
    background: var(--fu-grad);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(32, 171, 239, .28);
    transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.fu-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(32, 171, 239, .34);
}

.fu-submit:active {
    transform: translateY(0);
}

.fu-submit[disabled] {
    opacity: .65;
    cursor: not-allowed;
    transform: none;
}

.fu-tip {
    margin: 14px 0 0;
    font-size: 13px;
    text-align: center;
    color: var(--fu-text-2);
}

.fu-tip a {
    color: var(--fu-blue);
    text-decoration: none;
}

.fu-tip a:hover {
    text-decoration: underline;
}

.fu-note {
    margin: 16px 0 0;
    padding-top: 14px;
    font-size: 12px;
    text-align: center;
    color: #9aa4b2;
    border-top: 1px dashed #eef2f7;
}

/* ============ 已登录状态条 ============ */

.fu-userbar {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 99990;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    font-size: 13px;
    color: #fff;
    background: rgba(30, 111, 191, .94);
    border-radius: 999px;
    box-shadow: 0 10px 26px rgba(30, 111, 191, .3);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.fu-ub-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fu-green);
    box-shadow: 0 0 0 3px rgba(81, 236, 139, .28);
}

.fu-ub-pwd,
.fu-ub-out {
    color: rgba(255, 255, 255, .82);
    text-decoration: none;
    padding-left: 9px;
    border-left: 1px solid rgba(255, 255, 255, .28);
    white-space: nowrap;
}

.fu-ub-pwd:hover,
.fu-ub-out:hover {
    color: #fff;
}

/* ============ 视频占位块（未登录） ============ */

.fu-video-ph {
    position: relative;
    width: 100%;
    margin: 1em auto;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    background: linear-gradient(135deg, #1f2937 0%, #111827 60%, #0b1220 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
    -webkit-tap-highlight-color: transparent;
}

.fu-ph-ratio {
    display: block;
    width: 100%;
}

.fu-ph-body {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

.fu-ph-lock {
    position: relative;
    width: 34px;
    height: 26px;
    border-radius: 5px;
    background: var(--fu-grad);
    box-shadow: 0 6px 16px rgba(32, 171, 239, .35);
}

.fu-ph-lock::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -11px;
    width: 18px;
    height: 16px;
    margin-left: -9px;
    border: 3px solid rgba(81, 236, 139, .9);
    border-bottom: none;
    border-radius: 9px 9px 0 0;
    box-sizing: border-box;
}

.fu-ph-text {
    font-size: 13px;
    letter-spacing: .5px;
    color: rgba(255, 255, 255, .9);
}

.fu-video-ph:hover .fu-ph-text {
    color: #fff;
}

/* ============ 正文资源禁止拖拽 ============ */

/* PC 上把图片拖到桌面/文件夹就等于保存，必须堵住；
   与 JS 的 dragstart 拦截、服务端的 draggable="false" 共同构成三层防护 */
.Jz-infocontent-body img,
.Jz-infocontent-body .fu-imgwrap,
.Jz-infocontent-body video.fu-media,
.Jz-infocontent-body a.fu-media-link {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

/* 正文视频：行内显示 + 基线对齐（与原文 iframe 一致，多个媒体并排时底边对齐）
   元素尺寸由 width/height 属性与 aspect-ratio 决定，保持原文比例不变；
   object-fit:contain 让画面在框内完整显示（视频自身比例不同时留黑边，不裁切、不变形）。 */
.Jz-infocontent-body video.fu-media {
    display: inline-block;
    vertical-align: baseline;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    background: #000;
    border-radius: 4px;
}

/* ============ 图片容器（背景图渲染，防长按保存） ============ */

.fu-imgwrap {
    display: block;
    width: 100%;
    margin: 1em auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    border-radius: 6px;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}

.fu-imgwrap.fu-clickable {
    cursor: pointer;
}

/* ============ 视频播放层 ============ */

.fu-vbox {
    position: relative;
    width: 100%;
    max-width: 960px;
}

.fu-video-el {
    width: 100%;
    max-height: 78vh;
    display: block;
    background: #000;
    border-radius: 10px;
    box-shadow: var(--fu-shadow);
}

.fu-vclose {
    position: absolute;
    right: -6px;
    top: -46px;
    width: 38px;
    height: 38px;
    line-height: 36px;
    text-align: center;
    font-size: 26px;
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, .14);
    border-radius: 50%;
    transition: background .18s ease;
}

.fu-vclose:hover {
    background: rgba(255, 255, 255, .26);
}

/* ============ 自定义右键 / 长按菜单 ============ */

.fu-menu {
    position: fixed;
    z-index: 99999;
    min-width: 168px;
    padding: 6px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .2), 0 0 0 1px rgba(15, 23, 42, .06);
    font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: 13px;
    color: var(--fu-text);
    animation: fuFadeIn .12s ease;
    -webkit-user-select: none;
    user-select: none;
}

.fu-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}

.fu-menu-item:hover {
    background: rgba(32, 171, 239, .1);
    color: var(--fu-blue);
}

.fu-menu-item .fu-mi-ico {
    width: 14px;
    height: 14px;
    opacity: .72;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.fu-menu-item .fu-mi-key {
    margin-left: auto;
    padding-left: 18px;
    font-size: 12px;
    color: #a6b0bd;
}

.fu-menu-sep {
    height: 1px;
    margin: 6px 8px;
    background: #eef2f7;
}

/* ============ 轻提示 ============ */

.fu-toast {
    position: fixed;
    left: 50%;
    top: 24px;
    z-index: 100000;
    max-width: 82vw;
    padding: 11px 20px;
    font-size: 14px;
    line-height: 1.5;
    color: #fff;
    text-align: center;
    background: rgba(17, 24, 39, .92);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .28);
    transform: translate(-50%, -14px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

.fu-toast.fu-show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* ============ 视频封面角标 ============ */

.fu-play-badge {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    padding: 5px 13px;
    font-size: 12px;
    line-height: 1.4;
    color: #fff;
    white-space: nowrap;
    background: rgba(30, 111, 191, .92);
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .3);
    pointer-events: none;
}

.fu-imgwrap {
    position: relative;
}

/* ============ 移动端适配 ============ */

@media (max-width: 640px) {
    .fu-mask {
        align-items: flex-end;
        padding: 0;
    }

    .fu-dialog {
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        animation: fuSheetUp .24s cubic-bezier(.16, 1, .3, 1);
    }

    @keyframes fuSheetUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    .fu-head {
        padding: 16px 18px 0;
    }

    .fu-body {
        padding: 18px;
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    }

    .fu-field input {
        height: 48px;
        font-size: 16px; /* 防 iOS 聚焦缩放 */
    }

    .fu-menu {
        left: 12px !important;
        right: 12px !important;
        top: auto !important;
        bottom: 12px;
        min-width: 0;
        border-radius: 14px;
        padding: 8px;
    }

    .fu-menu-item {
        padding: 12px 14px;
        font-size: 15px;
    }

    /* 移动端底部通常有主题的固定导航栏（电话咨询 / 产品展示 等），
       状态条需上移并收窄，避免遮挡 */
    .fu-userbar {
        right: 10px;
        bottom: 86px;
        padding: 7px 11px;
        font-size: 12px;
        gap: 7px;
    }

    .fu-vclose {
        right: 0;
        top: -44px;
    }
}