/* ═══════════════════════════════════════════
   安全中心样式 - 对照游侠(cloud.uxw.net)原版还原
   配合 inherit.css / module.css 使用
   ═══════════════════════════════════════════ */

/* ---------- ① 顶部账号横幅（渐变底 + 右侧插画） ---------- */
.security-header {
    border-radius: 15px;
    background-image: url(../images/security_top.png), linear-gradient(87deg, #4d83ff, #3656ff);
    background-repeat: no-repeat;
    background-position: 100%;
}

/* ---------- ② 圆形头像（双环效果） ---------- */
.security-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 10px #4677fb, inset 0 0 0 20px #527ef5;
}
.security-logo {
    width: 60px;
    height: 60px;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px 2px rgb(6 31 179 / 26%);
}

/* ---------- ③ 用户名 + 安全强度面板（深蓝底） ---------- */
.security-info {
    padding: 20px;
    border-radius: 4px;
    background-color: #2f54ea;
}
.security-username {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 18px;
}
.security-username .badge {
    font-size: 12px;
}

/* ---------- ④ 账号安全强度 ---------- */
.security-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
    color: #FFF;
    opacity: .5;
}
.security-text .progress {
    height: 2px;
    border-radius: 5px;
}

/* ---------- ⑤ 右侧邮箱 / 开通时间 / 手机 ---------- */
.security-meta .list-inline-item {
    margin-right: 15px;
    line-height: 38px;
}

/* ---------- ⑥ 安全项列表 ---------- */
.security-items {
    display: flex;
    flex-direction: column;
}
.security-items .security-item {
    padding: 15px 0px;
}
.security-items .security-item:hover {
    border-radius: 4px;
    box-shadow: 0 4px 20px 2px rgb(6 75 179 / 8%);
}

/* ---------- ⑦ 安全项（圆形图标 + 内容 + 按钮） ---------- */
.security-item {
    padding: 15px 0;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    transition: all .3s ease;
}
.security-item:last-child {
    margin-bottom: 0;
}
.security-item-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    border-radius: 50%;
    margin-right: 15px;
    font-size: 20px;
}
.security-item-info {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ---------- ⑧ 标题与描述 ---------- */
.security-item-title {
    color: #000;
    font-size: 14px;
    font-weight: 400;
}
.security-item-title small {
    margin-left: 15px;
    color: #999;
}
.security-item-title small i {
    color: #20b759;
}
.security-item-desc {
    color: #999;
    font-size: 12px;
}

/* ---------- ⑨ 右下角装饰图（默认隐藏，与游侠一致） ---------- */
.security-item-image {
    width: 100%;
    background-color: #fff;
    border-radius: 4px;
    height: calc(100% - 300px);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-image: url("../images/security_bottom_left.png");
    background-size: cover;
    display: none;
}

/* ---------- ⑩ 按钮不换行 ---------- */
.security-item .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ---------- ⑪ 手机端适配 ---------- */
@media screen and (max-width: 995px) {
    .security-item-desc,
    .phonehide {
        display: none !important;
    }
}
@media screen and (max-width: 768px) {
    .security-item-desc,
    .phonehide {
        display: none !important;
    }
    .security-item-title small {
        margin-left: 0 !important;
    }
    .security-avatar {
        width: 76px;
        height: 76px;
    }
    .security-logo {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }
}